--- regenerate: true --- {% 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_config = 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 %} Set config options -------------------------------------------------------------------------------- {% endcomment %} /* # ----------------------------------------------------------------------------- # ~/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['masterheader'] = (function (j1, window) { {% comment %} Set global variables ------------------------------------------------------------------------------ {% endcomment %} var environment = '{{environment}}'; var state = 'not_started'; var logger; var logText; // --------------------------------------------------------------------------- // Main object // --------------------------------------------------------------------------- return { // ------------------------------------------------------------------------- // Initializer // ------------------------------------------------------------------------- init: function ( options ) { var frontmatterOptions = options != null ? $.extend({}, options) : {}; {% comment %} Set global variables -------------------------------------------------------------------------- {% endcomment %} logger = log4javascript.getLogger("j1.adapter.masterheader"); state = 'started'; logger.info('state: ' + state); // Set|Log status {% 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 state = 'running'; logger.info('state: ' + state); // Set|Log status j1.adapter.masterheader.loadHeader( frontmatterOptions ); } // END j1.getState() === '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_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 if ( $('#{{ header_id }}').length ) { $("#{{ 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) { $(".attic-caption").html(''+theCaption+'').show(); //.addClass('animated fadeInUp'); } else { $(".attic-caption").text(theCaption).show(); //.addClass('animated fadeInUp'); } $("a.attic-caption-anchor").each(function(i,e) { imageHeaderOptions.slides[index].caption_color = j1.setColorData(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 %} 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 attic_style = ''; // Initialze header background gradient attic_style += ""; $('head').append( attic_style ); // Initialze header sizes attic_style = ''; attic_style = "" $('head').append( attic_style ); $('head').append(""); $('head').append(""); // Add opacity to all header images // See: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/ var attic_opacity; attic_opacity = ''; $('head').append( attic_opacity ); state = 'initialized'; logger.info('state: ' + state); {% 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 } } // END if header id found in page {% endif %} // END if header enabled {% endfor %} // END for item in header_config.headers return true; }, // END loadHeader // ------------------------------------------------------------------------- // returns the current (processing) state of the module // ------------------------------------------------------------------------- state: function () { return state; }, // END state }; // END return })(j1, window); {% endcapture %} {{ cache | strip_empty_lines }} {% assign cache = nil %}