assets/themes/j1/adapter/js/masonry.js in j1-template-2023.9.2 vs assets/themes/j1/adapter/js/masonry.js in j1-template-2023.10.0
- old
+ new
@@ -11,11 +11,11 @@
#
# Product/Info:
# https://jekyll.one
# Copyright (C) 2023 Juergen Adams
#
- # J1 Theme is licensed under the MIT License.
+ # J1 Template is licensed under the MIT License.
# For details, see: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
# -----------------------------------------------------------------------------
# Test data:
# {{ liquid_var | debug }}
# masonry_options: {{ masonry_options | debug }}
@@ -49,30 +49,28 @@
{% assign masonry_options = masonry_defaults | merge: masonry_settings %}
{% comment %} Variables
-------------------------------------------------------------------------------- {% endcomment %}
-
{% comment %} Detect prod mode
-------------------------------------------------------------------------------- {% endcomment %}
{% assign production = false %}
{% if environment == 'prod' or environment == 'production' %}
{% assign production = true %}
{% endif %}
-
/*
# -----------------------------------------------------------------------------
# ~/assets/themes/j1/adapter/js/masonry.js
# J1 Adapter for the comments module
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
- # J1 Theme is licensed under the MIT License.
+ # J1 Template is licensed under the MIT License.
# For details, see: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
# -----------------------------------------------------------------------------
# Adapter generated: {{site.time}}
# -----------------------------------------------------------------------------
*/
@@ -146,13 +144,11 @@
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;
-// if ( j1.getState() === 'finished' && pageVisible && atticFinished) {
- if ( j1.getState() === 'finished' && pageVisible) {
-
+ if ( j1.getState() === 'finished' && pageVisible && atticFinished) {
_this.setState('started');
logger.debug('\n' + 'state: ' + _this.getState());
logger.info('\n' + 'module is being initialized');
{% for grid in masonry_settings.grids %}
@@ -188,17 +184,17 @@
{% 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 %}
- // create dynamic loader variable|s
+ // create dynamic loader variable to setup the grid on id {{grid.id}}
dependency = 'dependencies_met_html_loaded_{{grid.id}}';
load_dependencies[dependency] = '';
// 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)
+ // check if HTML portion of the grid is loaded successfully
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}}');
@@ -217,23 +213,94 @@
});
});
// setup the grid
+ //
logger.info('\n' + 'grid is being setup on id: ' + '{{grid.id}}');
- $grid_{{grid_id}}.masonry({
+ var $grid_{{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}},
+ gutter: {{gutter_size}}
});
+
+ // run code after all images are loaded with the grid
+ //
+ $grid_{{grid_id}}.imagesLoaded(function() {
+ console.debug("masonry: images loaded on {{grid_id}}");
+
+ {% if grid.lightbox.type == 'lg' %}
+ console.log("masonry: gallery detected on id: {{grid_id}}");
+
+ // setup the lightbox
+ //
+ var lg = document.getElementById("{{grid_id}}");
+ var gallery = lightGallery(lg, {
+ "plugins": [{{grid.lightGallery.plugins}}],
+ "selector": '.lg-item',
+ {% for option in grid.lightGallery.options %}
+ {{option[0] | json}}: {{option[1] | json}},
+ {% endfor %}
+ {% if grid.videojs.enabled %}
+ {% if grid.videojs.player.vimeoPlayer.enabled %}
+ // vimeo player options
+ //
+ vimeoPlayerParams: {
+ {% for option in grid.videojs.player.vimeoPlayer.options %}
+ {{option[0] | json}}: {{option[1] | json}}{% if forloop.last %}{% else %},{% endif %}
+ {% endfor %}
+ {% endif %}
+ },
+ {% if grid.videojs.player.wistiaPlayer.enabled %}
+ // wistia player options
+ //
+ wistiaPlayerParams: {
+ {% for option in grid.videojs.player.wistiaPlayer.options %}
+ {{option[0] | json}}: {{option[1] | json}}{% if forloop.last %}{% else %},{% endif %}
+ {% endfor %}
+ {% endif %}
+ },
+ // youtube player options
+ //
+ {% if grid.videojs.player.youTubePlayer.enabled %}
+ youTubePlayerParams: {
+ {% for option in grid.videojs.player.youTubePlayer.options %}
+ {{option[0] | json}}: {{option[1] | json}}{% if forloop.last %}{% else %},{% endif %}
+ {% endfor %}
+ {% endif %}
+ },
+ {% endif %}
+ {% if grid.videojs.enabled %}
+ // videojs player options
+ //
+ videojs: {{grid.videojs.enabled}},
+ videojsTheme: "vjs-theme-{{grid.videojs.theme}}",
+ videojsOptions: {
+ {% for option in grid.lightGallery.player.videojsPlayer.options %}
+ {% if option == 'playbackRates' %}
+ playbackRates: [{{option[1]}}],
+ {% continue %}
+ {% endif %}
+ {{option[0] | json}}: {{option[1] | json}},
+ {% endfor %}
+ "controls": {{grid.videojs.player.videojsPlayer.controls}},
+ "controlBar": {
+ {% for option in grid.videojs.player.videojsPlayer.controlBar %}
+ {{option[0] | json}}: {{option[1] | json}}{% if forloop.last %}{% else %},{% endif %}
+ {% endfor %}
+ } // END controlBar
+ } // END videojsOptions
+ {% endif %}
+ }); // END lightGallery
+ {% endif %}
+ }); // END grid|imagesLoaded
+
}, masonryOptions.initTimeout);
}
clearInterval(load_dependencies['dependencies_met_html_loaded_{{grid.id}}']);
}, 10); // END dependencies_met_html_loaded