regenerate: false


{% capture cache %}

{% comment %}

# -----------------------------------------------------------------------------
#  ~/assets/themes/j1/extensions/carousel/js/j1_adapter_carousel.js
#  Liquid JS template to create the J1 Adapter for J1 Carousel (Owl Carousel)
#
#  Product/Info:
#  https://jekyll-one.com
#
#  Copyright (C) 2019 Juergen Adams
#
#  J1 Template is licensed under the MIT License.
#  See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE
# -----------------------------------------------------------------------------
# Test data:
#  {{ config | debug }}
# -----------------------------------------------------------------------------

{% endcomment %}

/*

# -----------------------------------------------------------------------------
#  ~/assets/themes/j1/extensions/carousel/js/j1_adapter_carousel.js
#  JS Adapter for J1 Carousel (Owl Carousel)
#
#  Product/Info:
#  https://jekyll-one.com
#
#  Copyright (C) 2019 Juergen Adams
#
#  J1 Template is licensed under the MIT License.
#  See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE
#
# -----------------------------------------------------------------------------
#  Adapter generated: {{site.time}}
# -----------------------------------------------------------------------------

*/ 'use strict';

{% comment %} Liquid procedures ————————————————————— {% endcomment %}

{% comment %} Variables ————————————————————— {% endcomment %} {% assign environment = site.environment %}

{% assign config = site.data.apps.j1_carousel %} {% assign default_options = site.data.apps.j1_carousel.default %} {% assign slider_id = '' %}

{% comment %} Main ————————————————————— {% endcomment %} j1.Carousel = (function (j1, window) {

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

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

    state = 'started';
    logger.info('state: ' + state); // Set|Log status

    // jQuery slider options
    {% for item in config.carousel %}

      {% if item.show.enabled %}
        {% assign slider_id     = item.show.id %}
        {% assign slider_title  = item.show.title %}
        {% assign slider_type   = item.show.type %}
        {% assign css_classes   = item.show.css_classes %}
        {% assign lazyLoad      = item.show.lightbox %}

        // Create an Carousel INSTANCE if slider on id: {{ slider_id }} exists
        if ( $('#{{slider_id}}').length ) {

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

          {% if item.show.slide_height != null %}
            // Set slide_height: {{item.show.slide_height}}vh
            {% assign slide_height  = item.show.slide_height %}
            $('head').append("<style>.owl-carousel .item{height: {{slide_height}}vh;}</style>");
          {% endif %}

          {% if item.show.slide_space_between %}
            {% assign slide_space = item.show.slide_space_between %}
          {% else %}
            {% assign slide_space = 3 %}
          {% endif %}

          {% if item.show.slide_border %}
            {% assign slide_border = "thumbnail" %}
          {% else %}
            {% assign slide_border = "" %}
          {% endif %}

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

          $('head').append("<style>.{{slider_id}}-item{margin: {{slide_space}}px;}</style>");
          //$('.{{slider_id}}-item').parent().addClass('owl-carousel');
          //$('.owl-carousel .item').css('margin','{{slide_space}}px');

          {% comment %}
          // Initialize default parameters
          $("#{{ slider_id }}").owlCarousel({
            {% for option in default_options %}
            {{ option[0] | json }}: {{ option[1] | json }},
            {% endfor %}
          });
          {% endcomment %}

          // Initialize individual show parameters
          $("#{{ slider_id }}").owlCarousel({
            {% for option in item.show.options %}
            {{ option[0] | json }}: {{ option[1] | json }},
            {% endfor %}
            // Enable lazyLoad if lightbox is enabled
            {% if item.show.lightbox %}
            "lazyLoad": true,
            {% endif %}
            "jsonPath": {{ config.jsonPath | json }},
            "jsonSuccess": customDataSuccess_{{forloop.index }}
          });
          // Initialize instance variable (for later access)
          //{{ slider_id }} = $('#{{ slider_id }}').data('owlCarousel');

          j1["{{slider_id}}"] = $('#{{ slider_id }}').data('owlCarousel');

          // jQuery show data functions
          function customDataSuccess_{{forloop.index}}(data){
            var content = "";
            for ( var i in data["{{ slider_id }}"] ) {
              {% if slider_type == 'image' %}
              var lb          = data["{{ slider_id }}"][i].lb;
              var lb_caption  = data["{{ slider_id }}"][i].lb_caption;
              var img         = data["{{ slider_id }}"][i].img;
              var alt         = data["{{ slider_id }}"][i].alt;
              {% endif %}
              {% if slider_type == 'text' %}
              var text        = data["{{ slider_id }}"][i].text;
              {% endif %}
              var href        = data["{{ slider_id }}"][i].href;
              {% if  css_classes %}
              var css_classes = 'class="{{ css_classes }}";'
              {% else %}
              var css_classes = ''
              {% endif %}

              {% if slider_type == 'image' %}
              // If lightbox is enabled (preference over href)
              if ( lb ) {
                if ( lb_caption ) {
                  content += '\t\t' + '<div class="item {{slider_id}}-item {{slide_border}}">'+ '\n';
                  content += '\t\t\t' + '<a href="' +img+ '" ' + 'data-lightbox="{{ slider_id }}" data-title="' +lb_caption+ '">' + '\n';
                  content += '\t\t\t\t' + '<img class="lazyOwl" src="' +img+ '">' + '\n';
                  content += '\t\t\t' + '</a>' + '\n';
                  if ( href ) {
                  content += '\t\t\t' + '<span class="carousel-caption"><a href="' +href+ '">' +lb_caption+ '</a> </span>' + '\n';
                  } else {
                  content += '\t\t\t' + '<span class="carousel-caption">' +lb_caption+ '</span>' + '\n';
                  }
                  content += '\t\t' + '</div>' + '\n';
                } else {
                  content += '<a class="item" href="' +img+ '" ' + 'data-lightbox="{{ slider_id }}"> <img class="lazyOwl" data-src="' +img+ '" alt="' +alt+ '">' + '</a>'
                }
              } else if ( href ) {
                  content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>'
              } else {
                  content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>'
              }
              {% endif %}

              {% if slider_type == 'text' %}
              if ( href ) {
                content += '<div class="item">' + '<p href=' +href+ '">' +text+ '</p>' + '</div>'
              } else {
                content += '<div class="item">' + '<p>' +text+ '</p>' + '</div>'
              }
              {% endif %}
            }
            $("#{{ slider_id }}").html(content);

            {% if environment == 'development' %}
              logText = 'Slider on ID {{ slider_id }} initializing finished';
              logger.info(logText);
              //state = 'finished';
              //logger.info('state: ' + state); // Set|Log status
            {% endif %}

          } // end customDataSuccess_{{forloop.index}}
        } // end if carousel exists
      {% endif %}
    {% endfor %}

    state = 'finished';
    logger.info('state: ' + state); // Set|Log status
  }, // end init

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

}; // end return

})(j1, window);

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