j1_template 2019.4.7 → 2019.4.8

data/lib/starter_web/assets/themes/j1/adapter/js/template.js

@@ -54,16 +54,21 @@ regenerate:                             true
 {% assign panel_config_defaults   = blocks.defaults.panel.defaults %}
 {% assign panel_config_settings   = blocks.panel.settings %}
 {% assign footer_config_defaults  = blocks.defaults.footer.defaults %}
+{% assign toccer_defaults         = modules.defaults.toccer.defaults %}
+{% assign toccer_settings         = modules.toccer.settings %}
+{% assign switcher_defaults       = modules.defaults.theme_switcher.defaults %}
+{% assign switcher_settings       = modules.theme_switcher.settings %}
 
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign toccer_options          = toccer_defaults | merge: toccer_settings %}
+{% assign switcher_options        = switcher_defaults | merge: switcher_settings %}
 {% assign footer_id               = footer_config_defaults.container-id %}
 {% assign footer_data_path        = footer_config_defaults.data_path %}
 {% assign banner_data_path        = banner_config_defaults.data_path %}
 {% assign panel_data_path         = panel_config_defaults.data_path %}
-{% assign toccer_config           = modules.j1_toccer %}
-{% assign hideOnReload            = modules.j1_theme_switcher.hideOnReload %}
 
