j1_template_mde 2018.4.10

data/lib/starter_web/assets/themes/j1/core/js/adapter/master_header.js

@@ -0,0 +1,488 @@
+---
+regenerate:                             true
+---
+
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/assets/themes/j1/core/js/adapter/master_header.js
+ #  Liquid template to create the Template Adapter for J1 Master Header
+ #  using the jQuery Plugin Backstretch for image and video placement
+ #  and animation
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2019 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  For details, see https://jekyll.one
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+/*
+ # -----------------------------------------------------------------------------
+ #  ~/assets/themes/j1/core/js/adapter/master_header.js
+ #  JS Adapter for J1 Master Header
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #  http://www.jquery-backstretch.com/
+ #
+ #  Copyright (C) 2019 Juergen Adams
+ #  Copyright (C) 2012 Scott Robbin
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  For details, see https://jekyll.one
+ #  Backstretch is licensed under the MIT License.
+ #  For details, see https://github.com/jquery-backstretch/jquery-backstretch
+ #
+ # -----------------------------------------------------------------------------
+ #  Adapter generated: {{site.time}}
+ # -----------------------------------------------------------------------------
+*/
+'use strict';
+
+{% comment %} Variables
+--------------------------------------------------------------- {% endcomment %}
+{% assign environment           = site.environment %}
+
+{% assign header_config         = site.data.modules.j1_header %}
+{% assign header_globals        = header_config.defaults.header %}
+{% assign header_defaults       = header_config.defaults.header %}
+{% assign image_header_defaults = header_config.defaults.image_header %}
+
+
+{% comment %} Main
+--------------------------------------------------------------- {% endcomment %}
+j1.MastHead = (function (j1, window) {
+  var environment = '{{environment}}'; // Set environment
+  var state       = 'unknown';
+  var logger;
+  var logText;
+
+  return {
+    // Initialize
+    init: function ( options ) {
+
+    {% comment %}
+    --------------------------------------------------------- {% endcomment %}
+      // Set environment
+      var environment = "{{environment}}";
+      // Setup logger
+      logger = log4javascript.getLogger("j1.MasterHeader");
+
+      // J1 data files
+      var j1_colors = {};
+      var j1_font_sizes = {};
+      var colors_data_path    = "/assets/data/colors.json";
+      var font_size_data_path = "/assets/data/font_sizes.json";
+
+      // Initialize module defaults
+      if ( options  != null ) {
+        var frontmatterOptions = $.extend({}, options);
+      }
+
+      state = 'started';
+      logger.info('state: ' + state); // Set|Log status
+
+    {% comment %} helper functions for (AJAX) data load
+    --------------------------------------------------------- {% endcomment %}
+      function load_color_data() {
+        // Returns the j1_colors object
+        return $.ajax({
+            url:      colors_data_path,
+            success:  function (data) {
+              if (typeof data == 'string') {
+                j1_colors = JSON.parse(data);
+              }
+              if (typeof data == 'object') {
+                j1_colors = data;
+              }
+            }
+        });
+      };
+      function load_font_sizes() {
+        // Returns the j1_font_sizes object
+        return $.ajax({
+            url:      font_size_data_path,
+            success:  function (data) {
+              if (typeof data == 'string') {
+                j1_font_sizes = JSON.parse(data);
+              }
+              if (typeof data == 'object') {
+                j1_font_sizes = data;
+              }
+            }
+        });
+      };
+
+    {% comment %} Deferred data load
+    --------------------------------------------------------- {% endcomment %}
+      // Load color and font (json) data asychronously
+      // See: https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done
+      $.when( load_color_data(), load_font_sizes() ).done (
+        function( load_color_data_response, load_font_sizes_response ) {
+          state = 'running';
+          logger.info('state: ' + state); // Set|Log status
+          j1.MastHead.loadHeader( frontmatterOptions, j1_colors, j1_font_sizes );
+      });
+    }, // end init
+
+    // -------------------------------------------------------------------------
+    // Initialize all header supported
+    // -------------------------------------------------------------------------
+    loadHeader: function ( frontmatterOptions, j1_colors, j1_font_sizes ) {
+
+      {% comment %} Load data from header config (yaml data file)
+      ------------------------------------------------------- {% endcomment %}
+      {% for item in header_config.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, imageHeaderOptions ) {
+            // Fire backstretch for all slides of the header on header_id
+            $("#{{ header_id }}").backstretch( imageHeaderOptions.slides, {
+                spinner:                          imageHeaderOptions.spinner,
+                alignX:                           imageHeaderOptions.alignX,
+                alignY:                           imageHeaderOptions.alignY,
+                scale:                            imageHeaderOptions.scale,
+                transition:                       imageHeaderOptions.transition,
+                transitionDuration:               imageHeaderOptions.transitionDuration,
+                animateFirst:                     imageHeaderOptions.animateFirst,
+                duration:                         imageHeaderOptions.duration,
+                paused:                           imageHeaderOptions.paused,
+                start:                            imageHeaderOptions.start,
+                preload:                          imageHeaderOptions.preload,
+                preloadSize:                      imageHeaderOptions.preloadSize,
+                bypassCss:                        imageHeaderOptions.bypassCss,
+                alwaysTestWindowResolution:       imageHeaderOptions.alwaysTestWindowResolution,
+                resolutionRefreshRate:            imageHeaderOptions.resolutionRefreshRate,
+                resolutionChangeRatioThreshold:   imageHeaderOptions.transition,
+                isVideo:                          imageHeaderOptions.isVideo,
+                loop:                             imageHeaderOptions.loop,
+                mute:                             imageHeaderOptions.mute
+            });
+
+            {% comment %} Add a spinner if configured
+            ------------------------------------------------- {% endcomment %}
+            if ( imageHeaderOptions.spinner ) {
+              $('.backstretch').addClass(imageHeaderOptions.spinner);
+            }
+
+            // Collect backstretch instance data for Backstretch callbacks
+            var backstretch_instance_data = $("#{{ header_id }}").data('backstretch');
+
+            {% comment %} Set the headerLoaded flag
+            ------------------------------------------------- {% endcomment %}
+            $(window).on("backstretch.before", function (e, instance, index) {
+              state = 'finished';
+              logger.info('state: ' + state); // Set|Log status
+            });
+
+            {% comment %} Add caption text if configured
+               see: https://github.com/jquery-backstretch/jquery-backstretch/issues/194
+            ------------------------------------------------- {% endcomment %}
+
+              $(window).on("backstretch.after", function (e, instance, index) {
+                if ( typeof imageHeaderOptions.slides[index].caption != 'undefined' ) {
+                  var theCaption    = imageHeaderOptions.slides[index].caption;
+                  var theLink       = imageHeaderOptions.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');
+                  } else {
+                  	$(".j1-masthead-caption").text(theCaption).show(); //.addClass('animated fadeInUp');
+                  }
+
+                  $("a.j1-masthead-caption-anchor").each(function(i, e){
+                    if ( typeof j1_colors[imageHeaderOptions.slides[index].caption_color] != 'undefined' ) {
+                      imageHeaderOptions.slides[index].caption_color = j1_colors[imageHeaderOptions.slides[index].caption_color] }
+                    $(e).css( "color", imageHeaderOptions.slides[index].caption_color );
+                  });
+                }
+              });
+
+              {% comment %} Detect how show  should run (only once|infinite loop)
+              ----------------------------------------------- {% endcomment %}
+              {% if image_loop %}
+                $(window).on("backstretch.before", function (e, instance, index) {
+                  'use strict';
+                  // remove class for the backstretch_intro background
+                  if (index === backstretch_instance_data.images.length -1) {
+                    $('.backstretch').removeClass(imageHeaderOptions.spinner);
+                  }
+                });
+              {% else %}
+                $(window).on("backstretch.before", function (e, instance, index) {
+                  'use strict';
+                  // Stop the slideshow after reached the last image
+                  if (index === backstretch_instance_data.images.length -1) {
+                    $("#{{ header_id }}").backstretch("pause");
+                    // remove class for the backstretch_intro background
+                    $('.backstretch').removeClass(imageHeaderOptions.spinner);
+                  }
+                });
+              {% endif %}
+
+          } // endif header_id exists
+
+          // Initialize the header found in page
+          if ( $('#{{ header_id }}').length ) {
+
+            {% comment %} Load data from header config file
+            ------------------------------------------------- {% endcomment %}
+
+           {% comment %} NOTE: Unclear why title_size|tagline_size
+              evaluated to 1 if NOT set
+           -------------------------------------------------- {% endcomment %}
+            {% for item in header_config.headers %}
+              {% if item.header.id == header_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 %}
+
+                {% if item.header.title.size != 1 %}
+                {% assign title_size  	        = item.header.title.size %}
+                {% endif %}
+                {% assign title_color  	        = item.header.title.color %}
+                {% assign title_animate  	      = item.header.title.animate %}
+                {% assign title_align 	        = item.header.title.align %}
+
+                {% if item.header.tagline.size != 1 %}
+                {% assign tagline_size  	      = item.header.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 %}
+
+                // Create and json object for HEADER options taken from
+                // header config (YAML data file)
+                var headerOptions = {
+                  {% 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 %}
+                  {% if padding_top %}          "padding_top":        	  {{ padding_top | json }}, {% endif %}
+                  {% if padding_bottom %}       "padding_bottom":        	{{ padding_bottom | json }}, {% endif %}
+                  {% if margin_bottom %}        "margin_bottom":        	{{ margin_bottom | json }}, {% endif %}
+                  {% if title_size %}           "title_size":        	    {{ title_size | json }}, {% endif %}
+                  {% if title_color %}          "title_color":        	  {{ title_color | json }}, {% endif %}
+                  {% if title_animate %}        "title_animate":          {{ title_animate | json }}, {% endif %}
+                  {% if title_align %}          "title_align":        	  {{ title_align | json }}, {% endif %}
+                  {% if tagline_size %}         "tagline_size":      	    {{ tagline_size | json }}, {% endif %}
+                  {% if tagline_color %}        "tagline_color":       	  {{ tagline_color | json }}, {% endif %}
+                  {% if tagline_animate %}      "tagline_animate":        {{ tagline_animate | json }}, {% endif %}
+                  {% if tagline_align %}        "tagline_align":       	  {{ tagline_align | json }}, {% endif %}
+                  {% if background_color_1 %}   "background_color_1":     {{ background_color_1 | json }}, {% endif %}
+                  {% if background_color_2 %}   "background_color_2":     {{ background_color_2 | json }}, {% endif %}
+                }
+
+                {% comment %} trans-script header|backstretch options
+                --------------------------------------------- {% endcomment %}
+                  {% if type == "video" %}
+                    {% assign isVideo = true %}
+                    {% if sound %} {% assign mute = false %} {% else %} {% assign mute = true %} {% endif %}
+                    {% if loop %}  {% assign loop = true %}  {% else %} {% assign loop = true %} {% endif %}
+                  {% endif %}
+
+                // Create an json object for BACKSTRETCH options taken from
+                // header config (yaml data file)
+                var imageHeaderOptions = {
+                  {% if spinner %}              "spinner":        	      {{ spinner | json }}, {% endif %}
+                  {% if opacity %}              "opacity":        	      {{ opacity | json }}, {% endif %}
+                  {% if slides %}               "slides":        	        {{ slides | json }}, {% endif %}
+                  {% if alignX %}               "alignX":        	        {{ alignX | json }}, {% endif %}
+                  {% if alignY %}               "alignY":        	        {{ alignY | json }}, {% endif %}
+                  {% if scale %}                "scale":         	        {{ scale | json }}, {% endif %}
+                  {% if animateFirst %}         "animateFirst":   	      {{ animateFirst | json }}, {% endif %}
+                  {% if paused %}               "paused":   	            {{ paused | json }}, {% endif %}
+                  {% if start %}                "start":   	              {{ start | json }}, {% endif %}
+                  {% if preload %}              "preload":        	      {{ preload | json }}, {% endif %}
+                  {% if preloadSize %}          "preloadSize":    	      {{ preloadSize | json }}, {% endif %}
+                  {% if bypassCss %}            "bypassCss":              {{ bypassCss | json }}, {% endif %}
+                  {% if transition %}           "transition":             {{ transition | json }}, {% endif %}
+                  {% if isVideo %}              "isVideo":                {{ isVideo | json }}, {% endif %}
+                  {% if mute %}                 "mute":                   {{ mute | json }}, {% endif %}
+                  {% if loop %}                 "loop":                   {{ loop | json }}, {% endif %}
+                  {% if transitionDuration %}   "transitionDuration":     {{ transitionDuration | json }}, {% endif %}
+                  {% if duration %}             "duration":       	      {{ duration | json }}, {% endif %}
+                }
+
+                // Load  Header DEFAULTS
+                var header_defaults = $.extend({}, {{header_defaults | replace:'=>',':' }});
+                // Merge|Overload  Header DEFAULTS by (header) OPTIONS
+                var headerOptions = j1.mergeData( header_defaults, headerOptions );
+                // Load  Backstretch DEFAULTS
+                var image_header_defaults = $.extend({}, {{image_header_defaults | replace:'=>',':' }});
+                // Merge|Overload  Backstretch DEFAULTS by (header) OPTIONS
+                var imageHeaderOptions = j1.mergeData( image_header_defaults, imageHeaderOptions );
+              {% else %}
+                {% continue %}
+              {% endif %} // endif header_id
+            {% endfor %} // endfor item in header_config.headers
+
+            {% 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.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.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.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.spinner != 'undefined' ) { imageHeaderOptions.spinner = frontmatterOptions.spinner; }
+              if ( typeof frontmatterOptions.opacity != 'undefined' ) { imageHeaderOptions.opacity = frontmatterOptions.opacity; }
+              if ( typeof frontmatterOptions.alignX != 'undefined' ) { imageHeaderOptions.alignX = frontmatterOptions.alignX; }
+              if ( typeof frontmatterOptions.alignY != 'undefined' ) { imageHeaderOptions.alignY = frontmatterOptions.alignY; }
+              if ( typeof frontmatterOptions.scale != 'undefined' ) { imageHeaderOptions.scale = frontmatterOptions.scale; }
+              if ( typeof frontmatterOptions.start != 'undefined' ) { imageHeaderOptions.start = frontmatterOptions.start; }
+              if ( typeof frontmatterOptions.animateFirst != 'undefined' ) { imageHeaderOptions.animateFirst = frontmatterOptions.animateFirst; }
+              if ( typeof frontmatterOptions.preload != 'undefined' ) { imageHeaderOptions.preload = frontmatterOptions.preload; }
+              if ( typeof frontmatterOptions.preloadSize != 'undefined' ) { imageHeaderOptions.preloadSize = frontmatterOptions.preloadSize; }
+              if ( typeof frontmatterOptions.mute != 'undefined' ) { imageHeaderOptions.mute = frontmatterOptions.mute; }
+              if ( typeof frontmatterOptions.bypassCss != 'undefined' ) { imageHeaderOptions.bypassCss = frontmatterOptions.bypassCss; }
+              if ( typeof frontmatterOptions.isVideo != 'undefined' ) { imageHeaderOptions.isVideo = frontmatterOptions.isVideo; }
+              if ( typeof frontmatterOptions.loop != 'undefined' ) { imageHeaderOptions.loop = frontmatterOptions.loop; }
+              if ( typeof frontmatterOptions.paused != 'undefined' ) { imageHeaderOptions.paused = frontmatterOptions.paused; }
+              if ( typeof frontmatterOptions.transition != 'undefined' ) { imageHeaderOptions.transition = frontmatterOptions.transition; }
+              if ( typeof frontmatterOptions.duration != 'undefined' ) { imageHeaderOptions.duration = frontmatterOptions.duration; }
+              if ( typeof frontmatterOptions.transitionDuration != 'undefined' ) { imageHeaderOptions.transitionDuration = frontmatterOptions.transitionDuration; }
+              if ( typeof frontmatterOptions.slides != 'undefined' ) { imageHeaderOptions.slides = frontmatterOptions.slides; }
+            }
+
+            {% comment %} Resolve symbolic color names
+            ------------------------------------------------- {% endcomment %}
+            if ( typeof j1_colors[headerOptions.title_color] != 'undefined' ) { headerOptions.title_color = j1_colors[headerOptions.title_color] }
+            if ( typeof j1_colors[headerOptions.tagline_color] != 'undefined' ) { headerOptions.tagline_color = j1_colors[headerOptions.tagline_color] }
+            if ( typeof j1_colors[headerOptions.background_color_1] != 'undefined' ) { headerOptions.background_color_1 = j1_colors[headerOptions.background_color_1] }
+            if ( typeof j1_colors[headerOptions.background_color_2] != 'undefined' ) { headerOptions.background_color_2 = j1_colors[headerOptions.background_color_2] }
+
+            {% comment %} Add header CSS classes
+            ------------------------------------------------- {% endcomment %}
+
+               if ( headerOptions.r_text == 'enabled' ) { $('#{{ header_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 text_emphasis = "text-emphasis-" +headerOptions.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 = '';
+               // Initialze header background gradient/colors
+               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 );
+
+               // Initialze header sizes
+               masthead_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: " +j1_font_sizes[headerOptions.title_size]+ " !important; text-align: " +headerOptions.title_align+ ";} </style>");
+               $('head').append("<style> .j1-masthead .head-tagline h3 { color: " +headerOptions.tagline_color+ ";font-size: " +j1_font_sizes[headerOptions.tagline_size]+ " !important; text-align: " +headerOptions.tagline_align+ "; } </style>");
+
+               // Add opacity to all header images
+               // See: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
+               var masthead_opacity;
+               masthead_opacity = '<style> .backstretch-item { opacity: ' +imageHeaderOptions.opacity+ '; </style>';
+               $('head').append( masthead_opacity );
+               state = 'initialized';
+               logger.info('state: ' + state); // Set|Log status
+               {% comment %} Run the image header if any
+
+              ------------------------------------------------- {% endcomment %}
+                if ( typeof imageHeaderOptions.slides != 'undefined' ) {
+                  // Load the image header portion if the page is signaled as ready (and visible)
+                  var loadImageHeaderOnPageFinished = setInterval(function() {
+                    if ( j1.state() === 'finished' ) {
+                      {{ header_id }}( headerOptions, imageHeaderOptions )
+                      // clear interval checking
+                      clearInterval(loadImageHeaderOnPageFinished);
+                      state = 'completed';
+                      logger.info('state: ' + state); // Set|Log status
+                    }
+                  }, 50); // end setInterval
+                }
+
+          } // endif header id found in page
+        {% endif %} // endif header enabled
+      {% endfor %} // endfor item in header_config.headers
+    }, // end function loadHeader
+
+    // -------------------------------------------------------------------------
+    //  returns the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    state: function () {
+      return state;
+    },
+
+  }; // end return
+})(j1, window);
+
+{% endcapture %}
+
+{{ cache | strip_empty_lines }}
+{% assign cache = nil %}