--- regenerate: false --- {% capture cache %} {% comment %} # ----------------------------------------------------------------------------- # ~/assets/themes/j1/adapter/js/master_header.js # Liquid template to adapt Backstretch Core functions # # 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 %} {% comment %} Liquid procedures -------------------------------------------------------------------------------- {% endcomment %} {% comment %} Set global settings -------------------------------------------------------------------------------- {% endcomment %} {% assign environment = site.environment %} {% assign template_version = site.version %} {% comment %} Process YML config data ================================================================================ {% endcomment %} {% comment %} Set config files -------------------------------------------------------------------------------- {% endcomment %} {% assign site_config = site %} {% assign template_config = site.data.template_settings %} {% assign blocks = site.data.blocks %} {% assign modules = site.data.modules %} {% comment %} Set config data -------------------------------------------------------------------------------- {% endcomment %} {% assign header_defaults = modules.defaults.header.defaults %} {% assign header_settings = modules.header.settings %} {% comment %} Set config options -------------------------------------------------------------------------------- {% endcomment %} {% assign header_options = header_defaults | merge: header_settings %} /* # ----------------------------------------------------------------------------- # ~/assets/themes/j1/adapter/js/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 %} Main -------------------------------------------------------------------------------- {% endcomment %} j1.adapter['master_header'] = (function (j1, window) { {% comment %} Set global variables ------------------------------------------------------------------------------ {% endcomment %} var environment = '{{environment}}'; var state = 'not_started'; var moduleOptions = {}; var _this; var logger; var logText; // --------------------------------------------------------------------------- // Main object // --------------------------------------------------------------------------- return { // ------------------------------------------------------------------------- // Initializer // ------------------------------------------------------------------------- init: function ( options ) { var frontmatterOptions = options != null ? $.extend({}, options) : {}; {% comment %} Set global variables -------------------------------------------------------------------------- {% endcomment %} _this = j1.adapter.master_header; logger = log4javascript.getLogger('j1.adapter.master_header'); status = 'started'; _this.setState(status); logger.info('state: ' + status); logger.info('Module is being initialized'); {% comment %} Run loading headers if J1 Template data is loaded -------------------------------------------------------------------------- {% endcomment %} var j1DataLoaded = setInterval(function() { {% comment %} Deferred (AJAX) data load ------------------------------------------------------------------------ {% endcomment %} if ( j1.getState() === 'running' ) { clearInterval(j1DataLoaded); // clear interval checking status = 'running'; _this.setState(status); logger.info('state: ' + status); _this.loadHeader( frontmatterOptions ); } // END j1 state === 'running' }, 50); // END setInterval j1DataLoaded return true; }, // END init // ------------------------------------------------------------------------- // Initialize all header supported // ------------------------------------------------------------------------- loadHeader: function ( 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 }); } {% comment %} Add a spinner if configured -------------------------------------------------------------------- {% endcomment %} if ( headerOptions.spinner ) { $('.backstretch').addClass(headerOptions.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) { status = 'finished'; _this.setState(status); logger.info('state: ' + 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 headerOptions.slides[index].caption != 'undefined' ) { var theCaption = headerOptions.slides[index].caption; var theLink = headerOptions.slides[index].caption_href; if (theLink) { $(".j1-masthead-caption").html(''+theCaption+'').show(); //.addClass('animated fadeInUp'); } else { $(".j1-masthead-caption").text(theCaption).show(); //.addClass('animated fadeInUp'); } $("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 ); }); } }); {% 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(headerOptions.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(headerOptions.spinner); } }); {% endif %} } // END if 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_options.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 headerOptions = { {% 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_options = $.extend({}, {{header_options | replace:'=>',':' }}); // Merge|Overload Header DEFAULTS by (header) OPTIONS // var headerOptions = j1.core.mergeData( header_options, headerOptions ); var headerOptions = j1.core.mergeData(headerOptions, header_options); // Load Backstretch DEFAULTS //var image_header_defaults = $.extend({}, {{image_header_defaults | replace:'=>',':' }}); // Merge|Overload Backstretch DEFAULTS by (header) OPTIONS //var headerOptions = j1.core.mergeData( image_header_defaults, headerOptions ); {% 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' ) { 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; } } {% 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); {% comment %} Resolve symbolic font sizes names -------------------------------------------------------------------- {% endcomment %} headerOptions.title_size = j1.setFontSize(headerOptions.title_size); headerOptions.tagline_size = j1.setFontSize(headerOptions.tagline_size); {% 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 -------------------------------------------------------------------- {% endcomment %} var masthead_style = ''; // Initialze header background gradient masthead_style += ""; $('head').append( masthead_style ); // Initialze header sizes masthead_style = ''; masthead_style = "" $('head').append( masthead_style ); $('head').append(""); $('head').append(""); // Add opacity to all header images // See: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/ var masthead_opacity; masthead_opacity = ''; $('head').append( masthead_opacity ); status = 'initialized'; _this.setState(status); logger.info('state: ' + status); {% comment %} Run the image header if any -------------------------------------------------------------------- {% endcomment %} if ( typeof headerOptions.slides != 'undefined' ) { // Load the image header portion if the page is signaled as ready (and visible) var loadImageHeaderOnPageFinished = setInterval(function() { if ( j1.getState() === 'finished' ) { {{ header_id }}( headerOptions ) // clear interval checking clearInterval(loadImageHeaderOnPageFinished); status = 'completed'; _this.setState(status); logger.info('state: ' + status); } }, 50); // END setInterval } } // END if header id found in page {% endif %} // END if header enabled {% endfor %} // END for item in header_config.headers // NO header found in page if ( $('#no_header').length ) { status = 'initialized'; _this.setState(status); logger.info('state: ' + status); logger.warn('No header configured/found in page'); // Set final state var loadImageHeaderOnPageFinished = setInterval(function() { if ( j1.getState() === 'finished' ) { // clear interval checking clearInterval(loadImageHeaderOnPageFinished); status = 'completed'; _this.setState(status); logger.info('state: ' + status); } }, 50); // END setInterval } return true; }, // END loadHeader // ------------------------------------------------------------------------- // 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); logText = 'Received message from ' + sender + ': ' + json_message; logger.debug(logText); // ----------------------------------------------------------------------- // Process commands|actions // ----------------------------------------------------------------------- if ( message.type === 'command' && message.action === 'module_initialized' ) { _this.setState('finished'); logger.info(message.text); } // // Place handling of other command|action here // return true; }, // END messageHandler // ------------------------------------------------------------------------- // Set the current (processing) state of the module // ------------------------------------------------------------------------- setState: function ( stat ) { state = stat; }, // END setState // ------------------------------------------------------------------------- // Returns the current (processing) state of the module // ------------------------------------------------------------------------- getState: function () { return state; } // END state }; // END return })(j1, window); {% endcapture %} {{ cache | strip_empty_lines }} {% assign cache = nil %}