-{% comment %} Set config options
--------------------------------------------------------------------------------- {% endcomment %}
+{% assign hideOnReload            = modules.switcher_options.hideOnReload %}
 
 /*
  # -----------------------------------------------------------------------------
@@ -109,10 +114,7 @@ var j1 = (function () {
   var themeCss;
   var themeExtensionCss;
 
-  // J1 data files
-  var j1_colors                 = {};
-  var j1_font_sizes             = {};
-  var message_catalog           = {};
+  // Pathes of J1 data files  
   var colors_data_path          = '{{template_config.colors_data_path}}';
   var font_size_data_path       = '{{template_config.font_size_data_path}}';
   var message_catalog_data_path = '{{template_config.message_catalog_data_path}}';
@@ -129,34 +131,34 @@ var j1 = (function () {
   var referrer;
 
   var cookie_names = {
-    'app_session':      '{{template_config.cookies.app_session}}',
-    'user_session':     '{{template_config.cookies.user_session}}',
-    'cookie_consent':   '{{template_config.cookies.cookie_consent}}'
+    'app_session':          '{{template_config.cookies.app_session}}',
+    'user_session':         '{{template_config.cookies.user_session}}',
+    'cookie_consent':       '{{template_config.cookies.cookie_consent}}'
   }
 
   // J1 UserState Cookie (initial values)
   var user_state = {
-    'theme_css':            '{{site.data.modules.j1_theme_switcher.default_theme_css}}',
-    'theme_extension_css':  '{{site.data.modules.j1_theme_switcher.includeBootswatch}}',
-    'theme_name':           '{{site.data.modules.j1_theme_switcher.default_theme_name}}',
-    'theme_author':         '{{site.data.modules.j1_theme_switcher.default_theme_author}}',
-    'theme_author_url':     '{{site.data.template_settings.theme_author_url}}',
-    'theme_link':           '{{site.data.template_settings.theme_author_url}}',
+    'theme_css':            '{{switcher_options.default_theme_css}}',
+    'theme_extension_css':  '{{switcher_options.includeBootswatch}}',
+    'theme_name':           '{{switcher_options.default_theme_name}}',
+    'theme_author':         '{{switcher_options.default_theme_author}}',
+    'theme_author_url':     '{{template_config.theme_author_url}}',
+    'theme_link':           '{{template_config.theme_author_url}}',
     'theme_version':        '{{site.version}}',
-    'provider':             '{{site.data.template_settings.user.provider}}',
-    'provider_membership':  '{{site.data.template_settings.user.provider_membership}}',
-    'provider_permissions': '{{site.data.template_settings.user.provider_permissions}}',
-    'provider_site_url':    '{{site.data.template_settings.user.provider_site_url}}',
-    'provider_home_url':    '{{site.data.template_settings.user.provider_home_url}}',
-    'provider_blog_url':    '{{site.data.template_settings.user.provider_blog_url}}',
-    'provider_member_url':  '{{site.data.template_settings.user.provider_member_url}}',
-    'provider_privacy_url': '{{site.data.template_settings.user.provider_privacy_url}}',
+    'provider':             '{{template_config.user.provider}}',
+    'provider_membership':  '{{template_config.user.provider_membership}}',
+    'provider_permissions': '{{template_config.user.provider_permissions}}',
+    'provider_site_url':    '{{template_config.user.provider_site_url}}',
+    'provider_home_url':    '{{template_config.user.provider_home_url}}',
+    'provider_blog_url':    '{{template_config.user.provider_blog_url}}',
+    'provider_member_url':  '{{template_config.user.provider_member_url}}',
+    'provider_privacy_url': '{{template_config.user.provider_privacy_url}}',
     'mode':                 'na',
-    'user_name':            '{{site.data.template_settings.user.user_name}}',
+    'user_name':            '{{template_config.user.user_name}}',
     'locale':               navigator.language || navigator.userLanguage,
     'requested_page':       'na',
     'previous_page':        'na',
-    'last_pager':           'na',
+    'last_pager':           '/pages/public/blog/navigator/',
     'cookies_accepted':     'pending'
   };
 
@@ -187,6 +189,7 @@ var j1 = (function () {
     init: function ( options ) {
       var url       = new parseURL(window.location.href)
       var baseUrl   = url.origin;
+
       var defaults  = {
         toc:        false,
         scrollbar:  false,
@@ -194,7 +197,16 @@ var j1 = (function () {
       };
       var args = $.extend(defaults, options);
 
-      j1.adapter.logger.init();
+      {% comment %} Test (doesn't work!!!)
+      -------------------------------------------------------------------------- {% endcomment %}
+      // $(function() {
+      //   window.addEventListener("DOMContentLoaded", function(event) {
+      //     var logger = log4javascript.getLogger('j1.shim.loader');
+      //     logger.info('DOMContentLoaded');
+      //   });
+      // });
+
+      // j1.adapter.logger.init();
 
       {% comment %} Set global variables
       -------------------------------------------------------------------------- {% endcomment %}
@@ -216,7 +228,7 @@ var j1 = (function () {
                           data:     user_state
                       });
 
-      // Detect middleware (mode === 'app') and update user state cookie
+      // Detect middleware (mode 'app') and update user state cookie
       // -----------------------------------------------------------------------
       if (user_state.mode === 'na') {
         var url = new parseURL(window.location.href)
@@ -285,96 +297,118 @@ var j1 = (function () {
         logText = j1.getMessage('info', 'getState', 'text');
         logText = logText + j1.getMessage('info', 'getState', 'data_objects');
         logText = logText + j1.getMessage('info', 'getState', 'finished');
-        j1.logger(logger, 'info', logText);
+        j1.logger('j1.init.deferred', 'info', logText);
 
         logText = j1.getMessage('info', 'setState', 'text');
         logText = logText + j1.getMessage('info', 'setState', 'started');
-        j1.logger(logger, 'info', logText);
+        j1.logger('j1.init.deferred', 'info', logText);
         executeFunctionByName('j1.setState', window, state);
 
-        // ---------------------------------------------------------------------
-        // Initialize global modules (sequential asynchronous)
-        // ---------------------------------------------------------------------
-        $.when(
-          j1.adapter.master_header.loadHeader(),
-          j1.adapter.navigator.init())
-        .then (function(loggerData, headerData, navData) {
+        // set logger for callback|anonymous
+        var logger = log4javascript.getLogger('j1.init.deferred');
 
-          if ( args.scrollbar === 'false'  ) {
-            $('body').addClass( 'hide-scrollbar' )
-            $('html').addClass( 'hide-scrollbar-moz' )
-          }
+        if ( args.scrollbar === 'false'  ) {
+          $('body').addClass( 'hide-scrollbar' )
+          $('html').addClass( 'hide-scrollbar-moz' )
+        }
 
-          logger.info('read user state from cookie');
-          user_state = j1.readCookie(cookie_names.user_session);
+        logger.info('read user state from cookie');
+        user_state = j1.readCookie(cookie_names.user_session);
 
-          // process|update UserState
-          //
-          themeName                 = user_state.theme_name;
-          themeCss                  = user_state.theme_css;
-          themeExtensionCss         = user_state.theme_extension_css;
+        // process|update UserState
+        //
+        themeName                 = user_state.theme_name;
+        themeCss                  = user_state.theme_css;
+        themeExtensionCss         = user_state.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_state.timestamp      = timestamp_now;
-          referrer                  = new parseURL(document.referrer);
-          current_page              = window.location.pathname;          
-          user_state.requested_page = current_page;          
-          user_state.previous_page  = referrer.search === '' ? 
-                                        (referrer.pathname === '' ? current_page : referrer.pathname) : 
-                                        (user_state.previous_page === '' || user_state.previous_page === 'na' ? '/' : user_state.previous_page);
-        
-          // calculate last 'pager' if any
-          //
-          if (rePager.test(user_state.previous_page)) {
-            last_pager              = user_state.previous_page;
-            user_state.last_pager   = last_pager;
-          } else {
-            last_pager              = user_state.last_pager;
-          }
+        // 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_state.timestamp      = timestamp_now;
+        referrer                  = new parseURL(document.referrer);
+        current_page              = window.location.pathname;          
+        user_state.requested_page = current_page;          
+        user_state.previous_page  = referrer.search === '' ? 
+                                      (referrer.pathname === '' ? current_page : referrer.pathname) : 
+                                      (user_state.previous_page === '' || user_state.previous_page === 'na' 
+                                      ? '/' 
+                                      : user_state.previous_page);
+      
+        // calculate last 'pager' if any
+        //
+        if (rePager.test(user_state.previous_page)) {
+          last_pager              = user_state.previous_page;
+          user_state.last_pager   = last_pager;
+        } else {
+          last_pager              = user_state.last_pager;
+        }
 
-          logger.info('update user state cookie');
-          j1.writeCookie({
-            name: cookie_names.user_session,
-            data: user_state
-          });
+        logger.info('update user state cookie');
+        j1.writeCookie({
+          name: cookie_names.user_session,
+          data: user_state
+        });
 
-          // -------------------------------------------------------------------
-          // Initialize page resources for global modules
-          // -------------------------------------------------------------------
-          $.when(
-            j1.initBanner(settings),
-            j1.initPanel(settings),
-            j1.initFooter(settings) )
-          .then (function (initBanner_response, initPanel_response, initFooter_response) {
-            var logger  = log4javascript.getLogger('j1.init.deferred');       // set logger for callback|anonymous
-            state       = j1.getMessage('info', 'setState', 'running');
-            logText     = j1.getMessage('info', 'setState', 'text');
-            logText     = logText + j1.getMessage('info', 'setState', 'running');
-            j1.logger(logger, 'info', logText);
-
-            user_state.timestamp = timestamp_now;
-            j1.writeCookie({
-              name: cookie_names.user_session,
-              data: user_state
-            });
-            // jadams 2019-01-20: enabled only drawer, switch and ripples
-            j1.initMDB(settings);                                             // Initialize BMD JS components
-            j1.initClipboard(settings);
-            j1.displayPage(settings);
-          }) // END load HTLM data
-          .catch(function(error) {
-            var logger  = log4javascript.getLogger('j1.init.deferred');       // set logger for callback|anonymous
-            json_data   = JSON.stringify(error, undefined, 2);
-            logText     = 'deferred: ' + json_data;
-            logger.error(logText);
-          });
+        // ---------------------------------------------------------------------
+        // Initialize page resources for global modules (sequential asynchronous)
+        // ---------------------------------------------------------------------
+        $.when(
+          j1.initBanner(settings),
+          j1.initPanel(settings),
+          j1.initFooter(settings) )
+        .then (function (initBanner_response, initPanel_response, initFooter_response) {
+          var logger  = log4javascript.getLogger('j1.init.deferred');
+
+          // 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 HTML data finished');
+
+              // 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.deferred', 'info', logText);
+
+              user_state.timestamp = timestamp_now;
+              j1.writeCookie({
+                name: cookie_names.user_session,
+                data: user_state
+              });
+
+              // ---------------------------------------------------------------
+              // Finalize|Display page (sequential asynchronous)
+              // ---------------------------------------------------------------
+              $.when(
+                // jadams 2019-01-20: for MDB, enabled only drawer, switch and ripples
+                j1.initMDB(settings),                                             
+                j1.initClipboard(settings),
+                j1.finalizePage(settings))
+              .then (function () {              
+                j1.displayPage();
+              })
+              .catch(function(error) {
+                var logger  = log4javascript.getLogger('j1.init.deferred');
+                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.deferred');
+          json_data   = JSON.stringify(error, undefined, 2);
+          logText     = 'deferred: ' + json_data;
+          logger.error(logText);
         });
-      }) // END load template data
+      }) // END load global data objects
       .catch(function(error) {
-        var logger  = log4javascript.getLogger('j1.init.deferred');         // set logger for callback|anonymous
+        var logger  = log4javascript.getLogger('j1.init.deferred');
         json_data   = JSON.stringify(error, undefined, 2);
         logText     = 'deferred: ' + json_data;
         logger.error(logText);
@@ -390,6 +424,7 @@ var j1 = (function () {
       var logger        = log4javascript.getLogger('j1.initBanner');
       var banner        = [];
       var bannerOptions = [];
+      var mod           = 'j1';
 
       {% comment %}
       Closure to pass additional data (e.g. #banner_id) to AJAX load callback
@@ -504,6 +539,7 @@ var j1 = (function () {
     initPanel: function ( options ) {
       var logger  = log4javascript.getLogger('j1.initPanel');
       var panel   = [];
+      var mod     = 'j1';
 
       {% 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
@@ -589,6 +625,7 @@ var j1 = (function () {
     // -------------------------------------------------------------------------
     initFooter: function ( options ) {
       var logger = log4javascript.getLogger('j1.initFooter');
+      var mod    = 'j1';
 
       logText = 'initialization is being started';
       logger.info(logText);
@@ -598,6 +635,11 @@ var j1 = (function () {
           if ( statusTxt ==  'success' ) {
             logText = 'footer on ID ' +footer_id+ ' loaded successfully';
             logger.info(logText);
+
+            state = 'footer_loaded';
+            logger.info('Set state for module ' + mod + ': ' + state);
+            executeFunctionByName(mod + '.setState', window, state)
+
             logText = 'initialization finished';
             logger.info(logText);
           }
@@ -678,17 +720,17 @@ var j1 = (function () {
     }, // END initClipboard
 
     // -------------------------------------------------------------------------
-    // Show the page after timeout of {{hideOnReload}} ms
+    // 
     // Display the page if the (text) header is signaled as 'initialized'
     // AND the menubar is signaled as (state) 'finished'
     // -------------------------------------------------------------------------
-    displayPage: function ( options ) {
-      var logger            = log4javascript.getLogger('j1.displayPage');
+    finalizePage: function ( options ) {
+      var logger            = log4javascript.getLogger('j1.finalizePage');
       var user_state        = j1.readCookie(cookie_names.user_session);
       var cookie_consent    = j1.readCookie(cookie_names.cookie_consent);
       var settings          = options;
       var authClientEnabled = j1.authClientEnabled();
-      var flickerTimeout    = {{site.data.template_settings.flicker_timeout}};
+      var flickerTimeout    = {{template_config.flicker_timeout}};
       var provider;
       var previous_page;
       var appDetected;
@@ -697,11 +739,11 @@ var j1 = (function () {
 
       user_state.current_page = window.location.pathname;
 
-      logText = 'Finalize current page';
+      logText = 'Finalize page';
       logger.info(logText);
 
       // -----------------------------------------------------------------------
-      // App mode
+      // APP mode
       // -----------------------------------------------------------------------
       if (user_state.mode === 'app') {  
         var url = new parseURL(window.location.href)
@@ -712,7 +754,7 @@ var j1 = (function () {
         $.when($.ajax(ep))
         .then(function(data) {
           // set logger for callback|anonymous
-          var logger  = log4javascript.getLogger('j1.displayPage.deferred');
+          var logger  = log4javascript.getLogger('j1.finalizePage.deferred');
           appDetected = true;
 
           user_state  = j1.mergeData(user_state, data);
@@ -744,86 +786,6 @@ var j1 = (function () {
             }
           } // END check protected pages
 
-          setTimeout( function() {
-            // display current page
-            $('#no_flicker').css('display', 'block');
-
-            // Because of async (HTML) data loads, Event Handlers are called late
-            j1.core.navigator.eventHandler();
-            j1.core.cookie_consent.eventHandler( cookie_consent );
-
-            user_state    = j1.readCookie(cookie_names.user_session);
-            // previous_page = j1.getPrevPage();
-
-            // Update sidebar
-            logger.info('Update sidebar');
-            j1.core.navigator.updateSidebar();
-
-            if ( user_state.previous_page !== user_state.current_page ) {
-              logText = 'Page change detected';
-              logger.info(logText);
-              logText = 'Previous page: ' + user_state.previous_page;
-              logger.info(logText);
-              logText = 'Current page: ' + user_state.current_page;
-              logger.info(logText);
-            }
-
-            // Show ControlCenter Icon
-            $('#quickLinksControlCenterButton').css('display', 'block');
-
-            // Show or Hide cookie icon
-            if ( user_state.cookies_accepted === 'accepted' ) {
-              // Display cookie icon
-              $('#quickLinksCookieButton').css('display', 'block');
-            } else {
-              logText = 'Hide cookie icon';
-              logger.info(logText);
-              // Display cookie icon
-              $('#quickLinksCookieButton').css('display', 'none');
-            }
-
-            // Show or Hide SignInOut|ControlCenter Icons
-            if ( appDetected && authClientEnabled ) {
-
-              if ( user_state.authenticated === 'true' ) {
-                // Set SignOut
-                $('#navLinkSignInOut').attr("data-target","#modalOmniSignOut");
-                $('#iconSignInOut').removeClass( "mdi-login" ).addClass( "mdi-logout" );
-              } else {
-                // Set SignIn
-                $('#navLinkSignInOut').attr("data-target","#modalOmniSignIn");
-                $('#iconSignInOut').removeClass( "mdi-logout" ).addClass( "mdi-login" );
-              }
-              logger.info('Show SignInOut icon');
-              $('#quickLinksSignInOutButton').css('display', 'block');
-            } else {
-              logger.info('Show SignInOut icon');
-              $('#quickLinksSignInOutButton').css('display', 'block');
-            }
-
-            // If the page requested contains an anchor element,
-            // do a smooth scroll
-            j1.scrollTo();
-
-            // Set|Log status
-            state = 'finished';
-            logText = 'state: ' + state;
-            logger.info(logText);
-            logText = "J1 Template successfully initialized";
-            logger.info(logText);
-
-          }, flickerTimeout ); // END App mode
-        });
-      } else {
-        // ---------------------------------------------------------------------
-        // web mode
-        // ---------------------------------------------------------------------
-
-        // pause the display of current page for flicker timeout [ms]
-        setTimeout( function() {
-          // display current page
-          $('#no_flicker').css('display', 'block');
-
           // Because of async (HTML) data loads, Event Handlers are called late
           j1.core.navigator.eventHandler();
           j1.core.cookie_consent.eventHandler( cookie_consent );
@@ -835,7 +797,6 @@ var j1 = (function () {
           logger.info('Update sidebar');
           j1.core.navigator.updateSidebar();
 
-          current_page = window.location.pathname;
           if ( user_state.previous_page !== user_state.current_page ) {
             logText = 'Page change detected';
             logger.info(logText);
@@ -845,7 +806,10 @@ var j1 = (function () {
             logger.info(logText);
           }
 
-          //Show or Hide cookie icon
+          // Show ControlCenter Icon
+          $('#quickLinksControlCenterButton').css('display', 'block');
+
+          // Show or Hide cookie icon
           if ( user_state.cookies_accepted === 'accepted' ) {
             // Display cookie icon
             $('#quickLinksCookieButton').css('display', 'block');
@@ -856,21 +820,96 @@ var j1 = (function () {
             $('#quickLinksCookieButton').css('display', 'none');
           }
 
-          // If the page requested contains an anchor element,
-          // do a smooth scroll to
-          j1.scrollTo();
+          // Show or Hide SignInOut|ControlCenter Icons
+          if ( appDetected && authClientEnabled ) {
 
-          // Set|Log status
-          state = 'finished';
-          logText = 'state: ' + state;
+            if ( user_state.authenticated === 'true' ) {
+              // Set SignOut
+              $('#navLinkSignInOut').attr("data-target","#modalOmniSignOut");
+              $('#iconSignInOut').removeClass( "mdi-login" ).addClass( "mdi-logout" );
+            } else {
+              // Set SignIn
+              $('#navLinkSignInOut').attr("data-target","#modalOmniSignIn");
+              $('#iconSignInOut').removeClass( "mdi-logout" ).addClass( "mdi-login" );
+            }
+            logger.info('Show SignInOut icon');
+            $('#quickLinksSignInOutButton').css('display', 'block');
+          } else {
+            logger.info('Show SignInOut icon');
+            $('#quickLinksSignInOutButton').css('display', 'block');
+          }
+        });
+      } else {
+        // ---------------------------------------------------------------------
+        // WEB mode
+        // --------------------------------------------------------------------- 
+
+        // Because of async (HTML) data loads, Event Handlers are called late
+        j1.core.navigator.eventHandler();
+        j1.core.cookie_consent.eventHandler( cookie_consent );
+
+        user_state = j1.readCookie(cookie_names.user_session);
+
+        // Update sidebar
+        logger.info('Update sidebar');
+        j1.core.navigator.updateSidebar();
+
+        current_page = window.location.pathname;
+        if ( user_state.previous_page !== user_state.current_page ) {
+          logText = 'Page change detected';
+          logger.info(logText);
+          logText = 'Previous page: ' + user_state.previous_page;
           logger.info(logText);
-          logText = "J1 Template successfully initialized";
+          logText = 'Current page: ' + user_state.current_page;
           logger.info(logText);
-        }, flickerTimeout ); // END Web mode
+        }
+
+        // Show or Hide cookie icon
+        if ( user_state.cookies_accepted === 'accepted' ) {
+          // Display cookie icon
+          $('#quickLinksCookieButton').css('display', 'block');
+        } else {
+          logText = 'Hide cookie icon';
+          logger.info(logText);
+          // Display cookie icon
+          $('#quickLinksCookieButton').css('display', 'none');
+        }
 
         return true;
       }
 
+    }, // END finalizePage
+
+    // -------------------------------------------------------------------------
+    // displayPage
+    // Show the page after timeout of {{hideOnReload}} ms
+    // -------------------------------------------------------------------------
+    // NOTE:
+    //  jadams, 2019-08-06: flickerTimeout not used since new strategy
+    //  (Promises|jQuery thenables) are used for initialization.
+    //  Currently, the timeout cause loading the image header to 
+    //  fail. Backstretch API doesn't calculate image sizes correctly
+    //  because (most probably) the page is 'visible' too late.
+    // -------------------------------------------------------------------------
+    displayPage: function ( options ) {
+      var logger         = log4javascript.getLogger('j1.displayPage');
+      var flickerTimeout = {{template_config.flicker_timeout}};
+              
+      setTimeout( function() {
+        // Display page
+        $('#no_flicker').css('display', 'block');
+        // If the page requested contains an anchor element,
+        // do a smooth scroll to
+        j1.scrollTo();
+
+        // Set|Log status
+        state = 'finished';
+        logText = 'state: ' + state;
+        logger.info(logText);
+        logText = "J1 Template successfully initialized";
+        logger.info(logText);
+      }, flickerTimeout);
+
     }, // END displayPage
 
     // -------------------------------------------------------------------------
@@ -945,8 +984,8 @@ var j1 = (function () {
     // -------------------------------------------------------------------------
     scrollTo: function () {
       // Unclear why a offset correction is needed (sometimes ???)
-      var offset_correction = {{toccer_config.defaults.headingsOffset}};
-      var offset            = {{toccer_config.defaults.smoothScrollOffset}};
+      var offset_correction = {{toccer_options.headingsOffset}};
+      var offset            = {{toccer_options.smoothScrollOffset}};
       var anchor_id         = window.location.href.split("#")[1];
       var selector;
       var heading;
@@ -959,7 +998,7 @@ var j1 = (function () {
 
         // scroll only, if an anchor is given with URL
         if (selector.length) {
-          var delay     = {{toccer_config.defaults.smoothScrollDuration}};
+          var delay     = {{toccer_options.smoothScrollDuration}};
           var scroll_to = parseInt( selector.offset().top - offset - offset_correction );
           //var scroll_to = selector.offset().top;
           $('html,body').animate({scrollTop: scroll_to}, delay,
@@ -1137,7 +1176,8 @@ var j1 = (function () {
     // Load color definitions from colors_data_path
     // -------------------------------------------------------------------------
     getColorData: function (data_path) {
-      var logger = log4javascript.getLogger('j1.getColorData');
+      var logger    = log4javascript.getLogger('j1.getColorData');
+      var j1_colors = {};
 
       return $.ajax({
         url:      data_path,
@@ -1199,7 +1239,8 @@ var j1 = (function () {
     // Load loadFontSize definitions from font_size_data_path
     // -------------------------------------------------------------------------
     getFontSizeData: function (data_path) {
-      var logger = log4javascript.getLogger('j1.getFontSizeData');
+      var logger        = log4javascript.getLogger('j1.getFontSizeData');
+      var j1_font_sizes = {};
 
       return $.ajax({
         url:      data_path,
@@ -1239,7 +1280,8 @@ var j1 = (function () {
         var reCSS = /\bpx\b|\brem\b|\bem\b|\%|\binherit\b|\binitial\b|\bunset\b/;
         var isCSS = size.match(reCSS);
 
-        if ( typeof j1_font_sizes[size] != "undefined" ) {
+//      if ( typeof j1_font_sizes[size] != "undefined" ) {
+        if ( typeof j1.fonts[size] != "undefined" ) {
             return j1.fonts[size];
         } else if (isCSS) {
           return size;
@@ -1257,9 +1299,10 @@ var j1 = (function () {
     // Loads the message catalog object
     // -------------------------------------------------------------------------
     getMessageCatalog: function (data_path /*, request_type, data_type*/) {
-      var logger    = log4javascript.getLogger('j1.loadMessageCatalog');
-      var type      = typeof request_type  == 'undefined' || request_type  == '' ? 'GET'  : request_type;
-      var data_type = typeof data_type     == 'undefined' || data_type     == '' ? 'text' : 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;
@@ -1568,7 +1611,7 @@ var j1 = (function () {
     // Get a log message from the log message catalog object
     // -------------------------------------------------------------------------
     getMessage: function (level, message, property) {
-      var message = message_catalog[level][message]["message"][property];
+      var message = j1.messages[level][message]["message"][property];
 
       return message;
     }, // END getMessage