j1-template 2023.2.2 → 2023.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dcbf50d4b49f1e3b06ad10b84e19252817683798fbb9c0aab00737a339a5e861
-  data.tar.gz: 64c367576dd758a510de24d94431cd93fa9d59540b8cdecc6e3b67a8b7115b3e
+  metadata.gz: b6773ac450953ee75c6f86fab1415d8e13912fcd1189d852a42106e192989c3e
+  data.tar.gz: a076cfab70f404ec9f1001841343d5eea7e13e33ef355475267278ee15930060
 SHA512:
-  metadata.gz: ddce5f497bc4444e065f71a0ea71f75899149954d951685730d5df6cf3b03b0a08516afe696d93edd68642809b8a09bcccf5f9fa1b71636a6ef6d95994cf4467
-  data.tar.gz: '08da2f5079b22fab8d1b070d1a91ea53832247c7dc781262bc9f0fb1c0d2f8d25e1ca681c8c619c7f6e7c250706eb77e3ba52e9f0fd7faa3212dbf2b2c1165d0'
+  metadata.gz: 764bd237a644f2a4f82255436d0a4d49c07f55ed464c81f1b4ef33fe09314a44456e5467ef259ca16c39451d52f5b3c881ab3d9cf61e5e7568c55d0f6275e2a2
+  data.tar.gz: 85b4d6306d927d7a7319fa0183b59529f9f30677d2561fbf37fda6eb1f89a3eadb9a9c1d8d012f3565ddf2393ccd4c7a8ee32024a2f4931ec9158773a7863621

data/assets/data/banner.html

@@ -259,8 +259,8 @@ exclude_from_search:                    true
                 		<img
                 			class="sticker-image"
                 			src="/assets/images/sticker/600x600/sticker-new-version.png"
-                			alt="Get new version 2023.2.2"
-                			title="Get new version 2023.2.2"
+                			alt="Get new version 2023.2.4"
+                			title="Get new version 2023.2.4"
                 			style="width: 140px; height: 120px;"
                 		>
                   </a>

data/assets/themes/j1/adapter/js/attic.js

