j1-template 2020.0.10 → 2020.0.15

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

@@ -1,5 +1,5 @@
 ---
-regenerate:                             true
+regenerate: true
 ---
 
 {% capture cache %}
@@ -17,8 +17,6 @@ regenerate:                             true
  # J1 Template is licensed under the MIT License.
  # For details, see https://jekyll.one
  # -----------------------------------------------------------------------------
- # TODO: jadams, 2019-01-20: Isolate drawer, switch from BME code
- # -----------------------------------------------------------------------------
  # Test data:
  #  {{ liquid_var | debug }}
  # -----------------------------------------------------------------------------
@@ -76,6 +74,11 @@ regenerate:                             true
 
 {% assign hideOnReload            = modules.themer_options.hideOnReload %}
 
+{% assign production = false %}
+{% if environment == 'prod' or environment == 'production' %}
+  {% assign production = true %}
+{% endif %}
+
 /*
  # -----------------------------------------------------------------------------
  # ~/assets/themes/j1/adapter/js/j1_template.js
@@ -101,6 +104,8 @@ regenerate:                             true
 // ESLint shimming
 // -----------------------------------------------------------------------------
 /* eslint indent: "off"                                                       */
+/* eslint quotes: "off"                                                       */
+/* eslint semi: "off"                                                         */
 // -----------------------------------------------------------------------------
 'use strict';
 
