assets/themes/j1/adapter/js/slick.js in j1-template-2023.2.7 vs assets/themes/j1/adapter/js/slick.js in j1-template-2023.3.0
- old
+ new
@@ -34,11 +34,14 @@
{% assign blocks = site.data.blocks %}
{% assign modules = site.data.modules %}
{% assign template_config = site.data.j1_config %}
{% comment %} Set config data
--------------------------------------------------------------------------------- {% endcomment %}
+-------------------------------------------------------------------------------- {% endcomment
+{% assign attic_defaults = modules.defaults.attics.defaults %}
+{% assign attic_settings = modules.attics.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 %}
@@ -84,10 +87,13 @@
var responsiveSettings = [];
var carouselResponsiveSettings = [];
var _this;
var logger;
var logText;
+ var atticDefaults;
+ var atticSettings;
+ var atticOptions;
var slickDefaults;
var slickSettings;
var slickLightboxDefaults;
var slickLightboxSettings;
var slickLightboxOptions;
@@ -124,10 +130,14 @@
module_name: 'j1.adapter.cookieConsent',
generated: '{{site.time}}'
}, options);
// Load module DEFAULTS|CONFIG
+ atticDefaults = $.extend({}, {{attic_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+ atticSettings = $.extend({}, {{attic_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+ atticOptions = $.extend(true, {}, atticDefaults, atticSettings);
+
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);
@@ -142,11 +152,11 @@
_this.setState('started');
logger.debug('\n' + 'state: ' + _this.getState());
logger.info('\n' + 'module is being initialized');
// load HTML portion for all carousels
- console.debug('loading HTML portion for all carousels configured');
+ // 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() {
@@ -155,17 +165,17 @@
}
// -----------------------------------------------------------------------
// initializer
// -----------------------------------------------------------------------
+ // make sure the 'content' section is visible BEFORE setting-up sliders
+ //
var dependencies_met_page_ready = setInterval (function (options) {
- var pageState = $('#no_flicker').css("display");
- var pageVisible = (pageState == 'block') ? true: false;
- var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+ var contentState = $('#content').css("display");
+ var contentVisible = (contentState == 'block') ? true: false;
- if (j1.getState() === 'finished' && pageVisible && atticFinished) {
-
+ if (j1.getState() === 'finished' && contentVisible) {
{% for carousel in slick_settings.carousels %} {% if carousel.enabled %}
logger.info('\n' + 'carousel is being initialized on id: ' + '{{carousel.id}}');
{% if carousel.options.responsive %}
logger.info('\n' + 'collect responsive settings for carousel on id: ' + '{{carousel.id}}');
@@ -286,14 +296,15 @@
// 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 contentState = $('#content').css("display");
+ var ContentVisible = (contentState == 'block') ? true: false;
var slideImageHeight;
- if ( j1.getState() === 'finished' && pageVisible ) {
+
+ if ( j1.getState() === 'finished' && ContentVisible ) {
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'));
@@ -305,11 +316,11 @@
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);
+ }, 10);
}
// set individual arrow positions for a carousel
//
$('.{{carousel.id | replace: '_','-' }}').on('init afterChange', positionSlickArrows);
@@ -365,20 +376,20 @@
// NOT issued correctly (disabled for now)
// $(window).resize(debounce(positionSlickArrows, 100));
clearInterval(load_dependencies['dependencies_met_html_loaded_{{carousel.id}}']);
}
- }, 25); // END
+ }, 10); // END
{% 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);
+ }, 10);
}, // END init
// -------------------------------------------------------------------------
// loadcarouselHTML()
@@ -391,29 +402,28 @@
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 carousels configured found in page');
- console.debug('number of carousels found: ' + numcarousels);
+ // console.debug('number of carousels found: ' + numcarousels);
_this.setState('load_data');
Object.keys(carousel).forEach(function(key) {
if (carousel[key].enabled) {
xhr_container_id = carousel[key].id + '_parent';
- console.debug('load HTML data on carousel id: ' + carousel[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: carousel[key].id
});
} else {
- console.debug('carousel found disabled on id: ' + carousel[key].id);
+ // console.debug('carousel found disabled on id: ' + carousel[key].id);
active_carousels--;
}
});
- console.debug('carousels loaded in page enabled|all: ' + active_carousels + '|' + numcarousels);
+ // console.debug('carousels loaded in page enabled|all: ' + active_carousels + '|' + numcarousels);
_this.setState('data_loaded');
}, // END loadcarouselHTML
// -------------------------------------------------------------------------
// messageHandler: MessageHandler for J1 CookieConsent module