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 }}