j1_template 2019.4.8 → 2019.4.10

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

@@ -71,8 +71,7 @@ j1.adapter['algolia'] = (function (j1, window) {
 
   {% comment %} Set global variables
   ------------------------------------------------------------------------------ {% endcomment %}
-  var environment   = '{{environment}}'; // Set environment
-  var state         = 'not_started';
+  var environment   = '{{environment}}';
   var moduleOptions = {};
   var _this;
   var logger;
@@ -91,6 +90,8 @@ j1.adapter['algolia'] = (function (j1, window) {
     // Initializer
     // -------------------------------------------------------------------------
     init: function (options) {
+      // initialize state flag
+      j1.adapter.algolia.state = 'pending';
 
       // -----------------------------------------------------------------------
       // Default module settings
@@ -102,19 +103,19 @@ j1.adapter['algolia'] = (function (j1, window) {
 
       {% comment %} Set global variables
       -------------------------------------------------------------------------- {% endcomment %}
-      _this   = j1.adapter.algolia;  
-      logger  = log4javascript.getLogger('j1.adapter.algolia'); 
+      _this   = j1.adapter.algolia;
+      logger  = log4javascript.getLogger('j1.adapter.algolia');
 
-      state = 'initialize';
-      logger.info('state: ' + state);
-      logger.info('Module is being initialized');
+      _this.setState('started');
+      logger.info('state: ' + _this.getState());
+      logger.info('module is being initialized');
 
       {% comment %} Load module config from yml data
       -------------------------------------------------------------------------- {% endcomment %}
       // Load  module DEFAULTS|CONFIG
       moduleOptions = $.extend({}, {{algolia_config | replace: '=>', ':' | replace: 'nil', '""'}});
 
-      if ( typeof settings !== 'undefined') { 
+      if ( typeof settings !== 'undefined') {
         moduleOptions = j1.mergeData( moduleOptions, settings );
       }
 
@@ -256,14 +257,14 @@ j1.adapter['algolia'] = (function (j1, window) {
         search.start();
         $('#searcher').addClass('row');
 
-        state = 'finished';
-        logger.info('state: ' + state);
-        logger.info("J1 Algolia successfully initialized");
+        _this.setState('finished');
+        logger.info('state: ' + _this.getState());
+        logger.info('module initializing finished');
       } else {
         $('#algolia-site-search').append( '<p class="ml-5 mt-5 mb-5 "> <strong>Algolia Search DISABLED</strong> </p>' );
-        state = 'finished';
-        logger.info('state: ' + state);
-        logger.info("J1 Algolia Seach NOT enabled");
+        _this.setState('finished');
+        logger.info('state: ' + _this.getState());
+        logger.warn("module disabled");
       }
 
       return true;
@@ -273,9 +274,9 @@ j1.adapter['algolia'] = (function (j1, window) {
     // messageHandler: MessageHandler for J1 CookieConsent module
     // Manage messages send from other J1 modules
     // -------------------------------------------------------------------------
-    messageHandler: function ( sender, message ) {  
-      var json_message = JSON.stringify(message, undefined, 2);  
-  
+    messageHandler: function ( sender, message ) {
+      var json_message = JSON.stringify(message, undefined, 2);
+
       logText = 'Received message from ' + sender + ': ' + json_message;
       logger.debug(logText);
 
@@ -283,7 +284,9 @@ j1.adapter['algolia'] = (function (j1, window) {
       //  Process commands|actions
       // -----------------------------------------------------------------------
       if ( message.type === 'command' && message.action === 'module_initialized' ) {
-        _this.setState('finished');
+        //
+        // Place handling of command|action here
+        //
         logger.info(message.text);
       }
 
@@ -295,17 +298,19 @@ j1.adapter['algolia'] = (function (j1, window) {
     }, // END messageHandler
 
     // -------------------------------------------------------------------------
-    //  Set the current (processing) state of the module
+    // setState
+    // Set the current (processing) state of the module
     // -------------------------------------------------------------------------
-    setState: function ( stat ) {
-      state = stat;
+    setState: function (stat) {
+      j1.adapter.scroller.state = stat;
     }, // END setState
 
     // -------------------------------------------------------------------------
-    //  Returns the current (processing) state of the module
+    // getState
+    // Returns the current (processing) state of the module
     // -------------------------------------------------------------------------
     getState: function () {
-      return state;
+      return j1.adapter.scroller.state;
     } // END state
 
   }; // END return
@@ -314,4 +319,4 @@ j1.adapter['algolia'] = (function (j1, window) {
 {% endcapture %}
 
 {{ cache | strip_empty_lines }}
-{% assign cache = nil %}
+{% assign cache = nil %}

data/lib/starter_web/assets/themes/j1/adapter/js/{master_header.js → attic.js}

@@ -6,8 +6,9 @@ regenerate:                             false
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/master_header.js
- # Liquid template to adapt Backstretch Core functions
+ # ~/assets/themes/j1/adapter/js/attic.js
+ # Liquid template to adapt Backstretch Core functions for
+ # all attics (top page headers)
  #
  # Product/Info:
  # https://jekyll.one
@@ -42,16 +43,16 @@ regenerate:                             false
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign header_defaults       = modules.defaults.header.defaults %}
-{% assign header_settings       = modules.header.settings %}
+{% assign attic_defaults       = modules.defaults.attics.defaults %}
+{% assign attic_settings       = modules.attics.settings %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign header_options        = header_defaults | merge: header_settings %}
+{% assign attic_options        = attic_defaults | merge: attic_settings %}
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/master_header.js
+ # ~/assets/themes/j1/adapter/js/attic.js
  # JS Adapter for J1 Master Header
  #
  # Product/Info:
@@ -73,12 +74,11 @@ regenerate:                             false
 
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
-j1.adapter['master_header'] = (function (j1, window) {
+j1.adapter['attic'] = (function (j1, window) {
 
   {% comment %} Set global variables
   ------------------------------------------------------------------------------ {% endcomment %}
   var environment   = '{{environment}}';
-  var state         = 'not_started';
   var moduleOptions = {};
   var _this;
   var logger;
@@ -92,30 +92,33 @@ j1.adapter['master_header'] = (function (j1, window) {
     // -------------------------------------------------------------------------
     // Initializer
     // -------------------------------------------------------------------------
-    init: function ( options ) {
-      // create seetings object from frontmatterOptions 
+    init: function (options) {
+      // initialize state flag
+      j1.adapter.attic.state = 'pending';
+
+      // create seetings object from frontmatterOptions
       var frontmatterOptions = options != null ? $.extend({}, options) : {};
-      
-      // Save frontmatterOptions in the j1 namespace 
+
+      // Save frontmatterOptions in the j1 namespace
       // to be used later by j1.template.init() to load the header
-      j1.adapter.master_header['frontmatterOptions'] = frontmatterOptions;
+      j1.adapter.attic['frontmatterOptions'] = frontmatterOptions;
 
       {% comment %} Set global variables
       -------------------------------------------------------------------------- {% endcomment %}
-      _this   = j1.adapter.master_header;
-      logger  = log4javascript.getLogger('j1.adapter.master_header');
+      _this   = j1.adapter.attic;
+      logger  = log4javascript.getLogger('j1.adapter.attic');
 
-      status = 'started';
-      logger.info('state: ' + status);
-      logger.info('Module is being initialized');
+      _this.setState('started');
+      logger.info('state: ' + _this.getState());
+      logger.info('module is being initialized');
 
       {% comment %} Loading headers if j1.template.init() loaded all data objects
       -------------------------------------------------------------------------- {% endcomment %}
-      var dataLoaded = setInterval(function() {
+      var dependencies_met_attic_adapter = setInterval(function() {
         if (typeof j1.colors !== 'undefined' && typeof j1.fonts !== 'undefined') {
-          // clear interval checking
-          clearInterval(dataLoaded);
           _this.loadHeader( frontmatterOptions );
+          // clear interval checking
+          clearInterval(dependencies_met_attic_adapter);
         }
       }, 50); // END 'dataLoaded'
 
@@ -127,79 +130,104 @@ j1.adapter['master_header'] = (function (j1, window) {
     // -------------------------------------------------------------------------
     loadHeader: function () {
 
-      var frontmatterOptions = j1.adapter.master_header.frontmatterOptions;
+      var frontmatterOptions = j1.adapter.attic.frontmatterOptions;
 
       {% comment %} Load data from header config (yaml data file)
       -------------------------------------------------------------------------- {% endcomment %}
-      {% for item in header_options.headers %}
-        {% if item.header.enabled %}
-
-          {% assign header_id = item.header.id %}
-
-          // Create the SPECIFIC header loader FUNCTION of type: {{header_id}}
-          function {{header_id}} ( headerOptions ) {
-            // Fire backstretch for all slides of the header on header_id
-            if ( $('#{{ header_id }}').length ) {
-              $("#{{ header_id }}").backstretch( headerOptions.slides, {
-                  spinner:                          headerOptions.spinner,
-                  alignX:                           headerOptions.alignX,
-                  alignY:                           headerOptions.alignY,
-                  scale:                            headerOptions.scale,
-                  transition:                       headerOptions.transition,
-                  transitionDuration:               headerOptions.transitionDuration,
-                  animateFirst:                     headerOptions.animateFirst,
-                  duration:                         headerOptions.duration,
-                  paused:                           headerOptions.paused,
-                  start:                            headerOptions.start,
-                  preload:                          headerOptions.preload,
-                  preloadSize:                      headerOptions.preloadSize,
-                  bypassCss:                        headerOptions.bypassCss,
-                  alwaysTestWindowResolution:       headerOptions.alwaysTestWindowResolution,
-                  resolutionRefreshRate:            headerOptions.resolutionRefreshRate,
-                  resolutionChangeRatioThreshold:   headerOptions.transition,
-                  isVideo:                          headerOptions.isVideo,
-                  loop:                             headerOptions.loop,
-                  mute:                             headerOptions.mute
+      {% for item in attic_options.attics %}
+        {% if item.attic.enabled %}
+
+          {% assign attic_id = item.attic.id %}
+
+          // Create the SPECIFIC header loader FUNCTION of type: {{attic_id}}
+          function {{attic_id}} ( atticOptions ) {
+            // Fire backstretch for all slides of the header on attic_id
+            if ( $('#{{attic_id}}').length ) {
+              $("#{{attic_id}}").backstretch(
+                atticOptions.slides, {
+                  spinner:                        atticOptions.spinner,
+                  alignX:                         atticOptions.alignX,
+                  alignY:                         atticOptions.alignY,
+                  scale:                          atticOptions.scale,
+                  transition:                     atticOptions.transition,
+                  transitionDuration:             atticOptions.transitionDuration,
+                  animateFirst:                   atticOptions.animateFirst,
+                  duration:                       atticOptions.duration,
+                  paused:                         atticOptions.paused,
+                  start:                          atticOptions.start,
+                  preload:                        atticOptions.preload,
+                  preloadSize:                    atticOptions.preloadSize,
+                  bypassCss:                      atticOptions.bypassCss,
+                  alwaysTestWindowResolution:     atticOptions.alwaysTestWindowResolution,
+                  resolutionRefreshRate:          atticOptions.resolutionRefreshRate,
+                  resolutionChangeRatioThreshold: atticOptions.transition,
+                  isVideo:                        atticOptions.isVideo,
+                  loop:                           atticOptions.loop,
+                  mute:                           atticOptions.mute
               });
             }
 
             {% comment %} Add a spinner if configured
             -------------------------------------------------------------------- {% endcomment %}
-            if ( headerOptions.spinner ) {
-              $('.backstretch').addClass(headerOptions.spinner);
+            if ( atticOptions.spinner ) {
+              $('.backstretch').addClass(atticOptions.spinner);
             }
 
             // Collect backstretch instance data for Backstretch callbacks
-            var backstretch_instance_data = $("#{{ header_id }}").data('backstretch');
+            var backstretch_instance_data = $('#{{attic_id}}').data('backstretch');
 
             {% comment %} Set the headerLoaded flag
             -------------------------------------------------------------------- {% endcomment %}
-           $(window).on("backstretch.before", function (e, instance, index) {
-              status = 'backstretch.before';
-              logger.debug('state: ' + status);
+           $(window).on('backstretch.before', function (e, instance, index) {
+              _this.setState('backstretch_before');
+              logger.debug('state: ' + _this.getState());
             });
 
-            {% comment %} Add caption text if configured
+            {% comment %} Add a caption (c) or badge (b) if configured
             See: https://github.com/jquery-backstretch/jquery-backstretch/issues/194
             -------------------------------------------------------------------- {% endcomment %}
-            $(window).on("backstretch.after", function (e, instance, index) {
-              status = 'add caption text: backstretch.after';
+            $(window).on('backstretch.after', function (e, instance, index) {
+              logText ='add caption text'
+              _this.setState('backstretch_after');
               logger.debug('state: ' + status);
+              logger.debug(logText);
 
-              if ( typeof headerOptions.slides[index].caption != 'undefined' ) {
-                var theCaption    = headerOptions.slides[index].caption;
-                var theLink       = headerOptions.slides[index].caption_href;
+              if ( typeof atticOptions.slides[index].caption != 'undefined' ) {
+                var cText = atticOptions.slides[index].caption.text;
+                var cLink = atticOptions.slides[index].caption.href;
 
-                if (theLink) {
-                  $(".j1-masthead-caption").html('<a class="j1-masthead-caption-anchor" href="' +theLink+ '" target="_blank">'+theCaption+'</a>').show(); //.addClass('animated fadeInUp');
+                if (cLink) {
+                  $('.attic-caption').html('<a class="j1-masthead-caption-anchor" href="' +cLink+ '" target="_blank">'+cText+'</a>').show(); //.addClass('animated fadeInUp');
                 } else {
-                  $(".j1-masthead-caption").text(theCaption).show(); //.addClass('animated fadeInUp');
+                  $('.attic-caption').text(cText).show(); //.addClass('animated fadeInUp');
+                }
+              } else if (typeof atticOptions.slides[index].badge != 'undefined') {
+                var bType   = atticOptions.slides[index].badge.type;
+                var bAuthor = atticOptions.slides[index].badge.author;
+                var bLink   = atticOptions.slides[index].badge.href;
+
+                if (bType === 'unsplash') {
+                  var badgeHTML = ''
+                      + '<div class="attic__badge">'
+                      + ' <a class="attic__badge_unsplash"'
+                      + '  href="' +bLink+ '?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge"'
+                      + '  target="_blank"'
+                      + '  rel="noopener noreferrer"'
+                      + '  title="Free high-resolution photos from ' +bAuthor+ '">'
+                      + '  <span class="attic__badge_unsplash_icon">'
+                      + '    <svg xmlns="http://www.w3.org/2000/svg"'
+                      + '	   class="attic__badge_unsplash_icon-size"'
+                      + '      viewBox="0 0 32 32">'
+                      + '      <title>search unsplash</title>'
+                      + '      <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path>'
+                      + '    </svg>'
+                      + '  </span>'
+                      + '  <span class="attic__badge_unsplash_text">' +bAuthor+ '</span>'
+                      + ' </a>'
+                      + '</div>';
+
+                  $('.attic-caption').html(badgeHTML).show();
                 }
-
-                $("a.j1-masthead-caption-anchor").each(function(i,e) {
-                  headerOptions.slides[index].caption_color = j1.setColorData(headerOptions.slides[index].caption_color)
-                  $(e).css( "color", headerOptions.slides[index].caption_color );
-                });
               }
             });
 
@@ -207,30 +235,30 @@ j1.adapter['master_header'] = (function (j1, window) {
             -------------------------------------------------------------------- {% endcomment %}
             {% if image_loop %}
             $(window).on("backstretch.before", function (e, instance, index) {
-              status = 'image loop: backstretch.before';
-              logger.debug('state: ' + status);
+              _this.setState('backstretch_before_image_loop');
+              logger.debug('state: ' + _this.getState());
               // remove class for the backstretch_intro background
               if (index === backstretch_instance_data.images.length -1) {
-                $('.backstretch').removeClass(headerOptions.spinner);
+                $('.backstretch').removeClass(atticOptions.spinner);
               }
             });
             {% else %}
             $(window).on("backstretch.before", function (e, instance, index) {
-              status = 'image once: backstretch.before';
-              logger.debug('state: ' + status);
+              _this.setState('backstretch_before_image_once');
+              logger.debug('state: ' + _this.getState());
               // Stop the slideshow after reached the last image
               if (index === backstretch_instance_data.images.length -1) {
-                $("#{{ header_id }}").backstretch("pause");
+                $("#{{attic_id}}").backstretch("pause");
                 // remove class for the backstretch_intro background
-                $('.backstretch').removeClass(headerOptions.spinner);
+                $('.backstretch').removeClass(atticOptions.spinner);
               }
             });
             {% endif %}
 
-          } // END if header_id exists
+          } // END if attic_id exists
 
           // Initialize the header found in page
-          if ( $('#{{ header_id }}').length ) {
+          if ( $('#{{attic_id}}').length ) {
 
           {% comment %} Load data from header config file
           ---------------------------------------------------------------------- {% endcomment %}
@@ -239,55 +267,55 @@ j1.adapter['master_header'] = (function (j1, window) {
            Unclear why title_size|tagline_size evaluated to 1 if NOT set
            --------------------------------------------------------------------- {% endcomment %}
 
-            {% for item in header_options.headers %}
-              {% if item.header.id == header_id %}
+            {% for item in attic_options.attics %}
+              {% if item.attic.id == attic_id %}
 
-                {% assign raised_level          = item.header.raised_level %}
-                {% assign r_text                = item.header.r_text %}
-                {% assign text_emphasis         = item.header.text_emphasis %}
-                {% assign padding_top           = item.header.padding_top %}
-                {% assign padding_bottom        = item.header.padding_bottom %}
-                {% assign margin_bottom         = item.header.margin_bottom %}
+                {% assign raised_level          = item.attic.raised_level %}
+                {% assign r_text                = item.attic.r_text %}
+                {% assign text_emphasis         = item.attic.text_emphasis %}
+                {% assign padding_top           = item.attic.padding_top %}
+                {% assign padding_bottom        = item.attic.padding_bottom %}
+                {% assign margin_bottom         = item.attic.margin_bottom %}
 
-                {% if item.header.title.size != 1 %}
-                {% assign title_size            = item.header.title.size %}
+                {% if item.attic.title.size != 1 %}
+                {% assign title_size            = item.attic.title.size %}
                 {% endif %}
-                {% assign title_color           = item.header.title.color %}
-                {% assign title_animate         = item.header.title.animate %}
-                {% assign title_align           = item.header.title.align %}
+                {% assign title_color           = item.attic.title.color %}
+                {% assign title_animate         = item.attic.title.animate %}
+                {% assign title_align           = item.attic.title.align %}
 
-                {% if item.header.tagline.size != 1 %}
-                {% assign tagline_size          = item.header.tagline.size %}
+                {% if item.attic.tagline.size != 1 %}
+                {% assign tagline_size          = item.attic.tagline.size %}
                 {% endif %}
-                {% assign tagline_color         = item.header.tagline.color %}
-                {% assign tagline_animate       = item.header.tagline.animate %}
-                {% assign tagline_align         = item.header.tagline.align %}
-
-                {% assign background_color_1    = item.header.background_color.color_1 %}
-                {% assign background_color_2    = item.header.background_color.color_2 %}
-
-                {% assign type                  = item.header.image_header.type %}
-                {% assign slides                = item.header.image_header.slides %}
-                {% assign opacity               = item.header.image_header.opacity %}
-                {% assign spinner               = item.header.image_header.spinner %}
-                {% assign alignX                = item.header.image_header.alignX %}
-                {% assign alignY                = item.header.image_header.alignY %}
-                {% assign scale                 = item.header.image_header.scale %}
-                {% assign animateFirst          = item.header.image_header.animateFirst %}
-                {% assign paused                = item.header.image_header.paused %}
-                {% assign start                 = item.header.image_header.start %}
-                {% assign preload               = item.header.image_header.preload %}
-                {% assign preloadSize           = item.header.image_header.preloadSize %}
-                {% assign bypassCss             = item.header.image_header.bypassCss %}
-                {% assign transition            = item.header.image_header.transition %}
-                {% assign duration              = item.header.image_header.duration %}
-                {% assign transitionDuration    = item.header.image_header.transitionDuration %}
-                {% assign animateFirst          = item.header.image_header.animateFirst %}
-                {% assign sound                 = item.header.image_header.sound %}
+                {% assign tagline_color         = item.attic.tagline.color %}
+                {% assign tagline_animate       = item.attic.tagline.animate %}
+                {% assign tagline_align         = item.attic.tagline.align %}
+
+                {% assign background_color_1    = item.attic.background_color.color_1 %}
+                {% assign background_color_2    = item.attic.background_color.color_2 %}
+
+                {% assign type                  = item.attic.image_header.type %}
+                {% assign slides                = item.attic.image_header.slides %}
+                {% assign opacity               = item.attic.image_header.opacity %}
+                {% assign spinner               = item.attic.image_header.spinner %}
+                {% assign alignX                = item.attic.image_header.alignX %}
+                {% assign alignY                = item.attic.image_header.alignY %}
+                {% assign scale                 = item.attic.image_header.scale %}
+                {% assign animateFirst          = item.attic.image_header.animateFirst %}
+                {% assign paused                = item.attic.image_header.paused %}
+                {% assign start                 = item.attic.image_header.start %}
+                {% assign preload               = item.attic.image_header.preload %}
+                {% assign preloadSize           = item.attic.image_header.preloadSize %}
+                {% assign bypassCss             = item.attic.image_header.bypassCss %}
+                {% assign transition            = item.attic.image_header.transition %}
+                {% assign duration              = item.attic.image_header.duration %}
+                {% assign transitionDuration    = item.attic.image_header.transitionDuration %}
+                {% assign animateFirst          = item.attic.image_header.animateFirst %}
+                {% assign sound                 = item.attic.image_header.sound %}
 
                 // Create and json object for HEADER options taken from
                 // header config (YAML data file)
-                var headerOptions = {
+                var atticOptions = {
                   {% if raised_level %}         "raised_level":           {{ raised_level | json }}, {% endif %}
                   {% if r_text %}               "r_text":                 {{ r_text | json }}, {% endif %}
                   {% if text_emphasis %}        "text_emphasis":          {{ text_emphasis | json }}, {% endif %}
@@ -316,7 +344,7 @@ j1.adapter['master_header'] = (function (j1, window) {
 
                 // Create an json object for BACKSTRETCH options taken from
                 // header config (yaml data file)
-                var headerOptions = {
+                var atticOptions = {
                   {% if spinner %}              "spinner":                {{ spinner | json }}, {% endif %}
                   {% if opacity %}              "opacity":                {{ opacity | json }}, {% endif %}
                   {% if slides %}               "slides":                 {{ slides | json }}, {% endif %}
@@ -338,149 +366,148 @@ j1.adapter['master_header'] = (function (j1, window) {
                 }
 
                 // Load  Header DEFAULTS
-                var header_options = $.extend({}, {{header_options | replace:'=>',':' }});
+                var attic_options = $.extend({}, {{attic_options | replace:'=>',':' }});
 
                 // Merge|Overload  Header DEFAULTS by (header) OPTIONS
-                // var headerOptions = j1.mergeData( header_options, headerOptions );
-                var headerOptions = j1.mergeData(headerOptions, header_options);
+                // var atticOptions = j1.mergeData( attic_options, atticOptions );
+                var atticOptions = j1.mergeData(atticOptions, attic_options);
 
                 // Load  Backstretch DEFAULTS
-                //var image_header_defaults = $.extend({}, {{image_header_defaults | replace:'=>',':' }});
+                //var image_attic_defaults = $.extend({}, {{image_attic_defaults | replace:'=>',':' }});
 
                 // Merge|Overload  Backstretch DEFAULTS by (header) OPTIONS
-                //var headerOptions = j1.mergeData( image_header_defaults, headerOptions );
+                //var atticOptions = j1.mergeData( image_attic_defaults, atticOptions );
 
 
               {% else %}
                 {% continue %}
-              {% endif %} // ENDIF header_id
-            {% endfor %} // ENDFOR item in header_config.headers
+              {% endif %} // ENDIF attic_id
+            {% endfor %} // ENDFOR item in header_config.attics
 
             {% comment %} frontmatter takes precedence (over header options)
             -------------------------------------------------------------------- {% endcomment %}
             if ( frontmatterOptions ) {
-              if ( typeof frontmatterOptions.raised_level != 'undefined' ) { headerOptions.raised_level = frontmatterOptions.raised_level; }
-              if ( typeof frontmatterOptions.r_text != 'undefined' ) { headerOptions.r_text = frontmatterOptions.r_text; }
-              if ( typeof frontmatterOptions.text_emphasis != 'undefined' ) { headerOptions.text_emphasis = frontmatterOptions.text_emphasis; }
-              if ( typeof frontmatterOptions.padding_top != 'undefined' ) { headerOptions.padding_top = frontmatterOptions.padding_top; }
-              if ( typeof frontmatterOptions.padding_bottom != 'undefined' ) { headerOptions.padding_bottom = frontmatterOptions.padding_bottom; }
-              if ( typeof frontmatterOptions.margin_bottom != 'undefined' ) { headerOptions.margin_bottom = frontmatterOptions.margin_bottom; }
+              if ( typeof frontmatterOptions.raised_level != 'undefined' ) { atticOptions.raised_level = frontmatterOptions.raised_level; }
+              if ( typeof frontmatterOptions.r_text != 'undefined' ) { atticOptions.r_text = frontmatterOptions.r_text; }
+              if ( typeof frontmatterOptions.text_emphasis != 'undefined' ) { atticOptions.text_emphasis = frontmatterOptions.text_emphasis; }
+              if ( typeof frontmatterOptions.padding_top != 'undefined' ) { atticOptions.padding_top = frontmatterOptions.padding_top; }
+              if ( typeof frontmatterOptions.padding_bottom != 'undefined' ) { atticOptions.padding_bottom = frontmatterOptions.padding_bottom; }
+              if ( typeof frontmatterOptions.margin_bottom != 'undefined' ) { atticOptions.margin_bottom = frontmatterOptions.margin_bottom; }
 
               if ( typeof frontmatterOptions.title != 'undefined' ) {
-                if ( typeof frontmatterOptions.title.color != 'undefined' ) { headerOptions.title_color = frontmatterOptions.title.color; }
-                if ( typeof frontmatterOptions.title.size != 'undefined' ) { headerOptions.title_size = frontmatterOptions.title.size; }
-                if ( typeof frontmatterOptions.title.animate != 'undefined' ) { headerOptions.title_animate = frontmatterOptions.title.animate; }
-                if ( typeof frontmatterOptions.title.align != 'undefined' ) { headerOptions.title_align = frontmatterOptions.title.align; }
+                if ( typeof frontmatterOptions.title.color != 'undefined' ) { atticOptions.title_color = frontmatterOptions.title.color; }
+                if ( typeof frontmatterOptions.title.size != 'undefined' ) { atticOptions.title_size = frontmatterOptions.title.size; }
+                if ( typeof frontmatterOptions.title.animate != 'undefined' ) { atticOptions.title_animate = frontmatterOptions.title.animate; }
+                if ( typeof frontmatterOptions.title.align != 'undefined' ) { atticOptions.title_align = frontmatterOptions.title.align; }
               }
               if ( typeof frontmatterOptions.tagline != 'undefined'  ) {
-                if ( typeof frontmatterOptions.tagline.color != 'undefined'  ) { headerOptions.tagline_color = frontmatterOptions.tagline.color; }
-                if ( typeof frontmatterOptions.tagline.size != 'undefined' ) { headerOptions.tagline_size = frontmatterOptions.tagline.size; }
-                if ( typeof frontmatterOptions.tagline.animate != 'undefined' ) { headerOptions.tagline_animate = frontmatterOptions.tagline.animate; }
-                if ( typeof frontmatterOptions.tagline.align != 'undefined' ) { headerOptions.tagline_align = frontmatterOptions.tagline.align; }
+                if ( typeof frontmatterOptions.tagline.color != 'undefined'  ) { atticOptions.tagline_color = frontmatterOptions.tagline.color; }
+                if ( typeof frontmatterOptions.tagline.size != 'undefined' ) { atticOptions.tagline_size = frontmatterOptions.tagline.size; }
+                if ( typeof frontmatterOptions.tagline.animate != 'undefined' ) { atticOptions.tagline_animate = frontmatterOptions.tagline.animate; }
+                if ( typeof frontmatterOptions.tagline.align != 'undefined' ) { atticOptions.tagline_align = frontmatterOptions.tagline.align; }
               }
               if ( typeof frontmatterOptions.background_color != 'undefined' ) {
-                if ( typeof frontmatterOptions.background_color.color_1 != 'undefined' ) { headerOptions.background_color_1 = frontmatterOptions.background_color.color_1; }
-                if ( typeof frontmatterOptions.background_color.color_2 != 'undefined' ) { headerOptions.background_color_2 = frontmatterOptions.background_color.color_1; }
+                if ( typeof frontmatterOptions.background_color.color_1 != 'undefined' ) { atticOptions.background_color_1 = frontmatterOptions.background_color.color_1; }
+                if ( typeof frontmatterOptions.background_color.color_2 != 'undefined' ) { atticOptions.background_color_2 = frontmatterOptions.background_color.color_1; }
               }
-              if ( typeof frontmatterOptions.spinner != 'undefined' ) { headerOptions.spinner = frontmatterOptions.spinner; }
-              if ( typeof frontmatterOptions.opacity != 'undefined' ) { headerOptions.opacity = frontmatterOptions.opacity; }
-              if ( typeof frontmatterOptions.alignX != 'undefined' ) { headerOptions.alignX = frontmatterOptions.alignX; }
-              if ( typeof frontmatterOptions.alignY != 'undefined' ) { headerOptions.alignY = frontmatterOptions.alignY; }
-              if ( typeof frontmatterOptions.scale != 'undefined' ) { headerOptions.scale = frontmatterOptions.scale; }
-              if ( typeof frontmatterOptions.start != 'undefined' ) { headerOptions.start = frontmatterOptions.start; }
-              if ( typeof frontmatterOptions.animateFirst != 'undefined' ) { headerOptions.animateFirst = frontmatterOptions.animateFirst; }
-              if ( typeof frontmatterOptions.preload != 'undefined' ) { headerOptions.preload = frontmatterOptions.preload; }
-              if ( typeof frontmatterOptions.preloadSize != 'undefined' ) { headerOptions.preloadSize = frontmatterOptions.preloadSize; }
-              if ( typeof frontmatterOptions.mute != 'undefined' ) { headerOptions.mute = frontmatterOptions.mute; }
-              if ( typeof frontmatterOptions.bypassCss != 'undefined' ) { headerOptions.bypassCss = frontmatterOptions.bypassCss; }
-              if ( typeof frontmatterOptions.isVideo != 'undefined' ) { headerOptions.isVideo = frontmatterOptions.isVideo; }
-              if ( typeof frontmatterOptions.loop != 'undefined' ) { headerOptions.loop = frontmatterOptions.loop; }
-              if ( typeof frontmatterOptions.paused != 'undefined' ) { headerOptions.paused = frontmatterOptions.paused; }
-              if ( typeof frontmatterOptions.transition != 'undefined' ) { headerOptions.transition = frontmatterOptions.transition; }
-              if ( typeof frontmatterOptions.duration != 'undefined' ) { headerOptions.duration = frontmatterOptions.duration; }
-              if ( typeof frontmatterOptions.transitionDuration != 'undefined' ) { headerOptions.transitionDuration = frontmatterOptions.transitionDuration; }
-              if ( typeof frontmatterOptions.slides != 'undefined' ) { headerOptions.slides = frontmatterOptions.slides; }
+              if ( typeof frontmatterOptions.spinner != 'undefined' ) { atticOptions.spinner = frontmatterOptions.spinner; }
+              if ( typeof frontmatterOptions.opacity != 'undefined' ) { atticOptions.opacity = frontmatterOptions.opacity; }
+              if ( typeof frontmatterOptions.alignX != 'undefined' ) { atticOptions.alignX = frontmatterOptions.alignX; }
+              if ( typeof frontmatterOptions.alignY != 'undefined' ) { atticOptions.alignY = frontmatterOptions.alignY; }
+              if ( typeof frontmatterOptions.scale != 'undefined' ) { atticOptions.scale = frontmatterOptions.scale; }
+              if ( typeof frontmatterOptions.start != 'undefined' ) { atticOptions.start = frontmatterOptions.start; }
+              if ( typeof frontmatterOptions.animateFirst != 'undefined' ) { atticOptions.animateFirst = frontmatterOptions.animateFirst; }
+              if ( typeof frontmatterOptions.preload != 'undefined' ) { atticOptions.preload = frontmatterOptions.preload; }
+              if ( typeof frontmatterOptions.preloadSize != 'undefined' ) { atticOptions.preloadSize = frontmatterOptions.preloadSize; }
+              if ( typeof frontmatterOptions.mute != 'undefined' ) { atticOptions.mute = frontmatterOptions.mute; }
+              if ( typeof frontmatterOptions.bypassCss != 'undefined' ) { atticOptions.bypassCss = frontmatterOptions.bypassCss; }
+              if ( typeof frontmatterOptions.isVideo != 'undefined' ) { atticOptions.isVideo = frontmatterOptions.isVideo; }
+              if ( typeof frontmatterOptions.loop != 'undefined' ) { atticOptions.loop = frontmatterOptions.loop; }
+              if ( typeof frontmatterOptions.paused != 'undefined' ) { atticOptions.paused = frontmatterOptions.paused; }
+              if ( typeof frontmatterOptions.transition != 'undefined' ) { atticOptions.transition = frontmatterOptions.transition; }
+              if ( typeof frontmatterOptions.duration != 'undefined' ) { atticOptions.duration = frontmatterOptions.duration; }
+              if ( typeof frontmatterOptions.transitionDuration != 'undefined' ) { atticOptions.transitionDuration = frontmatterOptions.transitionDuration; }
+              if ( typeof frontmatterOptions.slides != 'undefined' ) { atticOptions.slides = frontmatterOptions.slides; }
             }
 
             {% comment %} Resolve symbolic color names
             -------------------------------------------------------------------- {% endcomment %}
-            headerOptions.title_color         = j1.setColorData(headerOptions.title_color);
-            headerOptions.tagline_color       = j1.setColorData(headerOptions.tagline_color);
-            headerOptions.background_color_1  = j1.setColorData(headerOptions.background_color_1);
-            headerOptions.background_color_2  = j1.setColorData(headerOptions.background_color_2);
+            atticOptions.title_color         = j1.setColorData(atticOptions.title_color);
+            atticOptions.tagline_color       = j1.setColorData(atticOptions.tagline_color);
+            atticOptions.background_color_1  = j1.setColorData(atticOptions.background_color_1);
+            atticOptions.background_color_2  = j1.setColorData(atticOptions.background_color_2);
 
             {% comment %} Resolve symbolic font sizes names
             -------------------------------------------------------------------- {% endcomment %}
-            headerOptions.title_size          = j1.setFontSize(headerOptions.title_size);
-            headerOptions.tagline_size        = j1.setFontSize(headerOptions.tagline_size);
+            atticOptions.title_size          = j1.setFontSize(atticOptions.title_size);
+            atticOptions.tagline_size        = j1.setFontSize(atticOptions.tagline_size);
 
             {% comment %} Add header CSS classes
             -------------------------------------------------------------------- {% endcomment %}
-            if ( headerOptions.r_text == 'enabled' ) { $('#{{ header_id }}').addClass( 'r-text' ); }
+            if ( atticOptions.r_text == 'enabled' ) { $('#{{attic_id}}').addClass( 'r-text' ); }
 
-            var raised_level = "raised-z" +headerOptions.raised_level;
-            $('#{{ header_id }}').addClass( raised_level );
-            $('#head-title').addClass( headerOptions.title_animate );
-            $('#head-tagline').addClass( headerOptions.tagline_animate );
+            var raised_level = "raised-z" +atticOptions.raised_level;
+            $('#{{attic_id}}').addClass( raised_level );
+            $('#head-title').addClass( atticOptions.title_animate );
+            $('#head-tagline').addClass( atticOptions.tagline_animate );
 
-            var text_emphasis = "text-emphasis-" +headerOptions.text_emphasis;
+            var text_emphasis = "text-emphasis-" +atticOptions.text_emphasis;
             $('#head-title-text').addClass( text_emphasis );
             $('#head-tagline-text').addClass( text_emphasis );
 
             {% comment %} Add header CSS styles to <HEAD>
             -------------------------------------------------------------------- {% endcomment %}
-            var masthead_style = '';
+            var attic_style = '';
 
             // Initialze header background gradient
-            masthead_style += "<style> .j1-masthead { ";
-            masthead_style += "background-image: -webkit-gradient(linear, left top, left bottom, from( " +headerOptions.background_color_1+ " ), to(  " +headerOptions.background_color_2+ " ));";
-            masthead_style += "background-image: -webkit-linear-gradient(top, " +headerOptions.background_color_1+ " 0%, " +headerOptions.background_color_2+ " 100%);";
-            masthead_style += "background-image: -o-linear-gradient(top, " +headerOptions.background_color_1+ " 0%, " +headerOptions.background_color_2+ " 100%);";
-            masthead_style += "background-image: linear-gradient(to bottom, " +headerOptions.background_color_1+ " 0%, " +headerOptions.background_color_2+ " 100%);";
-            masthead_style += 'filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="' +headerOptions.background_color_1+ '", endColorstr="' +headerOptions.background_color_2+ '", GradientType=0); ';
-            masthead_style += "} </style>";
-            $('head').append( masthead_style );
+            attic_style += "<style> .attic { ";
+            attic_style += "background-image: -webkit-gradient(linear, left top, left bottom, from( " +atticOptions.background_color_1+ " ), to(  " +atticOptions.background_color_2+ " ));";
+            attic_style += "background-image: -webkit-linear-gradient(top, " +atticOptions.background_color_1+ " 0%, " +atticOptions.background_color_2+ " 100%);";
+            attic_style += "background-image: -o-linear-gradient(top, " +atticOptions.background_color_1+ " 0%, " +atticOptions.background_color_2+ " 100%);";
+            attic_style += "background-image: linear-gradient(to bottom, " +atticOptions.background_color_1+ " 0%, " +atticOptions.background_color_2+ " 100%);";
+            attic_style += 'filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="' +atticOptions.background_color_1+ '", endColorstr="' +atticOptions.background_color_2+ '", GradientType=0); ';
+            attic_style += "} </style>";
+            $('head').append( attic_style );
 
             // Initialze header sizes
-            masthead_style = '';
+            attic_style = '';
 
-            masthead_style = "<style> .j1-masthead { padding-top:" +headerOptions.padding_top+ "px; padding-bottom: " +headerOptions.padding_bottom+ "px; margin-bottom: " +headerOptions.margin_bottom+ "px; text-shadow: 0 1px 0 rgba(0,0,0,.1); </style>"
-            $('head').append( masthead_style );
-            $('head').append("<style> .j1-masthead .head-title h2 { color: " +headerOptions.title_color+ ";font-size: " +headerOptions.title_size+ " !important; text-align: " +headerOptions.title_align+ ";} </style>");
-            $('head').append("<style> .j1-masthead .head-tagline h3 { color: " +headerOptions.tagline_color+ ";font-size: " +headerOptions.tagline_size+ " !important; text-align: " +headerOptions.tagline_align+ "; } </style>");
+            attic_style = "<style> .attic { padding-top:" +atticOptions.padding_top+ "px; padding-bottom: " +atticOptions.padding_bottom+ "px; margin-bottom: " +atticOptions.margin_bottom+ "px; text-shadow: 0 1px 0 rgba(0,0,0,.1); </style>"
+            $('head').append( attic_style );
+            $('head').append("<style> .attic .head-title h2 { color: " +atticOptions.title_color+ ";font-size: " +atticOptions.title_size+ " !important; text-align: " +atticOptions.title_align+ ";} </style>");
+            $('head').append("<style> .attic .head-tagline h3 { color: " +atticOptions.tagline_color+ ";font-size: " +atticOptions.tagline_size+ " !important; text-align: " +atticOptions.tagline_align+ "; } </style>");
 
             // Add opacity to all header images
             // See: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
-            var masthead_opacity;
+            var attic_opacity;
 
-            masthead_opacity = '<style> .backstretch-item { opacity: ' +headerOptions.opacity+ '; </style>';
-            $('head').append( masthead_opacity );
+            attic_opacity = '<style> .backstretch-item { opacity: ' +atticOptions.opacity+ '; </style>';
+            $('head').append( attic_opacity );
 
-            status = 'initialized';
-            logger.info('state: ' + status);
+            _this.setState('initialized');
+            logger.info('state: ' + _this.getState());
 
             {% comment %} Run the image header if any
             -------------------------------------------------------------------- {% endcomment %}
-            if ( typeof headerOptions.slides != 'undefined' ) {
+            if ( typeof atticOptions.slides != 'undefined' ) {
               // Load the image header if the page is ready (visible)
               $(function() {
-                // logger.debug('Load image header on: ' + {{ header_id }});
+                // logger.debug('Load image header on: ' + {{attic_id}});
                 logger.debug('Load image header');
-                {{ header_id }}( headerOptions )
-                status = 'completed';
-                logger.info('state: ' + status);
+                {{attic_id}}( atticOptions )
+                _this.setState('completed');
+                logger.info('state: ' + _this.getState());
               });
             }
           } // END if header id found in page
         {% endif %} // END if header enabled
-      {% endfor %} // END for item in header_config.headers
+      {% endfor %} // END for item in header_config.attics
 
       // NO header found in page
       if ( $('#no_header').length ) {
-        status = 'completed';
-        logger.info('state: ' + status);
-        logger.warn('No header configured or found in page');        
-        logger.info('state: ' + status);        
+        _this.setState('completed');
+        logger.info('state: ' + _this.getState());
+        logger.warn('No header configured or found in page');
       }
 
       return true;
@@ -490,9 +517,9 @@ j1.adapter['master_header'] = (function (j1, window) {
     // messageHandler: MessageHandler for J1 CookieConsent module
     // Manage messages send from other J1 modules
     // -------------------------------------------------------------------------
-    messageHandler: function ( sender, message ) {  
-      var json_message = JSON.stringify(message, undefined, 2);  
-  
+    messageHandler: function ( sender, message ) {
+      var json_message = JSON.stringify(message, undefined, 2);
+
       logText = 'Received message from ' + sender + ': ' + json_message;
       logger.debug(logText);
 
@@ -512,17 +539,19 @@ j1.adapter['master_header'] = (function (j1, window) {
     }, // END messageHandler
 
     // -------------------------------------------------------------------------
-    //  Set the current (processing) state of the module
+    // setState
+    // Set the current (processing) state of the module
     // -------------------------------------------------------------------------
-    setState: function ( stat ) {
-      state = stat;
+    setState: function (stat) {
+      j1.adapter.scroller.state = stat;
     }, // END setState
 
     // -------------------------------------------------------------------------
-    //  Returns the current (processing) state of the module
+    // getState
+    // Returns the current (processing) state of the module
     // -------------------------------------------------------------------------
     getState: function () {
-      return state;
+      return j1.adapter.scroller.state;
     } // END state
 
   }; // END return
@@ -531,4 +560,4 @@ j1.adapter['master_header'] = (function (j1, window) {
 {% endcapture %}
 
 {{ cache | strip_empty_lines }}
-{% assign cache = nil %}
+{% assign cache = nil %}