assets/themes/j1/adapter/js/masonry.js in j1-template-2023.0.17 vs assets/themes/j1/adapter/js/masonry.js in j1-template-2023.1.0
- old
+ new
@@ -109,14 +109,14 @@
// -------------------------------------------------------------------------
// init()
// adapter initializer
// -------------------------------------------------------------------------
init: function (options) {
+ var xhrLoadState = 'pending'; // (initial) load state for the HTML portion of the slider
+ var load_dependencies = {};
+ var dependency;
- // [INFO ] [j1.adapter.comments ] [ detected comments provider (j1_config): {{comments_provider}}} ]
- // [INFO ] [j1.adapter.comments ] [ start processing load region head, layout: {{page.layout}} ]
-
// -----------------------------------------------------------------------
// Default module settings
// -----------------------------------------------------------------------
var settings = $.extend({
module_name: 'j1.adapter.masonry',
@@ -131,91 +131,153 @@
logger = log4javascript.getLogger('j1.adapter.masonry');
// Load module DEFAULTS|CONFIG
masonryDefaults = $.extend({}, {{masonry_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
masonrySettings = $.extend({}, {{masonry_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
- masonryOptions = $.extend({}, masonryDefaults, masonrySettings);
-
+ masonryOptions = $.extend(true, {}, masonryDefaults, masonrySettings);
+
+ // load HTML portion for all grids
+ console.debug('loading HTML portion for all Masonry grids configured');
+ _this.loadGridHTML(masonryOptions, masonryOptions.grids);
+
// -----------------------------------------------------------------------
// 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' ) {
+ if ( j1.getState() === 'finished' && pageVisible ) {
_this.setState('started');
logger.debug('\n' + 'state: ' + _this.getState());
logger.info('\n' + 'module is being initialized');
- {% for item in masonry_options.grids %}
- {% if item.grid.enabled %}
- {% assign grid_id = item.grid.id %}
+ {% for grid in masonry_settings.grids %}
+ {% if grid.enabled %}
+ {% assign grid_id = grid.id %}
+ logger.info('\n' + 'found masonry grid on id: ' + '{{grid_id}}');
- logger.info('\n' + 'found masonry on id: ' + '{{grid_id}}');
-
{% comment %} load default grid options
------------------------------------------------------------------ {% endcomment %}
{% assign percent_position = masonry_defaults.percentPosition %}
{% assign horizontal_order = masonry_defaults.horizontalOrder %}
{% assign origin_left = masonry_defaults.originLeft %}
{% assign origin_top = masonry_defaults.originTop %}
{% assign init_layout = masonry_defaults.initLayout %}
{% assign transition_duration = masonry_defaults.transitionDuration %}
{% assign stagger_duration = masonry_defaults.stagger %}
{% assign gutter_size = masonry_defaults.gutter %}
+ {% assign resize = masonry_defaults.resize %}
+ {% assign itemSelector = masonry_defaults.itemSelector %}
+ {% assign containerStyle = masonry_defaults.containerStyle %}
+ {% assign columnWidth = masonry_defaults.columnWidth %}
{% comment %} overload defaults by grid element options
------------------------------------------------------------------ {% endcomment %}
- {% if item.grid.percentPosition %} {% assign percent_position = item.grid.percentPosition %} {% endif %}
- {% if item.grid.horizontalOrder %} {% assign horizontal_order = item.grid.horizontalOrder %} {% endif %}
- {% if item.grid.originLeft %} {% assign origin_left = item.grid.originLeft %} {% endif %}
- {% if item.grid.originTop %} {% assign origin_top = item.grid.originTop %} {% endif %}
- {% if item.grid.initLayout %} {% assign init_layout = item.grid.initLayout %} {% endif %}
- {% if item.grid.transitionDuration %} {% assign transition_duration = item.grid.transitionDuration %} {% endif %}
- {% if item.grid.stagger %} {% assign stagger_duration = item.grid.stagger %} {% endif %}
- {% if item.grid.gutter %} {% assign gutter_size = item.grid.gutter %} {% endif %}
+ {% if grid.options.percentPosition %} {% assign percent_position = grid.options.percentPosition %} {% endif %}
+ {% if grid.options.horizontalOrder %} {% assign horizontal_order = grid.options.horizontalOrder %} {% endif %}
+ {% if grid.options.originLeft %} {% assign origin_left = grid.options.originLeft %} {% endif %}
+ {% if grid.options.originTop %} {% assign origin_top = grid.options.originTop %} {% endif %}
+ {% if grid.options.initLayout %} {% assign init_layout = grid.options.initLayout %} {% endif %}
+ {% if grid.options.transitionDuration %} {% assign transition_duration = grid.options.transitionDuration %} {% endif %}
+ {% if grid.options.stagger %} {% assign stagger_duration = grid.options.stagger %} {% endif %}
+ {% if grid.options.gutter %} {% assign gutter_size = grid.options.gutter %} {% endif %}
+ {% if grid.options.resize %} {% assign resize = grid.options.resize %} {% endif %}
+ {% if grid.options.itemSelector %} {% assign itemSelector = grid.options.itemSelector %} {% endif %}
+ {% if grid.options.containerStyle %} {% assign containerStyle = grid.options.containerStyle %} {% endif %}
+ {% if grid.options.columnWidth %} {% assign columnWidth = grid.options.columnWidth %} {% endif %}
- var $grid_{{grid_id}} = $('#{{grid_id}}');
+ // create dynamic loader variable|s
+ dependency = 'dependencies_met_html_loaded_{{grid.id}}';
+ load_dependencies[dependency] = '';
- logger.info('\n' + 'initialize grid on id: ' + '{{grid_id}}');
- // initialize the (masonry) grid
- //
- $grid_{{grid_id}}.masonry({
- percentPosition: {{percent_position}},
- horizontalOrder: {{horizontal_order}},
- originLeft: {{origin_left}},
- originTop: {{origin_top}},
- initLayout: {{init_layout}},
- transitionDuration: "{{transition_duration}}s",
- stagger: "{{stagger_duration}}",
- });
+ // initialize the grid if HTML portion successfully loaded
+ load_dependencies['dependencies_met_html_loaded_{{grid.id}}'] = setInterval (function (options) {
+ // check if HTML portion of the slider is loaded successfully (loadSliderHTML)
+ xhrLoadState = j1.xhrDOMState['#{{grid.id}}_parent'];
+ if ( xhrLoadState === 'success' ) {
+ setTimeout (function() {
+ var $grid_{{grid_id}} = $('#{{grid_id}}');
+ logger.info('\n' + 'initialize grid on id: ' + '{{grid_id}}');
- logger.info('\n' + 'install event handlers on id: ' + '{{grid_id}}');
- // grid event handler
- //
- $grid_{{grid_id}}.on( 'click', '.card', function() {
- // remove clicked element
- // layout remaining item elements
- $grid_{{grid_id}}.masonry('remove', this).masonry('layout');
- $grid_{{grid_id}}.masonry('reloadItems');
- });
+ // grid event handler
+ logger.info('\n' + 'install event handlers for grid on id: ' + '{{grid_id}}');
+ $grid_{{grid_id}}.on('layoutComplete', function() {
+ // initializing (layout) completed
+ logger.debug('\n' + 'initializing layout completed for grid on id: ' + '{{grid_id}}');
+ });
- {% else %}
+ // setup the grid
+ logger.info('\n' + 'grid is being setup on id: ' + '{{grid.id}}');
+ $grid_{{grid_id}}.masonry({
+ percentPosition: {{percent_position}},
+ horizontalOrder: {{horizontal_order}},
+ originLeft: {{origin_left}},
+ originTop: {{origin_top}},
+ initLayout: {{init_layout}},
+ transitionDuration: "{{transition_duration}}s",
+ stagger: "{{stagger_duration}}s",
+ resize: {{resize}},
+ gutter: {{gutter_size}},
+// containerStyle: "{{containerStyle}}",
+// columnWidth: {{columnWidth}},
+ });
+ }, masonryOptions.initTimeout);
+ }
+ clearInterval(load_dependencies['dependencies_met_html_loaded_{{grid.id}}']);
+ }, 25); // END dependencies_met_html_loaded
- {% if item.grid.hideDisabled %}
+ {% else %}
+ logger.info('\n' + 'found grid disabled on id: {{grid.id}}');
+ {% if masonryOptions.hideDisabled %}
// hide a grid if disabled
- $('#{{item.grid.id}}').hide();
+ logger.debug('\n' + 'hide grid disabled on id: {{grid.id}}');
+ $('#{{grid.id}}').hide();
{% endif %}
-
{% endif %} // ENDIF grid enabled
- {% endfor %} // ENDFOR (all) grids
+ {% endfor %} // ENDFOR (all) grids
logger.info('\n' + 'initializing module finished');
clearInterval(dependencies_met_page_ready);
}
}, 25);
}, // END init
+
+ // -------------------------------------------------------------------------
+ // loadGridHTML()
+ // loads the HTML portion via AJAX (j1.loadHTML) for all grids configured.
+ // NOTE: Make sure the placeholder DIV is available in the content
+ // page e.g. using the asciidoc extension masonry::
+ // -------------------------------------------------------------------------
+ loadGridHTML: function (options, grid) {
+ var numGrids = Object.keys(grid).length;
+ var active_grids = numGrids;
+ var xhr_data_path = options.xhr_data_path + '/index.html';
+ var xhr_container_id;
+
+ console.debug('number of grids found: ' + numGrids);
+
+ _this.setState('load_data');
+ Object.keys(grid).forEach(function(key) {
+ if (grid[key].enabled) {
+ xhr_container_id = grid[key].id + '_parent';
+
+ console.debug('load HTML portion on grid id: ' + grid[key].id);
+ j1.loadHTML({
+ xhr_container_id: xhr_container_id,
+ xhr_data_path: xhr_data_path,
+ xhr_data_element: grid[key].id
+ });
+ } else {
+ console.debug('grid found disabled on id: ' + grid[key].id);
+ active_grids--;
+ }
+ });
+ console.debug('grids loaded in page enabled|all: ' + active_grids + '|' + numGrids);
+ _this.setState('data_loaded');
+ }, // END loadSliderHTML
// -------------------------------------------------------------------------
// messageHandler()
// manage messages send from other J1 modules
// -------------------------------------------------------------------------