j1-template 2022.3.3 → 2022.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0516d27133f2c1f612ca527a69f7bd6978f8e89fe838ec60fe9bc6af6a427315
-  data.tar.gz: dcfafe53e3c42c52bc0592a9e50795718b18e46ef7273bd255865b8e7cc1f44b
+  metadata.gz: 78d7b70f2625cb38a4303024648b75a6065785651dbdbc3b34d93551747ca09c
+  data.tar.gz: f50b7c36b92e7a7befa15e1c377330b8371d9aff7c678044e507498bfb7fb715
 SHA512:
-  metadata.gz: bdfaa86c30d20a47c3c41318645658f9a522406693b8f2d4e0d021c42386ee174d9c9630219c0800e845b25ceadcc0e1d39b7631b466d486a1e8a190f43bc9f8
-  data.tar.gz: 65700ba4360e6c75231f7c8271beebf59d49391c63d763fb9c52c6bb680162dd8484c5d632ef050a1f55e103bbd14e2b1e3267cada91f72c35d41e443b461dfb
+  metadata.gz: fe3590b5508762043117af7a4e68d61e3c9eadbde627ab4d1bb436755b4dacfc4b8e037aa92112eb299ffd0e3734a72a61b01754564eacf8c4926d07757f24f4
+  data.tar.gz: fbda39cbd894c5ac244002044fd31871f684aad817a865c9bcdc9bd154e1c020fbd27d43c3467c9c6adc1f89a80d7f3ff6026c248c3e303571aca8a23c595177

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

