---
regenerate:                         true
---
{% capture cache %}

{% comment %}
 # -----------------------------------------------------------------------------
 #  ~/assets/themes/j1/extentions/light_gallery/js/j1_adapter_lightgallery.js
 #  Liquid JS Template to create the J1 Adapter for LightGallery
 #
 #  Product/Info:
 #  https://jekyll.one
 #
 #  Copyright (C) 2019 Juergen Adams
 #
 #  J1 Template is licensed under the MIT License.
 #  For details, see https://jekyll.one
 #
 # -----------------------------------------------------------------------------
 #  {{ config | debug }}
 # -----------------------------------------------------------------------------
{% endcomment %}

/*
 # -----------------------------------------------------------------------------
 #  ~/assets/themes/j1/extentions/light_gallery/js/j1_adapter_lightgallery.js
 #  JS Adapter for LightGallery
 #
 #  Product/Info:
 #  https://jekyll.one
 #  https://sachinchoolur.github.io/lightGallery
 #  https://github.com/sachinchoolur/lightGallery
 #
 #  Copyright (C) 2019 Juergen Adams
 #  Copyright (C) 2016 Sachin Choolur
 #
 #  J1 Template is licensed under the MIT License.
 #  For details, see https://jekyll.one
 #  LightGallery FREE for PERSONAL use is licensed under the GNU AGPLv3
 #  For details, see https://sachinchoolur.github.io/lightGallery
 #  LightGallery COMMERCIAL for BUSINESS use is licensed under LG Commercial License
 #  For details, see: https://site.uplabs.com/posts/lightgallery-plugin
 #
 # -----------------------------------------------------------------------------
 #  Adapter generated: {{site.time}}
 # -----------------------------------------------------------------------------
*/
'use strict';

{% comment %} Liquid procedures
--------------------------------------------------------------- {% endcomment %}

{% comment %} Variables
--------------------------------------------------------------- {% endcomment %}
{% assign environment = site.environment %}
{% assign config      = site.data.apps.j1_bootstrap_gallery %}


