assets/themes/j1/adapter/js/slick.js in j1-template-2023.1.0 vs assets/themes/j1/adapter/js/slick.js in j1-template-2023.2.0
- old
+ new
@@ -19,26 +19,30 @@
# -----------------------------------------------------------------------------
# Test data:
# {{ liquid_var | debug }}
# cookie_options: {{ cookie_options | debug }}
# -----------------------------------------------------------------------------
+ # See: https://github.com/kenwheeler/slick
+ # -----------------------------------------------------------------------------
{% endcomment %}
{% comment %} Liquid var initialization
-------------------------------------------------------------------------------- {% endcomment %}
{% comment %} Set config files
-------------------------------------------------------------------------------- {% endcomment %}
-{% assign environment = site.environment %}
-{% assign blocks = site.data.blocks %}
-{% assign modules = site.data.modules %}
-{% assign template_config = site.data.j1_config %}
+{% assign environment = site.environment %}
+{% assign blocks = site.data.blocks %}
+{% assign modules = site.data.modules %}
+{% assign template_config = site.data.j1_config %}
{% comment %} Set config data
-------------------------------------------------------------------------------- {% endcomment %}
-{% assign slick_defaults = modules.defaults.slick.defaults %}
-{% assign slick_settings = modules.slick.settings %}
+{% assign slick_defaults = modules.defaults.slick.defaults %}
+{% assign slick_settings = modules.slick.settings %}
+{% assign slick_lightbox_defaults = modules.defaults.slick.defaults.lightbox %}
+{% assign slick_lightbox_settings = modules.slick.settings.lightbox %}
{% comment %} Set config options
-------------------------------------------------------------------------------- {% endcomment %}
{% comment %} Set variables
@@ -76,19 +80,22 @@
// -----------------------------------------------------------------------------
'use strict';
j1.adapter.slick = (function (j1, window) {
var environment = '{{environment}}';
var responsiveSettings = [];
- var sliderResponsiveSettings = [];
+ var carouselResponsiveSettings = [];
var _this;
var logger;
var logText;
var slickDefaults;
var slickSettings;
+ var slickLightboxDefaults;
+ var slickLightboxSettings;
+ var slickLightboxOptions;
var slickOptions;
- var sliderOptions;
- var sliderSettings;
+ var carouselOptions;
+ var carouselSettings;
// ---------------------------------------------------------------------------
// Helper functions
// ---------------------------------------------------------------------------
@@ -99,222 +106,316 @@
// -------------------------------------------------------------------------
// Initializer
// -------------------------------------------------------------------------
init: function (options) {
- var xhrLoadState = 'pending'; // (initial) load state for the HTML portion of the slider
- var load_dependencies = {}; // dynamic variable
- var sliderResponsiveSettingsOBJ = {}; // initial object for responsive settings
+ var xhrLoadState = 'pending'; // (initial) load state for the HTML portion of the carousel
+ var load_dependencies = {}; // dynamic variable
+ var carouselResponsiveSettingsOBJ = {}; // initial object for responsive settings
+ var reload_on_resize = false;
var dependency;
- var sliderResponsiveSettingsYAML;
- var sliderResponsiveSettingsSTRING;
+ var carouselResponsiveSettingsYAML;
+ var carouselResponsiveSettingsSTRING;
+ var slick_lightbox_enabled;
// -----------------------------------------------------------------------
// Default module settings
// -----------------------------------------------------------------------
var settings = $.extend({
module_name: 'j1.adapter.cookieConsent',
generated: '{{site.time}}'
}, options);
// Load module DEFAULTS|CONFIG
- slickDefaults = $.extend({}, {{slick_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
- slickSettings = $.extend({}, {{slick_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
- slickOptions = $.extend(true, {}, slickDefaults, slickSettings);
+ slickDefaults = $.extend({}, {{slick_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+ slickSettings = $.extend({}, {{slick_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+ slickLightboxDefaults = $.extend({}, {{slick_lightbox_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+ slickLightboxSettings = $.extend({}, {{slick_lightbox_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+ slickLightboxOptions = $.extend(true, {}, slickLightboxDefaults, slickLightboxSettings);
+ slickOptions = $.extend(true, {}, slickDefaults, slickSettings);
// -----------------------------------------------------------------------
// Global variable settings
// -----------------------------------------------------------------------
- _this = j1.adapter.slick;
- logger = log4javascript.getLogger('j1.adapter.slick');
+ _this = j1.adapter.slick;
+ logger = log4javascript.getLogger('j1.adapter.slick');
_this.setState('started');
logger.debug('\n' + 'state: ' + _this.getState());
logger.info('\n' + 'module is being initialized');
- // load HTML portion for all sliders
- console.debug('loading HTML portion for all sliders configured');
- _this.loadSliderHTML(slickOptions, slickOptions.sliders);
+ // load HTML portion for all carousels
+ console.debug('loading HTML portion for all carousels configured');
+ _this.loadCarouselHTML(slickOptions, slickOptions.carousels);
+ // Re-Init all carousels in a page if window is resized (if enabled)
+ if (reload_on_resize) {
+ window.onresize = function() {
+ location.reload();
+ }
+ }
+
// -----------------------------------------------------------------------
// initializer
// -----------------------------------------------------------------------
var dependencies_met_page_ready = setInterval (function (options) {
var pageState = $('#no_flicker').css("display");
var pageVisible = (pageState == 'block') ? true: false;
if ( j1.getState() === 'finished' && pageVisible ) {
- {% for slider in slick_settings.sliders %} {% if slider.enabled %}
- logger.info('\n' + 'slider is being initialized on id: ' + '{{slider.id}}');
+ {% for carousel in slick_settings.carousels %} {% if carousel.enabled %}
+ logger.info('\n' + 'carousel is being initialized on id: ' + '{{carousel.id}}');
- {% if slider.options.responsive %}
- logger.info('\n' + 'collect responsive settings for slider on id: ' + '{{slider.id}}');
- // collect breakpoint settings from slider config
- responsiveSettings = $.extend({}, {{slider.responsive | replace: 'nil', 'null' | replace: '=>', ':' }});
- // generate slider breakpoint settings as YAML data structure
- sliderResponsiveSettings = '[' ;
+ {% if carousel.options.responsive %}
+ logger.info('\n' + 'collect responsive settings for carousel on id: ' + '{{carousel.id}}');
+ // collect breakpoint settings from carousel config
+ responsiveSettings = $.extend({}, {{carousel.responsive | replace: 'nil', 'null' | replace: '=>', ':' }});
+ // generate carousel breakpoint settings as YAML data structure
+ carouselResponsiveSettings = '[' ;
for (const [obj_key, obj_value] of Object.entries(responsiveSettings)) {
var length = Object.keys(obj_value.settings).length;
var count = 0;
for (const [key, value] of Object.entries(obj_value.settings)) {
count++;
if (key == 'breakOn' && count == 1) {
- sliderResponsiveSettings += ' {' ;
- sliderResponsiveSettings += ' breakpoint: ' + value + ',' ;
- sliderResponsiveSettings += ' settings: {' ;
+ carouselResponsiveSettings += ' {' ;
+ carouselResponsiveSettings += ' breakpoint: ' + value + ',' ;
+ carouselResponsiveSettings += ' settings: {' ;
} else {
- sliderResponsiveSettings += ' ' + key + ': ' + value + ',' ;
+ carouselResponsiveSettings += ' ' + key + ': ' + value + ',' ;
}
// close current breakpoint element
if (count == length) {
- sliderResponsiveSettings += ' }' ;
- sliderResponsiveSettings += ' },' ;
+ carouselResponsiveSettings += ' }' ;
+ carouselResponsiveSettings += ' },' ;
}
}
} // End generate breakpoint YAML elements
// close breakpoint YAML data
- sliderResponsiveSettings += ']';
+ carouselResponsiveSettings += ']';
{% endif %}
// create dynamic loader variable|s
- dependency = 'dependencies_met_html_loaded_{{slider.id}}';
+ dependency = 'dependencies_met_html_loaded_{{carousel.id}}';
load_dependencies[dependency] = '';
- // initialize slider if HTML portion successfully loaded
- load_dependencies['dependencies_met_html_loaded_{{slider.id}}'] = setInterval (function (options) {
- // check if HTML portion of the slider is loaded successfully (loadSliderHTML)
- xhrLoadState = j1.xhrDOMState['#{{slider.id}}_parent'];
+ // initialize carousel if HTML portion successfully loaded
+ load_dependencies['dependencies_met_html_loaded_{{carousel.id}}'] = setInterval (function (options) {
+ // check if HTML portion of the carousel is loaded successfully (loadcarouselHTML)
+ xhrLoadState = j1.xhrDOMState['#{{carousel.id}}_parent'];
if ( xhrLoadState === 'success' ) {
- // collect general slider settings
- sliderOptions = $.extend({}, {{slider.options | replace: 'nil', 'null' | replace: '=>', ':' }});
- sliderSettings = $.extend(true, {}, slickDefaults, sliderOptions );
+ // collect general carousel settings
+ carouselOptions = $.extend({}, {{carousel.options | replace: 'nil', 'null' | replace: '=>', ':' }});
+ carouselSettings = $.extend(true, {}, slickDefaults, carouselOptions );
- // convert slider responsive settings to object (sliderResponsiveSettingsOBJ)
- sliderResponsiveSettingsYAML = yaml.loadAll(sliderResponsiveSettings, 'utf8');
- sliderResponsiveSettingsOBJ = sliderResponsiveSettingsYAML[0];
- sliderResponsiveSettingsSTRING = JSON.stringify(sliderResponsiveSettingsOBJ, null, 4);
- logger.debug('\n' + 'responsive settings on slider id #{{slider.id}}: ' + '\n' + sliderResponsiveSettingsSTRING);
+ // convert carousel responsive settings to object (carouselResponsiveSettingsOBJ)
+ carouselResponsiveSettingsYAML = yaml.loadAll(carouselResponsiveSettings, 'utf8');
+ carouselResponsiveSettingsOBJ = carouselResponsiveSettingsYAML[0];
+ carouselResponsiveSettingsSTRING = JSON.stringify(carouselResponsiveSettingsOBJ, null, 4);
+ logger.debug('\n' + 'responsive settings on carousel id #{{carousel.id}}: ' + '\n' + carouselResponsiveSettingsSTRING);
- $('.{{slider.id | replace: '_','-' }}').on('init', function(event, slick) {
- logger.info('\n' + 'slider initialized on id: {{slider.id}}');
- if ({{slider.lightbox.enabled}}) {
- logger.info('\n' + 'initialize lightbox on id: {{slider.id}}');
- $('#{{slider.id}}').slickLightbox({
- background: 'rgba(0,0,0,.8)',
- closeOnEscape: true,
- closeOnBackdropClick: true,
- navigateByKeyboard: true,
- destroyTimeout: 500,
- src: '{{slider.lightbox.src}}',
- itemSelector: '{{slider.lightbox.itemSelector}}',
- imageMaxHeight: 0.9,
- lazy: false,
+ $('.{{carousel.id | replace: '_','-' }}').on('init', function(event, slick) {
+ logger.info('\n' + 'carousel initialized on id: {{carousel.id}}');
+
+ slick_lightbox_enabled = '{{carousel.lightbox.enabled}}';
+
+ // check if a lightbox is used|enabled
+ if ( slick_lightbox_enabled !== '' && slick_lightbox_enabled == 'true' ) {
+ slick_lightbox_enabled = true;
+ } else {
+ slick_lightbox_enabled = false;
+ }
+
+ if (slick_lightbox_enabled) {
+ logger.info('\n' + 'initialize lightbox on id: {{carousel.id}}');
+
+ // See: http://mreq.github.io/slick-lightbox/demo/
+ $('#{{carousel.id}}').slickLightbox({
+ caption: slickLightboxOptions.caption,
+ useHistoryApi: slickLightboxOptions.useHistoryApi,
+ background: slickLightboxOptions.background,
+ closeOnEscape: slickLightboxOptions.closeOnEscape,
+ closeOnBackdropClick: slickLightboxOptions.closeOnBackdropClick,
+ navigateByKeyboard: slickLightboxOptions.navigateByKeyboard,
+ destroyTimeout: slickLightboxOptions.destroyTimeout,
+ imageMaxHeight: slickLightboxOptions.imageMaxHeight,
+ lazy: slickLightboxOptions.lazy,
});
+ } // END carousel lightbox enabled
+
+ logger.info('\n' + 'adjust positions of arrows on id: {{carousel.id}}');
+ var buttons = $("#{{carousel.id}} > button");
+
+ // recalculate right arrow position based on gutter settings
+ //
+ var percentage_right = 3 + carouselSettings.gutters;
+ $.each($(buttons), function(index, button) {
+ if (button.textContent.includes("Next")) {
+ $(button).attr('style','right: ' + percentage_right + '%');
+ }
+ });
+
+ // add CSS style for individual top position for all carousels
+ //
+ if ($('#{{carousel.id}}_caption')) {
+ logger.info('\n' + 'adjust top position of arrows on id: {{carousel.id}}');
+ var buttons = $("#{{carousel.id}} > button");
+ $.each($(buttons), function(index, button) {
+ $(button).addClass('slick-arrow-{{carousel.id}}');
+ });
}
- });
- // setup the slider
- logger.info('\n' + 'slider is being setup on id: ' + '{{slider.id}}');
- $('.{{slider.id | replace: '_','-' }}').slick({
- accessibility: sliderSettings.accessibility,
- adaptiveHeight: sliderSettings.adaptiveHeight,
- arrows: sliderSettings.arrows,
- autoplay: sliderSettings.autoplay,
- autoplaySpeed: sliderSettings.autoplaySpeed,
- centerMode: sliderSettings.centerMode,
- centerPadding: sliderSettings.centerPadding,
- cssEase: sliderSettings.cssEase,
- dots: sliderSettings.dots,
- dotsClass: sliderSettings.dotsClass,
- draggable: sliderSettings.draggable,
- easing: sliderSettings.easing,
- edgeFriction: sliderSettings.edgeFriction,
- fade: sliderSettings.fade,
- focusOnSelect: sliderSettings.focusOnSelect,
- focusOnChange: sliderSettings.focusOnChange,
- infinite: sliderSettings.infinite,
- initialSlide: sliderSettings.initialSlide,
- lazyLoad: sliderSettings.lazyLoad,
- mobileFirst: sliderSettings.mobileFirst,
- pauseOnDotsHover: sliderSettings.pauseOnDotsHover,
- pauseOnFocus: sliderSettings.pauseOnFocus,
- pauseOnHover: sliderSettings.pauseOnHover,
- respondTo: sliderSettings.respondTo,
- rows: sliderSettings.rows,
- rtl: sliderSettings.rtl,
- slide: sliderSettings.slide,
- slidesPerRow: sliderSettings.slidesPerRow,
- slidesToScroll: sliderSettings.slidesToScroll,
- slidesToShow: sliderSettings.slidesToShow,
- speed: sliderSettings.speed,
- swipe: sliderSettings.swipe,
- swipeToSlide: sliderSettings.swipeToSlide,
- touchMove: sliderSettings.touchMove,
- touchThreshold: sliderSettings.touchThreshold,
- useCSS: sliderSettings.useCSS,
- useTransform: sliderSettings.useTransform,
- variableWidth: sliderSettings.variableWidth,
- vertical: sliderSettings.vertical,
- verticalSwiping: sliderSettings.verticalSwiping,
- waitForAnimate: sliderSettings.waitForAnimate,
- zIndex: sliderSettings.zIndex,
- responsive: sliderResponsiveSettingsOBJ
+ }); // END on carousel init
+
+ function debounce(callback, timeout = 300) {
+ let timer;
+ var buttons = $("#{{carousel.id}} > button");
+
+ $.each($(buttons), function(index, button) {
+ $(button).addClass('slick-arrow-{{carousel.id}}');
+ });
+
+ return (...args) => {
+ clearTimeout(timer);
+ timer = setTimeout(() => { callback.apply(this, args); }, timeout);
+ };
+ }
+
+ // calculate individual arrow positions for all carousels
+ //
+ function positionSlickArrows (e) {
+ var dependencies_met_page_ready = setInterval (function (options) {
+ var pageState = $('#no_flicker').css('display');
+ var pageVisible = (pageState == 'block') ? true: false;
+ var slideImageHeight;
+ if ( j1.getState() === 'finished' && pageVisible ) {
+ const carousel_type = '{{carousel.type}}';
+ const $slick = $('.{{carousel.id | replace: '_','-' }}');
+ const $slides = $slick.find('.slick-slide');
+ const $currentSlide = $slides.filter((index, slide) => $(slide).hasClass('slick-current'));
+
+ if (carousel_type == 'example') {
+ slideImageHeight = ($currentSlide.find('{{carousel.style}}').height() / 2) - 25;
+ } else {
+ slideImageHeight = ($currentSlide.find('img').height() / 2) - 20;
+ }
+
+ logger.info('\n' + 'adjust top arrow position (centered) by ' + slideImageHeight + ' on id: {{carousel.id}}');
+ $('.slick-arrow-{{carousel.id}}').css('top', slideImageHeight + 'px');
+ clearInterval(dependencies_met_page_ready);
+ }
+ }, 25);
+ }
+
+ // set individual arrow positions for a carousel
+ //
+ $('.{{carousel.id | replace: '_','-' }}').on('init afterChange', positionSlickArrows);
+
+ // setup the carousel
+ logger.info('\n' + 'carousel is being setup on id: ' + '{{carousel.id}}');
+ $('.{{carousel.id | replace: '_','-' }}').slick({
+ accessibility: carouselSettings.accessibility,
+ adaptiveHeight: carouselSettings.adaptiveHeight,
+ arrows: carouselSettings.arrows,
+ autoplay: carouselSettings.autoplay,
+ autoplaySpeed: carouselSettings.autoplaySpeed,
+ centerMode: carouselSettings.centerMode,
+ centerPadding: carouselSettings.centerPadding,
+ cssEase: carouselSettings.cssEase,
+ dots: carouselSettings.dots,
+ dotsClass: carouselSettings.dotsClass,
+ draggable: carouselSettings.draggable,
+ easing: carouselSettings.easing,
+ edgeFriction: carouselSettings.edgeFriction,
+ fade: carouselSettings.fade,
+ focusOnSelect: carouselSettings.focusOnSelect,
+ focusOnChange: carouselSettings.focusOnChange,
+ infinite: carouselSettings.infinite,
+ initialSlide: carouselSettings.initialSlide,
+ lazyLoad: carouselSettings.lazyLoad,
+ mobileFirst: carouselSettings.mobileFirst,
+ pauseOnDotsHover: carouselSettings.pauseOnDotsHover,
+ pauseOnFocus: carouselSettings.pauseOnFocus,
+ pauseOnHover: carouselSettings.pauseOnHover,
+ respondTo: carouselSettings.respondTo,
+ rows: carouselSettings.rows,
+ rtl: carouselSettings.rtl,
+ slide: carouselSettings.slide,
+ slidesPerRow: carouselSettings.slidesPerRow,
+ slidesToScroll: carouselSettings.slidesToScroll,
+ slidesToShow: carouselSettings.slidesToShow,
+ speed: carouselSettings.speed,
+ swipe: carouselSettings.swipe,
+ swipeToSlide: carouselSettings.swipeToSlide,
+ touchMove: carouselSettings.touchMove,
+ touchThreshold: carouselSettings.touchThreshold,
+ useCSS: carouselSettings.useCSS,
+ useTransform: carouselSettings.useTransform,
+ variableWidth: carouselSettings.variableWidth,
+ vertical: carouselSettings.vertical,
+ verticalSwiping: carouselSettings.verticalSwiping,
+ waitForAnimate: carouselSettings.waitForAnimate,
+ zIndex: carouselSettings.zIndex,
+ responsive: carouselResponsiveSettingsOBJ
});
- clearInterval(load_dependencies['dependencies_met_html_loaded_{{slider.id}}']);
+
+ // NOT issued correctly (disabled for now)
+ // $(window).resize(debounce(positionSlickArrows, 100));
+
+ clearInterval(load_dependencies['dependencies_met_html_loaded_{{carousel.id}}']);
}
}, 25); // END
- {% endif %} {% endfor %} // ENDFOR (all) sliders
+ {% endif %} {% endfor %} // ENDFOR (all) carousels
_this.setState('finished');
logger.debug('\n' + 'state: ' + _this.getState());
logger.info('\n' + 'module initialization finished');
clearInterval(dependencies_met_page_ready);
-
}
}, 25);
}, // END init
// -------------------------------------------------------------------------
- // loadSliderHTML()
- // load all Slick sliders (HTML portion) dynanically configured
+ // loadcarouselHTML()
+ // load all Slick carousels (HTML portion) dynanically configured
// and enabled (AJAX) from YAMLdata file
// NOTE: Make sure the placeholder is available in the content page
- // eg. using the asciidoc extension masterslider::
+ // eg. using the asciidoc extension mastercarousel::
// -------------------------------------------------------------------------
- loadSliderHTML: function (options, slider) {
- var numSliders = Object.keys(slider).length;
- var active_sliders = numSliders;
+ loadCarouselHTML: function (options, carousel) {
+ var numcarousels = Object.keys(carousel).length;
+ var active_carousels = numcarousels;
var xhr_data_path = options.xhr_data_path + '/index.html';
var xhr_container_id;
- // console.debug('load HTML portion of all sliders configured found in page');
- console.debug('number of sliders found: ' + numSliders);
+ // console.debug('load HTML portion of all carousels configured found in page');
+ console.debug('number of carousels found: ' + numcarousels);
_this.setState('load_data');
- Object.keys(slider).forEach(function(key) {
- if (slider[key].enabled) {
- xhr_container_id = slider[key].id + '_parent';
+ Object.keys(carousel).forEach(function(key) {
+ if (carousel[key].enabled) {
+ xhr_container_id = carousel[key].id + '_parent';
- console.debug('load HTML data on slider id: ' + slider[key].id);
+ console.debug('load HTML data on carousel id: ' + carousel[key].id);
j1.loadHTML({
xhr_container_id: xhr_container_id,
xhr_data_path: xhr_data_path,
- xhr_data_element: slider[key].id
+ xhr_data_element: carousel[key].id
});
} else {
- console.debug('slider found disabled on id: ' + slider[key].id);
- active_sliders--;
+ console.debug('carousel found disabled on id: ' + carousel[key].id);
+ active_carousels--;
}
});
- console.debug('sliders loaded in page enabled|all: ' + active_sliders + '|' + numSliders);
+ console.debug('carousels loaded in page enabled|all: ' + active_carousels + '|' + numcarousels);
_this.setState('data_loaded');
- }, // END loadSliderHTML
+ }, // END loadcarouselHTML
// -------------------------------------------------------------------------
// messageHandler: MessageHandler for J1 CookieConsent module
// Manage messages send from other J1 modules
// -------------------------------------------------------------------------
@@ -359,7 +460,11 @@
}; // END return
})(j1, window);
{% endcapture %}
-{{ cache | strip_empty_lines }}
+{% if production %}
+ {{ cache | minifyJS }}
+{% else %}
+ {{ cache | strip_empty_lines }}
+{% endif %}
{% assign cache = nil %}