@@ -134,26 +134,41 @@ var j1 = (function () {
   // ---------------------------------------------------------------------------
   // globals
   // ---------------------------------------------------------------------------
+  // base page resources
   var rePager                     =  new RegExp('navigator|dateview|tagview|archive');
   var environment                 = '{{environment}}';
   var moduleOptions               = {};
   var j1_runtime_data             = {};
+  var _this;
+  var settings;
+  var json_data;
+  var ep;
+  var baseUrl;
+  var referrer;
 
-  // Status information
+  // defaults for status information
   var state                       = 'not_started';
   var mode                        = 'not_detected';
 
-  // Default tracking provider information
-  // var tracking_enabled            = ('{{tracking_enabled}}' === 'true') ? true: false;
-  // var tracking_id                 = '{{tracking_id}}';
-  // var tracking_id_valid           = (tracking_id.includes('tracking-id')) ? false : true;
+  // defaults for tracking providers
+  var tracking_enabled            = ('{{tracking_enabled}}' === 'true') ? true: false;
+  var tracking_id                 = '{{tracking_id}}';
+  var tracking_id_valid           = (tracking_id.includes('tracking-id')) ? false : true;
 
-  // Default comment provider information
+  // defaults for comment providers
   var comment_provider            = '{{comment_provider}}';
   var site_id                     = '{{site_id}}';
   var checkCookies                = {{cookie_options.checkCookies}};
   var expireCookiesOnRequiredOnly = ('{{cookie_options.expireCookiesOnRequiredOnly}}' === 'true') ? true: false;
 
+  // defaults for dynamic pages
+  var autoScrollRatioThreshold    = '{{template_config.autoScrollRatioThreshold}}';
+  var pageGrowthRatio             = 0;                                          // ratio a dynamic page has grown in height
+  var pageBaseHeigth              = 0;  	                                      // base height of  a dynamic page
+  var staticPage                  = false;                                      // defalt: false, but decided in ResizeObserver
+  var pageHeight;                                                               // height of a page dynamic detected in ResizeObserver
+
+  // defaults for the cookie management
   var current_user_data;
   var current_page;
   var previous_page;
@@ -163,30 +178,23 @@ var j1 = (function () {
   var user_session_detected;
   var cookie_written;
 
-  // Theme information
+  // defaults for themes
   var themeName;
   var themeCss;
   var cssExtension              = (environment === 'production')
                                   ? '.min.css'
                                   : '.css'
 
-   // Pathes of J1 data files
+  // defaults for data files
   var colors_data_path          = '{{template_config.colors_data_path}}';
   var font_size_data_path       = '{{template_config.font_size_data_path}}';
   var runtime_data_path         = '{{template_config.runtime_data_path}}';
   var message_catalog_data_path = '{{template_config.message_catalog_data_path}}';
 
-  // Logger
+  // Logger resources
   var logger;
   var logText;
 
-  var _this;
-  var settings;
-  var json_data;
-  var ep;
-  var baseUrl;
-  var referrer;
-
   // initial cookie settings
   var cookie_names = {
     'app_session':    '{{template_config.cookies.app_session}}',
@@ -282,44 +290,6 @@ var j1 = (function () {
       j1['xhrDataState'] = {};
       j1['xhrDOMState']  = {};
 
-      // -----------------------------------------------------------------------
-      // final updates before browser page|tab
-      // see: https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing
-      // -----------------------------------------------------------------------
-      window.addEventListener('beforeunload', function (event) {
-        var cookie_names              = j1.getCookieNames();
-        var date                      = new Date();
-        var timestamp_now             = date.toISOString();
-        var user_state                = j1.readCookie(cookie_names.user_state);
-        var user_consent              = j1.readCookie(cookie_names.user_consent);
-        var ep_status;
-        var url;
-        var baseUrl;
-
-        // final update of the user state cookie
-        user_state.session_active     = false;
-        user_state.last_session_ts    = timestamp_now;
-
-        if (!user_consent.analysis || !user_consent.personalization) {
-          logger.debug('\n' + 'write to cookie : ' + cookie_names.user_state);
-
-          cookie_written = j1.writeCookie({
-            name:     cookie_names.user_state,
-            data:     user_state,
-            secure:   secure,
-            expires:  0
-          });
-        } else {
-          logger.debug('\n' + 'write to cookie : ' + cookie_names.user_state);
-          cookie_written = j1.writeCookie({
-            name:     cookie_names.user_state,
-            data:     user_state,
-            secure:   secure,
-            expires:  365
-          });
-        }
-      }); // END beforeunload
-
       // -----------------------------------------------------------------------
       // initialize|load user cookies
       // -----------------------------------------------------------------------
@@ -354,11 +324,7 @@ var j1 = (function () {
         }
       }
 
-      // initialize event handler for window/history/back on <ESC>
-      // -----------------------------------------------------------------------
-      window.onkeyup = function (event) {
-        if (event.keyCode == 27) window.history.back();
-      };
+      j1.registerEvents(logger);
 
       // detect middleware (mode 'app') and update user session cookie
       // -----------------------------------------------------------------------
@@ -988,12 +954,16 @@ var j1 = (function () {
             logText = '\n' + 'page finalized successfully';
             logger.info(logText);
 
-            // do a (smooth) scroll if all nav elements ready
+            // do a (smooth) scroll for static pages (if all nav elements ready)
             // -----------------------------------------------------------------
             var dependencies_met_navigator_finished = setInterval(function() {
-              if (j1.adapter.navigator.getState() == 'finished') {
+              // NOTE: dynamic pages scrolled at a growth ratio of 100 percent as well
+              if (j1.adapter.navigator.getState() == 'finished' && staticPage) {
                 // if a page requested contains an anchor element, do a smooth scroll
-                j1.scrollTo();
+                logger.debug('\n' + 'Scroll static page, growth ratio at 100 (percent)');
+                // NOTE: on some pages, the offset is NOT correct
+                var scrollOffset = j1.getScrollOffset();
+                j1.scrollTo(scrollOffset);
                 clearInterval(dependencies_met_navigator_finished);
               }
             }, 25);
@@ -1003,7 +973,6 @@ var j1 = (function () {
         // web mode
         // ---------------------------------------------------------------------
         setTimeout (function() {
-          // j1.setState('finished');
           logger.info('\n' + 'state: finished');
           logger.info('\n' + 'page initialization: finished');
 
@@ -1129,15 +1098,19 @@ var j1 = (function () {
           logText = '\n' + 'page finalized successfully';
           logger.info(logText);
 
-          // do a (smooth) scroll if all nav elements ready
+          // do a (smooth) scroll for static pages (if all nav elements ready)
           // -------------------------------------------------------------------
           var dependencies_met_navigator_finished = setInterval(function() {
-            if (j1.adapter.navigator.getState() == 'finished') {
+            if (j1.adapter.navigator.getState() == 'finished' && staticPage) {
+              logger.debug('\n' + 'Scroll static page, growth ratio at 100 (percent)');
               // if a page requested contains an anchor element, do a smooth scroll
-              j1.scrollTo();
+              // NOTE: on some pages, the offset is NOT correct
+              var scrollOffset = j1.getScrollOffset();
+              j1.scrollTo(scrollOffset);
               clearInterval(dependencies_met_navigator_finished);
             }
           }, 25);
+
         }, flickerTimeout);
       }
     },
@@ -1191,11 +1164,11 @@ var j1 = (function () {
 
     // -------------------------------------------------------------------------
     // getScrollOffset()
-    // Calculate offset for correct (smooth) scroll position
+    // Calculate offset for a correct (smooth) scroll position
     // -------------------------------------------------------------------------
     getScrollOffset: function () {
       var scrollOffset;
-      var offsetCorrection;
+      var offsetCorrection = 0;
 
       var $pagehead     = $('.attic');
       var $navbar       = $('nav.navbar');
@@ -1210,8 +1183,10 @@ var j1 = (function () {
 
       // Unclear why or what element cause the need of a correction
       // TODO: General revision of scrollOffset needed
+      // NOTE: Disabled for now
       //
-      offsetCorrection  = navbarType == 'fixed' ? 10 : -25;
+      // offsetCorrection  = navbarType == 'fixed' ? 10 : -25;
+
       scrollOffset      = navbarType == 'fixed'
                             ? -1*(n + a + f) + offsetCorrection
                             : -1*(n + a + f) + h + offsetCorrection;
@@ -1224,23 +1199,25 @@ var j1 = (function () {
     // Scrolls smooth to any anchor referenced by an page URL on
     // e.g. a page reload. Values e.g for delay are taken from
     // TOCCER module
+    // NOTE: crollTo() is triggered by 'onDocumentHeigthChange'
     // -------------------------------------------------------------------------
-    scrollTo: function () {
+    scrollTo: function (offset) {
       var logger          = log4javascript.getLogger('j1.scrollTo');
       var anchor          = window.location.href.split('#')[1];
       var anchor_id       = typeof anchor !== 'undefined' ? '#' + anchor : false;
       var scrollDuration  = {{toccer_options.scrollSmoothDuration}};
-      var scrollOffset    = j1.getScrollOffset();
+      var scrollOffset    = offset ; // j1.getScrollOffset();
       var isSlider        = false;
-      var selector;
+      var selector        = $(anchor_id);
 
-      if (typeof anchor === 'undefined') {
-        return false;
-      } else if (anchor.includes("googtrans")) {
+      // skip invalid anchors|selectors
+      //
+      if (typeof anchor === 'undefined' || anchor.includes('googtrans') || !$(selector).length) {
         return false;
       }
 
       // Check if the anchor is an slider/gallery element
+      //
       if (typeof anchor !== 'undefined') {
         isSlider = anchor.includes('slide');
       }
@@ -1249,6 +1226,7 @@ var j1 = (function () {
         // scroll only, if an anchor is given with an URL
         selector = $(anchor_id);
         if (selector.length) {
+          logger.info('\n' + 'scrollTo header: ' + anchor_id);
           j1.core.scrollSmooth.scroll(anchor_id, {
             duration:   scrollDuration,
             offset:     scrollOffset,
@@ -2251,6 +2229,7 @@ var j1 = (function () {
         window.location.href = 'about:blank';
       }
     },
+
     // -------------------------------------------------------------------------
     // goBack()
     // Redirect current page to last visited page (referrer)
@@ -2258,6 +2237,102 @@ var j1 = (function () {
     goBack: function () {
       // where visitor has come from
       window.location.href = document.referrer;
+    },
+
+    // -------------------------------------------------------------------------
+    // registerEvents()
+    // Redirect current page to last visited page (referrer)
+    // -------------------------------------------------------------------------
+    registerEvents: function (logger) {
+
+      // Add ResizeObserver to monitor the page height of dynamic pages
+      // see: https://stackoverflow.com/questions/14866775/detect-document-height-change
+      //
+      const observer = new ResizeObserver(entries => {
+        const scrollOffset = j1.getScrollOffset();
+        // Set autoScrollRatioThreshold if NOT specified
+        autoScrollRatioThreshold = autoScrollRatioThreshold ? autoScrollRatioThreshold : 100;
+        for (const entry of entries) {
+
+          // each entry is an instance of ResizeObserverEntry
+          pageHeight = Math.round(entry.contentRect.height);
+
+          // set base height on a page height <> 0
+          if (!pageBaseHeigth && pageHeight) {
+            pageBaseHeigth = pageHeight;
+          }
+
+          // calculation of the ratio a page that has lengthened
+          if (pageBaseHeigth) {
+            pageGrowthRatio = Math.round(pageHeight / pageBaseHeigth *100);
+          }
+
+          // log only if page grown above 'autoScrollRatioThreshold'
+          if (pageGrowthRatio > autoScrollRatioThreshold) {
+            logger.debug('\n' + 'Page growth ratio reached the threshold: ', pageGrowthRatio);
+          }
+
+          // identify a 'staticPage'
+          if (pageGrowthRatio < autoScrollRatioThreshold) {
+            staticPage = true;
+          } else {
+            // identify a page as 'dynamic' if autoScrollRatioThreshold reached
+            staticPage = false;
+          }
+
+          // dynamic page that has been increased in size above the threshold
+          if (pageGrowthRatio > autoScrollRatioThreshold) {
+            j1.scrollTo(scrollOffset);
+            logger.debug('\n' + 'Scroll dynamic page on growth ratio: ', pageGrowthRatio);
+          }
+        }
+      });
+      // monitor the page 'body'
+      observer.observe(document.querySelector('body'));
+
+      // -----------------------------------------------------------------------
+      // final updates before browser page|tab
+      // see: https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing
+      // -----------------------------------------------------------------------
+      window.addEventListener('beforeunload', function (event) {
+        var cookie_names  = j1.getCookieNames();
+        var date          = new Date();
+        var timestamp_now = date.toISOString();
+        var user_state    = j1.readCookie(cookie_names.user_state);
+        var user_consent  = j1.readCookie(cookie_names.user_consent);
+        var url           = new liteURL(window.location.href);
+        var secure        = (url.protocol.includes('https')) ? true : false;
+        var ep_status;
+        var url;
+        var baseUrl;
+
+        // final update of the user state cookie
+        user_state.session_active     = false;
+        user_state.last_session_ts    = timestamp_now;
+
+        if (!user_consent.analysis || !user_consent.personalization) {
+
+          cookie_written = j1.writeCookie({
+            name:     cookie_names.user_state,
+            data:     user_state,
+            secure:   secure,
+            expires:  0
+          });
+        } else {
+          cookie_written = j1.writeCookie({
+            name:     cookie_names.user_state,
+            data:     user_state,
+            secure:   secure,
+            expires:  365
+          });
+        }
+      }); // END beforeunload
+
+      // initialize event handler for window/history/back on <ESC>
+      //
+      window.onkeyup = function (event) {
+        if (event.keyCode == 27) window.history.back();
+      };
     }
   };
 }) (j1, window);

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

@@ -503,6 +503,7 @@ j1.adapter.nbinteract = (function (j1, window) {
                       if (nbiButtonState) {
                         // button NOT removed
                         logger.warn('NBI initialialization failed on textbook: {{textbook_id}}');
+                        spinner.stop();
                         // hide the info modal
                         $(nbiModalSuccessID).modal('hide');
 

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

@@ -93,8 +93,16 @@ j1.adapter.rangeSlider = (function (j1, window) {
   // Helper functions
   // ---------------------------------------------------------------------------
 
-  function insertAfter(newNode, referenceNode) {
-      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  function prepend(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode);
+  }
+
+  function append(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  }
+
+  function insert(newNode, referenceNode) {
+    referenceNode.appendChild(newNode);
   }
 
   // ---------------------------------------------------------------------------
@@ -133,7 +141,7 @@ j1.adapter.rangeSlider = (function (j1, window) {
         if (j1.getState() == 'finished') {
 
           logger.info('\n' + 'module is being initialized');
-          
+
           // initialize state flag
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());
@@ -163,8 +171,10 @@ j1.adapter.rangeSlider = (function (j1, window) {
                 {% assign format_decimals   = range_slider_options.options.format.decimals %}
                 {% assign cbOnUpdate        = range_slider_options.options.cbOnUpdate %}
 
+
                 {% comment %} overload defaults by slider options
-                -------------------------------------------------------------------- {% endcomment %}
+                ---------------------------------------------------------------- {% endcomment %}
+                {% if item.slider.options.title %}            {% assign title           = item.slider.options.title %}            {% endif %}
                 {% if item.slider.options.label %}            {% assign label           = item.slider.options.label %}            {% endif %}
                 {% if item.slider.options.start %}            {% assign start           = item.slider.options.start %}            {% endif %}
                 {% if item.slider.options.connect %}          {% assign connect         = item.slider.options.connect %}          {% endif %}
@@ -176,7 +186,8 @@ j1.adapter.rangeSlider = (function (j1, window) {
                 {% if item.slider.options.cbOnUpdate %}       {% assign cbOnUpdate      = item.slider.options.cbOnUpdate %}       {% endif %}
 
                 elms.forEach(function (elm) {
-                  var id = elm.id;
+                  var id      = elm.id;
+                  var parent  = document.getElementById(id);
 
                   if (id === '{{slider_id}}') {
                     // processing rangeSlider: {{slider_id}}
@@ -198,11 +209,17 @@ j1.adapter.rangeSlider = (function (j1, window) {
                        })
                     });
 
-                    var el = document.createElement("label");
-                    el.classList.add('range-slider-label');
-                    el.innerHTML = '{{label}}';
-                    var div = document.getElementById(id);
-                    insertAfter(el, div);
+                    if ('{{title}}'.length) {
+                      var title = document.createElement('div');
+                      title.classList.add('range-slider-title');
+                      title.innerHTML = '{{title}}';
+                      prepend(title, parent);
+                    }
+
+                    var label = document.createElement('label');
+                    label.classList.add('range-slider-label');
+                    label.innerHTML = '{{label}}';
+                    insert(label, parent);
 
                     slider_{{slider_id}}.noUiSlider.on('update', function (values, handle) {
                       var logger = log4javascript.getLogger('j1.adapter.rangeSlider.cbOnUpdate');