{% comment %} Main
--------------------------------------------------------------- {% endcomment %}
j1.BsGallery = (function (j1, window) {

  var environment = '{{environment}}'; // Set environment
  var state       = 'not_started';
  var logger;
  var logText;

  return {
    // Initialize
    init: function ( options ) {
      logger = log4javascript.getLogger("j1.BSGallery.adapter");

      this.settings = $.extend({}, options);

      {% if environment == 'development' %}
        logText = 'start gallery initialization';
        logger.info(logText);
        state = 'started';
        logger.info('state: ' + state); // Set|Log status
      {% endif %}

      this.lgInit();

      return;
    }, // END init

    // ---------------------------------------------------------------------
    // Load AJAX data and initialize the gallery
    // ---------------------------------------------------------------------
    // ToDo:
    lgInit: function () {

      logger = log4javascript.getLogger("j1.LightGallery.lgInit");

      {% for item in config.galleries %}
        {% if item.gallery.enabled %}

          {% comment %} Set (<DIV>|<UL>) container id for the placement of HTML markup {% endcomment %}
          {% assign container_id  = item.gallery.id %}
          {% capture gallery_id %}{{item.gallery.id}}_ul{% endcapture %}
          {% capture bs_gallery_class %}bsg_{{item.gallery.id}}{% endcapture %}

          {% comment %} Initialize J1 base gallery options {% endcomment %}
          {% assign css_classes     = item.gallery.css_classes %}
          {% assign gallery_title   = item.gallery.title %}
          {% assign gallery_type    = item.gallery.type %}
          {% assign thumb_items     = item.gallery.thumb_items %}
          {% assign thumb_spacing   = item.gallery.thumb_spacing %}
          {% assign thumb_bordered  = item.gallery.thumb_bordered %}
          {% assign thumb_animate   = item.gallery.thumb_animate %}

          {% comment %} // Calculate BS grid size for the thumbnails {% endcomment %}
          {% assign column_width_md  = 12 | divided_by:thumb_items %}

          // Create an gallery instance if {{ container_id }} exists
          if ( $('#{{ container_id }}').length ) {

            {% if environment == 'development' %}
              logText = 'gallery on ID #{{ container_id }} is being initialized';
              logger.info(logText);
              state = 'running';
              logger.info('state: ' + state); // Set|Log status
            {% endif %}

            // Place HTML markup for the title
            {% if gallery_title %}
            var gallery_title = '<div class="bs-gallery-title">{{gallery_title}}</div>';
            $('#{{ container_id }}').before( gallery_title );
            {% endif %}

            $('#{{ container_id }}').addClass("lightgallery ");

            {% if thumb_animate %}
            // Add animation
            $('#{{ container_id }}').addClass("lg-animate");
            // $('#{{ container_id }}').removeClass("lg-animate");
            {% endif %}

            // Calculate individual CSS styles for gallery thumbnails
            var style = '';
            style += '<style> \n';
                style += 'a.lg-thumbnail-{{container_id}}{margin-left: {{thumb_spacing}}px;margin-bottom: {{thumb_spacing}}px;} \n';
                {% if thumb_bordered %}
                style += 'a.lg-thumbnail-{{container_id}}:hover,a.lg-thumbnail-{{container_id}}:focus,a.lg-thumbnail-{{container_id}}.active{border-color:#204a87} \n';
                style += '.lg-thumbnail-{{container_id}}>img,.lg-thumbnail-{{container_id}} a>img{display:block;max-width:100%;height:auto} \n';
                style += '.img-lg-thumbnail-{{container_id}}{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:2px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto} \n';
                style += '.lg-thumbnail-{{container_id}}{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:2px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out} \n';
                style += '.lg-thumbnail-{{container_id}}>img,.lg-thumbnail-{{container_id}} a>img{margin-left:auto;margin-right:auto} \n';
                {% endif %}
                style += '</style> \n';
            $('head').append( style );

            {% if gallery_type == "image" %}
            // Collect image gallery data from data file (jsonPath)
            $.getJSON( '{{config.jsonPath}}', function (data) {
              var content = '';
              //content += '<ul id="{{ gallery_id }}" class="row {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n';
              content += '<ul id="{{ gallery_id }}" class="row bs-gallery {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n';

              for ( var i in data["{{item.gallery.id}}"] ) {
                var img       = data["{{item.gallery.id}}"][i].img;
                var caption   = data["{{item.gallery.id}}"][i].caption;

                content +=  '<li class="col-xs-6 col-sm-4 col-md-{{column_width_md}}" ' +
                                'data-src="' +img+ '" ' +
                                'data-sub-html="' +caption+ '">' +
                              {% if thumb_bordered %}
                              '<a href="#" class="lg-thumbnail-{{container_id}}">' +
                              {% else %}
                              '<a href="#" class="lg-thumbnail lg-thumbnail-{{container_id}}">' +
                              {% endif %}
                                '<img class="img-fluid j1-lg-magnifier" src="' +img+ '">' +
                              '</a>' +
                            '</li>'
              } // end for
              content += '</ul> </div> </div>';
            {% elsif gallery_type == "video-html5" or gallery_type == "video-online" %}

            var play_button = '/assets/themes/j1/extensions/light_gallery/img/icons/play-button.png';

            // Collect html5 video gallery data from data file (jsonPath)
            $.getJSON( '{{config.jsonPath}}', function (data) {

              {% if gallery_type == "video-html5" %}
              var hidden_video_div = '';
              for ( var i in data["{{item.gallery.id}}"] ) {
                var video        = data["{{item.gallery.id}}"][i].video_path + '/' + data["{{item.gallery.id}}"][i].video;
                var poster       = data["{{item.gallery.id}}"][i].image_path + '/' + data["{{item.gallery.id}}"][i].poster;
                var caption      = data["{{item.gallery.id}}"][i].captions_lightbox;
                var video_id     = data["{{item.gallery.id}}"][i].video_id;
                var video_type   = video.substr(video.lastIndexOf('.') + 1);
                hidden_video_div += '<div style="display:none;" id="' +video_id+ '">' + '\n';
                hidden_video_div += '  <video class="lg-video-object lg-html5 video-js vjs-default-skin"' + '\n';
                hidden_video_div += '         poster="' +poster+ '" controls="" preload="none">' + '\n';
                hidden_video_div += '    <source src="' +video+ '" type="video/' +video_type+ '">' + '\n';
                hidden_video_div += '    Your browser does not support HTML5 video.' + '\n';
                hidden_video_div += '  </video>' + '\n';
                hidden_video_div += '</div>' + '\n';
              }
              $('#{{ container_id }}').before( hidden_video_div );
              {% endif %}

              //var content = '<ul id="{{ gallery_id }}" class="row {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n';
              var content = '<ul id="{{ gallery_id }}" class="{{bs_gallery_class}} row {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n';
              for ( var i in data["{{item.gallery.id}}"] ) {
               {% if gallery_type == "video-html5" %}
                var video_id = data["{{item.gallery.id}}"][i].video_id;
               {% endif %}
               {% if gallery_type == "video-online" %}
                var video    = data["{{item.gallery.id}}"][i].video;
               {% endif %}
                var poster   = data["{{item.gallery.id}}"][i].image_path + '/' + data["{{item.gallery.id}}"][i].poster;
                var caption  = data["{{item.gallery.id}}"][i].captions_lightbox;

                //content += '  <li class="col-xs-6 col-sm-4 col-md-{{column_width_md}}" ' + '\n';
                content += '  <li class="lightgallery"' + '\n';
                content += '    data-sub-html="' +caption+ '" ' + '\n';
                content += '    data-poster="' +poster+ '" ' + '\n';
               {% if gallery_type == "video-html5" %}
                content += '    data-html="#' +video_id+ '">' + '\n';
               {% endif %}
               {% if gallery_type == "video-online" %}
                content += '    data-src="' +video+ '">' + '\n';
               {% endif %}
               {% if thumb_bordered %}
                content += '    <a href="#" class="lg-thumbnail-{{container_id}}">' + '\n';
               {% else %}
                content += '    <a href="#" class="lg-thumbnail lg-thumbnail-{{container_id}}">' + '\n';
               {% endif %}
                content += '      <img class="img-gallery" src="' +poster+ '">' + '\n';
                content += '      <img class="img-overlay" src="' +play_button+ '">' + '\n';
                content += '    </a>' + '\n';
                content += '  </li>' + '\n';
              }
              content += '</ul>';
            {% endif %}
                // Place HTML markup
                $("#{{ container_id }}").html(content);
                // Initialize|Run the gallery using individual gallery options
                $("#{{ gallery_id }}").lightGallery({
                  {% for option in item.gallery.options %}
                  {{ option[0] | json }}: {{ option[1] | json }},
                  {% endfor %}
                });

                //Run bsGallery (delayed: {{ show_delay }} ms)
                setTimeout(function() {
                  // Hide HTML markup while bsGallery is rendering
                  //$("#{{ gallery_id }}").hide();
                  $('ul.{{bs_gallery_class}}').bsGallery({
                    "classes" : "col-md-{{column_width_md}}",
                    "hasModal" : false
                  });
                  //$("#{{ gallery_id }}").show();
                }, {{ show_delay }});

                // Initialize instance variable of lightGallery  (for later access)
                j1["{{gallery_id}}"] = $('#{{ gallery_id }}').data('lightGallery');

                {% if environment == 'development' %}
                  logText = 'LightGallery on ID #{{ container_id }} initializing completed';
                  logger.info(logText);
                  state = 'completed';
                  logger.info('state: ' + state); // Set|Log status
                {% endif %}

            });
          } //end gallery
        {% endif %} {% comment %} end if enabled {% endcomment %}
      {% endfor %}

      return;
    }, // END lgInit

    // -------------------------------------------------------------------------
    //  returns the current (processing) state of the module
    // -------------------------------------------------------------------------
    state: function () {
      return state;
    } // END state

  }; // end return
})(j1, window);

{% endcapture %}
{{ cache | strip_empty_lines }}