initial
This commit is contained in:
commit
9883323161
17470 files changed
+4470592
No files matched your search
@@ -0,0 +1,646 @@
|
||||
/* offside-js 1.3.1 22-05-2016
|
||||
* Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation
|
||||
* https://github.com/toomuchdesign/offside.git
|
||||
*
|
||||
* by Andrea Carraro
|
||||
* Available under the MIT license
|
||||
*/
|
||||
|
||||
;(function ( window, document, undefined ) {
|
||||
|
||||
/*
|
||||
* The first time Offside is called, it creates a singleton-factory object
|
||||
* and place it into "window.offside.factory".
|
||||
*
|
||||
* Offside factory serves the following purposes:
|
||||
* - DOM initialization
|
||||
* - Centralized Offside instances management and initialization
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Self-invoking function returning the object which contains
|
||||
// the "getInstance" method used for initializing
|
||||
// the Offside sigleton factory
|
||||
var offside = (function () {
|
||||
|
||||
// Global Offside singleton-factory constructor
|
||||
function initOffsideFactory( options ) {
|
||||
|
||||
// Utility functions
|
||||
// Shared among factory and Offside instances, too
|
||||
|
||||
// Close all open Offsides.
|
||||
// If an Offside instance id is provided, it just closes the matching instance instead
|
||||
var closeAll = function( offsideId ) {
|
||||
|
||||
// Look for an open Offside id
|
||||
if ( openOffsidesId.length > 0 ) {
|
||||
|
||||
// Close matching Offside instance if an ID is provided
|
||||
if ( !isNaN( offsideId ) ) {
|
||||
|
||||
instantiatedOffsides[ offsideId ].close();
|
||||
} else {
|
||||
|
||||
// Close all Offside instances
|
||||
openOffsidesId.forEach( function( offsideId ) {
|
||||
instantiatedOffsides[ offsideId ].close();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// Append a class to body in order to turn on elements CSS 3D transitions
|
||||
// only when happens the first interation with an Offside instance.
|
||||
// Otherwise we would see Offside instances being smoothly pushed
|
||||
// out of the screen during DOM initialization.
|
||||
turnOnCssTransitions = function() {
|
||||
addClass( body, transitionsClass );
|
||||
},
|
||||
|
||||
addClass = function( el, c ) {
|
||||
if ( el.classList ) {
|
||||
el.classList.add(c);
|
||||
} else {
|
||||
el.className = ( el.className + ' ' + c ).trim();
|
||||
}
|
||||
},
|
||||
|
||||
removeClass = function( el, c ) {
|
||||
if ( el.classList ) {
|
||||
el.classList.remove(c);
|
||||
} else {
|
||||
el.className = el.className.replace( new RegExp( '(^|\\b)' + c.split(' ').join('|') + '(\\b|$)', 'gi' ), ' ' );
|
||||
}
|
||||
},
|
||||
|
||||
addEvent = function( el, eventName, eventHandler ) {
|
||||
el.addEventListener( eventName, eventHandler );
|
||||
},
|
||||
|
||||
removeEvent = function( el, eventName, eventHandler ) {
|
||||
el.removeEventListener( eventName, eventHandler );
|
||||
},
|
||||
|
||||
// Return a collection (array) of DOM elements from:
|
||||
// - A DOM element
|
||||
// - An array of DOM elements
|
||||
// - A string selector
|
||||
getDomElements = function( els ) {
|
||||
|
||||
// "els" is a DOM element
|
||||
// http://stackoverflow.com/a/120275/2902821
|
||||
if( els instanceof HTMLElement ){
|
||||
return [ els ];
|
||||
}
|
||||
|
||||
// "els" is an array
|
||||
else if( Array.isArray( els ) ) {
|
||||
return els;
|
||||
}
|
||||
|
||||
// "els" is a string
|
||||
else if( typeof els === 'string' ) {
|
||||
// Convert Nodelist into an array
|
||||
// http://www.jstips.co/en/converting-a-node-list-to-an-array/
|
||||
return Array.apply( null, document.querySelectorAll( els ) );
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
// Check if a value exists in an array. Returns:
|
||||
// - array index if value exists
|
||||
// - "false" if value is not found
|
||||
// See: http://stackoverflow.com/a/5767357
|
||||
isInArray = function( arr, value ) {
|
||||
var index = arr.indexOf( value );
|
||||
return index > -1 ? index : false;
|
||||
};
|
||||
|
||||
// Offside.js factory initialization
|
||||
|
||||
var i,
|
||||
factorySettings; // Offside factory private settings
|
||||
|
||||
// Default factory settings
|
||||
factorySettings = {
|
||||
|
||||
slidingElementsSelector: '.offside-sliding-element', // String: Default sliding elements selectors ('#foo, #bar')
|
||||
disableCss3dTransforms: false, // Disable CSS 3d Transforms support (for testing purposes)
|
||||
debug: false, // Boolean: If true, print errors in console
|
||||
};
|
||||
|
||||
// User defined factory settings
|
||||
for ( i in options ) {
|
||||
if ( factorySettings.hasOwnProperty( i ) ) {
|
||||
factorySettings[i] = options[i];
|
||||
}
|
||||
}
|
||||
|
||||
// Private factory properties
|
||||
var globalClass = 'offside-js', // Global Offside classes namespace
|
||||
initClass = globalClass + '--init', // Class appended to body when Offside is intialized
|
||||
slidingElementsClass = 'offside-sliding-element', // Class appended to sliding elements
|
||||
transitionsClass = globalClass + '--interact', // Class appended to body when ready to turn on Offside CSS transitions (Added when first menu interaction happens)
|
||||
instantiatedOffsides = [], // Array containing all instantiated offside elements
|
||||
firstInteraction = true, // Keep track of first Offside interaction
|
||||
has3d = factorySettings.disableCss3dTransforms ? false : _has3d(), // Browser supports CSS 3d Transforms
|
||||
openOffsidesId = [], // Tracks opened Offside instances id's
|
||||
body = document.body,
|
||||
slidingElements = getDomElements( factorySettings.slidingElementsSelector ), // Sliding elements
|
||||
debug = factorySettings.debug;
|
||||
|
||||
// Offside singleton-factory Dom initialization
|
||||
// It's called just once on Offside singleton-factory init.
|
||||
function _factoryDomInit() {
|
||||
|
||||
// Add class to sliding elements
|
||||
slidingElements.forEach( function( item ) {
|
||||
addClass( item, slidingElementsClass );
|
||||
});
|
||||
|
||||
// DOM Fallbacks when CSS transform 3d not available
|
||||
if ( !has3d ) {
|
||||
// No CSS 3d Transform fallback
|
||||
addClass( document.documentElement, 'no-csstransforms3d' ); //Adds Modernizr-like class to HTML element when CSS 3D Transforms not available
|
||||
}
|
||||
|
||||
// Add init class to body
|
||||
addClass( body, initClass );
|
||||
}
|
||||
|
||||
// Private Offside factory methods
|
||||
|
||||
// Testing for CSS 3D Transform Support
|
||||
// https://gist.github.com/lorenzopolidori/3794226
|
||||
function _has3d() {
|
||||
|
||||
if ( !window.getComputedStyle ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var el = document.createElement('p'),
|
||||
has3d,
|
||||
transforms = {
|
||||
'webkitTransform':'-webkit-transform',
|
||||
'OTransform':'-o-transform',
|
||||
'msTransform':'-ms-transform',
|
||||
'MozTransform':'-moz-transform',
|
||||
'transform':'transform'
|
||||
};
|
||||
|
||||
// Add it to the body to get the computed style
|
||||
document.body.insertBefore(el, null);
|
||||
|
||||
for( var t in transforms ){
|
||||
if( el.style[t] !== undefined ){
|
||||
el.style[t] = 'translate3d(1px,1px,1px)';
|
||||
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
|
||||
return ( has3d !== undefined && has3d.length > 0 && has3d !== 'none' );
|
||||
}
|
||||
|
||||
// Offside constructor wrapper
|
||||
// It supplies a wrapper around OffsideInstance constructor
|
||||
// to prevent instance initialization when casted on a non-existing DOM element
|
||||
// See: http://stackoverflow.com/a/8618792
|
||||
function createOffsideInstance( el, options, offsideId ) {
|
||||
|
||||
// Check if provided element exists before using it to instantiate an Offside instance
|
||||
var domEl = el !== undefined ?
|
||||
getDomElements( el ) :
|
||||
getDomElements( '.offside' );
|
||||
|
||||
// If provided el exists initialize an Offside instance, else return null
|
||||
return domEl !== false ?
|
||||
new OffsideInstance( domEl[0], options, offsideId ) :
|
||||
null;
|
||||
}
|
||||
|
||||
// Offside constructor
|
||||
// Set up and initialize a new Offside instance
|
||||
// Called by Offside factory "getOffsideInstance()" method
|
||||
function OffsideInstance( domEl, options, offsideId ) {
|
||||
|
||||
var i,
|
||||
offsideSettings;
|
||||
|
||||
// Default Offside instance settings
|
||||
offsideSettings = {
|
||||
|
||||
buttonsSelector: '', // String: Offside toggle buttons selectors ('#foo, #bar')
|
||||
slidingSide: 'left', // String: Offside element pushed on left or right
|
||||
init: function(){}, // Function: After init callback
|
||||
beforeOpen: function(){}, // Function: Before open callback
|
||||
afterOpen: function(){}, // Function: After open callback
|
||||
beforeClose: function(){}, // Function: Before close callback
|
||||
afterClose: function(){}, // Function: After close callback
|
||||
beforeDestroy: function(){}, // Function: After destroy callback
|
||||
afterDestroy: function(){}, // Function: After destroy callback
|
||||
};
|
||||
|
||||
// User defined Offside instance settings
|
||||
for ( i in options ) {
|
||||
if ( offsideSettings.hasOwnProperty( i ) ) {
|
||||
offsideSettings[i] = options[i];
|
||||
}
|
||||
}
|
||||
|
||||
// Offside instance private properties
|
||||
var offside = domEl, // Hello, I'm the Offside instance
|
||||
offsideButtons = getDomElements( offsideSettings.buttonsSelector ), // Offside toggle buttons
|
||||
slidingSide = offsideSettings.slidingSide,
|
||||
offsideClass = 'offside', // Class added to Offside instance when initialized
|
||||
offsideSideClass = offsideClass + '--' + slidingSide, // Class added to Offside instance when initialized (eg. offside offside--left)
|
||||
offsideOpenClass = 'is-open', // Class appended to Offside instance when open
|
||||
offsideBodyOpenClass = globalClass + '--' + 'is-open', // Class appended to body when an Offside instance is open (offside-js--is-open)
|
||||
offsideBodyOpenSideClass = globalClass + '--is-' + slidingSide, // Class appended to body when Offside instance is open (eg. offside-js--is-left / offside-js--is-open)
|
||||
id = offsideId || 0; // Offside instance id
|
||||
|
||||
// Offside instance private methods
|
||||
|
||||
var _toggleOffside = function() {
|
||||
|
||||
// Premise: Just 1 Offside instance at time can be open.
|
||||
|
||||
// Check currently toggling Offside status
|
||||
isInArray( openOffsidesId, id ) === false ? _openOffside() : _closeOffside();
|
||||
},
|
||||
|
||||
_openOffside = function() {
|
||||
|
||||
// beforeOpen callback
|
||||
offsideSettings.beforeOpen();
|
||||
|
||||
// Turn on CSS transitions on first interaction with an Offside instance
|
||||
if ( firstInteraction ) {
|
||||
firstInteraction = false;
|
||||
turnOnCssTransitions();
|
||||
}
|
||||
|
||||
// If another Offside instance is already open,
|
||||
// close it before going on
|
||||
closeAll();
|
||||
|
||||
// Set global body active class for current Offside instance
|
||||
addClass( body, offsideBodyOpenClass );
|
||||
addClass( body, offsideBodyOpenSideClass );
|
||||
|
||||
// Add Offside instance open class
|
||||
addClass( offside, offsideOpenClass );
|
||||
|
||||
// Update open Offside instances tracker
|
||||
openOffsidesId.push( id );
|
||||
|
||||
// afterOpen callback
|
||||
offsideSettings.afterOpen();
|
||||
},
|
||||
|
||||
_closeOffside = function() {
|
||||
|
||||
// Proceed with closing stuff only if
|
||||
// current Offside instance is listed among openOffsidesId array
|
||||
var index = isInArray( openOffsidesId, id );
|
||||
|
||||
if ( index !== false ) {
|
||||
|
||||
// beforeClose callback
|
||||
offsideSettings.beforeClose();
|
||||
|
||||
// Remove global body active class for current Offside instance
|
||||
removeClass( body, offsideBodyOpenClass );
|
||||
removeClass( body, offsideBodyOpenSideClass );
|
||||
|
||||
// Remove Offside instance open class
|
||||
removeClass( offside, offsideOpenClass );
|
||||
|
||||
// Update open Offside instances tracker
|
||||
openOffsidesId.splice( index, 1 );
|
||||
|
||||
// afterClose callback
|
||||
offsideSettings.afterClose();
|
||||
}
|
||||
},
|
||||
|
||||
_closeAll = function() {
|
||||
|
||||
closeAll();
|
||||
},
|
||||
|
||||
// Offside buttons click handler
|
||||
_onButtonClick = function( e ) {
|
||||
|
||||
e.preventDefault();
|
||||
_toggleOffside();
|
||||
},
|
||||
|
||||
/*
|
||||
// Get Offside instance unique ID
|
||||
_getId = function() {
|
||||
return id;
|
||||
}
|
||||
*/
|
||||
|
||||
// Set up and initialize a new Offside instance
|
||||
_initOffside = function() {
|
||||
|
||||
if ( debug ) {
|
||||
_checkElements();
|
||||
}
|
||||
|
||||
// Append classes to Offside instance (.offside and .offside{slidingSide})
|
||||
addClass( offside, offsideClass );
|
||||
addClass( offside, offsideSideClass );
|
||||
|
||||
// Toggle Offside on click event
|
||||
offsideButtons.forEach( function( item ) {
|
||||
addEvent( item, 'click', _onButtonClick );
|
||||
});
|
||||
|
||||
// Init callback
|
||||
offsideSettings.init();
|
||||
},
|
||||
|
||||
_destroyOffside = function() {
|
||||
|
||||
// beforeDestroy callback
|
||||
offsideSettings.beforeDestroy();
|
||||
|
||||
// Close Offside intance before destroy
|
||||
_closeOffside();
|
||||
|
||||
// Remove click event from Offside buttons
|
||||
offsideButtons.forEach( function( item ) {
|
||||
removeEvent( item, 'click', _onButtonClick );
|
||||
});
|
||||
|
||||
// Remove classes appended on init phase
|
||||
removeClass( offside, offsideClass );
|
||||
removeClass( offside, offsideSideClass );
|
||||
|
||||
// Destroy Offside instance
|
||||
delete instantiatedOffsides[id];
|
||||
|
||||
// afterDestroy callback
|
||||
offsideSettings.afterDestroy();
|
||||
},
|
||||
|
||||
// Fire console errors if DOM elements are missing
|
||||
_checkElements = function() {
|
||||
|
||||
if ( !offside ) {
|
||||
console.error( 'Offside alert: "offside" selector could not match any element' );
|
||||
}
|
||||
|
||||
if ( !offsideButtons.length ) {
|
||||
console.error( 'Offside alert: "buttonsSelector" selector could not match any element' );
|
||||
}
|
||||
};
|
||||
|
||||
// Offside instances public methods
|
||||
this.toggle = function() {
|
||||
_toggleOffside();
|
||||
};
|
||||
|
||||
this.open = function() {
|
||||
_openOffside();
|
||||
};
|
||||
|
||||
this.close = function() {
|
||||
_closeOffside();
|
||||
};
|
||||
|
||||
this.closeAll = function() {
|
||||
_closeAll();
|
||||
};
|
||||
|
||||
this.destroy = function() {
|
||||
_destroyOffside();
|
||||
};
|
||||
|
||||
// Ok, init Offside instance
|
||||
_initOffside();
|
||||
|
||||
} // OffsideInstance constructor end
|
||||
|
||||
|
||||
// DOM initialization
|
||||
_factoryDomInit();
|
||||
|
||||
// This is the actual returned Offside factory
|
||||
return {
|
||||
|
||||
//Offside factory public methods
|
||||
closeOpenOffside: function() {
|
||||
closeAll();
|
||||
},
|
||||
|
||||
// This is the method responsible for creating a new Offside instance
|
||||
// and register it into "instantiatedOffsides" array
|
||||
getOffsideInstance: function( el, options ) {
|
||||
|
||||
// Get length of instantiated Offsides array
|
||||
var offsideId = instantiatedOffsides.length || 0,
|
||||
|
||||
// Instantiate new Offside instance
|
||||
offsideInstance = createOffsideInstance( el, options, offsideId );
|
||||
|
||||
// If Offside instance is sccessfully created
|
||||
if ( offsideInstance !== null ) {
|
||||
|
||||
// Push new instance into "instantiatedOffsides" array and return it
|
||||
|
||||
/*jshint -W093 */
|
||||
return instantiatedOffsides[ offsideId ] = offsideInstance;
|
||||
/*jshint +W093 */
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
} // initOffsideFactory() end
|
||||
|
||||
return {
|
||||
|
||||
// Get the Singleton instance if one exists
|
||||
// or create one if it doesn't
|
||||
getInstance: function ( el, options ) {
|
||||
|
||||
if ( !window.offside.factory ) {
|
||||
window.offside.factory = initOffsideFactory( options );
|
||||
}
|
||||
|
||||
return window.offside.factory.getOffsideInstance( el, options );
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
// Store in window a reference to the Offside singleton factory
|
||||
if ( typeof module !== 'undefined' && module.exports ) {
|
||||
module.exports = offside.getInstance;
|
||||
} else {
|
||||
window.offside = offside.getInstance;
|
||||
}
|
||||
|
||||
})( window, document );
|
||||
|
||||
/**
|
||||
* Start GP.
|
||||
*/
|
||||
var generateOffside = offside( '.slideout-navigation', {
|
||||
slidingElementsSelector:'#slideout-container',
|
||||
buttonsSelector: '.slideout-mobile .main-navigation .menu-toggle, .slideout-both .main-navigation .menu-toggle, .slideout-both .slideout-toggle, .slideout-desktop .slideout-toggle',
|
||||
slidingSide: offSide.side,
|
||||
beforeOpen: function() {
|
||||
document.querySelector( '.slideout-navigation' ).classList.add( 'slideout-transition' );
|
||||
},
|
||||
afterOpen: function() {
|
||||
setTimeout( function() {
|
||||
document.querySelector( '.slideout-navigation' ).classList.remove( 'slideout-transition' );
|
||||
}, 10 );
|
||||
|
||||
document.documentElement.classList.add( 'slide-opened' );
|
||||
document.body.classList.add( 'slide-opened' );
|
||||
|
||||
if ( document.body.classList.contains( 'dropdown-hover' ) ) {
|
||||
var dropdownItems = document.querySelector( '.slideout-navigation' ).querySelectorAll( 'li.menu-item-has-children' );
|
||||
for ( var i = 0; i < dropdownItems.length; i++ ) {
|
||||
var spanToggle = dropdownItems[i].querySelector( 'span.dropdown-menu-toggle' );
|
||||
|
||||
if ( spanToggle ) {
|
||||
spanToggle.setAttribute( 'tabindex', 0 );
|
||||
spanToggle.setAttribute( 'role', 'button' );
|
||||
spanToggle.setAttribute( 'aria-expanded', true );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Focus the first focusable element.
|
||||
var focusable = document.querySelector( '.slideout-navigation' ).querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' );
|
||||
|
||||
if ( focusable ) {
|
||||
setTimeout( function() {
|
||||
focusable[0].focus();
|
||||
}, 200 );
|
||||
}
|
||||
},
|
||||
beforeClose: function() {
|
||||
document.querySelector( '.slideout-navigation' ).classList.add( 'slideout-transition' );
|
||||
},
|
||||
afterClose: function() {
|
||||
setTimeout( function() {
|
||||
document.querySelector( '.slideout-navigation' ).classList.remove( 'slideout-transition' );
|
||||
}, 500 );
|
||||
|
||||
var body = document.body,
|
||||
nav = document.querySelectorAll( '.main-navigation' );
|
||||
|
||||
for ( var i = 0; i < nav.length; i++ ) {
|
||||
if ( nav[i].classList.contains( 'toggled' ) ) {
|
||||
nav[i].classList.remove( 'toggled' );
|
||||
}
|
||||
};
|
||||
|
||||
document.documentElement.classList.remove( 'slide-opened' );
|
||||
body.classList.remove( 'slide-opened' );
|
||||
|
||||
if ( 'true' === document.querySelector( '.main-navigation .menu-toggle' ).getAttribute( 'aria-expanded' ) ) {
|
||||
document.querySelector( '.main-navigation .menu-toggle' ).setAttribute( 'aria-expanded', false );
|
||||
}
|
||||
|
||||
if ( body.classList.contains( 'dropdown-hover' ) ) {
|
||||
var dropdownItems = document.querySelector( '.main-navigation:not(.slideout-navigation):not(.mobile-menu-control-wrapper)' ).querySelectorAll( 'li.menu-item-has-children' );
|
||||
for ( var i = 0; i < dropdownItems.length; i++ ) {
|
||||
var spanToggle = dropdownItems[i].querySelector( 'span.dropdown-menu-toggle' );
|
||||
|
||||
if ( spanToggle ) {
|
||||
spanToggle.removeAttribute( 'tabindex' );
|
||||
spanToggle.setAttribute( 'role', 'presentation' );
|
||||
spanToggle.removeAttribute( 'aria-expanded' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
var closeElements = document.querySelectorAll( '.slideout-overlay, .slideout-exit, .slider-exit a' );
|
||||
for ( var i = 0; i < closeElements.length; i++ ) {
|
||||
closeElements[i].addEventListener( 'click', function( e ) {
|
||||
e.preventDefault();
|
||||
generateOffside.close();
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Closes the slideout navigation if the link does something.
|
||||
* eg. Goes to an anchor link
|
||||
*
|
||||
* @since 1.7
|
||||
*/
|
||||
var slideoutLinks = document.querySelectorAll( '.slideout-navigation ul a' );
|
||||
|
||||
var closeOffsideOnAction = function() {
|
||||
var url = this.getAttribute( 'href' );
|
||||
|
||||
if ( '#' !== url && '' !== url && ! navigator.userAgent.match( /iemobile/i ) ) {
|
||||
setTimeout( function() {
|
||||
generateOffside.close();
|
||||
}, 200 );
|
||||
}
|
||||
};
|
||||
|
||||
for ( var i = 0; i < slideoutLinks.length; i++ ) {
|
||||
slideoutLinks[i].addEventListener( 'click', closeOffsideOnAction, false );
|
||||
};
|
||||
|
||||
document.addEventListener( 'keyup', function( e ) {
|
||||
if ( document.body.classList.contains( 'slide-opened' ) ) {
|
||||
e = e || window.event;
|
||||
|
||||
if ( e.keyCode == 27 ) {
|
||||
generateOffside.close();
|
||||
|
||||
var body = document.body;
|
||||
|
||||
// Focus our slideout toggle.
|
||||
if ( window.document.documentElement.clientWidth <= 768 ) {
|
||||
if ( body.classList.contains( 'slideout-mobile' ) || body.classList.contains( 'slideout-both' ) ) {
|
||||
document.querySelectorAll( '.main-navigation:not(.slideout-navigation)' ).forEach( function( navigation ) {
|
||||
if ( navigation && navigation.style.display !== 'none' ) {
|
||||
navigation.querySelector( '.menu-toggle' ).focus();
|
||||
}
|
||||
} );
|
||||
}
|
||||
} else {
|
||||
if ( body.classList.contains( 'slideout-desktop' ) || body.classList.contains( 'slideout-both' ) ) {
|
||||
document.querySelectorAll( '.main-navigation:not(.slideout-navigation)' ).forEach( function( navigation ) {
|
||||
if ( navigation && navigation.style.display !== 'none' ) {
|
||||
navigation.querySelector( '.slideout-toggle a' ).focus();
|
||||
}
|
||||
} );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
var toggles = document.querySelectorAll( '.slideout-toggle a' );
|
||||
for ( var i = 0; i < toggles.length; i++ ) {
|
||||
toggles[ i ].addEventListener( 'keypress', function( e ) {
|
||||
if ( ' ' === e.key ) {
|
||||
e.preventDefault();
|
||||
generateOffside.open();
|
||||
}
|
||||
} );
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
!function(a,c,u){"use strict";var e={getInstance:function(e,t){return a.offside.factory||(a.offside.factory=n(t)),a.offside.factory.getOffsideInstance(e,t)}};function n(e){var t,p=function(e){0<k.length&&(isNaN(e)?k.forEach(function(e){x[e].close()}):x[e].close())},b=function(){h(C,i)},h=function(e,t){e.classList?e.classList.add(t):e.className=(e.className+" "+t).trim()},S=function(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")},L=function(e,t,n){e.addEventListener(t,n)},A=function(e,t,n){e.removeEventListener(t,n)},E=function(e){return e instanceof HTMLElement?[e]:Array.isArray(e)?e:"string"==typeof e&&Array.apply(null,c.querySelectorAll(e))},O=function(e,t){e=e.indexOf(t);return-1<e&&e},n={slidingElementsSelector:".offside-sliding-element",disableCss3dTransforms:!1,debug:!1};for(t in e)n.hasOwnProperty(t)&&(n[t]=e[t]);var q="offside-js",o=q+"--init",i=q+"--interact",x=[],w=!0,s=!n.disableCss3dTransforms&&function(){if(!a.getComputedStyle)return!1;var e,t,n=c.createElement("p"),o={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};for(t in c.body.insertBefore(n,null),o)n.style[t]!==u&&(n.style[t]="translate3d(1px,1px,1px)",e=a.getComputedStyle(n).getPropertyValue(o[t]));return c.body.removeChild(n),e!==u&&0<e.length&&"none"!==e}(),k=[],C=c.body,r=E(n.slidingElementsSelector),T=n.debug;function l(e,t,n){var o,i={buttonsSelector:"",slidingSide:"left",init:function(){},beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},beforeDestroy:function(){},afterDestroy:function(){}};for(o in t)i.hasOwnProperty(o)&&(i[o]=t[o]);var s=e,r=E(i.buttonsSelector),e=i.slidingSide,l="offside",a=l+"--"+e,c="is-open",u=q+"--is-open",d=q+"--is-"+e,f=n||0,m=function(){(!1===O(k,f)?g:y)()},g=function(){i.beforeOpen(),w&&(w=!1,b()),p(),h(C,u),h(C,d),h(s,c),k.push(f),i.afterOpen()},y=function(){var e=O(k,f);!1!==e&&(i.beforeClose(),S(C,u),S(C,d),S(s,c),k.splice(e,1),i.afterClose())},v=function(e){e.preventDefault(),m()},e=function(){s||console.error('Offside alert: "offside" selector could not match any element'),r.length||console.error('Offside alert: "buttonsSelector" selector could not match any element')};this.toggle=function(){m()},this.open=function(){g()},this.close=function(){y()},this.closeAll=function(){p()},this.destroy=function(){i.beforeDestroy(),y(),r.forEach(function(e){A(e,"click",v)}),S(s,l),S(s,a),delete x[f],i.afterDestroy()},T&&e(),h(s,l),h(s,a),r.forEach(function(e){L(e,"click",v)}),i.init()}return r.forEach(function(e){h(e,"offside-sliding-element")}),s||h(c.documentElement,"no-csstransforms3d"),h(C,o),{closeOpenOffside:function(){p()},getOffsideInstance:function(e,t){var n,o=x.length||0,e=(t=t,n=o,!1!==(e=E((e=e)!==u?e:".offside"))?new l(e[0],t,n):null);if(null!==e)return x[o]=e}}}"undefined"!=typeof module&&module.exports?module.exports=e.getInstance:a.offside=e.getInstance}(window,document);for(var generateOffside=offside(".slideout-navigation",{slidingElementsSelector:"#slideout-container",buttonsSelector:".slideout-mobile .main-navigation .menu-toggle, .slideout-both .main-navigation .menu-toggle, .slideout-both .slideout-toggle, .slideout-desktop .slideout-toggle",slidingSide:offSide.side,beforeOpen:function(){document.querySelector(".slideout-navigation").classList.add("slideout-transition")},afterOpen:function(){if(setTimeout(function(){document.querySelector(".slideout-navigation").classList.remove("slideout-transition")},10),document.documentElement.classList.add("slide-opened"),document.body.classList.add("slide-opened"),document.body.classList.contains("dropdown-hover"))for(var e=document.querySelector(".slideout-navigation").querySelectorAll("li.menu-item-has-children"),t=0;t<e.length;t++){var n=e[t].querySelector("span.dropdown-menu-toggle");n&&(n.setAttribute("tabindex",0),n.setAttribute("role","button"),n.setAttribute("aria-expanded",!0))}var o=document.querySelector(".slideout-navigation").querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');o&&setTimeout(function(){o[0].focus()},200)},beforeClose:function(){document.querySelector(".slideout-navigation").classList.add("slideout-transition")},afterClose:function(){setTimeout(function(){document.querySelector(".slideout-navigation").classList.remove("slideout-transition")},500);for(var e=document.body,t=document.querySelectorAll(".main-navigation"),n=0;n<t.length;n++)t[n].classList.contains("toggled")&&t[n].classList.remove("toggled");if(document.documentElement.classList.remove("slide-opened"),e.classList.remove("slide-opened"),"true"===document.querySelector(".main-navigation .menu-toggle").getAttribute("aria-expanded")&&document.querySelector(".main-navigation .menu-toggle").setAttribute("aria-expanded",!1),e.classList.contains("dropdown-hover"))for(var o=document.querySelector(".mainLine truncated
|
||||
@@ -0,0 +1,650 @@
|
||||
(function ($, window, document) {
|
||||
var StickUp = function(elem, opts) {
|
||||
var lastScrollTop = 0,
|
||||
scroll = 0,
|
||||
scrollDir = '',
|
||||
scrollDistance = 0,
|
||||
active = false,
|
||||
bottom = false,
|
||||
hold = false,
|
||||
disabled = false,
|
||||
landscape = false,
|
||||
portrait = false,
|
||||
stickyHeight = 0,
|
||||
outerHeight = 0,
|
||||
currentOuterHeight = 0,
|
||||
viewportHeight = 0,
|
||||
scrollBottom = 0,
|
||||
elementOffset = 0,
|
||||
elementOffsetBottom = 0,
|
||||
$element = $(),
|
||||
$body = $( 'body' ),
|
||||
stickyDelay = 0,
|
||||
topMargin = 0,
|
||||
offset = 0,
|
||||
$placeholder = $( elem ).clone().css({
|
||||
'visibility': 'hidden',
|
||||
'display': 'none'
|
||||
}).attr({
|
||||
id: 'sticky-placeholder',
|
||||
'aria-hidden': true,
|
||||
itemtype: null,
|
||||
itemscope: null,
|
||||
}),
|
||||
$parent = $(),
|
||||
stickpoints = {
|
||||
top:0,
|
||||
bottom:0,
|
||||
custom:[]
|
||||
},
|
||||
left,
|
||||
|
||||
//defaults
|
||||
options = {
|
||||
scrollHide: false,
|
||||
lazyHeight: 0,
|
||||
topMargin: "auto",
|
||||
keepInWrapper: false,
|
||||
wrapperSelector: '',
|
||||
zIndex: 10000,
|
||||
namespaceClass: "stuckElement",
|
||||
fixedClass: "isStuck",
|
||||
disableOn:function(){
|
||||
return true;
|
||||
},
|
||||
transition: "none"
|
||||
},
|
||||
|
||||
getTopMargin = function() {
|
||||
var wpAdminBar = ( jQuery( '#wpadminbar' ).length > 0 && jQuery( '#wpadminbar' ).css( 'position' ) == 'fixed' ) ? jQuery( '#wpadminbar' ).outerHeight() : 0;
|
||||
if (options.topMargin === 'auto') {
|
||||
return parseInt( wpAdminBar + $element.css( 'marginTop' ) );
|
||||
} else {
|
||||
if ( isNaN( options.topMargin ) && options.topMargin.search( "px" ) > 0 ) {
|
||||
return parseInt( wpAdminBar + options.topMargin.replace( "px", "" ) );
|
||||
} else if ( ! isNaN( parseInt( options.topMargin ) ) ) {
|
||||
return parseInt( wpAdminBar + options.topMargin );
|
||||
} else {
|
||||
void 0;
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
unStick = function() {
|
||||
void 0;
|
||||
$placeholder.remove();
|
||||
|
||||
$element.removeClass(options.fixedClass)
|
||||
.css({
|
||||
'max-width': '',
|
||||
'margin-top': '',
|
||||
'margin-left': '',
|
||||
'margin-right': '',
|
||||
'position': '',
|
||||
'top': '',
|
||||
'left': '',
|
||||
'right': '',
|
||||
'bottom': '',
|
||||
'width': '',
|
||||
'opacity': '',
|
||||
'height': '',
|
||||
'overflow': '',
|
||||
'-webkit-transform': '',
|
||||
'-ms-transform': '',
|
||||
'transform': '',
|
||||
'-webkit-transition': '',
|
||||
'-ms-transition': '',
|
||||
'transition': '',
|
||||
'visibility': '',
|
||||
'z-index': '',
|
||||
})
|
||||
.removeClass( 'sticky-navigation-transition' )
|
||||
.removeClass( 'navigation-transition' )
|
||||
.removeClass( 'sticky-nav-scrolling-up' );
|
||||
|
||||
if ( 'sticky-navigation' === $element.attr( 'id' ) ) {
|
||||
$element.attr( 'id', 'site-navigation' );
|
||||
}
|
||||
|
||||
active = false;
|
||||
bottom = false;
|
||||
hold = false;
|
||||
|
||||
$element.trigger( 'stickUp:unStick' );
|
||||
},
|
||||
|
||||
holdIt = function( forceBottom ) {
|
||||
void 0;
|
||||
|
||||
$( $placeholder ).insertAfter( $element ).show().addClass( options.fixedClass );
|
||||
|
||||
var offsetParent = $placeholder.offsetParent();
|
||||
|
||||
if ( forceBottom ) {
|
||||
$element.css({
|
||||
position: "absolute"
|
||||
});
|
||||
|
||||
var topOffset =
|
||||
($parent.offset().top + $parent.outerHeight()) //bottom of container
|
||||
- offsetParent.offset().top - currentOuterHeight //parent-position - elementHeight
|
||||
- parseInt( $parent.css( "paddingBottom" ) );
|
||||
}
|
||||
void 0;
|
||||
void 0;
|
||||
$element.css({
|
||||
position: "absolute",
|
||||
marginTop: topMargin,
|
||||
bottom:"",
|
||||
left:$placeholder.position().left,
|
||||
top: forceBottom? topOffset : $element.offset().top - offsetParent.offset().top - topMargin
|
||||
});
|
||||
|
||||
$element.trigger( 'stickUp:holdIt' );
|
||||
},
|
||||
|
||||
stickIt = function() {
|
||||
void 0;
|
||||
active = true;
|
||||
|
||||
if ( options.zIndex ) {
|
||||
$element.css( 'z-index', options.zIndex );
|
||||
}
|
||||
|
||||
if ( 'fade' == options.transition ) {
|
||||
$element.hide();
|
||||
}
|
||||
|
||||
if ( 'slide' == options.transition || options.scrollHide ) {
|
||||
$element.css({
|
||||
'height': '0',
|
||||
'overflow': 'hidden',
|
||||
'visibility': 'hidden'
|
||||
});
|
||||
}
|
||||
|
||||
$( $placeholder ).insertAfter( $element ).show().addClass( options.fixedClass );
|
||||
|
||||
if ( $( '.gen-sidebar-nav' ).length ) {
|
||||
$placeholder.css( 'height', $element.outerHeight() );
|
||||
}
|
||||
|
||||
if ( 'left' == $element.css( 'float' ) || 'right' == $element.css( 'float' ) ) {
|
||||
$placeholder.css( 'float', $element.css( 'float' ) );
|
||||
$placeholder.attr( 'style', $placeholder.attr( 'style' ) + 'width:auto !important;' );
|
||||
}
|
||||
|
||||
if ( 'slide' == options.transition && 'block' == $placeholder.css( 'display' ) ) {
|
||||
$element.css({
|
||||
'-webkit-transform': 'translateY(-100%)',
|
||||
'-ms-transform': 'translateY(-100%)',
|
||||
'transform': 'translateY(-100%)',
|
||||
'-webkit-transition': 'transform 300ms ease-in-out',
|
||||
'-ms-transition': 'transform 300ms ease-in-out',
|
||||
'transition': 'transform 300ms ease-in-out'
|
||||
});
|
||||
}
|
||||
|
||||
$element.addClass(options.fixedClass);
|
||||
|
||||
if ( 'site-navigation' === $element.attr( 'id' ) ) {
|
||||
$element.attr( 'id', 'sticky-navigation' );
|
||||
}
|
||||
|
||||
var topDistance = -offset;
|
||||
|
||||
$element.css({
|
||||
'margin-top': topMargin,
|
||||
'position': 'fixed',
|
||||
'top': topDistance + 'px',
|
||||
'left': '',
|
||||
'right': '',
|
||||
'bottom': '',
|
||||
});
|
||||
|
||||
$element.trigger( 'stickUp:stickIt' );
|
||||
|
||||
if ( 'fade' == options.transition ) {
|
||||
$element.fadeIn( 300 );
|
||||
}
|
||||
|
||||
if ( 'slide' == options.transition ) {
|
||||
$element.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) {
|
||||
$element.css({
|
||||
'visibility': '',
|
||||
'height': '',
|
||||
'overflow': '',
|
||||
});
|
||||
|
||||
setTimeout( function() {
|
||||
$element.css({
|
||||
'-webkit-transform': 'translateY(0)',
|
||||
'-ms-transform': 'translateY(0)',
|
||||
'transform': 'translateY(0)',
|
||||
});
|
||||
}, 10 );
|
||||
});
|
||||
}
|
||||
|
||||
if ( options.scrollHide ) {
|
||||
$element.css({
|
||||
'height': '',
|
||||
'overflow': '',
|
||||
'visibility': ''
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
syncWidth = function() {
|
||||
if ( $placeholder && $placeholder.width() !== $element.outerWidth() ) {
|
||||
$element.outerWidth( $placeholder.outerWidth() );
|
||||
}
|
||||
},
|
||||
|
||||
stickUpScrollHandlerFn = function(event) {
|
||||
if ( ! options.disableOn() ) {
|
||||
if( !disabled ) {
|
||||
void 0;
|
||||
unStick();
|
||||
disabled = true;
|
||||
}
|
||||
return;
|
||||
} else if ( disabled ) {
|
||||
disabled = false;
|
||||
}
|
||||
|
||||
if ( options.keepInWrapper && ! $parent.is( ':visible' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
scroll = $( event.target ).scrollTop();
|
||||
scrollDir = ( scroll >= lastScrollTop ) ? 'down' : 'up';
|
||||
scrollDistance = Math.abs( lastScrollTop - scroll );
|
||||
viewportHeight = $( window ).outerHeight();
|
||||
scrollBottom = scroll + viewportHeight;
|
||||
lastScrollTop = scroll;
|
||||
elementOffset = $element.offset().top;
|
||||
stickyHeight = parseInt( $element.outerHeight() + topMargin ) + parseInt( $element.css( 'marginBottom' ) );
|
||||
|
||||
if ( ! active && ! hold && ! bottom ) {
|
||||
outerHeight = parseInt( $element.outerHeight( true ) );
|
||||
|
||||
if ( ! bottom && ! hold ) {
|
||||
stickpoints.top = parseInt($element.offset().top);
|
||||
} else {
|
||||
stickpoints.top = parseInt($placeholder.offset().top);
|
||||
left = parseInt($element.offset().left)+5;
|
||||
}
|
||||
}
|
||||
|
||||
currentOuterHeight = parseInt( $element.outerHeight() ) + parseInt( $element.css( 'margin-bottom' ) ) + topMargin;
|
||||
|
||||
if ( options.keepInWrapper ) {
|
||||
stickpoints.bottom = $parent.offset().top + $parent.outerHeight() - parseInt( $parent.css( 'paddingBottom' ) );
|
||||
} else {
|
||||
stickpoints.bottom = $( document ).outerHeight();
|
||||
}
|
||||
|
||||
elementOffsetBottom = $element.offset().top + currentOuterHeight;
|
||||
|
||||
// Google like reappearance on upward scroll
|
||||
if ( options.scrollHide ) {
|
||||
offset = stickyHeight + options.lazyHeight; //negative offset for initial hiding
|
||||
} else {
|
||||
offset = options.lazyHeight;
|
||||
}
|
||||
|
||||
if ( 'none' !== options.transition ) {
|
||||
stickyDelay = $element.outerHeight() * 2;
|
||||
}
|
||||
|
||||
// Update top margin on scroll
|
||||
topMargin = ( options.topMargin !== null ) ? getTopMargin() : 0;
|
||||
|
||||
// If our top margin changes (#wpadminbar), update our margin
|
||||
if ( active && topMargin !== $element.css( 'margin-top' ) ) {
|
||||
$element.css( 'margin-top', topMargin );
|
||||
}
|
||||
|
||||
if ( ! active && ! bottom && scroll >= stickpoints.top - topMargin + offset + stickyDelay
|
||||
|| bottom && hold && scroll <= elementOffset - topMargin + offset ) {
|
||||
void 0;
|
||||
stickIt();
|
||||
active = true;
|
||||
bottom = false;
|
||||
hold = false;
|
||||
}
|
||||
|
||||
if ( active && ! bottom && scroll >= stickpoints.top - topMargin + offset + ( $element.outerHeight() / 2 ) ) {
|
||||
$placeholder.addClass( 'sticky-navigation-transition' );
|
||||
$element.addClass( 'sticky-navigation-transition' );
|
||||
}
|
||||
|
||||
if ( options.keepInWrapper
|
||||
&& parseInt(elementOffsetBottom - topMargin ) !== parseInt( stickpoints.bottom )
|
||||
&& scroll >= stickpoints.bottom - currentOuterHeight + offset ) {
|
||||
void 0;
|
||||
holdIt( true );
|
||||
active = false;
|
||||
bottom = true;
|
||||
hold = true;
|
||||
}
|
||||
|
||||
//Calculate lazyHeight and autoHide
|
||||
if ( active ) {
|
||||
var topValue = parseInt( $element.css( 'top' ) );
|
||||
if ( scrollDir === 'up' && topValue !== 0 ) {
|
||||
var newTopValue = scrollDistance > -topValue ? 0 : topValue + scrollDistance;
|
||||
$element.css( 'top', newTopValue + 'px' );
|
||||
$element.addClass( 'sticky-nav-scrolling-up' );
|
||||
} else if ( scrollDir === "down" && topValue > -offset ) {
|
||||
var newTopValue = scrollDistance > offset + topValue ? -offset : topValue - scrollDistance;
|
||||
$element.css( 'top', newTopValue + 'px' );
|
||||
$element.removeClass( 'sticky-nav-scrolling-up' );
|
||||
}
|
||||
}
|
||||
|
||||
//UNSTICK
|
||||
if ( ( active || hold || bottom ) && scroll <= stickpoints.top - topMargin ) {
|
||||
void 0;
|
||||
unStick();
|
||||
}
|
||||
|
||||
//RESPONSIVE baby ;-)
|
||||
if ( active || hold || bottom ) {
|
||||
syncWidth();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
stickUpResponsiveHandlerFn = function( event ){
|
||||
if ( hold ) {
|
||||
holdIt();
|
||||
bottom = false;
|
||||
}
|
||||
|
||||
void 0;
|
||||
stickUpScrollHandlerFn( event );
|
||||
};
|
||||
|
||||
//init
|
||||
var initialize = function( elem, opts ) {
|
||||
$element = $( elem );
|
||||
|
||||
// adding a class to users div
|
||||
$element.addClass( options.namespaceClass );
|
||||
|
||||
//getting options
|
||||
if ( opts ) {
|
||||
$.extend( true, options, opts );
|
||||
}
|
||||
|
||||
topMargin = ( options.topMargin !== null ) ? getTopMargin() : 0;
|
||||
|
||||
if ( options.lazyHeight ) {
|
||||
topMargin = topMargin + options.lazyHeight;
|
||||
}
|
||||
|
||||
if ( options.keepInWrapper ) {
|
||||
if ( options.wrapperSelector !== '' ) {
|
||||
$parent = $element.closest( options.wrapperSelector );
|
||||
}
|
||||
|
||||
//if no Wrapper available use offsetParent
|
||||
if ( ! $parent.length ) {
|
||||
$parent = $element.parent();
|
||||
}
|
||||
} else {
|
||||
$parent = $body;
|
||||
}
|
||||
|
||||
$( window ).on( 'scroll.stickUp', stickUpScrollHandlerFn );
|
||||
$( window ).on( 'resize.stickUp', stickUpResponsiveHandlerFn );
|
||||
|
||||
//initial round ;-)
|
||||
stickUpScrollHandlerFn( {target: document} );
|
||||
|
||||
};
|
||||
|
||||
initialize.call( this, elem, opts );
|
||||
|
||||
$( elem ).on( 'stickUp:detach', function( opts ) {
|
||||
void 0;
|
||||
$element = $(this);
|
||||
$element.removeClass(options.namespaceClass);
|
||||
$placeholder.remove();
|
||||
$element.removeClass(options.fixedClass)
|
||||
.css({
|
||||
maxWidth:"",
|
||||
marginTop: "",
|
||||
marginLeft:"",
|
||||
marginRight:"",
|
||||
position: "",
|
||||
top: "",
|
||||
left: "",
|
||||
right: "",
|
||||
bottom: "",
|
||||
width:""
|
||||
});
|
||||
active = false;
|
||||
bottom = false;
|
||||
hold = false;
|
||||
disabled = true;
|
||||
$( window ).off( 'scroll.stickUp', stickUpScrollHandlerFn );
|
||||
$( window ).off( 'resize.stickUp', stickUpResponsiveHandlerFn );
|
||||
})
|
||||
};
|
||||
|
||||
$.fn.stickUp = function( options ) {
|
||||
return this.each(function() {
|
||||
new StickUp( this, options );
|
||||
});
|
||||
};
|
||||
|
||||
}(jQuery, window, document));
|
||||
|
||||
(function ( $ ) {
|
||||
$.fn.GenerateSimpleSticky = function( options ) {
|
||||
var settings = $.extend({
|
||||
menu: $( this ),
|
||||
parent: false,
|
||||
scrollHide: false,
|
||||
offsetElement: '#wpadminbar',
|
||||
disableOn: function() {
|
||||
return true;
|
||||
},
|
||||
transition: "none"
|
||||
}, options );
|
||||
|
||||
var body = $( 'body' ),
|
||||
parent = null,
|
||||
offset = null,
|
||||
autoHide = false;
|
||||
|
||||
if ( settings.parent ) {
|
||||
parent = settings.parent;
|
||||
} else {
|
||||
parent = settings.menu.parent();
|
||||
}
|
||||
|
||||
if (
|
||||
settings.menu.parents( '.site-header' ).length > 0 ||
|
||||
settings.menu.parents( '.generate-page-header' ).length > 0 ||
|
||||
settings.menu.parents( '.header-wrap' ).length > 0 ||
|
||||
settings.menu.parents( '.site-wrapper' ).length > 0
|
||||
) {
|
||||
parent = body;
|
||||
}
|
||||
|
||||
if ( ( body.hasClass( 'nav-right-sidebar' ) || body.hasClass( 'nav-left-sidebar' ) ) && ! $( '.menu-toggle' ).is( ':visible' ) ) {
|
||||
settings.menu = $( '.gen-sidebar-nav' );
|
||||
parent = $( '.site-content' );
|
||||
|
||||
if ( settings.menu.children().hasClass( 'auto-hide-sticky' ) ) {
|
||||
autoHide = true;
|
||||
}
|
||||
}
|
||||
|
||||
offset = ( jQuery( settings.offsetElement ).length > 0 && jQuery( settings.offsetElement ).css( 'position' ) == 'fixed' ) ? jQuery( settings.offsetElement ).outerHeight() : 0;
|
||||
|
||||
var stickyOptions = {
|
||||
scrollHide: settings.scrollHide,
|
||||
keepInWrapper: true,
|
||||
wrapperSelector: parent,
|
||||
fixedClass: 'is_stuck navigation-stick navigation-clone',
|
||||
topMargin: 0,
|
||||
disableOn: settings.disableOn,
|
||||
transition: settings.transition
|
||||
};
|
||||
|
||||
settings.menu.stickUp( stickyOptions );
|
||||
}
|
||||
}( jQuery ));
|
||||
|
||||
function generateStickyDebounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
jQuery( function( $ ) {
|
||||
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize',
|
||||
body = $( 'body' ),
|
||||
transition = 'none';
|
||||
|
||||
if ( body.hasClass( 'sticky-enabled' ) ) {
|
||||
|
||||
var navigation = $( '#site-navigation' );
|
||||
|
||||
var navigationDisableOn = function() {
|
||||
var body = $( 'body' ),
|
||||
mobileHeader = $( '#mobile-header' ),
|
||||
mobile = $( '.menu-toggle' );
|
||||
|
||||
if ( body.hasClass( 'desktop-sticky-menu' ) && mobile.is( ':visible' ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( body.hasClass( 'mobile-sticky-menu' ) && ! mobile.is( ':visible' ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( body.hasClass( 'mobile-header' ) && mobileHeader.is( ':visible' ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
if ( body.hasClass( 'sticky-menu-fade' ) ) {
|
||||
transition = 'fade';
|
||||
}
|
||||
|
||||
if ( body.hasClass( 'sticky-menu-slide' ) ) {
|
||||
transition = 'slide';
|
||||
}
|
||||
|
||||
var autoHide = ( navigation.hasClass( 'auto-hide-sticky' ) ) ? true : false;
|
||||
|
||||
var options = {
|
||||
transition: transition,
|
||||
scrollHide: autoHide,
|
||||
disableOn: navigationDisableOn
|
||||
};
|
||||
|
||||
$( navigation ).GenerateSimpleSticky( options );
|
||||
|
||||
body.on( 'generate_navigation_location_updated', function() {
|
||||
navigation.trigger( 'stickUp:detach' );
|
||||
setTimeout(function() {
|
||||
$( navigation ).GenerateSimpleSticky( options );
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
|
||||
if ( body.hasClass( 'mobile-header' ) && body.hasClass( 'mobile-header-sticky' ) ) {
|
||||
|
||||
var mobileHeader = $( '#mobile-header' );
|
||||
|
||||
mobileHeader.GenerateSimpleSticky({
|
||||
scrollHide: ( mobileHeader.data( 'auto-hide-sticky' ) || '' === mobileHeader.data( 'auto-hide-sticky' ) ) ? true : false,
|
||||
disableOn: function() {
|
||||
if ( ! mobileHeader.is( ':visible' ) ) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var sidebarNavClone = $( '.sidebar-nav-mobile' ),
|
||||
sidebarNav = $( '.gen-sidebar-nav' ),
|
||||
windowWidth = $( window ).width();
|
||||
|
||||
var checkSidebarNav = generateStickyDebounce( function() {
|
||||
if ( windowWidth !== $( window ).width() ) {
|
||||
if ( sidebarNavClone.is( ':visible' ) ) {
|
||||
sidebarNav.trigger( 'stickUp:detach' );
|
||||
sidebarNavClone.trigger( 'stickUp:detach' );
|
||||
sidebarNavClone.GenerateSimpleSticky( options );
|
||||
}
|
||||
|
||||
if ( sidebarNav.is( ':visible' ) ) {
|
||||
sidebarNavClone.trigger( 'stickUp:detach' );
|
||||
sidebarNav.trigger( 'stickUp:detach' );
|
||||
sidebarNav.GenerateSimpleSticky( options );
|
||||
}
|
||||
}
|
||||
}, 250);
|
||||
|
||||
if ( $( 'body' ).hasClass( 'sticky-enabled' ) && sidebarNavClone.length ) {
|
||||
window.addEventListener( 'resize', checkSidebarNav );
|
||||
window.addEventListener( 'orientationchange', checkSidebarNav );
|
||||
}
|
||||
|
||||
// Weak workaround for iOS bug when using a focused form in a sticky element.
|
||||
if ( navigator.userAgent.match( /(iPod|iPhone|iPad)/ ) ) {
|
||||
if ( body.hasClass( 'sticky-enabled' ) || ( body.hasClass( 'mobile-header' ) && body.hasClass( 'mobile-header-sticky' ) ) ) {
|
||||
$( document ).on( 'focus', '.navigation-stick .search-field', function() {
|
||||
$( 'html, body' ).animate({ scrollTop: 0 }, 'fast' );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
var closeMobileMenu = function( item ) {
|
||||
var _this = item,
|
||||
url = _this.getAttribute( 'href' );
|
||||
|
||||
if ( _this.pathname === window.location.pathname && '#' !== url ) {
|
||||
if ( _this.closest( 'nav' ).classList.contains( 'toggled' ) ) {
|
||||
_this.closest( 'nav' ).classList.remove( 'toggled' );
|
||||
|
||||
if ( $( 'html' ).hasClass( 'mobile-menu-open' ) ) {
|
||||
$( 'html' ).removeClass( 'mobile-menu-open' );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if ( body.hasClass( 'both-sticky-menu' ) || body.hasClass( 'mobile-sticky-menu' ) ) {
|
||||
$( '.main-navigation:not(#mobile-header) ul a[href*=\\#]' ).on( 'click', function( event ) {
|
||||
closeMobileMenu( this );
|
||||
} );
|
||||
}
|
||||
|
||||
if ( body.hasClass( 'mobile-header-sticky' ) ) {
|
||||
$( '#mobile-header ul a[href*=\\#]' ).on( 'click', function( event ) {
|
||||
closeMobileMenu( this );
|
||||
} );
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
function generateStickyDebounce(s,n,a){var o;return function(){var t=this,e=arguments,i=a&&!o;clearTimeout(o),o=setTimeout(function(){o=null,a||s.apply(t,e)},n),i&&s.apply(t,e)}}!function(M,E,W){function e(t,e){var i=0,s=0,n="",a=0,o=!1,r=!1,l=!1,c=!1,d=0,p=0,h=0,m=0,u=M(),f=M("body"),g=0,b=0,k=0,v=M(t).clone().css({visibility:"hidden",display:"none"}).attr({id:"sticky-placeholder","aria-hidden":!0,itemtype:null,itemscope:null}),y=M(),w={top:0,bottom:0,custom:[]},C={scrollHide:!1,lazyHeight:0,topMargin:"auto",keepInWrapper:!1,wrapperSelector:"",zIndex:1e4,namespaceClass:"stuckElement",fixedClass:"isStuck",disableOn:function(){return!0},transition:"none"},I=function(){var t=0<jQuery("#wpadminbar").length&&"fixed"==jQuery("#wpadminbar").css("position")?jQuery("#wpadminbar").outerHeight():0;return"auto"===C.topMargin?parseInt(t+u.css("marginTop")):isNaN(C.topMargin)&&0<C.topMargin.search("px")?parseInt(t+C.topMargin.replace("px","")):isNaN(parseInt(C.topMargin))?0:parseInt(t+C.topMargin)},H=function(){v.remove(),u.removeClass(C.fixedClass).css({"max-width":"","margin-top":"","margin-left":"","margin-right":"",position:"",top:"",left:"",right:"",bottom:"",width:"",opacity:"",height:"",overflow:"","-webkit-transform":"","-ms-transform":"",transform:"","-webkit-transition":"","-ms-transition":"",transition:"",visibility:"","z-index":""}).removeClass("sticky-navigation-transition").removeClass("navigation-transition").removeClass("sticky-nav-scrolling-up"),"sticky-navigation"===u.attr("id")&&u.attr("id","site-navigation"),l=r=o=!1,u.trigger("stickUp:unStick")},x=function(t){M(v).insertAfter(u).show().addClass(C.fixedClass);var e,i=v.offsetParent();t&&(u.css({position:"absolute"}),e=y.offset().top+y.outerHeight()-i.offset().top-p-parseInt(y.css("paddingBottom"))),u.css({position:"absolute",marginTop:b,bottom:"",left:v.position().left,top:t?e:u.offset().top-i.offset().top-b}),u.trigger("stickUp:holdIt")},S=function(){o=!0,C.zIndex&&u.css("z-index",C.zIndex),"fade"==C.transition&&u.hide(),"slide"!=C.transition&&!C.scrollHide||u.css({height:"0",overflow:"hidden",visibility:"hidden"}),M(v).insertAfter(u).show().addClass(C.fixedClass),M(".gen-sidebar-nav").length&&v.css("height",u.outerHeight()),"left"!=u.css("float")&&"right"!=u.css("float")||(v.css("float",u.css("float")),v.attr("style",v.attr("style")+"width:auto !important;")),"slide"==C.transition&&"block"==v.css("display")&&u.css({"-webkit-transform":"translateY(-100%)","-ms-transform":"translateY(-100%)",transform:"translateY(-100%)","-webkit-transition":"transform 300ms ease-in-out","-ms-transition":"transform 300ms ease-in-out",transition:"transform 300ms ease-in-out"}),u.addClass(C.fixedClass),"site-navigation"===u.attr("id")&&u.attr("id","sticky-navigation");var t=-k;u.css({"margin-top":b,position:"fixed",top:t+"px",left:"",right:"",bottom:""}),u.trigger("stickUp:stickIt"),"fade"==C.transition&&u.fadeIn(300),"slide"==C.transition&&u.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(t){u.css({visibility:"",height:"",overflow:""}),setTimeout(function(){u.css({"-webkit-transform":"translateY(0)","-ms-transform":"translateY(0)",transform:"translateY(0)"})},10)}),C.scrollHide&&u.css({height:"",overflow:"",visibility:""})},U=function(){v&&v.width()!==u.outerWidth()&&u.outerWidth(v.outerWidth())},z=function(t){var e;C.disableOn()?(c=c&&!1,(!C.keepInWrapper||y.is(":visible"))&&(s=M(t.target).scrollTop(),n=i<=s?"down":"up",a=Math.abs(i-s),M(E).outerHeight(),i=s,h=u.offset().top,d=parseInt(u.outerHeight()+b)+parseInt(u.css("marginBottom")),o||l||r||(parseInt(u.outerHeight(!0)),r||l?(w.top=parseInt(v.offset().top),parseInt(u.offset().left)):w.top=parseInt(u.offset().top)),p=parseInt(u.outerHeight())+parseInt(u.css("margin-bottom"))+b,C.keepInWrapper?w.bottom=y.offset().top+y.outerHeight()-parseInt(y.css("paddingBottom")):w.bottom=M(W).outerHeight(),m=u.offset().top+p,k=C.scrollHide?d+C.lazyHeight:C.lazyHeight,"none"!==C.transition&&(g=2*u.outerHeight()),b=null!==C.topMargin?I():0,o&&b!==u.css("margin-top")&&u.css("margin-top",b),(!o&&!r&&s>=w.top-b+k+g||r&&l&&s<=h-b+k)&&(S(),l=r=!(o=!0)),o&&!r&&s>=w.top-b+k+u.outerHeight()/2&&(v.addClass("sticky-navigation-transition"),u.addClass("sticky-navigation-transition")),C.keepInWrapper&&parseInt(m-b)!==parseInt(w.bottom)&&s>=w.bottom-p+k&&(x(!0),l=r=!(o=!1)),o&&(t=parseInt(u.css("top")),"up"===n&&0!==t?(e=-t<a?0:t+a,u.css("top",e+"px"),u.addClass("sticky-nav-scrolling-up")):"down"===n&&-k<t&&(e=k+t<a?-k:t-a,u.css("top",e+"px"),u.removeClass("sticky-nav-scrolling-up"))),(o||l||r)&&s<=w.top-b&&H(),o||l||r)&&U()):c||(H(),c=!0)},T=function(t){l&&(x(),r=!1),z(t)};!function(t,e){(u=M(t)).addClass(C.namespaceClass),e&&M.extend(!0,C,e),b=null!==C.topMargin?I():0,C.lazyHeight&&(b+=C.lazyHeight),C.keepInWrapper?(y=""!==C.wrapperSelector?u.closest(C.wrapperSelector):y).length||(y=u.parent()):y=f,M(E).on("scroll.stickUp",z),M(E).on("resize.stickUp",T),z({target:W})}.call(this,t,e),M(t).on("sticLine truncated
|
||||
Reference in new issue
Block a user