@@ -222,7 +227,8 @@ var j1 = (function () {
   return {
 
     // -------------------------------------------------------------------------
-    // Initializer
+    // init()
+    // initializer
     // -------------------------------------------------------------------------
     init: function (options) {
 
@@ -230,11 +236,16 @@ var j1 = (function () {
       // global var (function)
       // -----------------------------------------------------------------------
       var logger        = log4javascript.getLogger('j1.init');
-      var url           = new parseURL(window.location.href);
+      var url           = new liteURL(window.location.href);
       var baseUrl       = url.origin;
-      var epoch         = Math.floor(Date.now()/1000);
-      var timestamp_now = moment.unix(epoch).format('YYYY-MM-DD HH:mm:ss');
+//    var epoch         = Math.floor(Date.now()/1000);
+//    var timestamp_now = moment.unix(epoch).format('YYYY-MM-DD HH:mm:ss');
+      var date          = new Date();
+      var timestamp_now = date.toISOString();
       var curr_state    = 'started';
+      // var date          = new Date();
+      // var my_timestamp  = date.toISOString();
+
 
       // -----------------------------------------------------------------------
       // options loader
@@ -247,46 +258,27 @@ var j1 = (function () {
         options
       );
 
-      // catch senseless detect url 404 errors (middleware /status)
-      // See: https://stackoverflow.com/questions/4687235/jquery-get-or-post-to-catch-page-load-error-eg-404
-      $.ajaxSetup({
-        // called on `$.get()`, `$.post()`, `$.ajax()`
-        statusCode : {
-          // raised on response status code 404
-          404 : function (jqxhr, textStatus, errorThrown) {
-            var interval_count = 0;
-            var max_count      = 10;
-            var dependencies_met_logger = setInterval(function() {
-              interval_count += 1;
-              if ( j1.adapter.logger.getState() == 'finished' ) {
-                var logger = log4javascript.getLogger('j1.init');
-                clearInterval(dependencies_met_logger);
-                if(jqxhr.responseText.indexOf('GET /status') > -1) {
-                  logger.info('no middleware found on url /status: ignored');
-                  logger.info('continue on mode: web');
-                }
-                if (interval_count > max_count) {
-                  logger.warn('dependency check failed for module: logger');
-                  logger.warn('continue on initializer unchecked');
-                  j1.adapter.navigator.init();
-                }
-              }
-            }, 25);
-          }
-        }
-       });
+      // -----------------------------------------------------------------------
+      // status settings
+      // save status into the adapter object for (later) global access
+      // -----------------------------------------------------------------------
+      j1['xhrDataState'] = {};
+      j1['xhrDOMState']  = {};
 
       // -----------------------------------------------------------------------
-      // Session ON_CLOSE event
-      // Update user STATE cookie|Remove user SESSION cookie on window CLOSE
-      // See: https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing
+      // session ON_CLOSE event
+      // wrapup if ALL browser windows get closed. Update user STATE
+      // cookie on window CLOSE.
+      // see: https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing
       // -----------------------------------------------------------------------
       window.addEventListener('beforeunload', function (event) {
         var cookie_names              = j1.getCookieNames();
         var cookie_user_state_name    = cookie_names.user_state;
         var cookie_user_session_name  = cookie_names.user_session;
-        var epoch                     = Math.floor(Date.now()/1000);
-        var timestamp_now             = moment.unix(epoch).format('YYYY-MM-DD HH:mm:ss');
+//      var epoch                     = Math.floor(Date.now()/1000);
+//      var timestamp_now             = moment.unix(epoch).format('YYYY-MM-DD HH:mm:ss');
+        var date                      = new Date();
+        var timestamp_now             = date.toISOString();
         var user_state                = j1.readCookie(cookie_user_state_name);
         var ep_status;
         var url;
@@ -303,7 +295,7 @@ var j1 = (function () {
       });
 
       // -----------------------------------------------------------------------
-      // Initialize|Load (existing) user cookies
+      // initialize|load (existing) user cookies
       // -----------------------------------------------------------------------
       user_session.created    = timestamp_now;
       user_session.timestamp  = timestamp_now;
@@ -330,17 +322,20 @@ var j1 = (function () {
         expires:  365
       });
 
-      // Detect middleware (mode 'app') and update user session cookie
+      // detect middleware (mode 'app') and update user session cookie
       // -----------------------------------------------------------------------
       // if (user_session.mode === 'na' || user_session.mode === 'app') {
       if (user_session.mode === 'na') {
-        var url           = new parseURL(window.location.href);
+        var url           = new liteURL(window.location.href);
         var ep_status     = baseUrl + '/status' + '?page=' + window.location.pathname;
         var detectTimeout =  50;
 
         baseUrl       = url.origin;
 
-        $.when ($.ajax(ep_status))
+        // see: https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done
+        $.when (
+          $.ajax(ep_status)
+        )
         .then(function(data) {
           var logger                  = log4javascript.getLogger('j1.init');
           user_session                = j1.readCookie(cookie_names.user_session);
@@ -378,153 +373,80 @@ var j1 = (function () {
             logger.info('state: ' + j1.getState());
           }, detectTimeout);
         });
-      } else {
+      } else { // app mode
         state = 'started';
         logger.info('state: ' + state);
         logger.info('page is being initialized');
       }
 
-      {% comment %} Deferred data loads
-      See: https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done
-      Load J1 Template data objects 'asychronously'
-      -------------------------------------------------------------------------- {% endcomment %}
+      // jadams: for testing only
+      // display page
+      // $('#no_flicker').css('display', 'block');
 
-      // -----------------------------------------------------------------------
-      // data loader (should be rewitten to xhrData() )
-      // -----------------------------------------------------------------------
-      $.when (
-        j1.getColorData(colors_data_path),
-        j1.getFontSizeData(font_size_data_path),
-        j1.getMessageCatalog(message_catalog_data_path))
-      .done (function(colorData, fontSizes, messageCatalog, runtime) {
-        j1.colors     	= colorData[0];
-        j1.fonts        = fontSizes[0];
-
-        // set logger for callback|anonymous
-        //
-        var logger = log4javascript.getLogger('j1.init');
-
-        logText = j1.getMessage('info', 'getState', 'text');
-        logText = logText + j1.getMessage('info', 'getState', 'data_objects');
-        logText = logText + j1.getMessage('info', 'getState', 'finished');
-        j1.logger('j1.init', 'info', logText);
-
-        logText = j1.getMessage('info', 'setState', 'text');
-        logText = logText + j1.getMessage('info', 'setState', 'started');
-        j1.logger('j1.init', 'info', logText);
-        executeFunctionByName('j1.setState', window, state);
-
-        // set logger for callback|anonymous
-        var logger = log4javascript.getLogger('j1.init');
-
-        if ( settings.scrollbar === 'false'  ) {
-          $('body').addClass('hide-scrollbar');
-          $('html').addClass('hide-scrollbar-moz');
-        }
+      state = 'started';
+      logger.info('state: ' + state);
+      logger.info('page is being initialized');
 
-        logger.info('read user state from cookie');
-        user_session = j1.readCookie(cookie_names.user_session);
+      if ( settings.scrollbar === 'false'  ) {
+        $('body').addClass('hide-scrollbar');
+        $('html').addClass('hide-scrollbar-moz');
+      }
 
-        // process|update UserState
-        //
-        themeName                 = user_session.theme_name;
-        themeCss                  = user_session.theme_css;
-        themeExtensionCss         = user_session.theme_extension_css;
-
-        // save last page access
-        // See: https://stackoverflow.com/questions/3528324/how-to-get-the-previous-url-in-javascript
-        // See: https://developer.mozilla.org/de/docs/Web/API/Window/history
-        //
-        user_session.timestamp      = timestamp_now;
-        referrer                    = new parseURL(document.referrer);
-        current_page                = window.location.pathname;
-        user_session.requested_page = current_page;
-        user_session.previous_page  = referrer.search === '' ?
-                                      (referrer.pathname === '' ? current_page : referrer.pathname) :
-                                      (user_session.previous_page === '' || user_session.previous_page === 'na'
-                                        ? '/'
-                                        : user_session.previous_page
-                                      );
-
-        // calculate last 'pager' if any
-        //
-        if (rePager.test(user_session.previous_page)) {
-          last_pager                = user_session.previous_page;
-          user_session.last_pager   = last_pager;
-        } else {
-          last_pager                = user_session.last_pager;
-        }
+      logger.info('read user state from cookie');
+      user_session = j1.readCookie(cookie_names.user_session);
 
-        logger.info('update user session cookie');
-        j1.writeCookie({
-          name: cookie_names.user_session,
-          data: user_session
-        });
+      // process|update user state cookie
+      themeName                 = user_session.theme_name;
+      themeCss                  = user_session.theme_css;
+      themeExtensionCss         = user_session.theme_extension_css;
 
-        // ---------------------------------------------------------------------
-        // Initialize page resources for global modules (sequential asynchronous)
-        // (should be rewitten to xhrData() )
-        // ---------------------------------------------------------------------
-        $.when (
-          j1.initBanner(settings),
-          j1.initPanel(settings),
-          j1.initFooter(settings) )
-        .then (function (initBanner_response, initPanel_response, initFooter_response) {
-          var logger  = log4javascript.getLogger('j1.init');
-
-          // Wait for LAST thenable (footer) in chain finishes
-          var footerLoaded = setInterval(function() {
-            if ( j1.getState() == 'footer_loaded') {
-              // clear interval checking
-              clearInterval(footerLoaded);
-              logger.info('loading data completed');
-
-              // Continue to run initializers
-              //
-              state       = j1.getMessage('info', 'setState', 'running');
-              logText     = j1.getMessage('info', 'setState', 'text');
-              logText     = logText + j1.getMessage('info', 'setState', 'running');
-              j1.logger('j1.init', 'info', logText);
-
-              user_session.timestamp = timestamp_now;
-              j1.writeCookie({
-                name: cookie_names.user_session,
-                data: user_session
-              });
+      // save last page access
+      // see: https://stackoverflow.com/questions/3528324/how-to-get-the-previous-url-in-javascript
+      // see: https://developer.mozilla.org/de/docs/Web/API/Window/history
+      //
+      user_session.timestamp      = timestamp_now;
+      referrer                    = new liteURL(document.referrer);
+      current_page                = window.location.pathname;
+      user_session.requested_page = current_page;
+      user_session.previous_page  = referrer.search === '' ?
+                                    (referrer.pathname === '' ? current_page : referrer.pathname) :
+                                    (user_session.previous_page === '' || user_session.previous_page === 'na'
+                                      ? '/'
+                                      : user_session.previous_page
+                                    );
+
+      // calculate last 'pager' if any
+      if (rePager.test(user_session.previous_page)) {
+        last_pager                = user_session.previous_page;
+        user_session.last_pager   = last_pager;
+      } else {
+        last_pager                = user_session.last_pager;
+      }
 
-              // ---------------------------------------------------------------
-              // Finalize|Display page (sequential asynchronous)
-              // NOTE:
-              //  jadams 2019-01-20: for MDB, enabled only drawer, switch
-              //  and ripples
-              // ---------------------------------------------------------------
-              $.when (
-                j1.initMDB(settings),
-                j1.initClipboard(settings))
-              .then (function () {
-                j1.displayPage();
-              })
-              .catch(function(error) {
-                var logger  = log4javascript.getLogger('j1.init');
-                json_data   = JSON.stringify(error, undefined, 2);
-                logText     = 'deferred: ' + json_data;
-                logger.error(logText);
-              });
-            }
-          }, 25); // END 'footerLoaded'
-        }) // END load global modules
-        .catch(function(error) {
-          var logger  = log4javascript.getLogger('j1.init');
-          json_data   = JSON.stringify(error, undefined, 2);
-          logText     = 'deferred: ' + json_data;
-          logger.error(logText);
-        });
-      }) // END load global data objects
-      .catch(function(error) {
-        var logger  = log4javascript.getLogger('j1.init');
-        json_data   = JSON.stringify(error, undefined, 2);
-        logText     = 'deferred: ' + json_data;
-        logger.error(logText);
+      // jadams: for testing only
+      // display page
+      //$('#no_flicker').css('display', 'block');
+
+      logger.info('update user session cookie');
+      j1.writeCookie({
+        name: cookie_names.user_session,
+        data: user_session
+      });
+
+      // initialize page resources for blocks
+      // (asynchronous, should be rewitten to xhrData)
+      j1.initBanner(settings);
+      j1.initPanel(settings);
+      j1.initFooter(settings);
+
+      state = 'running';
+      logger.info('state: ' + state);
+      logger.info(logText);
+
+      user_session.timestamp = timestamp_now;
+      j1.writeCookie({
+        name: cookie_names.user_session,
+        data: user_session
       });
 
       // -----------------------------------------------------------------------
@@ -532,17 +454,21 @@ var j1 = (function () {
       // -----------------------------------------------------------------------
       j1.core.bsFormClearButton();
 
+      // finalize and display page
+      j1.displayPage();
+
     }, // END init
 
     // -------------------------------------------------------------------------
-    // initBanner
+    // initBanner()
     // AJAX fetcher to load and place all banner used for a page
     // -------------------------------------------------------------------------
     initBanner: function (options) {
-      var logger        = log4javascript.getLogger('j1.initBanner');
-      var banner        = [];
-      var bannerOptions = [];
-      var mod           = 'j1';
+      var logger            = log4javascript.getLogger('j1.initBanner');
+      var banner            = [];
+      var bannerOptions     = [];
+      var mod               = 'j1';
+      var logText;
 
       {% comment %}
       Closure to pass additional data (e.g. #banner_id) to AJAX load callback
@@ -551,12 +477,19 @@ var j1 = (function () {
       var cb_load_closure = function(banner_id) {
         return function ( responseTxt, statusTxt, xhr ) {
           if ( statusTxt ==  'success' ) {
+            var logger = log4javascript.getLogger('j1.xhrData');
             logText = 'loading banner completed on id: ' +banner_id;
+            $(banner_id).addClass("mutated");
             logger.info(logText);
+            j1.setXhrDataState(banner_id, statusTxt);
+            j1.setXhrDomState(banner_id, statusTxt);
+            logger.info('XHR data loaded in the DOM: ' + banner_id);
           }
           if ( statusTxt == 'error' ) {
             logText = 'loading banner failed on id: ' +banner_id+ ', error: ' + xhr.status + ': ' + xhr.statusText;
             logger.error(logText);
+            j1.setXhrDataState(banner_id, statusTxt);
+            j1.setXhrDomState(banner_id, statusTxt);
             // Set|Log status
             state = 'failed';
             logger.error('state: ' + state);
@@ -584,30 +517,14 @@ var j1 = (function () {
                   {% assign key = item[0] %}
                   {% assign value = item[1] %}
 
-                  {% if key and debug %} item:value  {{key}}:{{value}}  {% endif %}
+                  {% if key and debug %} item:value  {{key}}:{{value}} {% endif %}
 
                   {% if key == 'id' %}                 {% assign id                 = value %} {% endif %}
                   {% if key == 'enabled' %}            {% assign enabled            = value %} {% endif %}
-                  {% if key == 'background_color_1' %} {% assign background_color_1 = value %} {% endif %}
-                  {% if key == 'background_color_2' %} {% assign background_color_2 = value %} {% endif %}
                 {% endfor %}
             {% endfor %}
 
             {% if id and enabled %}
-            {% comment %} Add CSS styles for current banner to section <HEAD>
-            -------------------------------------------------------------------- {% endcomment %}
-            {% if background_color_1 and background_color_2 %}
-            var banner_backround_style = '';
-            // Initialze banner background gradient/colors
-            banner_backround_style += '<style> .{{id}}-background { ';
-            banner_backround_style += 'background-image: -webkit-gradient(linear, left top, left bottom, from( ' +j1.setColorData('{{background_color_1}}')+ ' ), to(  ' +j1.setColorData('{{background_color_2}}')+ ' ));';
-            banner_backround_style += 'background-image: -webkit-linear-gradient(top, ' +j1.setColorData('{{background_color_1}}')+ ' 0%, ' +j1.setColorData('{{background_color_2}}')+ ' 100%);';
-            banner_backround_style += 'background-image: -o-linear-gradient(top, ' +j1.setColorData('{{background_color_1}}')+ ' 0%, ' +j1.setColorData('{{background_color_2}}')+ ' 100%);';
-            banner_backround_style += 'background-image: linear-gradient(to bottom, ' +j1.setColorData('{{background_color_1}}')+' 0%, ' +j1.setColorData('{{background_color_2}}')+ ' 100%);';
-            banner_backround_style += 'filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="' +j1.setColorData('{{background_color_1}}')+ '", endColorstr="' +j1.setColorData('{{background_color_2}}')+ '", GradientType=0);';
-            banner_backround_style += '} </style>';
-            $('head').append( banner_backround_style );
-            {% endif %}
 
             {% comment %} Register current banner
             -------------------------------------------------------------------- {% endcomment %}
@@ -620,8 +537,6 @@ var j1 = (function () {
           ---------------------------------------------------------------------- {% endcomment %}
           {% assign id                  = nil %}
           {% assign enabled             = nil %}
-          {% assign background_color_1  = nil %}
-          {% assign background_color_2  = nil %}
           {% assign banner_config       = nil %}
 
         {% endfor %}  {% comment %} END banner_config {% endcomment %}
@@ -641,39 +556,51 @@ var j1 = (function () {
             logText = 'loading banner on id: ' +banner[i];
             logger.info(logText);
             var banner_data_path = '{{banner_data_path}} ' + id + ' > *';
-            selector.load( banner_data_path, cb_load_closure( id ) );
+            selector.load(banner_data_path, cb_load_closure(id));
           }
-        }
+        } // END for
       }  else {
         logText = 'no banner found in site';
         logger.info(logText);
+        return false;
       }
-
       return true;
     }, // END initBanner
 
     // -------------------------------------------------------------------------
-    // initPanel
+    // initPanel()
     // AJAX fetcher to load and place all panel used for a page
     // -------------------------------------------------------------------------
     // ToDo:
     initPanel: function ( options ) {
-      var logger  = log4javascript.getLogger('j1.initPanel');
-      var panel   = [];
-      var mod     = 'j1';
+      var logger            = log4javascript.getLogger('j1.initPanel');
+      var panel             = [];
+      var mod               = 'j1';
+      var logText;
 
       {% comment %} Closure to pass additional data (e.g. panel_id) to AJAX load callback
       See: http://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback
       -------------------------------------------------------------------------- {% endcomment %}
+
+      {% comment %} NOTE
+      strategy for MutationObserver callbacks to monitor DOM changes
+      needs to be checked if multiple containers are chenaged in a row
+      -------------------------------------------------------------------------- {% endcomment %}
       var cb_load_closure = function(panel_id) {
         return function ( responseTxt, statusTxt, xhr ) {
+          var logger = log4javascript.getLogger('j1.xhrData');
           if ( statusTxt == 'success' ) {
             logText = 'loading panel completed on id: ' +panel_id;
             logger.info(logText);
+            j1.setXhrDataState(panel_id, statusTxt);
+            j1.setXhrDomState(panel_id, statusTxt);
+            logger.info('XHR data loaded in the DOM: ' + panel_id);
           }
           if ( statusTxt == 'error' ) {
             logText = 'loading panel failed on id: ' +panel_id+ ', error ' + xhr.status + ': ' + xhr.statusText;
             logger.error(logText);
+            j1.setXhrDataState(panel_id, statusTxt);
+            j1.setXhrDomState(panel_id, statusTxt);
             // Set|Log status
             state = 'Error';
             logger.error('state: ' + state);
@@ -724,7 +651,7 @@ var j1 = (function () {
         {% endfor %}  {% comment %} END panel_config {% endcomment %}
       {% endfor %}  {% comment %} END panel_config_settings {% endcomment %}
 
-      if ( panel.length ) {
+      if (panel.length) {
         for (var i in panel) {
           var id = '#' + panel[i];
           var selector = $(id);
@@ -732,37 +659,44 @@ var j1 = (function () {
             logText = 'loading panel on id: ' +panel[i];
             logger.info(logText);
             var panel_data_path = '{{panel_data_path}} ' + id + ' > *';
-            selector.load( panel_data_path, cb_load_closure( id ) );
+            selector.load(panel_data_path, cb_load_closure(id));
           }
-        }
+        } // END for
       } else {
         logText = 'no panel found in site';
         logger.info(logText);
+        return false;
       }
-
       return true;
     }, // END initPanel
 
     // -------------------------------------------------------------------------
-    // initFooter
+    // initFooter()
     // AJAX fetcher to load and place the footer used for a page
     // -------------------------------------------------------------------------
     initFooter: function ( options ) {
-      var logger = log4javascript.getLogger('j1.initFooter');
-      var mod    = 'j1';
+      var logger            = log4javascript.getLogger('j1.initFooter');
+      var mod               = 'j1';
+      var logText;
 
-      logText = 'initialization started';
+      logText = 'loading footer started';
       logger.info(logText);
 
       var cb_load_closure = function(footer_id) {
         return function ( responseTxt, statusTxt, xhr ) {
+          var logger = log4javascript.getLogger('j1.xhrData');
           if ( statusTxt ==  'success' ) {
             logText = 'footer loaded successfully on id: ' + footer_id;
             logger.info(logText);
+            $(footer_id).addClass("mutated");
+            j1.setXhrDataState(footer_id, statusTxt);
+            j1.setXhrDomState(footer_id, statusTxt);
+            logger.info('XHR data loaded in the DOM: ' + footer_id);
 
-            state = 'footer_loaded';
-            logger.info('set state for module ' + mod + ': ' + state);
-            executeFunctionByName(mod + '.setState', window, state);
+            // jadams, 2020-07-21: intermediate state DISABLED
+            // state = 'footer_loaded';
+            // logger.info('set state for module ' + mod + ': ' + state);
+            // executeFunctionByName(mod + '.setState', window, state);
 
             logText = 'initialization finished';
             logger.info(logText);
@@ -770,6 +704,9 @@ var j1 = (function () {
           if ( statusTxt == 'error' ) {
             logText = 'loading footer failed on id: ' +footer_id+ ', error ' + xhr.status + ': ' + xhr.statusText;
             logger.error(logText);
+            j1.setXhrDataState(footer_id, statusTxt);
+            j1.setXhrDomState(footer_id, statusTxt);
+
             // Set|Log status
             state = 'failed';
             logger.error('state: ' + state);
@@ -783,73 +720,20 @@ var j1 = (function () {
       var selector = $(id);
       if ( selector.length ) {
         var footer_data_path = '{{footer_data_path}}';
-        // var footer_data_path = '{{footer_data_path}}' + id + ' > *';
-        selector.load( footer_data_path, cb_load_closure( id ) );
+        selector.load(footer_data_path, cb_load_closure(id));
+      } else {
+        logText = 'data not loaded';
+        logger.warn(logText);
+        j1.setXhrDataState(id, 'not loaded');
+        j1.setXhrDomState(id, 'pending');
+        return false;
       }
-
       return true;
     }, // END initFooter
 
-    // -------------------------------------------------------------------------
-    // initClipboard
-    // Create copy-to-clipboard for all pages
-    // -------------------------------------------------------------------------
-    initClipboard: function ( options ) {
-      var logger = log4javascript.getLogger('j1.initClipboard');
-
-      logText = 'initialization started';
-      logger.info(logText);
-
-      // insert copy to clipboard button before all elements having a
-      // class of ".highlight" assigned to (e.g. Asciidoc source blocks)
-      $('.highlight').each(function () {
-        // Check if no clipboard should be applied
-        var isNoClip = $(this).closest('.noclip');
-        if ( isNoClip.length == 0) {
-          var btnHtml = '<div class="j1-clipboard"><span class="btn-clipboard j1-tooltip" data-toggle="tooltip" data-placement="left" title="Copy to clipboard">Copy</span></div>';
-          var bumms = $(this).closest('.noclip');
-          $(this).before(btnHtml);
-          $('.btn-clipboard').tooltip();
-        }
-      });
-      var clipboard = new Clipboard( '.btn-clipboard', {
-        target: function target(trigger) {
-          return trigger.parentNode.nextElementSibling;
-        }
-      });
-
-      // Manage clipboard events
-      clipboard.on('success', function (e) {
-        $(e.trigger).attr('title', 'copied!').tooltip('_fixTitle').tooltip('show').attr('title', 'Copy to clipboard').tooltip('_fixTitle');
-        var logger = log4javascript.getLogger('j1.initClipboard');
-        var logText = 'initialization copy-to-clipboard sucessfull';
-        logger.debug(logText);
-        /* Cleanup clipped data for trailing numbers */
-        var splitted = e.text.split('\n');
-        var concat;
-        var i;
-        for (i=0; i<splitted.length; i++) {
-          concat += splitted[i].replace(/^\s+\d+/, '');
-        }
-        e.clearSelection();
-      });
-      clipboard.on('error', function (e) {
-        var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'press \u2318 to copy' : 'press ctrl-c to copy';
-        logger = log4javascript.getLogger('j1.initClipboard');
-        logText = 'initialization copy-to-clipboard failed, fallback used.';
-        logger.warn(logText);
-        $(e.trigger).attr('title', fallbackMsg).tooltip('_fixTitle').tooltip('show').attr('title', 'copy to clipboard').tooltip('_fixTitle');
-      });
-
-      logText = 'initialization finished';
-      logger.info(logText);
-
-      return true;
-    }, // END initClipboard
-
     // -------------------------------------------------------------------------
     // displayPage
-    // Show the page after timeout of {{hideOnReload}} ms
+    // show the page after timeout of {{flickerTimeout}} ms
     // -------------------------------------------------------------------------
     // NOTE:
     //  jadams, 2019-08-21: for unknown reason, the user state data
@@ -860,24 +744,25 @@ var j1 = (function () {
     displayPage: function (options) {
       var logger              = log4javascript.getLogger('j1.displayPage');
       var flickerTimeout      = {{template_config.flicker_timeout}};
-      var url                 = new parseURL(window.location.href);
+      var url                 = new liteURL(window.location.href);
       var baseUrl             = url.origin;
       var ep_status           = baseUrl + '/status' + '?page=' + window.location.pathname;
       var user_session        = j1.readCookie(cookie_names.user_session);
       var user_state          = j1.readCookie(cookie_names.user_state);
-      var current_url         = new parseURL(window.location.href);
+      var current_url         = new liteURL(window.location.href);
       var providerPermissions = {};
       var provider;
       var previous_page;
       var appDetected;
       var categoryAllowed;
 
-
       logger.info('finalize page');
       j1.setCss();
 
-      if (j1.appDetected()) {
-        // APP mode
+      logText= 'loading page partials: started';
+      logger.info(logText);
+
+      if (j1.appDetected()) { // app mode
         logger.info('mode detected: app');
 
         $.when ($.ajax(ep_status))
@@ -895,13 +780,14 @@ var j1 = (function () {
           providerPermissions = user_session.provider_permissions;
           categoryAllowed     = providerPermissions.includes(user_session.page_permission);
 
-          // Make sure that protected pages are ALWAYS checked for permissions
+          // check protected pages (applies for APP only)
+          // make sure that protected pages are ALWAYS checked for permissions
           // -------------------------------------------------------------------
           if (
             j1.authEnabled() &&
             user_session.page_permission !== 'public' &&
-            categoryAllowed === false)
-          {
+            categoryAllowed === false
+          ){
             // redirect to middleware|page_authentication
             if (data.authenticated === 'true') {
               var ep_post_authentication = baseUrl + '/post_authentication';
@@ -913,20 +799,21 @@ var j1 = (function () {
             }
           } // END check protected pages
 
+          // show the page delayed
           setTimeout (function() {
-            // Display page
+            // display page
             $('#no_flicker').css('display', 'block');
 
-            // show|hide cookie icon
+            // show|hide cookie icon (should MOVED to Cookiebar ???)
             if (user_state.cookies_accepted === 'accepted') {
-              // show cookie icon
+              // Display cookie icon
               logText = 'show cookie icon';
               logger.info(logText);
               $('#quickLinksCookieButton').css('display', 'block');
             } else {
               logText = 'hide cookie icon';
               logger.info(logText);
-              // hide cookie icon
+              // Display cookie icon
               $('#quickLinksCookieButton').css('display', 'none');
             }
 
@@ -957,7 +844,7 @@ var j1 = (function () {
               $('#quickLinksSignInOutButton').css('display', 'block');
             }
 
-            // If the page requested contains an anchor element,
+            // if the page requested contains an anchor element,
             // do a smooth scroll to
             j1.scrollTo();
 
@@ -970,7 +857,7 @@ var j1 = (function () {
               logger.info(logText);
             }
 
-            // update sidebar for changed consent|theme data
+            // update sidebar for changed theme data
             logger.info('update sidebar');
             user_state        = j1.readCookie(cookie_names.user_state);
             current_user_data = j1.mergeData(user_session, user_state);
@@ -984,99 +871,85 @@ var j1 = (function () {
             logger.info(logText);
 
           }, flickerTimeout);
-        });
-        // END APP mode
-      } else {
-        // web mode
+        }); // END APP mode
+      } else { // web mode
+        // show the page delayed
         setTimeout (function() {
-          // Display page
+          j1.setState('finished');
+          logger.info('state: finished');
+          logger.info('page initialization: finished');
+
+          // display page
           $('#no_flicker').css('display', 'block');
-            logger.info('mode detected: web');
-            logger.info('hide signin icon');
-            $('#quickLinksSignInOutButton').css('display', 'none');
+          logger.info('mode detected: web');
+          logger.info('hide signin icon');
+          $('#quickLinksSignInOutButton').css('display', 'none');
 
-            user_session.current_page = current_url.pathname;
-            j1.writeCookie({
+          user_session.current_page = current_url.pathname;
+          j1.writeCookie({
               name:     cookie_names.user_session,
               data:     user_session
-            });
-
-            // show|hide translator icon
-            if (translation_enabled) {
-              logger.info('translator detected: google');
-              logger.info('initialize language selector');
-              $('.goog-te-combo').addClass('form-control');
-            }
-
-            // show|hide cookie icon
-            if (user_state.cookies_accepted === 'accepted') {
-              // Display cookie icon
-              logText = 'show cookie icon';
-              logger.info(logText);
-              $('#quickLinksCookieButton').css('display', 'block');
-            } else {
-              logText = 'hide cookie icon';
-              logger.info(logText);
-              // Display cookie icon
-              $('#quickLinksCookieButton').css('display', 'none');
-            }
-
-            // If the page requested contains an anchor element,
-            // do a smooth scroll to
-            j1.scrollTo();
-
-            if (user_session.previous_page !== user_session.current_page) {
-              logText = 'page change detected';
-              logger.info(logText);
-              logText = 'previous page: ' + user_session.previous_page;
-              logger.info(logText);
-              logText = 'current page: ' + user_session.current_page;
-              logger.info(logText);
-            }
+          });
 
-            // update sidebar for changed consent|theme data
-            logger.info('update sidebar');
-            user_state        = j1.readCookie(cookie_names.user_state);
-            current_user_data = j1.mergeData(user_session, user_state);
-            j1.core.navigator.updateSidebar(current_user_data);
+          // show|hide translator icon
+          if (translation_enabled) {
+            logger.info('translator detected: google');
+            logger.info('initialize language selector');
+            $('.goog-te-combo').addClass('form-control');
+          }
 
-            // Set|Log status
-            state = 'finished';
-            logText = 'state: ' + state;
+          // show|hide cookie icon (should MOVED to Cookiebar ???)
+          if (user_state.cookies_accepted === 'accepted') {
+            // Display cookie icon
+            logText = 'show cookie icon';
             logger.info(logText);
-            logText = 'page finalized successfully';
+            $('#quickLinksCookieButton').css('display', 'block');
+          } else {
+            logText = 'hide cookie icon';
             logger.info(logText);
+            // Display cookie icon
+            $('#quickLinksCookieButton').css('display', 'none');
+          }
 
-         }, flickerTimeout);
-      } // END WEB mode
-    }, // END displayPage
+          // If the page requested contains an anchor element,
+          // do a smooth scroll to
+          j1.scrollTo();
 
-    // -------------------------------------------------------------------------
-    // Initialize BS Material Design
-    // -------------------------------------------------------------------------
-    // ToDo:
-    initMDB: function (options) {
-      var logger;
+          if (user_session.previous_page !== user_session.current_page) {
+            logText = 'page change detected';
+            logger.info(logText);
+            logText = 'previous page: ' + user_session.previous_page;
+            logger.info(logText);
+            logText = 'current page: ' + user_session.current_page;
+            logger.info(logText);
+          }
 
-      logger  = log4javascript.getLogger('j1.initMDB');
-      logText = 'material design is being started';
-      logger.info(logText);
+          // update sidebar for changed theme data
+          logger.info('update sidebar');
+          user_state        = j1.readCookie(cookie_names.user_state);
+          current_user_data = j1.mergeData(user_session, user_state);
+          j1.core.navigator.updateSidebar(current_user_data);
 
-      $('body').bootstrapMaterialDesign();
-      //new WOW().init();
+          // set|log status
+          state = 'finished';
+          logText = 'state: ' + state;
+          logger.info(logText);
+          logText = 'page finalized successfully';
+          logger.info(logText);
 
-      var logText = 'initializing material design finished';
-      logger.info(logText);
-    }, // END initMDB
+        }, flickerTimeout);
+      } // END WEB mode
+    }, // END displayPage
 
     // -------------------------------------------------------------------------
     // Helper functions
     // -------------------------------------------------------------------------
 
     // -------------------------------------------------------------------------
-    //  Merge two objects (properties) and returns the resulting object
-    //  TODO:  Improve comment, give synopsis and example
-    // See: https://stackoverflow.com/questions/43109229/merge-default-options-containing-object-with-json-object
+    // mergeData()
+    // merge two objects (properties) and returns the resulting object
+    // see: https://stackoverflow.com/questions/43109229/merge-default-options-containing-object-with-json-object
+    // TODO:  Improve comment, give synopsis and example
     // -------------------------------------------------------------------------
     mergeData: function () {
       var a = [].slice.call(arguments), o = a.shift();
@@ -1090,29 +963,33 @@ var j1 = (function () {
     },  // END mergeData
 
     // -------------------------------------------------------------------------
-    //  returns the last vistited page
+    // getPrevPage()
+    // Returns the last vistited page
     // -------------------------------------------------------------------------
     getPrevPage: function () {
       return previous_page;
     }, // END getPrevPage
 
     // -------------------------------------------------------------------------
-    //  returns the preferred language taken form window.navigator
-    //  See:
-    //  https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference
+    // getLanguage()
+    // Returns the preferred language taken form window.navigator
+    // See:
+    // https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference
     // -------------------------------------------------------------------------
     getLanguage: function () {
       var language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
     }, // END getLanguage
 
     // -------------------------------------------------------------------------
-    //  returns the template version taken from site config (_config.yml)
+    // getTemplateVersion()
+    // Returns the template version taken from site config (_config.yml)
     // -------------------------------------------------------------------------
     getTemplateVersion: function () {
       return '{{template_version}}';
     }, // END getTemplateVersion
 
     // -------------------------------------------------------------------------
+    // scrollTo()
     // Scrolls smooth to any anchor referenced by an page URL on
     // e.g. a page reload. Values for delay|offset are taken from
     // TOCCER module
@@ -1143,7 +1020,7 @@ var j1 = (function () {
     }, // END scrollTo
 
     // -------------------------------------------------------------------------
-    //  authEnabled:
+    //  authEnabled()
     //  Returns the state of the authentication module
     // -------------------------------------------------------------------------
     authEnabled: function () {
@@ -1154,7 +1031,7 @@ var j1 = (function () {
     }, // END authEnabled
 
     // -------------------------------------------------------------------------
-    //  appDetected:
+    //  appDetected()
     //  Returns true if a web session cookie exists
     // -------------------------------------------------------------------------
     appDetected: function () {
@@ -1173,280 +1050,102 @@ var j1 = (function () {
     }, // END appDetected
 
     // -------------------------------------------------------------------------
-    // xhrData:
-    // Load data asychronously using XHR on a DIV container
-    // specified (from options: xhr_data_path)
+    // xhrData()
+    // Load data asychronously using XHR|jQuery on an HTML element (e.g. <div>)
+    // specified by xhr_container_id, xhr_data_path (options)
     // -------------------------------------------------------------------------
-    xhrData: function (mod, options, status) {
-      var logger  = log4javascript.getLogger('j1.xhrData');
-      var state   = status;
+    xhrData: function (options, mod, status) {
+      var logger            = log4javascript.getLogger('j1.xhrData');
+      var selector          = $('#' + options.xhr_container_id);
+      var state             = status;
+      var observer_options  = {
+        attributes:     false,
+        childList:      true,
+        characterData:  false,
+        subtree:        true
+      };
+      var observer;
       var logText;
 
       var cb_load_closure = function(mod, id) {
         return function (responseTxt, statusTxt, xhr) {
+          var logger = log4javascript.getLogger('j1.xhrData');
           if ( statusTxt === 'success' ) {
-            if (state) {
-              logger.info('set state for ' +mod+ ' to: ' + state);
-              executeFunctionByName(mod + '.setState', window, state);
-            }
+            // jadams, 2020-07-21: intermediate state should DISABLED
+            // if (state) {
+            //   logger.info('set state for ' +mod+ ' to: ' + state);
+            //   executeFunctionByName(mod + '.setState', window, state);
+            // }
+            j1.setXhrDataState(id, statusTxt);
+            j1.setXhrDomState(id, 'pending');
+
             logText = 'data loaded successfully on id: ' +id;
             logger.info(logText);
+            state = true;
           }
           if ( statusTxt === 'error' ) {
-            state = 'failed';
-            logger.info('set state for ' +mod+ ' to: ' + state);
-            executeFunctionByName(mod + '.setState', window, state);
-            logText = 'loading data failed on id: ' +id+ ', error ' + xhr.status + ': ' + xhr.statusText;
-            logger.error(logText);
+            // jadams, 2020-07-21: to be checked why id could be UNDEFINED
+            if (typeof(id) != "undefined") {
+              state = 'failed';
+              logger.info('set state for ' +mod+ ' to: ' + state);
+              // jadams, 2020-07-21: intermediate state should DISABLED
+              // executeFunctionByName(mod + '.setState', window, state);
+              j1.setXhrDataState(id, statusTxt);
+              j1.setXhrDomState(id, 'pending');
+              logText = 'loading data failed on id: ' +id+ ', error ' + xhr.status + ': ' + xhr.statusText;
+              logger.error(logText);
+              state = false;
+            }
           }
         };
       };
-
+      // see: https://stackoverflow.com/questions/20420577/detect-added-element-to-dom-with-mutation-observer
       var id = '#' + options.xhr_container_id;
-      var selector = $(id);
-
-      if ( selector.length ) {
-        var modal_html_data_path = options.xhr_data_path + ' > *';
-        selector.load( modal_html_data_path, cb_load_closure( mod, id ) );
-        return true;
-      } else {
-        logText = 'data not loaded';
-        logger.warn(logText);
-        // Set processing state to 'finished' to complete module load
-        state = 'finished';
-        logger.info('state: ' + state);
-        executeFunctionByName(mod + '.setState', window, state);
-        return false;
-      }
-    }, // END xhrData
-
-    // -------------------------------------------------------------------------
-    //  xhrApi: XMLHttpRequest (XHR) based async server API request
-    //  Request an REST API at 'url', using verb 'type' of response type 'type'
-    // -------------------------------------------------------------------------
-    xhrApi: function (url, request_type, data_type) {
-      var logger    = log4javascript.getLogger('j1.xhrApi');
-      var type      = typeof request_type == 'undefined' || request_type == '' ? 'GET'  : request_type;
-      var data_type = typeof data_type == 'undefined' || data_type == '' ? 'json' : data_type;
-
-      return $.ajax({
-        url:      url,
-        type:     type,
-        dataType: data_type,
-        success:  function(data) {
-          if (typeof data == 'string') {
-            return JSON.parse(data);
-          }
-          if (typeof data == 'object') {
-            return data;
-          }
-        },
-        error: function(error) {
-          logger.error('xhr request failed: ' + error.statusText);
-        }
-      });
-
-    }, // END xhrApi
-
-    // -------------------------------------------------------------------------
-    // getRuntimeData: Returns the j1_runtime data object
-    //
-    // -------------------------------------------------------------------------
-    getRuntimeData: function (data_path) {
-    var logger = log4javascript.getLogger('j1.getRuntimeData');
-    var logText;
-
-    return $.ajax({
-        url:      data_path,
-        success:  function (contents) {
-          logText = 'data loaded successfully';
-          logger.info(logText);
-          state = 'runtime_data_loaded_success';
-          logger.info('state: ' + state);
-          executeFunctionByName('j1.setState', window, state);
-        },
-        error: function (err) {
-          logText = 'runtime data not loaded: ' + err;
-          logger.warn(logText);
-          state = 'runtime_data_loaded_failed';
-          logger.info('state: ' + state);
-          executeFunctionByName('j1.setState', window, state);
-          return false;
-        }
-      });
-
-    }, // END getRuntimeData
-
-    // -------------------------------------------------------------------------
-    // getColorData: Returns the j1_colors object
-    // Load color definitions from colors_data_path
-    // -------------------------------------------------------------------------
-    getColorData: function (data_path) {
-      var logger    = log4javascript.getLogger('j1.getColorData');
-      var j1_colors = {};
-
-      return $.ajax({
-        url:      data_path,
-        success:  function (data) {
-          var logText = 'color data loaded successfully';
-          logger.info(logText);
-          state = 'color_data_loaded_success';
-          logger.info('state: ' + state);
-          executeFunctionByName('j1.setState', window, state);
-
-          if (typeof data == 'string') {
-            j1_colors = JSON.parse(data);
-          }
-          if (typeof data == 'object') {
-            j1_colors = data;
-          }
-        },
-        error: function (data) {
-          var logText = 'color data not loaded';
-          logger.warn(logText);
-          state = 'color_data_loaded_failed';
-          logger.info('state: ' + state);
-          executeFunctionByName('j1.setState', window, state);
-          return false;
-        }
-      });
-
-    }, // END getColorData
-
-    // -------------------------------------------------------------------------
-    // setColorData:
-    //
-    // -------------------------------------------------------------------------
-    setColorData: function (color) {
-
-      if ( typeof color != 'undefined' ) {
-        var reHex = /^#[A-Fa-f0-9]+$/;
-        var reRGBA = /^rgba/;
-        var isHex = color.match(reHex);
-        var isRGBA = color.match(reRGBA);
-
-        if ( typeof j1.colors[color] != 'undefined' ) {
-          return j1.colors[color];
-        } else if (isHex) {
-          return color;
-        } else if (isRGBA) {
-          return color;
-        } else {
-          return false;
+      var $selector = $(id);
+      if ( $selector.length ) {
+        var html_data_path = options.xhr_data_path + ' > *';
+        $selector.load( html_data_path, cb_load_closure( mod, id ) );
+
+        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+        var xhrObserver = new MutationObserver (mutationHandler);
+        var obsConfig = {
+            childList: true,
+            characterData: false,
+            attributes: false,
+            subtree: false };
+
+        selector.each(function(){
+            xhrObserver.observe(this, obsConfig);
+        } );
+
+        function mutationHandler (mutationRecords) {
+          mutationRecords.forEach ( function (mutation) {
+            if (mutation.addedNodes.length) {
+              logger.info('XHR data loaded in the DOM: ' + id);
+              j1.setXhrDomState(id, 'success');
+            }
+          });
         }
       } else {
-        return false;
-      }
-
-    }, // END setColorData
-
-    // -------------------------------------------------------------------------
-    // getFontSizeData: Returns the j1_font_sizes object
-    // Load loadFontSize definitions from font_size_data_path
-    // -------------------------------------------------------------------------
-    getFontSizeData: function (data_path) {
-      var logger        = log4javascript.getLogger('j1.getFontSizeData');
-      var j1_font_sizes = {};
-
-      return $.ajax({
-        url:      data_path,
-        success:  function (data) {
-          var logText = 'font size data loaded successfully';
-          logger.info(logText);
-          state = 'fontsize_data_loaded_success';
-          logger.info('state: ' + state);
-          executeFunctionByName('j1.setState', window, state);
-
-          if (typeof data == 'string') {
-            j1_font_sizes = JSON.parse(data);
-          }
-          if (typeof data == 'object') {
-            j1_font_sizes = data;
-          }
-        },
-        error: function (data) {
-          var logText = 'font size data not loaded';
+        // jadams, 2020-07-21: To be clarified why a id is "undefined"
+        if (id != '#undefined') {
+          logText = 'data not loaded on id:' + id;
           logger.warn(logText);
-          state = 'fontsize_data_loaded_failed';
+          j1.setXhrDataState(id, 'not loaded');
+          j1.setXhrDomState(id, 'not loaded');
+          // Set processing state to 'finished' to complete module load
+          state = 'finished';
           logger.info('state: ' + state);
-          executeFunctionByName('j1.setState', window, state);
-          return false;
+          // jadams, 2020-07-21: intermediate state should DISABLED
+          // executeFunctionByName(mod + '.setState', window, state);
+          state = false;
         }
-      });
-
-    }, // END getFontSizeData
-
-    // -------------------------------------------------------------------------
-    // getFontSize: Returns the CSS value for a 'logical' fontsize
-    // out of the j1_font_sizes object
-    // -------------------------------------------------------------------------
-    setFontSize: function (size) {
-
-      if ( typeof size != 'undefined' ) {
-        var reCSS = /\bpx\b|\brem\b|\bem\b|\%|\binherit\b|\binitial\b|\bunset\b/;
-        var isCSS = size.match(reCSS);
-
-        if ( typeof j1.fonts[size] != 'undefined' ) {
-            return j1.fonts[size];
-        } else if (isCSS) {
-          return size;
-        } else {
-          return false;
-        }
-      } else {
-        return false;
       }
-
-    }, // END getFontSize
-
-    // -------------------------------------------------------------------------
-    // loadMessageCatalog
-    // Loads the message catalog object
-    // -------------------------------------------------------------------------
-    getMessageCatalog: function (data_path /*, request_type, data_type*/) {
-      var logger          = log4javascript.getLogger('j1.loadMessageCatalog');
-      var message_catalog = {};
-      var type            = typeof request_type == 'undefined' || request_type  == '' ? 'GET'  : request_type;
-      var data_type       = typeof data_type    == 'undefined' || data_type     == '' ? 'text' : data_type;
-      var messageData;
-      var logBase;
-      var logText;
-      var property;
-
-      return $.ajax({
-        url:      data_path,
-        type:     type,
-        dataType: data_type,
-        success:  function (data) {
-          messageData = yaml.safeLoad(data);
-          for (property in messageData) {
-            if (messageData.hasOwnProperty(property)) {
-              message_catalog[property] = {};
-              messageData[property].forEach((element) => {
-                var key   = Object.keys(element)[0];
-                var value = element[Object.keys(element)[0]];
-                message_catalog[property][key] = value;
-              });
-            }
-          }
-          j1.messages = message_catalog;
-          logBase = message_catalog.info.getData.message;
-          logText = logBase.text + logBase.message_catalog + logBase.finished;
-          logger.info(logText);
-        },
-        error: function(data) {
-          var json_data = JSON.stringify(data, undefined, 2);
-          logBase       = message_catalog.error.getData.message;
-          logText       = logBase.text + logBase.xhr + ': ' + json_data;
-          logger.error(logText);
-        }
-      });
-
-    }, // END getMessageCatalog
+      return state;
+    }, // END xhrData
 
     // -------------------------------------------------------------------------
-    //  readCookie:
-    //
+    //  readCookie()
     // -------------------------------------------------------------------------
     readCookie: function (name) {
       var data;
@@ -1468,7 +1167,7 @@ var j1 = (function () {
     }, // END readCookie
 
     // -------------------------------------------------------------------------
-    // writeCookie:
+    // writeCookie()
     // Write 'data' to a cookie 'name'. If not exists, the cookie gets
     // created. Returns 'true' if cookie was written, otherwise 'false'.
     //
@@ -1482,18 +1181,21 @@ var j1 = (function () {
       };
       var settings = $.extend(defaults, options);
 
-      var epoch         = Math.floor(Date.now()/1000);
-      var timestamp     = moment.unix(epoch).format('YYYY-MM-DD hh:mm:ss');
+//    var epoch         = Math.floor(Date.now()/1000);
+//    var timestamp_now = moment.unix(epoch).format('YYYY-MM-DD HH:mm:ss');
+      var date          = new Date();
+      var timestamp_now = date.toISOString();
       var cookie_data   = {};
       var data_json;
       var data_encoded;
 
       if (j1.existsCookie(settings.name)) {
-        cookie_data   = j1.readCookie(settings.name);
-        cookie_data.timestamp = timestamp;
-        cookie_data   = j1.mergeData(cookie_data, settings.data);
-        data_json     = JSON.stringify( cookie_data );
-        data_encoded  = window.btoa(data_json);
+        cookie_data           = j1.readCookie(settings.name);
+        cookie_data.timestamp = timestamp_now;
+        cookie_data           = j1.mergeData(cookie_data, settings.data);
+        data_json             = JSON.stringify( cookie_data );
+        data_encoded          = window.btoa(data_json);
+
         if (settings.expires > 0) {
           Cookies.set(settings.name, data_encoded, { expires: settings.expires });
         } else {
@@ -1616,63 +1318,68 @@ var j1 = (function () {
     resolveMacros: function (user_data) {
       var logger = log4javascript.getLogger('j1.resolveMacros');
 
-      if (Object.keys(user_data).length) {
-        $('[id^=macro-]').each(function() {
-
-          $('#macro-provider').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??provider', user_data.provider));
-            this.href = this.href.replace(/.*\/??provider-site-url/, user_data.provider_site_url);
-          });
-          $('#macro-user-name').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??user-name', user_data.user_name));
-            this.href = this.href.replace(/.*\/??provider_member_url/, user_data.provider_member_url);
-          });
-          $('#macro-provider-permissions').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??provider-permissions', user_data.provider_permissions));
-            this.href = this.href.replace(/.*\/??provider_member_url/, user_data.provider_member_url);
-          });
-          $('#macro-provider-membership').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??provider-membership', user_data.provider_membership));
-            this.href = this.href.replace(/.*\/??provider_member_url/, user_data.provider_member_url);
-          });
-          $('#macro-cookie-state').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??cookie-state', user_data.cookies_accepted));
-            this.href = this.href.replace(/.*\/??provider_privacy_url/, user_data.provider_privacy_url);
-          });
-          $('#macro-theme-name').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??theme-name', user_data.theme_name));
-          });
-          $('#macro-theme-author').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??theme-author', user_data.theme_author));
-            this.href = this.href.replace(/.*\/??theme-author-url/, user_data.theme_author_url);
-          });
-          $('#macro-theme-version').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace('??theme-version', user_data.theme_version));
-          });
+      var sidebarLoaded = setInterval(function() {
+        if ($('#sidebar_mmenu').length) {
+          if (Object.keys(user_data).length) {
+            $('[id^=macro-]').each(function() {
 
-        });
-        return true;
-      } else {
-        logger.error('no user data provided');
-        return false;
-      }
+              $('#macro-provider').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??provider', user_data.provider));
+                this.href = this.href.replace(/.*\/??provider-site-url/, user_data.provider_site_url);
+              });
+              $('#macro-user-name').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??user-name', user_data.user_name));
+                this.href = this.href.replace(/.*\/??provider_member_url/, user_data.provider_member_url);
+              });
+              $('#macro-provider-permissions').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??provider-permissions', user_data.provider_permissions));
+                this.href = this.href.replace(/.*\/??provider_member_url/, user_data.provider_member_url);
+              });
+              $('#macro-provider-membership').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??provider-membership', user_data.provider_membership));
+                this.href = this.href.replace(/.*\/??provider_member_url/, user_data.provider_member_url);
+              });
+              $('#macro-cookie-state').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??cookie-state', user_data.cookies_accepted));
+                this.href = this.href.replace(/.*\/??provider_privacy_url/, user_data.provider_privacy_url);
+              });
+              $('#macro-theme-name').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??theme-name', user_data.theme_name));
+              });
+              $('#macro-theme-author').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??theme-author', user_data.theme_author));
+                this.href = this.href.replace(/.*\/??theme-author-url/, user_data.theme_author_url);
+              });
+              $('#macro-theme-version').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace('??theme-version', user_data.theme_version));
+              });
 
+            });
+            clearInterval(sidebarLoaded);
+            return true;
+          } else {
+            logger.error('no user data provided');
+            clearInterval(sidebarLoaded);
+            return false;
+          }
+        }
+      }, 25); // END 'sidebarLoaded'
     }, // END resolveMacros
 
     // -------------------------------------------------------------------------
@@ -1682,48 +1389,54 @@ var j1 = (function () {
     updateMacros: function (user_data) {
       var logger = log4javascript.getLogger('j1.updateMacros');
 
-      if (Object.keys(user_data).length) {
-        $('[id^=macro-]').each(function() {
+      var sidebarLoaded = setInterval(function() {
+        if ($('#sidebar_mmenu').length) {
 
-          $('#macro-provider').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace(/Provider:.*/, 'Provider: ' + user_data.provider));
-            $('#macro-provider').attr('href', user_data.provider_site_url);
-          });
-          $('#macro-user-name').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace(/User:.*/, 'User: ' + user_data.user_name));
-            $('#macro-user-name').attr('href', user_data.provider_member_url);
-          });
-          $('#macro-provider-permissions').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            // $this.html($html.replace(/public|protected|private|blocked/, user_data.provider_permissions));
-            $this.html($html.replace(/public.*|protected.*|private.*|blocked.*/, user_data.provider_permissions));
-            $('#macro-provider-permissions').attr('href', user_data.provider_member_url);
-          });
-          $('#macro-provider-membership').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace(/guest|member/, user_data.provider_membership));
-            $('#macro-provider-membership').attr('href', user_data.provider_member_url);
-          });
-          $('#macro-cookie-state').each(function() {
-            var $this = $(this);
-            var $html = $this.html();
-            $this.html($html.replace(/accepted|declined|pending/, user_data.cookies_accepted));
-            $('#macro-cookie-state').attr('href', user_data.provider_privacy_url);
-          });
+          if (Object.keys(user_data).length) {
+            $('[id^=macro-]').each(function() {
 
-        });
-        return true;
-      } else {
-        logger.error('no user data provided');
-        return false;
-      }
+              $('#macro-provider').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace(/Provider:.*/, 'Provider: ' + user_data.provider));
+                $('#macro-provider').attr('href', user_data.provider_site_url);
+              });
+              $('#macro-user-name').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace(/User:.*/, 'User: ' + user_data.user_name));
+                $('#macro-user-name').attr('href', user_data.provider_member_url);
+              });
+              $('#macro-provider-permissions').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                // $this.html($html.replace(/public|protected|private|blocked/, user_data.provider_permissions));
+                $this.html($html.replace(/public.*|protected.*|private.*|blocked.*/, user_data.provider_permissions));
+                $('#macro-provider-permissions').attr('href', user_data.provider_member_url);
+              });
+              $('#macro-provider-membership').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace(/guest|member/, user_data.provider_membership));
+                $('#macro-provider-membership').attr('href', user_data.provider_member_url);
+              });
+              $('#macro-cookie-state').each(function() {
+                var $this = $(this);
+                var $html = $this.html();
+                $this.html($html.replace(/accepted|declined|pending/, user_data.cookies_accepted));
+                $('#macro-cookie-state').attr('href', user_data.provider_privacy_url);
+              });
 
+            });
+            clearInterval(sidebarLoaded);
+            return true;
+          } else {
+            logger.error('no user data provided');
+            clearInterval(sidebarLoaded);
+            return false;
+          }
+        }
+      }, 25); // END 'sidebarLoaded'
     }, // END updateMacros
 
     // -------------------------------------------------------------------------