@@ -147,11 +147,21 @@ j1.adapter.attic = (function (j1, window) {
         if ( j1.getState() === 'finished' && pageVisible ) {
           {% if attic_options.enabled %}
           logger.info('\n' + 'create all attics configured');
+
+          if (atticOptions.hide_oninit) {
+            // hide page while attic is being created
+            // jadams, 2023-05-12: Visible page/attic cause high number
+            // for cumulative layout shift (CLS)
+            //
+            logger.debug('\n' + 'hide attics on initia.lization');
+            $('#no_flicker').css('display', 'none');
+          }
+
           _this.createAllAttics();
           clearInterval(dependencies_met_page_ready);
           {% else %}
-          logger.warn('\n' + 'found module attics disabled');
-          // add additional top space
+          logger.debug('\n' + 'found module attics disabled');
+          // add additional top space if attics are disabled
           $('#content').addClass('mt-5');
           clearInterval(dependencies_met_page_ready);
           {% endif %}
@@ -164,36 +174,36 @@ j1.adapter.attic = (function (j1, window) {
     // -------------------------------------------------------------------------
     createAllAttics: function () {
       var frontmatterOptions  = _this.frontmatterOptions;
+
       // merge all attic options
       var atticOptions = $.extend(true, {}, _this.atticOptions, _this.frontmatterOptions);
 
-      {% comment %} Load data from header config (yaml data file)
+      {% comment %} Load data from attic config (yaml data files)
       -------------------------------------------------------------------------- {% endcomment %}
       {% for item in attic_options.attics %}
         {% if item.attic.enabled %}
-
           {% assign attic_id = item.attic.id %}
 
-          {% comment %} Collect CSS image filters
-          -------------------------------------------------------------------------------- {% endcomment %}
-          {% if item.attic.filters %}
-            {% for filter in blog_navigator_options.filters %}
-              {% capture css_filters %}{{css_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
-            {% endfor %}
-            {% capture image_filters %}filter:{{css_filters}}{% endcapture %}
-          {% else %}
-            {% assign image_filters = '' %}
-          {% endif %}
-
-          // Create the SPECIFIC header loader FUNCTION of type: {{attic_id}}
+          // Create the SPECIFIC header loader FUNCTION for id: {{attic_id}}
           function {{attic_id}} (atticOptions) {
+            var atticOptionsFilters = {};
+            var atticItemFilters    = {};
+            var atticFilters        = {};
+            var my_attic      	    = $.extend({}, {{item.attic | replace: 'nil', 'null' | replace: '=>', ':' }});
 
             logger.info('\n' + 'initialize attic on id: {{attic_id}}');
 
-            // convert attic filter settings to object to array to string
-            atticFilters = $.extend({}, {{item.attic.filters | replace: 'nil', 'null' | replace: '=>', ':' }});
-            filterArray = [];
-            $.each(atticFilters, function(idx2,val2) {
+            // collect attic filter settings to object to array to string
+            //
+            {% if item.attic.filters %}
+              atticItemFilters = $.extend({}, {{item.attic.filters | replace: 'nil', 'null' | replace: '=>', ':' }});
+            {% endif %}
+
+            atticOptionsFilters = atticOptions.filters;
+            atticFilters        = $.extend(true, {}, atticOptionsFilters, atticItemFilters);
+            filterArray         = [];
+
+            $.each(atticFilters, function(idx2, val2) {
               var str = idx2 + '(' + val2 + ')';
               filterArray.push(str);
             });
@@ -240,7 +250,7 @@ j1.adapter.attic = (function (j1, window) {
             // Add event for pauseOnHover
             //
             if (atticOptions.pauseOnHover) {
-              $('#attic_home').hover (
+              $('#attic_id').hover (
                 function() {
                   $('#{{attic_id}}').backstretch('pause'); },
                 function() {
@@ -354,6 +364,7 @@ j1.adapter.attic = (function (j1, window) {
               // TODO: Add additional styles to head-title-text|head-tagline-
               // text (e.g. text-center)
               // atticOptions.tagline_align
+              //
               textOverlayHTML = ''
                 + '<div id="head-title" class="head-title animate__animated ">'
                 + '  <h2 id="head-title-text" class="notoc text-' + atticOptions.title_align + ' text-emphasis-stronger">' + textOverlayTitle + '</h2>'
@@ -361,24 +372,47 @@ j1.adapter.attic = (function (j1, window) {
                 + '<div id="head-tagline" class="head-tagline animate__animated ">'
                 + '  <h3 id="head-tagline-text" class="notoc text-' + atticOptions.tagline_align + '">' + textOverlayTagline + '</h3>'
                 + '</div>';
-               $('.textOverlay').html(textOverlayHTML).hide();
 
-              $('#head-title').addClass(atticOptions.title_animate);
-              $('#head-title').addClass(atticOptions.title_animate_delay);
-              $('#head-title').addClass(atticOptions.title_animate_duration);
-              $('#head-tagline').addClass(atticOptions.tagline_animate);
-              $('#head-tagline').addClass(atticOptions.tagline_animate_duration);
+              // hide textOverlay while animate classes are being calculated
+              //
+              $('.textOverlay').html(textOverlayHTML).hide();
+
+              // collect individual title options
+              //
+              var title_animate             = !!my_attic.title_animate ? my_attic.title_animate : atticOptions.title_animate;
+              var title_animate_delay       = !!my_attic.title_animate_delay ? my_attic.title_animate_delay : atticOptions.title_animate_delay;
+              var title_animate_duration    = !!my_attic.title_animate_duration ? my_attic.title_animate_duration : atticOptions.title_animate_duration;
+
+              $('#head-title').addClass(title_animate);
+              $('#head-title').addClass(title_animate_delay);
+              $('#head-title').addClass(title_animate_duration);
+
+              // collect individual tagline options
+              //
+              var tagline_animate           = !!my_attic.tagline_animate ? my_attic.tagline_animate : atticOptions.tagline_animate;
+              var tagline_animate_delay     = !!my_attic.tagline_animate_delay ? my_attic.tagline_animate_delay : atticOptions.tagline_animate_delay;
+              var tagline_animate_duration  = !!my_attic.tagline_animate_duration ? my_attic.tagline_animate_duration : atticOptions.tagline_animate_duration;
 
+              $('#head-tagline').addClass(tagline_animate);
+              $('#head-tagline').addClass(tagline_animate_delay);
+              $('#head-tagline').addClass(tagline_animate_duration);
+
+              // show configured textOverlay
+              //
               $('.textOverlay').show();
               $('.textOverlay').css('opacity', '1');
 
-              // jadams, 2022-08-19: show a badge only if defined
+              // jadams, 2022-08-19: show a badge only if configured
               //
               if (typeof instance.images[index].badge != 'undefined') {
                 $('.attic-caption').show();
                 $('.attic-caption').css('opacity', '1');
               }
 
+              // show page if attic finalized
+              //
+              $('#no_flicker').css('display', 'block');
+
               // jadams, 2022-08-09:
               // resize the (background-)image to make sure the 'attic'
               // container is changed in size (heigth) if title/tagline
@@ -592,20 +626,31 @@ j1.adapter.attic = (function (j1, window) {
             attic_style += '} </style>';
             $('head').append(attic_style);
 
-            // Initialze header sizes
-            attic_style = '';
-            attic_style = '<style> .attic { padding-top: ' +atticOptions.padding_top+ 'px; padding-bottom: ' +atticOptions.padding_bottom+ 'px; margin-bottom: ' +atticOptions.margin_bottom+ 'px; text-shadow: 0 1px 0 rgba(0,0,0,.1); </style>';
+            // collect individual (title|tagline) options
+            //
+            var my_attic      	= $.extend({}, {{item.attic | replace: 'nil', 'null' | replace: '=>', ':' }});
+            var padding_top     = !!my_attic.padding_top ? my_attic.padding_top : atticOptions.padding_top;
+            var padding_bottom  = !!my_attic.padding_bottom ? my_attic.padding_bottom : atticOptions.padding_bottom;
+            var margin_bottom   = !!my_attic.margin_bottom ? my_attic.margin_bottom : atticOptions.margin_bottom;
+
+            // frontmatter options takes precedence
+            //
+            if (typeof frontmatterOptions.padding_top != 'undefined')     { padding_top    = frontmatterOptions.padding_top; }
+            if (typeof frontmatterOptions.padding_bottom != 'undefined')  { padding_bottom = frontmatterOptions.padding_bottom; }
+            if (typeof frontmatterOptions.margin_bottom != 'undefined')   { margin_bottom  = frontmatterOptions.margin_bottom; }
 
+            attic_style = '';
+            attic_style = '<style> .attic { padding-top: ' +padding_top+ 'px; padding-bottom: ' +padding_bottom+ 'px; margin-bottom: ' +margin_bottom+ 'px; text-shadow: 0 1px 0 rgba(0,0,0,.1); </style>';
             $('head').append(attic_style);
+
             $('head').append('<style> .attic .head-title h2 { color: ' +atticOptions.title_color+ ';font-size: ' +atticOptions.title_size+ ' !important; text-align: ' +atticOptions.title_align+ ';} </style>');
             $('head').append('<style> .attic .head-tagline h3 { color: ' +atticOptions.tagline_color+ ';font-size: ' +atticOptions.tagline_size+ ' !important; text-align: ' +atticOptions.tagline_align+ '; } </style>');
 
-            // Add opacity to all header images
+            // Add opacity to ALL header (backstretch) images
             // See: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
-            var attic_opacity;
-
-            attic_opacity = '<style> .backstretch-item { opacity: ' +atticOptions.opacity+ '; </style>';
-            $('head').append(attic_opacity);
+            var item_opacity        = !!my_attic.opacity ? my_attic.opacity : atticOptions.opacity;
+            var backstretch_opacity = '<style> .backstretch-item { opacity: ' +item_opacity+ '; </style>';
+            $('head').append(backstretch_opacity);
 
             _this.setState('initialized');
             logger.debug('\n' + 'state: ' + _this.getState());

data/assets/themes/j1/adapter/js/fab.js

@@ -185,9 +185,11 @@ j1.adapter.fab = (function (j1, window) {
       // Initialize FAB button
       // ---------------------------------------------------------------------
       var dependencies_met_fab_initialized = setInterval (function () {
-        var pageState   = $('#no_flicker').css("display");
-        var pageVisible = (pageState == 'block') ? true: false;
-        if (j1.xhrDOMState['#' + fabOptions.xhr_container_id] == 'success' && j1.getState() == 'finished' && pageVisible) {
+        var pageState     = $('#no_flicker').css("display");
+        var pageVisible   = (pageState == 'block') ? true: false;
+        var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+
+        if (j1.xhrDOMState['#' + fabOptions.xhr_container_id] == 'success' && j1.getState() == 'finished' && pageVisible && atticFinished ) {
           _this.setState('loaded');
           logger.info('\n' + 'set module state to: ' + _this.getState());
           logger.info('\n' + 'HTML data for FAB: ' + _this.getState());

data/assets/themes/j1/adapter/js/lightbox.js

@@ -132,9 +132,11 @@ j1.adapter.lightbox = (function (j1, window) {
       lightboxOptions           = $.extend(true, {}, lightboxDefaults, lightboxSettings, frontmatterOptions);
 
       var dependencies_met_j1_finished = setInterval(function() {
-        var pageState   = $('#no_flicker').css("display");
-        var pageVisible = (pageState == 'block') ? true: false;
-        if (j1.getState() == 'finished' && pageVisible) {
+        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) {
 
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());

data/assets/themes/j1/adapter/js/masonry.js

@@ -143,10 +143,11 @@ var logText;
       // initializer
       // -----------------------------------------------------------------------
       var dependencies_met_page_ready = setInterval (function (options) {
-        var pageState   = $('#no_flicker').css("display");
-        var pageVisible = (pageState == 'block') ? true: false;
+        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 ) {
+        if ( j1.getState() === 'finished' && pageVisible && atticFinished) {
 
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());

data/assets/themes/j1/adapter/js/masterslider.js

@@ -161,7 +161,7 @@ j1.adapter.masterslider = (function (j1, window) {
       // load the slider manager to DISPLAY instances in page (if visible)
       var dependencies_met_module_finished = setInterval(function() {
         var pageState   = $('#no_flicker').css("display");
-        var pageVisible = (pageState == 'block') ? true: false;
+        var pageVisible = (pageState == 'block') ? true : false;
         if (_this.getState() == 'sliders_initialized' && pageVisible ) {
             // TODO: Check why a timeout is required to load the Slider Manager
             setTimeout (function() {

data/assets/themes/j1/adapter/js/navigator.js

@@ -406,10 +406,12 @@ j1.adapter.navigator = (function (j1, window) {
             // event handler|css styles
             // -----------------------------------------------------------------
             var dependencies_met_initialized = setInterval(function() {
-              var pageState   = $('#no_flicker').css("display");
-              var pageVisible = (pageState == 'block') ? true: false;
+              var pageState     = $('#no_flicker').css("display");
+              var pageVisible   = (pageState == 'block') ? true: false;
+              var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+
               // initialize if page and themer ready
-              if (j1.getState() === 'finished' && j1.adapter.themer.getState() === 'finished' && pageVisible) {
+              if (j1.getState() === 'finished' && j1.adapter.themer.getState() === 'finished' && pageVisible && atticFinished) {
                 _this.setState('processing');
 
                 // apply module configuration settings

data/assets/themes/j1/adapter/js/scroller.js

@@ -144,9 +144,11 @@ var lastPageInfo;
 
       // initialize scrollers if page is available and visible
       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 ) {
+        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) {
           _this.generate_scrollers();
           _this.setState('finished');
           logger.debug('\n' + 'state: ' + _this.getState());

data/assets/themes/j1/adapter/js/slick.js

@@ -158,10 +158,11 @@ j1.adapter.slick = (function (j1, window) {
       // initializer
       // -----------------------------------------------------------------------
       var dependencies_met_page_ready = setInterval (function (options) {
-        var pageState   = $('#no_flicker').css("display");
-        var pageVisible = (pageState == 'block') ? true: false;
+        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 ) {
+        if (j1.getState() === 'finished' && pageVisible && atticFinished) {
 
           {% for carousel in slick_settings.carousels %} {% if carousel.enabled %}
           logger.info('\n' + 'carousel is being initialized on id: ' + '{{carousel.id}}');

data/assets/themes/j1/adapter/js/toccer.js

@@ -164,7 +164,9 @@ j1.adapter.toccer = (function () {
         var dependencies_met_navigator = setInterval(function() {
           var pageState   = $('#no_flicker').css("display");
           var pageVisible = (pageState == 'block') ? true: false;
-          if ( j1.getState() == 'finished' && pageVisible ) {
+          var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+
+          if (j1.getState() == 'finished' && pageVisible && atticFinished) {
             _this.initToccerCore(toccerOptions);
             _this.setState('finished');
 

data/assets/themes/j1/adapter/js/translator.js

@@ -202,9 +202,11 @@ j1.adapter.translator = (function (j1, window) {
           domainAttribute = '';
         }
 
-        var pageState   = $('#no_flicker').css("display");
-        var pageVisible = (pageState == 'block') ? true: false;
-        if ( j1.getState() === 'finished' && pageVisible ) {
+        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) {
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');

data/assets/themes/j1/adapter/js/waves.js

@@ -145,9 +145,11 @@ var logText;
       // 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 ) {
+        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) {
           themes_allowed = waveOptions.themes.toString();
           theme_enabled  = waveOptions.themes.indexOf(theme) > -1 ? true : false;
 

data/assets/themes/j1/core/css/themes/unolight/bootstrap.css

@@ -14999,13 +14999,13 @@ table.tableblock > .title {
 
 .attic .head-title h2, .attic .head-title .h2 {
   margin-top: -1.2rem;
-  margin-bottom: 0 !important;
+  margin-bottom: 0;
   font-weight: 600;
   line-height: 1.2; }
 
 .attic .head-tagline h3, .attic .head-tagline .h3 {
   margin-top: 0;
-  margin-bottom: 0 !important;
+  margin-bottom: 0;
   font-weight: 400;
   line-height: 1; }