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 true;
  }, // 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 true;
  }, // 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 }}