@@ -1748,49 +1461,6 @@ var j1 = (function () {
       return true;
     }, // END logger
 
-    // -------------------------------------------------------------------------
-    // getBaseUrl
-    // -------------------------------------------------------------------------
-    // getBaseUrl: function () {
-    //   var myUrl = window.location.href;
-    //   var ua    = platform.name.toLowerCase();
-    //   var reURL = new RegExp('(http[s]?:\/\/)?([^\/]+)(.*)');
-    //   var baseUrl;
-    //   //var reGroups;
-    //
-    //   // NOTE: named capture groups NOT supported by FF + IE11
-    //   // if ( ua === 'chrome' ) {
-    //   //   reURL     = new RegExp('(?<prot>http[s]?:\/\/)?(?<host>[^\/]+)(?<path>.*)');
-    //   //   reGroups  = myUrl.match(reURL).groups;
-    //   //   baseUrl  = reGroups.prot + reGroups.host;
-    //   // } else {
-    //   //   reURL     = new RegExp('(http[s]?:\/\/)?([^\/]+)(.*)');
-    //   //   myUrl.match(reURL);
-    //   //   baseUrl  = RegExp.$1 + RegExp.$2 + RegExp.$3;
-    //   // }
-    //
-    //   myUrl.match(reURL);
-    //   // baseUrl = RegExp.$1 + RegExp.$2 + RegExp.$3;
-    //   baseUrl = RegExp.$1 + RegExp.$2;
-    //
-    //   return baseUrl;
-    // }, // END getBaseUrl
-
-    // -------------------------------------------------------------------------
-    // getPath
-    // See: https://stackoverflow.com/questions/27745/getting-parts-of-a-url-regex
-    // -------------------------------------------------------------------------
-    // getPath: function ( myUrl ) {
-    //   var url = new parseURL(myUrl)
-    //   // var reURL = new RegExp('(http[s]?:\/\/)?([^\/]+)(.*)');
-    //   // var path;
-    //   //
-    //   // myUrl.match(reURL);
-    //   path  = url.path;
-    //
-    //   return path;
-    // }, // END getPath
-
     // -------------------------------------------------------------------------
     // Send message
     // -------------------------------------------------------------------------
@@ -1840,7 +1510,7 @@ var j1 = (function () {
 
     // -------------------------------------------------------------------------
     // getStyleValue:
-    // returns the value of a style from a css class definition
+    // Returns the value of a style from a css class definition
     // example: j1.getStyleValue('bg-primary', 'background-color')
     getStyleValue: function (className, style) {
       var elementId = 'test-' + className,
@@ -1912,58 +1582,93 @@ var j1 = (function () {
       // -----------------------------------------------------------------------
       $('head').append('<style>.btn-viewer:hover { background-color: ' +bg_primary+ ' !important; }</style>');
 
-      // clipboard
-      // -----------------------------------------------------------------------
-      $('head').append('<style>.btn-clipboard:hover { background-color: ' +bg_primary+ ' !important; }</style>');
-
       // extended modals
       // -----------------------------------------------------------------------
-      var tabs_pills_link_color_active    = j1.setColorData('md_blue');         // j1.getStyleValue('btn-info', 'background-color');
-      var tabs_pills_link_color_hover     = j1.setColorData('md_gray_300');     // j1.getStyleValue('btn-secondary', 'background-color');
+      // var tabs_pills_link_color_active    = j1.setColorData('md_blue');         // j1.getStyleValue('btn-info', 'background-color');
+      // var tabs_pills_link_color_hover     = j1.setColorData('md_gray_300');     // j1.getStyleValue('btn-secondary', 'background-color');
+
+      // var tabs_pills_link_color_active    = 'mdi-blue';
+      // var tabs_pills_link_color_hover     = 'mdi-gray-300';
 
       // nav module
       // -----------------------------------------------------------------------
-      $('head').append('<style>.nav-link:hover { background-color: ' +tabs_pills_link_color_hover+ ' !important; }</style>');
-      $('head').append('<style>.nav-link.active { background-color: ' +tabs_pills_link_color_active+ ' !important; }</style>');
+      // $('head').append('<style>.nav-link:hover { background-color: ' +tabs_pills_link_color_hover+ ' !important; }</style>');
+      // $('head').append('<style>.nav-link.active { background-color: ' +tabs_pills_link_color_active+ ' !important; }</style>');
 
       return true;
     }, // END setCss
 
     // -------------------------------------------------------------------------
-    //  Set the current (processing) state of the module
+    // setState()
+    // Set the current (processing) state of the module
     // -------------------------------------------------------------------------
     setState: function (stat) {
-      state= stat;
-      //j1.state stat;
+      state = stat;
     }, // end setState
 
     // -------------------------------------------------------------------------
-    //  Returns the current (processing) state of the module
+    // getState()
+    // Returns the current (processing) state of the module
     // -------------------------------------------------------------------------
     getState: function () {
-      // return j1.state;
       return state;
     }, // end getState
 
     // -------------------------------------------------------------------------
-    //  Set the current mode of the site (web|app)
+    // setXhrDataState()
+    // Set the final (loading) state of an element (partial) loaded via Xhr
+    // -------------------------------------------------------------------------
+    setXhrDataState: function (obj, stat) {
+      j1.xhrDataState[obj] = stat;
+    }, // END setXhrDataState
+
+    // -------------------------------------------------------------------------
+    // getXhrDataState()
+    // Returns the final (loading) state of an element (partial) loaded via Xhr
+    // -------------------------------------------------------------------------
+    getXhrDataState: function (obj) {
+      return j1.xhrDataState[obj];
+    }, // END getXhrDataState
+
+    // -------------------------------------------------------------------------
+    // setXhrDomState()
+    // Set the state of an element loaded via Xhr that is
+    // successfully added to the DOM
+    // -------------------------------------------------------------------------
+    setXhrDomState: function (obj, stat) {
+      j1.xhrDOMState[obj] = stat;
+    }, // END setXhrDomState
+
+    // -------------------------------------------------------------------------
+    // getXhrDataState()
+    // Returns the state of an element loaded via Xhr that is
+    // successfully added to the DOM
+    // -------------------------------------------------------------------------
+    getXhrDOMState: function (obj) {
+      return j1.xhrDOMState[obj];
+    }, // END getXhrDOMState
+
+    // -------------------------------------------------------------------------
+    // setMode()
+    // Set the current mode of the site (web|app)
     // -------------------------------------------------------------------------
     setMode: function (mod) {
       mode = mod;
     }, // END setMode
 
     // -------------------------------------------------------------------------
-    //  Return the current mode of the site (web|app)
+    // getMode()
+    // Returns the current mode of the site (web|app)
     // -------------------------------------------------------------------------
     getMode: function () {
       return mode;
     }, // END getMode
 
     // -------------------------------------------------------------------------
-    // getUserAgent
-    //  Return the name of the web browser
+    // checkUserAgent()
+    // Returns the name (UA) of the web browser
     // -------------------------------------------------------------------------
-    checkUserAgent: function (ua_name) {
+    checkUserAgent: function () {
       if (navigator.userAgent.search(ua_name) >= 0) {
         return true;
       } else {
@@ -1972,21 +1677,38 @@ var j1 = (function () {
     }, // END checkUserAgent
 
     // -------------------------------------------------------------------------
-    //  Return always true (for testing purposes)
+    // checkUserAgent()
+    // Returns the name (UA) of the web browser
+    // -------------------------------------------------------------------------
+    generateId: function (length) {
+     var result           = '';
+     var characters       = 'abcdefghijklmnopqrstuvwxyz0123456789';
+     var charactersLength = characters.length;
+     for ( var i = 0; i < length; i++ ) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+     }
+   return result;
+    }, // END checkUserAgent
+
+    // -------------------------------------------------------------------------
+    // getTrue()
+    // Returns always true (for testing purposes)
     // -------------------------------------------------------------------------
     getTrue: function () {
       return true;
     }, // END isTrue
 
     // -------------------------------------------------------------------------
-    //  Return always false (for testing purposes)
+    // getFalse()
+    // Returns always false (for testing purposes)
     // -------------------------------------------------------------------------
     getFalse: function () {
       return false;
     }, // END isTrue
 
     // -------------------------------------------------------------------------
-    //  Return users to their browser homepage
+    // goHome()
+    // Redirect current page to the browser homepage
     // -------------------------------------------------------------------------
     goHome: function () {
       // most browsers
@@ -1998,10 +1720,24 @@ var j1 = (function () {
       } else {
         window.location.href = 'about:blank';
       }
-    } // END gohome
+    }, // END gohome
+
+    // -------------------------------------------------------------------------
+    // goBack()
+    // Redirect current page to last visited page (referrer)
+    // -------------------------------------------------------------------------
+    goBack: function () {
+      // where visitor has come from
+      window.location.href = document.referrer;
+    } // END goBack
+
   }; // END j1 (return)
 }) (j1, window);
 
 {% endcapture %}
-{{ cache | strip_empty_lines }}
+{% if production %}
+  {{ cache | minifyJS }}
+{% else %}
+  {{ cache | strip_empty_lines }}
+{% endif %}
 {% assign cache = nil %}