mirror of
https://ghproxy.net/https://github.com/presscustomizr/hueman.git
synced 2026-07-26 12:37:18 +08:00
5423 lines
No EOL
220 KiB
JavaScript
5423 lines
No EOL
220 KiB
JavaScript
/*! addEventListener Polyfill ie9- http://stackoverflow.com/a/27790212*/
|
|
window.addEventListener = window.addEventListener || function (e, f) { window.attachEvent('on' + e, f); };
|
|
|
|
|
|
/*! Datenow Polyfill ie9- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now */
|
|
if (!Date.now) {
|
|
Date.now = function now() {
|
|
return new Date().getTime();
|
|
};
|
|
}
|
|
|
|
|
|
/*! Object.create monkey patch ie8 http://stackoverflow.com/a/18020326 */
|
|
if ( ! Object.create ) {
|
|
Object.create = function(proto, props) {
|
|
if (typeof props !== "undefined") {
|
|
throw "The multiple-argument version of Object.create is not provided by this browser and cannot be shimmed.";
|
|
}
|
|
function ctor() { }
|
|
|
|
ctor.prototype = proto;
|
|
return new ctor();
|
|
};
|
|
}
|
|
|
|
|
|
/*! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter */
|
|
// filter() was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard.
|
|
// You can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ECMA-262 implementations which do not natively support it.
|
|
// This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming that fn.call evaluates to the original value of Function.prototype.call(), and that Array.prototype.push() has its original value.
|
|
if ( ! Array.prototype.filter ) {
|
|
Array.prototype.filter = function(fun/*, thisArg*/) {
|
|
'use strict';
|
|
|
|
if (this === void 0 || this === null) {
|
|
throw new TypeError();
|
|
}
|
|
|
|
var t = Object(this);
|
|
var len = t.length >>> 0;
|
|
if (typeof fun !== 'function') {
|
|
throw new TypeError();
|
|
}
|
|
|
|
var res = [];
|
|
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
|
|
for (var i = 0; i < len; i++) {
|
|
if (i in t) {
|
|
var val = t[i];
|
|
|
|
// NOTE: Technically this should Object.defineProperty at
|
|
// the next index, as push can be affected by
|
|
// properties on Object.prototype and Array.prototype.
|
|
// But that method's new, and collisions should be
|
|
// rare, so use the more-compatible alternative.
|
|
if (fun.call(thisArg, val, i, t)) {
|
|
res.push(val);
|
|
}
|
|
}
|
|
}
|
|
|
|
return res;
|
|
};
|
|
}
|
|
|
|
|
|
|
|
/*! map was added to the ECMA-262 standard in the 5th edition */
|
|
// as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of map in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming Object, TypeError, and Array have their original values and that callback.call evaluates to the original value of Function.prototype.call.
|
|
// Production steps of ECMA-262, Edition 5, 15.4.4.19
|
|
// Reference: http://es5.github.io/#x15.4.4.19
|
|
if (!Array.prototype.map) {
|
|
|
|
Array.prototype.map = function(callback, thisArg) {
|
|
|
|
var T, A, k;
|
|
|
|
if (this === null) {
|
|
throw new TypeError(' this is null or not defined');
|
|
}
|
|
|
|
// 1. Let O be the result of calling ToObject passing the |this|
|
|
// value as the argument.
|
|
var O = Object(this);
|
|
|
|
// 2. Let lenValue be the result of calling the Get internal
|
|
// method of O with the argument "length".
|
|
// 3. Let len be ToUint32(lenValue).
|
|
var len = O.length >>> 0;
|
|
|
|
// 4. If IsCallable(callback) is false, throw a TypeError exception.
|
|
// See: http://es5.github.com/#x9.11
|
|
if (typeof callback !== 'function') {
|
|
throw new TypeError(callback + ' is not a function');
|
|
}
|
|
|
|
// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
|
if (arguments.length > 1) {
|
|
T = thisArg;
|
|
}
|
|
|
|
// 6. Let A be a new array created as if by the expression new Array(len)
|
|
// where Array is the standard built-in constructor with that name and
|
|
// len is the value of len.
|
|
A = new Array(len);
|
|
|
|
// 7. Let k be 0
|
|
k = 0;
|
|
|
|
// 8. Repeat, while k < len
|
|
while (k < len) {
|
|
|
|
var kValue, mappedValue;
|
|
|
|
// a. Let Pk be ToString(k).
|
|
// This is implicit for LHS operands of the in operator
|
|
// b. Let kPresent be the result of calling the HasProperty internal
|
|
// method of O with argument Pk.
|
|
// This step can be combined with c
|
|
// c. If kPresent is true, then
|
|
if (k in O) {
|
|
|
|
// i. Let kValue be the result of calling the Get internal
|
|
// method of O with argument Pk.
|
|
kValue = O[k];
|
|
|
|
// ii. Let mappedValue be the result of calling the Call internal
|
|
// method of callback with T as the this value and argument
|
|
// list containing kValue, k, and O.
|
|
mappedValue = callback.call(T, kValue, k, O);
|
|
|
|
// iii. Call the DefineOwnProperty internal method of A with arguments
|
|
// Pk, Property Descriptor
|
|
// { Value: mappedValue,
|
|
// Writable: true,
|
|
// Enumerable: true,
|
|
// Configurable: true },
|
|
// and false.
|
|
|
|
// In browsers that support Object.defineProperty, use the following:
|
|
// Object.defineProperty(A, k, {
|
|
// value: mappedValue,
|
|
// writable: true,
|
|
// enumerable: true,
|
|
// configurable: true
|
|
// });
|
|
|
|
// For best browser support, use the following:
|
|
A[k] = mappedValue;
|
|
}
|
|
// d. Increase k by 1.
|
|
k++;
|
|
}
|
|
|
|
// 9. return A
|
|
return A;
|
|
};
|
|
}
|
|
/* ===================================================
|
|
* jqueryimgOriginalSizes.js v1.0.0
|
|
* ===================================================
|
|
* (c) 2015 Nicolas Guillaume, Nice, France - Rocco Aliberti, Salerno, Italy
|
|
* CenterImages plugin may be freely distributed under the terms of the GNU GPL v2.0 or later license.
|
|
*
|
|
* Heavily based on http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
|
|
*
|
|
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
|
*
|
|
* Retrieves the original imgs width and height, cross-browser
|
|
*
|
|
* Example usage
|
|
* var imgHeight = $('img#my-img').originalHeight(),
|
|
* imgWidth = $('img#my-img').originalWidth()
|
|
*
|
|
* =================================================== */
|
|
;(function ( $, window, document, undefined ) {
|
|
|
|
var pluginPrefix = 'original',
|
|
_props = ['Width', 'Height'];
|
|
|
|
_props.map( function(_prop) {
|
|
var _lprop = _prop.toLowerCase();
|
|
$.fn[ pluginPrefix + _prop ] = ('natural' + _prop in new Image()) ?
|
|
function () {
|
|
return this[0][ 'natural' + _prop ];
|
|
} :
|
|
function () {
|
|
var _size = _getAttr( this, _lprop );
|
|
|
|
if ( _size )
|
|
return _size;
|
|
|
|
var _node = this[0],
|
|
_img;
|
|
|
|
if (_node.tagName.toLowerCase() === 'img') {
|
|
_img = new Image();
|
|
_img.src = _node.src;
|
|
_size = _img[ _lprop ];
|
|
}
|
|
return _size;
|
|
};
|
|
} );//map()
|
|
|
|
function _getAttr( _el, prop ){
|
|
var _img_size = $(_el).attr( prop );
|
|
return ( typeof _img_size === undefined ) ? false : _img_size;
|
|
}
|
|
|
|
})( jQuery, window, document );
|
|
|
|
/* ===================================================
|
|
* jqueryimgSmartLoad.js v1.0.0
|
|
* ===================================================
|
|
*
|
|
* Replace all img src placeholder in the $element by the real src on scroll window event
|
|
* Bind a 'smartload' event on each transformed img
|
|
*
|
|
* Note : the data-src (data-srcset) attr has to be pre-processed before the actual page load
|
|
* Example of regex to pre-process img server side with php :
|
|
* preg_replace_callback('#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', 'regex_callback' , $_html)
|
|
*
|
|
* (c) 2016 Nicolas Guillaume, Nice, France
|
|
*
|
|
* Example of gif 1px x 1px placeholder :
|
|
* 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
|
*
|
|
* inspired by the work of Luís Almeida
|
|
* http://luis-almeida.github.com/unveil
|
|
*
|
|
* Requires requestAnimationFrame polyfill:
|
|
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
* =================================================== */
|
|
;(function ( $, window, document, undefined ) {
|
|
//defaults
|
|
var pluginName = 'imgSmartLoad',
|
|
defaults = {
|
|
load_all_images_on_first_scroll : false,
|
|
attribute : [ 'data-src', 'data-srcset', 'data-sizes' ],
|
|
excludeImg : '',
|
|
threshold : 200,
|
|
fadeIn_options : { duration : 400 },
|
|
delaySmartLoadEvent : 0
|
|
};
|
|
|
|
|
|
function Plugin( element, options ) {
|
|
this.element = element;
|
|
this.options = $.extend( {}, defaults, options) ;
|
|
this._defaults = defaults;
|
|
this._name = pluginName;
|
|
this.init();
|
|
}
|
|
|
|
|
|
//can access this.element and this.option
|
|
Plugin.prototype.init = function () {
|
|
var self = this,
|
|
$_imgs = $( 'img[' + this.options.attribute[0] + ']:not('+ this.options.excludeImg.join() +')' , this.element );
|
|
|
|
this.increment = 1;//used to wait a little bit after the first user scroll actions to trigger the timer
|
|
this.timer = 0;
|
|
|
|
//attach action to the load event
|
|
$_imgs.bind( 'load_img', {}, function() { self._load_img(this); });
|
|
|
|
$(window).scroll( function( _evt ) { self._better_scroll_event_handler( $_imgs, _evt ); } );
|
|
$(window).resize( _.debounce( function( _evt ) { self._maybe_trigger_load( $_imgs, _evt ); }, 100 ) );
|
|
//on load
|
|
this._maybe_trigger_load( $_imgs );
|
|
};
|
|
|
|
|
|
/*
|
|
* @param : array of $img
|
|
* @param : current event
|
|
* @return : void
|
|
* scroll event performance enhancer => avoid browser stack if too much scrolls
|
|
*/
|
|
Plugin.prototype._better_scroll_event_handler = function( $_imgs , _evt ) {
|
|
var self = this;
|
|
if ( ! this.doingAnimation ) {
|
|
this.doingAnimation = true;
|
|
window.requestAnimationFrame(function() {
|
|
self._maybe_trigger_load( $_imgs , _evt );
|
|
self.doingAnimation = false;
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
/*
|
|
* @param : array of $img
|
|
* @param : current event
|
|
* @return : void
|
|
*/
|
|
Plugin.prototype._maybe_trigger_load = function( $_imgs , _evt ) {
|
|
var self = this;
|
|
//get the visible images list
|
|
_visible_list = $_imgs.filter( function( ind, _img ) { return self._is_visible( _img , _evt ); } );
|
|
//trigger load_img event for visible images
|
|
_visible_list.map( function( ind, _img ) { $(_img).trigger( 'load_img' ); } );
|
|
};
|
|
|
|
|
|
/*
|
|
* @param single $img object
|
|
* @param : current event
|
|
* @return bool
|
|
* helper to check if an image is the visible ( viewport + custom option threshold)
|
|
*/
|
|
Plugin.prototype._is_visible = function( _img, _evt ) {
|
|
var $_img = $(_img),
|
|
wt = $(window).scrollTop(),
|
|
wb = wt + $(window).height(),
|
|
it = $_img.offset().top,
|
|
ib = it + $_img.height(),
|
|
th = this.options.threshold;
|
|
|
|
//force all images to visible if first scroll option enabled
|
|
if ( _evt && 'scroll' == _evt.type && this.options.load_all_images_on_first_scroll )
|
|
return true;
|
|
|
|
return ib >= wt - th && it <= wb + th;
|
|
};
|
|
|
|
|
|
/*
|
|
* @param single $img object
|
|
* @return void
|
|
* replace src place holder by data-src attr val which should include the real src
|
|
*/
|
|
Plugin.prototype._load_img = function( _img ) {
|
|
var $_img = $(_img),
|
|
_src = $_img.attr( this.options.attribute[0] ),
|
|
_src_set = $_img.attr( this.options.attribute[1] ),
|
|
_sizes = $_img.attr( this.options.attribute[2] ),
|
|
self = this;
|
|
|
|
$_img.parent().addClass('smart-loading');
|
|
|
|
$_img.unbind('load_img')
|
|
.hide()
|
|
//https://api.jquery.com/removeAttr/
|
|
//An attribute to remove; as of version 1.7, it can be a space-separated list of attributes.
|
|
//minimum supported wp version (3.4+) embeds jQuery 1.7.2
|
|
.removeAttr( this.options.attribute.join(' ') )
|
|
.attr( 'sizes' , _sizes )
|
|
.attr( 'srcset' , _src_set )
|
|
.attr('src', _src )
|
|
.load( function () {
|
|
//prevent executing this twice on an already smartloaded img
|
|
if ( ! $_img.hasClass('tc-smart-loaded') ) {
|
|
$_img.fadeIn(self.options.fadeIn_options).addClass('tc-smart-loaded');
|
|
}
|
|
|
|
//Following would be executed twice if needed, as some browsers at the
|
|
//first execution of the load callback might still have not actually loaded the img
|
|
|
|
//jetpack's photon commpability (seems to be unneeded since jetpack 3.9.1)
|
|
//Honestly to me this makes no really sense but photon does it.
|
|
//Basically photon recalculates the image dimension and sets its
|
|
//width/height attribute once the image is smartloaded. Given the fact that those attributes are "needed" by the browser to assign the images a certain space so that when loaded the page doesn't "grow" it's height .. what's the point doing it so late?
|
|
if ( ( 'undefined' !== typeof $_img.attr('data-tcjp-recalc-dims') ) && ( false !== $_img.attr('data-tcjp-recalc-dims') ) ) {
|
|
var _width = $_img.originalWidth();
|
|
_height = $_img.originalHeight();
|
|
|
|
if ( 2 != _.size( _.filter( [ _width, _height ], function(num){ return _.isNumber( parseInt(num, 10) ) && num > 1; } ) ) )
|
|
return;
|
|
|
|
//From photon.js: Modify given image's markup so that devicepx-jetpack.js will act on the image and it won't be reprocessed by this script.
|
|
$_img.removeAttr( 'data-tcjp-recalc-dims scale' );
|
|
|
|
$_img.attr( 'width', _width );
|
|
$_img.attr( 'height', _height );
|
|
}
|
|
|
|
$_img.trigger('smartload');
|
|
});//<= create a load() fn
|
|
//http://stackoverflow.com/questions/1948672/how-to-tell-if-an-image-is-loaded-or-cached-in-jquery
|
|
if ( $_img[0].complete ) {
|
|
$_img.load();
|
|
}
|
|
$_img.parent().removeClass('smart-loading');
|
|
};
|
|
|
|
|
|
// prevents against multiple instantiations
|
|
$.fn[pluginName] = function ( options ) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'plugin_' + pluginName)) {
|
|
$.data(this, 'plugin_' + pluginName,
|
|
new Plugin( this, options ));
|
|
}
|
|
});
|
|
};
|
|
})( jQuery, window, document );
|
|
//Target the first letter of the first element found in the wrapper
|
|
;(function ( $, window, document, undefined ) {
|
|
//defaults
|
|
var pluginName = 'extLinks',
|
|
defaults = {
|
|
addIcon : true,
|
|
iconClassName : 'tc-external',
|
|
newTab: true,
|
|
skipSelectors : { //defines the selector to skip when parsing the wrapper
|
|
classes : [],
|
|
ids : []
|
|
},
|
|
skipChildTags : ['IMG']//skip those tags if they are direct children of the current link element
|
|
};
|
|
|
|
|
|
function Plugin( element, options ) {
|
|
this.$_el = $(element);
|
|
this.options = $.extend( {}, defaults, options) ;
|
|
this._href = $.trim( this.$_el.attr( 'href' ) );
|
|
this.init();
|
|
}
|
|
|
|
|
|
Plugin.prototype.init = function() {
|
|
var self = this,
|
|
$_external_icon = this.$_el.next( '.' + self.options.iconClassName );
|
|
//if not eligible, then remove any remaining icon element and return
|
|
//important => the element to remove is right after the current link element ( => use of '+' CSS operator )
|
|
if ( ! this._is_eligible() ) {
|
|
if ( $_external_icon.length )
|
|
$_external_icon.remove();
|
|
return;
|
|
}
|
|
//add the icon link, if not already there
|
|
if ( this.options.addIcon && 0 === $_external_icon.length ) {
|
|
this.$_el.after('<span class="' + self.options.iconClassName + '">');
|
|
}
|
|
|
|
//add the target _blank, if not already there
|
|
if ( this.options.newTab && '_blank' != this.$_el.attr('target') )
|
|
this.$_el.attr('target' , '_blank');
|
|
};
|
|
|
|
|
|
/*
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._is_eligible = function() {
|
|
var self = this;
|
|
if ( ! this._is_external( this._href ) )
|
|
return;
|
|
|
|
//is first child tag allowed ?
|
|
if ( ! this._is_first_child_tag_allowed () )
|
|
return;
|
|
|
|
//are ids and classes selectors allowed ?
|
|
//all type of selectors (in the array) must pass the filter test
|
|
if ( 2 != ( ['ids', 'classes'].filter( function( sel_type) { return self._is_selector_allowed(sel_type); } ) ).length )
|
|
return;
|
|
|
|
var _is_eligible = true;
|
|
// disallow elements whose parent has text-decoration: underline
|
|
// we want to exit as soon as we find a parent with the underlined text-decoration
|
|
$.each( this.$_el.parents(), function() {
|
|
if ( 'underline' == $(this).css('textDecoration') ){
|
|
_is_eligible = false;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
return true && _is_eligible;
|
|
};
|
|
|
|
|
|
/********
|
|
* HELPERS
|
|
*********/
|
|
/*
|
|
* @params string : ids or classes
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._is_selector_allowed = function( requested_sel_type ) {
|
|
if ( czrapp && czrapp.userXP && czrapp.userXP.isSelectorAllowed )
|
|
return czrapp.userXP.isSelectorAllowed( this.$_el, this.options.skipSelectors, requested_sel_type);
|
|
|
|
var sel_type = 'ids' == requested_sel_type ? 'id' : 'class',
|
|
_selsToSkip = this.options.skipSelectors[requested_sel_type];
|
|
|
|
//check if option is well formed
|
|
if ( 'object' != typeof(this.options.skipSelectors) || ! this.options.skipSelectors[requested_sel_type] || ! $.isArray( this.options.skipSelectors[requested_sel_type] ) || 0 === this.options.skipSelectors[requested_sel_type].length )
|
|
return true;
|
|
|
|
//has a forbidden parent?
|
|
if ( this.$_el.parents( _selsToSkip.map( function( _sel ){ return 'id' == sel_type ? '#' + _sel : '.' + _sel; } ).join(',') ).length > 0 )
|
|
return false;
|
|
|
|
//has requested sel ?
|
|
if ( ! this.$_el.attr( sel_type ) )
|
|
return true;
|
|
|
|
var _elSels = this.$_el.attr( sel_type ).split(' '),
|
|
_filtered = _elSels.filter( function(classe) { return -1 != $.inArray( classe , _selsToSkip ) ;});
|
|
|
|
//check if the filtered selectors array with the non authorized selectors is empty or not
|
|
//if empty => all selectors are allowed
|
|
//if not, at least one is not allowed
|
|
return 0 === _filtered.length;
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._is_first_child_tag_allowed = function() {
|
|
//has children ?
|
|
if ( 0 === this.$_el.children().length )
|
|
return true;
|
|
|
|
var tagName = this.$_el.children().first()[0].tagName,
|
|
_tagToSkip = this.options.skipChildTags;
|
|
|
|
//check if tag to skip option is an array
|
|
if ( ! $.isArray( _tagToSkip ) )
|
|
return true;
|
|
|
|
//make sure tags in option are all in uppercase
|
|
_tagToSkip = _tagToSkip.map( function( _tag ) { return _tag.toUpperCase(); });
|
|
return -1 == $.inArray( tagName , _tagToSkip );
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._is_external = function( _href ) {
|
|
//gets main domain and extension, no matter if it is a n level sub domain
|
|
//works also with localhost or numeric urls
|
|
var _main_domain = (location.host).split('.').slice(-2).join('.'),
|
|
_reg = new RegExp( _main_domain );
|
|
|
|
_href = $.trim( _href );
|
|
|
|
if ( _href !== '' && _href != '#' && this._isValidURL( _href ) )
|
|
return ! _reg.test( _href );
|
|
return;
|
|
};
|
|
|
|
|
|
/*
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._isValidURL = function( _url ){
|
|
var _pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
|
|
return _pattern.test( _url );
|
|
};
|
|
|
|
|
|
// prevents against multiple instantiations
|
|
$.fn[pluginName] = function ( options ) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'plugin_' + pluginName)) {
|
|
$.data(this, 'plugin_' + pluginName,
|
|
new Plugin( this, options ));
|
|
}
|
|
});
|
|
};
|
|
|
|
})( jQuery, window, document );
|
|
/* ===================================================
|
|
* jqueryCenterImages.js v1.0.0
|
|
* ===================================================
|
|
* (c) 2015 Nicolas Guillaume, Nice, France
|
|
* CenterImages plugin may be freely distributed under the terms of the GNU GPL v2.0 or later license.
|
|
*
|
|
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
|
*
|
|
* Center images in a specified container
|
|
*
|
|
* =================================================== */
|
|
;(function ( $, window, document, undefined ) {
|
|
//defaults
|
|
var pluginName = 'centerImages',
|
|
defaults = {
|
|
enableCentering : true,
|
|
onresize : true,
|
|
oncustom : [],//list of event here
|
|
imgSel : 'img',
|
|
defaultCSSVal : { width : 'auto' , height : 'auto' },
|
|
leftAdjust : 0,
|
|
zeroLeftAdjust : 0,
|
|
topAdjust : 0,
|
|
zeroTopAdjust : -2,//<= top ajustement for h-centered
|
|
enableGoldenRatio : false,
|
|
goldenRatioLimitHeightTo : 350,
|
|
goldenRatioVal : 1.618,
|
|
skipGoldenRatioClasses : ['no-gold-ratio'],
|
|
disableGRUnder : 767,//in pixels
|
|
useImgAttr:false,//uses the img height and width attributes if not visible (typically used for the customizr slider hidden images)
|
|
setOpacityWhenCentered : false,//this can be used to hide the image during the time it is centered
|
|
opacity : 1
|
|
};
|
|
|
|
function Plugin( element, options ) {
|
|
var self = this;
|
|
this.container = element;
|
|
this.options = $.extend( {}, defaults, options) ;
|
|
this._defaults = defaults;
|
|
this._name = pluginName;
|
|
this._customEvt = $.isArray(self.options.oncustom) ? self.options.oncustom : self.options.oncustom.split(' ');
|
|
this.init();
|
|
}
|
|
|
|
//can access this.element and this.option
|
|
//@return void
|
|
Plugin.prototype.init = function () {
|
|
var self = this,
|
|
_do = function() {
|
|
//applies golden ratio to all containers ( even if there are no images in container )
|
|
self._maybe_apply_golden_r();
|
|
|
|
//parses imgs ( if any ) in current container
|
|
var $_imgs = $( self.options.imgSel , self.container );
|
|
|
|
//if no images or centering is not active, only handle the golden ratio on resize event
|
|
if ( ! $_imgs.length || ! self.options.enableCentering ) {
|
|
//creates a golden ratio fn on resize
|
|
$(window).bind( 'resize' , {} , function( evt ) { self._maybe_apply_golden_r( evt ); });
|
|
} else {
|
|
self._parse_imgs($_imgs);
|
|
}
|
|
};
|
|
|
|
//fire
|
|
_do();
|
|
|
|
//bind the container element with custom events if any
|
|
//( the images will also be bound )
|
|
if ( $.isArray( self._customEvt ) ) {
|
|
self._customEvt.map( function( evt ) {
|
|
$( self.container ).bind( evt, {} , _do );
|
|
} );
|
|
}
|
|
};
|
|
|
|
|
|
//@return void
|
|
Plugin.prototype._maybe_apply_golden_r = function( evt ) {
|
|
//check if options are valids
|
|
if ( ! this.options.enableGoldenRatio || ! this.options.goldenRatioVal || 0 === this.options.goldenRatioVal )
|
|
return;
|
|
|
|
//make sure the container has not a forbidden class
|
|
if ( ! this._is_selector_allowed() )
|
|
return;
|
|
//check if golden ratio can be applied under custom window width
|
|
if ( ! this._is_window_width_allowed() ) {
|
|
//reset inline style for the container
|
|
$(this.container).attr('style' , '');
|
|
return;
|
|
}
|
|
|
|
var new_height = Math.round( $(this.container).width() / this.options.goldenRatioVal );
|
|
//check if the new height does not exceed the goldenRatioLimitHeightTo option
|
|
new_height = new_height > this.options.goldenRatioLimitHeightTo ? this.options.goldenRatioLimitHeightTo : new_height;
|
|
$(this.container).css( {'line-height' : new_height + 'px' , 'height' : new_height + 'px' } ).trigger('golden-ratio-applied');
|
|
};
|
|
|
|
|
|
/*
|
|
* @params string : ids or classes
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._is_window_width_allowed = function() {
|
|
return $(window).width() > this.options.disableGRUnder - 15;
|
|
};
|
|
|
|
|
|
//@return void
|
|
Plugin.prototype._parse_imgs = function( $_imgs ) {
|
|
var self = this;
|
|
|
|
$_imgs.each(function ( ind, img ) {
|
|
self._pre_img_cent( $(img) );
|
|
self._bind_evt ( $(img) );
|
|
});
|
|
};
|
|
|
|
|
|
//@return void
|
|
//map custom events if any
|
|
Plugin.prototype._bind_evt = function( $_img ) {
|
|
var self = this;
|
|
|
|
//WINDOW RESIZE EVENT ACTIONS
|
|
//GOLDEN RATIO (before image centering)
|
|
$(window).bind( 'resize' , {} , function( evt ) { self._maybe_apply_golden_r( evt ); });
|
|
|
|
//IMG CENTERING FN
|
|
if ( this.options.onresize ) {
|
|
$(window).resize(function() {
|
|
self._pre_img_cent( $_img );
|
|
});
|
|
}
|
|
//CUSTOM EVENTS ACTIONS
|
|
//bind img
|
|
if ( $.isArray( self._customEvt ) ) {
|
|
self._customEvt.map( function( evt ) {
|
|
$_img.bind( evt, {} , function( evt ) {
|
|
self._pre_img_cent( $_img );
|
|
} );
|
|
} );
|
|
}
|
|
};
|
|
|
|
|
|
//@return void
|
|
Plugin.prototype._pre_img_cent = function( $_img ) {
|
|
var _state = this._get_current_state($_img);
|
|
this._maybe_center_img( $_img, _state );
|
|
};
|
|
|
|
|
|
|
|
//@return object with initial conditions
|
|
Plugin.prototype._get_current_state = function( $_img ) {
|
|
var c_x = $_img.closest(this.container).outerWidth(),
|
|
c_y = $(this.container).outerHeight(),
|
|
i_x = this._get_img_dim( $_img , 'x'),
|
|
i_y = this._get_img_dim( $_img , 'y'),
|
|
up_i_x = i_y * c_y !== 0 ? Math.round( i_x / i_y * c_y ) : c_x,
|
|
up_i_y = i_x * c_x !== 0 ? Math.round( i_y / i_x * c_x ) : c_y,
|
|
current = 'h';
|
|
//avoid dividing by zero if c_x or i_x === 0
|
|
if ( 0 !== c_x * i_x )
|
|
current = ( c_y / c_x ) >= ( i_y / i_x ) ? 'h' : 'v';
|
|
|
|
var prop = {
|
|
h : {
|
|
dim : { name : 'height', val : c_y },
|
|
dir : { name : 'left', val : ( c_x - up_i_x ) / 2 + ( this.options.leftAdjust || 0 ) },
|
|
_class : 'h-centered'
|
|
},
|
|
v : {
|
|
dim : { name : 'width', val : c_x },
|
|
dir : { name : 'top', val : ( c_y - up_i_y ) / 2 + ( this.options.topAdjust || 0 ) },
|
|
_class : 'v-centered'
|
|
}
|
|
};
|
|
|
|
return { current : current , prop : prop };
|
|
};
|
|
|
|
|
|
//@return img height or width
|
|
//uses the img height and width if not visible and set in options
|
|
Plugin.prototype._get_img_dim = function( $_img, _dim ) {
|
|
if ( ! this.options.useImgAttr )
|
|
return 'x' == _dim ? $_img.outerWidth() : $_img.outerHeight();
|
|
|
|
if ( $_img.is(":visible") )
|
|
return 'x' == _dim ? $_img.outerWidth() : $_img.outerHeight();
|
|
else {
|
|
if ( 'x' == _dim ){
|
|
var _width = $_img.originalWidth();
|
|
return typeof _width === undefined ? 0 : _width;
|
|
}if ( 'y' == _dim ){
|
|
var _height = $_img.originalHeight();
|
|
return typeof _height === undefined ? 0 : _height;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
//@return void
|
|
Plugin.prototype._maybe_center_img = function( $_img, _state ) {
|
|
var self = this,
|
|
_case = _state.current,
|
|
_p = _state.prop[_case],
|
|
_not_p = _state.prop[ 'h' == _case ? 'v' : 'h'],
|
|
_not_p_dir_val = 'h' == _case ? ( this.options.zeroTopAdjust || 0 ) : ( this.options.zeroLeftAdjust || 0 ),
|
|
_centerImg = function( $_img ) {
|
|
$_img.css( _p.dim.name , _p.dim.val ).css( _not_p.dim.name , self.options.defaultCSSVal[_not_p.dim.name] || 'auto' )
|
|
.addClass( _p._class ).removeClass( _not_p._class )
|
|
.css( _p.dir.name, _p.dir.val ).css( _not_p.dir.name, _not_p_dir_val );
|
|
return $_img;
|
|
};
|
|
if ( this.options.setOpacityWhenCentered ) {
|
|
$.when( _centerImg( $_img ) ).done( function( $_img ) {
|
|
$_img.css('opacity', self.options.opacity );
|
|
});
|
|
} else {
|
|
_centerImg( $_img );
|
|
}
|
|
};
|
|
|
|
/********
|
|
* HELPERS
|
|
*********/
|
|
/*
|
|
* @params string : ids or classes
|
|
* @return boolean
|
|
*/
|
|
Plugin.prototype._is_selector_allowed = function() {
|
|
//has requested sel ?
|
|
if ( ! $(this.container).attr( 'class' ) )
|
|
return true;
|
|
|
|
//check if option is well formed
|
|
if ( ! this.options.skipGoldenRatioClasses || ! $.isArray( this.options.skipGoldenRatioClasses ) )
|
|
return true;
|
|
|
|
var _elSels = $(this.container).attr( 'class' ).split(' '),
|
|
_selsToSkip = this.options.skipGoldenRatioClasses,
|
|
_filtered = _elSels.filter( function(classe) { return -1 != $.inArray( classe , _selsToSkip ) ;});
|
|
|
|
//check if the filtered selectors array with the non authorized selectors is empty or not
|
|
//if empty => all selectors are allowed
|
|
//if not, at least one is not allowed
|
|
return 0 === _filtered.length;
|
|
};
|
|
|
|
|
|
// prevents against multiple instantiations
|
|
$.fn[pluginName] = function ( options ) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'plugin_' + pluginName)) {
|
|
$.data(this, 'plugin_' + pluginName,
|
|
new Plugin( this, options ));
|
|
}
|
|
});
|
|
};
|
|
|
|
})( jQuery, window, document );
|
|
/* ===================================================
|
|
* jqueryParallax.js v1.0.0
|
|
* ===================================================
|
|
* (c) 2016 Nicolas Guillaume - Rocco Aliberti, Nice, France
|
|
* CenterImages plugin may be freely distributed under the terms of the GNU GPL v2.0 or later license.
|
|
*
|
|
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
|
*
|
|
*
|
|
*
|
|
* =================================================== */
|
|
;(function ( $, window, document, undefined ) {
|
|
//defaults
|
|
var pluginName = 'czrParallax',
|
|
defaults = {
|
|
parallaxRatio : 0.5,
|
|
parallaxDirection : 1,
|
|
parallaxOverflowHidden : true,
|
|
oncustom : [],//list of event here
|
|
backgroundClass : 'image',
|
|
matchMedia : 'only screen and (max-width: 768px)'
|
|
};
|
|
|
|
function Plugin( element, options ) {
|
|
this.element = $(element);
|
|
this.options = $.extend( {}, defaults, options, this.parseElementDataOptions() ) ;
|
|
this._defaults = defaults;
|
|
this._name = pluginName;
|
|
this.init();
|
|
}
|
|
|
|
Plugin.prototype.parseElementDataOptions = function () {
|
|
return this.element.data();
|
|
};
|
|
|
|
//can access this.element and this.option
|
|
//@return void
|
|
Plugin.prototype.init = function () {
|
|
//cache some element
|
|
this.$_document = $(document);
|
|
this.$_window = czrapp ? czrapp.$_window : $(window);
|
|
this.doingAnimation = false;
|
|
|
|
this.initWaypoints();
|
|
this.stageParallaxElements();
|
|
this._bind_evt();
|
|
};
|
|
|
|
//@return void
|
|
//map custom events if any
|
|
Plugin.prototype._bind_evt = function() {
|
|
var self = this,
|
|
_customEvt = $.isArray(this.options.oncustom) ? this.options.oncustom : this.options.oncustom.split(' ');
|
|
|
|
_.bindAll( this, 'maybeParallaxMe', 'parallaxMe' );
|
|
/* TODO: custom events? */
|
|
};
|
|
|
|
Plugin.prototype.stageParallaxElements = function() {
|
|
this.element.css( 'position', this.element.hasClass( this.options.backgroundClass ) ? 'absolute' : 'relative' );
|
|
if ( this.options.parallaxOverflowHidden ){
|
|
var $_wrapper = this.element.closest( '.parallax-wrapper' );
|
|
if ( $_wrapper.length )
|
|
$_wrapper.css( 'overflow', 'hidden' );
|
|
}
|
|
};
|
|
|
|
Plugin.prototype.initWaypoints = function() {
|
|
var self = this;
|
|
|
|
this.way_start = new Waypoint({
|
|
element: self.element,
|
|
handler: function() {
|
|
self.maybeParallaxMe();
|
|
if ( ! self.element.hasClass('parallaxing') ){
|
|
self.$_window.on('scroll', self.maybeParallaxMe );
|
|
self.element.addClass('parallaxing');
|
|
} else{
|
|
self.element.removeClass('parallaxing');
|
|
self.$_window.off('scroll', self.maybeParallaxMe );
|
|
self.doingAnimation = false;
|
|
self.element.css('top', 0 );
|
|
}
|
|
}
|
|
});
|
|
|
|
this.way_stop = new Waypoint({
|
|
element: self.element,
|
|
handler: function() {
|
|
self.maybeParallaxMe();
|
|
if ( ! self.element.hasClass('parallaxing') ) {
|
|
self.$_window.on('scroll', self.maybeParallaxMe );
|
|
self.element.addClass('parallaxing');
|
|
}else {
|
|
self.element.removeClass('parallaxing');
|
|
self.$_window.off('scroll', self.maybeParallaxMe );
|
|
self.doingAnimation = false;
|
|
}
|
|
},
|
|
offset: function(){
|
|
//offset = this.context.innerHeight() - this.adapter.outerHeight();
|
|
//return - ( offset > 20 /* possible wrong h scrollbar */ ? offset : this.context.innerHeight() );
|
|
return - this.adapter.outerHeight();
|
|
}
|
|
});
|
|
};
|
|
|
|
/*
|
|
* In order to handle a smooth scroll
|
|
*/
|
|
Plugin.prototype.maybeParallaxMe = function() {
|
|
var self = this;
|
|
//options.matchMedia is set to 'only screen and (max-width: 768px)' by default
|
|
//if a match is found, then reset the top position
|
|
if ( _.isFunction( window.matchMedia ) && matchMedia( self.options.matchMedia ).matches )
|
|
return this.setTopPosition();
|
|
|
|
if ( ! this.doingAnimation ) {
|
|
this.doingAnimation = true;
|
|
window.requestAnimationFrame(function() {
|
|
self.parallaxMe();
|
|
self.doingAnimation = false;
|
|
});
|
|
}
|
|
};
|
|
|
|
//@see https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
|
|
Plugin.prototype.setTopPosition = function( _top_ ) {
|
|
_top_ = _top_ || 0;
|
|
this.element.css({
|
|
'transform' : 'translate3d(0px, ' + _top_ + 'px, .01px)',
|
|
'-webkit-transform' : 'translate3d(0px, ' + _top_ + 'px, .01px)'
|
|
//top: _top_
|
|
});
|
|
};
|
|
|
|
Plugin.prototype.parallaxMe = function() {
|
|
//parallax only the current slide if in slider context?
|
|
/*
|
|
if ( ! ( this.element.hasClass( 'is-selected' ) || this.element.parent( '.is-selected' ).length ) )
|
|
return;
|
|
*/
|
|
|
|
var ratio = this.options.parallaxRatio,
|
|
parallaxDirection = this.options.parallaxDirection,
|
|
value = ratio * parallaxDirection * ( this.$_document.scrollTop() - this.way_start.triggerPoint );
|
|
this.setTopPosition( parallaxDirection * value < 0 ? 0 : value );
|
|
};
|
|
|
|
|
|
// prevents against multiple instantiations
|
|
$.fn[pluginName] = function ( options ) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'plugin_' + pluginName)) {
|
|
$.data(this, 'plugin_' + pluginName,
|
|
new Plugin( this, options ));
|
|
}
|
|
});
|
|
};
|
|
})( jQuery, window, document );/* ===================================================
|
|
* jqueryAnimateSvg.js v1.0.0
|
|
* @dependency : Vivus.js (MIT licensed)
|
|
* ===================================================
|
|
* (c) 2016 Nicolas Guillaume, Nice, France
|
|
* Animates an svg icon with Vivus given its #id
|
|
* =================================================== */
|
|
;(function ( $, window, document, _ ) {
|
|
var pluginName = 'animateSvg',
|
|
defaults = {
|
|
filter_opacity : 0.8,
|
|
svg_opacity : 0.8,
|
|
animation_duration : 400
|
|
},
|
|
_drawSvgIcon = function(options) {
|
|
var id = $(this).attr('id');
|
|
if ( _.isUndefined(id) || _.isEmpty(id) || 'function' != typeof( Vivus ) ) {
|
|
if ( window.czrapp )
|
|
czrapp.consoleLog( 'An svg icon could not be animated with Vivus.');
|
|
return;
|
|
}
|
|
if ( $('[id=' + id + ']').length > 1 ) {
|
|
if ( window.czrapp )
|
|
czrapp.consoleLog( 'Svg icons must have a unique css #id to be animated. Multiple id found for : ' + id );
|
|
}
|
|
var set_opacity = function() {
|
|
if ( $('#' + id ).siblings('.filter-placeholder').length )
|
|
return $('#' + id ).css('opacity', options.svg_opacity ).siblings('.filter-placeholder').css('opacity', options.filter_opacity);
|
|
else
|
|
return $('#' + id ).css('opacity', options.svg_opacity );
|
|
};
|
|
$.when( set_opacity() ).done( function() {
|
|
new Vivus( id, {type: 'delayed', duration: options.animation_duration } );
|
|
});
|
|
};
|
|
|
|
// prevents against multiple instantiations
|
|
$.fn[pluginName] = function ( options ) {
|
|
options = $.extend( {}, defaults, options) ;
|
|
return this.each(function () {
|
|
if ( ! $.data(this, 'plugin_' + pluginName) ) {
|
|
$.data(
|
|
this,
|
|
'plugin_' + pluginName,
|
|
_drawSvgIcon.call( this, options )
|
|
);
|
|
}
|
|
});
|
|
};
|
|
})( jQuery, window, document, _ );// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
|
|
|
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
|
|
|
|
// MIT license
|
|
(function() {
|
|
var lastTime = 0;
|
|
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
|
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
|
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
|
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
|
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
|
}
|
|
|
|
if (!window.requestAnimationFrame)
|
|
window.requestAnimationFrame = function(callback, element) {
|
|
var currTime = new Date().getTime();
|
|
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
lastTime = currTime + timeToCall;
|
|
return window.setTimeout(function() { callback(currTime + timeToCall); },
|
|
timeToCall);
|
|
};
|
|
|
|
if (!window.cancelAnimationFrame)
|
|
window.cancelAnimationFrame = function(id) {
|
|
clearTimeout(id);
|
|
};
|
|
}());/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
|
|
|
|
window.matchMedia || (window.matchMedia = function() {
|
|
"use strict";
|
|
|
|
// For browsers that support matchMedium api such as IE 9 and webkit
|
|
var styleMedia = (window.styleMedia || window.media);
|
|
|
|
// For those that don't support matchMedium
|
|
if (!styleMedia) {
|
|
var style = document.createElement('style'),
|
|
script = document.getElementsByTagName('script')[0],
|
|
info = null;
|
|
|
|
style.type = 'text/css';
|
|
style.id = 'matchmediajs-test';
|
|
|
|
if (!script) {
|
|
document.head.appendChild(style);
|
|
} else {
|
|
script.parentNode.insertBefore(style, script);
|
|
}
|
|
|
|
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
|
|
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
|
|
|
|
styleMedia = {
|
|
matchMedium: function(media) {
|
|
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
|
|
|
|
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
|
|
if (style.styleSheet) {
|
|
style.styleSheet.cssText = text;
|
|
} else {
|
|
style.textContent = text;
|
|
}
|
|
|
|
// Test if media query is true or false
|
|
return info.width === '1px';
|
|
}
|
|
};
|
|
}
|
|
|
|
return function(media) {
|
|
return {
|
|
matches: styleMedia.matchMedium(media || 'all'),
|
|
media: media || 'all'
|
|
};
|
|
};
|
|
}());// Press Customizr version of Galambosi's SmoothScroll
|
|
|
|
// SmoothScroll for websites v1.3.8 (Balazs Galambosi)
|
|
// Licensed under the terms of the MIT license.
|
|
//
|
|
// You may use it in your theme if you credit me.
|
|
// It is also free to use on any individual website.
|
|
//
|
|
// Exception:
|
|
// The only restriction would be not to publish any
|
|
// extension for browsers or native application
|
|
// without getting a written permission first.
|
|
//
|
|
|
|
(function () {
|
|
|
|
// Scroll Variables (tweakable)
|
|
var defaultOptions = {
|
|
|
|
// Scrolling Core
|
|
frameRate : 150, // [Hz]
|
|
animationTime : 400, // [px]
|
|
stepSize : 120, // [px]
|
|
|
|
// Pulse (less tweakable)
|
|
// ratio of "tail" to "acceleration"
|
|
pulseAlgorithm : true,
|
|
pulseScale : 4,
|
|
pulseNormalize : 1,
|
|
|
|
// Acceleration
|
|
accelerationDelta : 20, // 20
|
|
accelerationMax : 1, // 1
|
|
|
|
// Keyboard Settings
|
|
keyboardSupport : true, // option
|
|
arrowScroll : 50, // [px]
|
|
|
|
// Other
|
|
touchpadSupport : true,
|
|
fixedBackground : true,
|
|
excluded : ''
|
|
};
|
|
|
|
var options = defaultOptions;
|
|
|
|
|
|
// Other Variables
|
|
var isExcluded = false;
|
|
var isFrame = false;
|
|
var direction = { x: 0, y: 0 };
|
|
var initDone = false;
|
|
var root = document.documentElement;
|
|
var activeElement;
|
|
var observer;
|
|
var deltaBuffer = [];
|
|
var isMac = /^Mac/.test(navigator.platform);
|
|
|
|
var key = { left: 37, up: 38, right: 39, down: 40, spacebar: 32,
|
|
pageup: 33, pagedown: 34, end: 35, home: 36 };
|
|
|
|
|
|
/***********************************************
|
|
* SETTINGS
|
|
***********************************************/
|
|
|
|
var options = defaultOptions;
|
|
|
|
|
|
/***********************************************
|
|
* INITIALIZE
|
|
***********************************************/
|
|
|
|
/**
|
|
* Tests if smooth scrolling is allowed. Shuts down everything if not.
|
|
*/
|
|
function initTest() {
|
|
if (options.keyboardSupport) {
|
|
addEvent('keydown', keydown);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets up scrolls array, determines if frames are involved.
|
|
*/
|
|
function init() {
|
|
|
|
if (initDone || !document.body) return;
|
|
|
|
initDone = true;
|
|
|
|
var body = document.body;
|
|
var html = document.documentElement;
|
|
var windowHeight = window.innerHeight;
|
|
var scrollHeight = body.scrollHeight;
|
|
|
|
// check compat mode for root element
|
|
root = (document.compatMode.indexOf('CSS') >= 0) ? html : body;
|
|
activeElement = body;
|
|
|
|
initTest();
|
|
|
|
// Checks if this script is running in a frame
|
|
if (top != self) {
|
|
isFrame = true;
|
|
}
|
|
|
|
/**
|
|
* This fixes a bug where the areas left and right to
|
|
* the content does not trigger the onmousewheel event
|
|
* on some pages. e.g.: html, body { height: 100% }
|
|
*/
|
|
else if (scrollHeight > windowHeight &&
|
|
(body.offsetHeight <= windowHeight ||
|
|
html.offsetHeight <= windowHeight)) {
|
|
|
|
var fullPageElem = document.createElement('div');
|
|
fullPageElem.style.cssText = 'position:absolute; z-index:-10000; ' +
|
|
'top:0; left:0; right:0; height:' +
|
|
root.scrollHeight + 'px';
|
|
document.body.appendChild(fullPageElem);
|
|
|
|
// DOM changed (throttled) to fix height
|
|
var pendingRefresh;
|
|
var refresh = function () {
|
|
if (pendingRefresh) return; // could also be: clearTimeout(pendingRefresh);
|
|
pendingRefresh = setTimeout(function () {
|
|
if (isExcluded) return; // could be running after cleanup
|
|
fullPageElem.style.height = '0';
|
|
fullPageElem.style.height = root.scrollHeight + 'px';
|
|
pendingRefresh = null;
|
|
}, 500); // act rarely to stay fast
|
|
};
|
|
|
|
setTimeout(refresh, 10);
|
|
|
|
// TODO: attributeFilter?
|
|
var config = {
|
|
attributes: true,
|
|
childList: true,
|
|
characterData: false
|
|
// subtree: true
|
|
};
|
|
|
|
observer = new MutationObserver(refresh);
|
|
observer.observe(body, config);
|
|
|
|
if (root.offsetHeight <= windowHeight) {
|
|
var clearfix = document.createElement('div');
|
|
clearfix.style.clear = 'both';
|
|
body.appendChild(clearfix);
|
|
}
|
|
}
|
|
|
|
// disable fixed background
|
|
if (!options.fixedBackground && !isExcluded) {
|
|
body.style.backgroundAttachment = 'scroll';
|
|
html.style.backgroundAttachment = 'scroll';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Removes event listeners and other traces left on the page.
|
|
*/
|
|
function cleanup() {
|
|
observer && observer.disconnect();
|
|
removeEvent(wheelEvent, wheel);
|
|
removeEvent('mousedown', mousedown);
|
|
removeEvent('keydown', keydown);
|
|
}
|
|
|
|
|
|
/************************************************
|
|
* SCROLLING
|
|
************************************************/
|
|
var que = [];
|
|
var pending = false;
|
|
var lastScroll = Date.now();
|
|
|
|
/**
|
|
* Pushes scroll actions to the scrolling queue.
|
|
*/
|
|
function scrollArray(elem, left, top) {
|
|
|
|
directionCheck(left, top);
|
|
|
|
if (options.accelerationMax != 1) {
|
|
var now = Date.now();
|
|
var elapsed = now - lastScroll;
|
|
if (elapsed < options.accelerationDelta) {
|
|
var factor = (1 + (50 / elapsed)) / 2;
|
|
if (factor > 1) {
|
|
factor = Math.min(factor, options.accelerationMax);
|
|
left *= factor;
|
|
top *= factor;
|
|
}
|
|
}
|
|
lastScroll = Date.now();
|
|
}
|
|
|
|
// push a scroll command
|
|
que.push({
|
|
x: left,
|
|
y: top,
|
|
lastX: (left < 0) ? 0.99 : -0.99,
|
|
lastY: (top < 0) ? 0.99 : -0.99,
|
|
start: Date.now()
|
|
});
|
|
|
|
// don't act if there's a pending queue
|
|
if (pending) {
|
|
return;
|
|
}
|
|
|
|
var scrollWindow = (elem === document.body);
|
|
|
|
var step = function (time) {
|
|
|
|
var now = Date.now();
|
|
var scrollX = 0;
|
|
var scrollY = 0;
|
|
|
|
for (var i = 0; i < que.length; i++) {
|
|
|
|
var item = que[i];
|
|
var elapsed = now - item.start;
|
|
var finished = (elapsed >= options.animationTime);
|
|
|
|
// scroll position: [0, 1]
|
|
var position = (finished) ? 1 : elapsed / options.animationTime;
|
|
|
|
// easing [optional]
|
|
if (options.pulseAlgorithm) {
|
|
position = pulse(position);
|
|
}
|
|
|
|
// only need the difference
|
|
var x = (item.x * position - item.lastX) >> 0;
|
|
var y = (item.y * position - item.lastY) >> 0;
|
|
|
|
// add this to the total scrolling
|
|
scrollX += x;
|
|
scrollY += y;
|
|
|
|
// update last values
|
|
item.lastX += x;
|
|
item.lastY += y;
|
|
|
|
// delete and step back if it's over
|
|
if (finished) {
|
|
que.splice(i, 1); i--;
|
|
}
|
|
}
|
|
|
|
// scroll left and top
|
|
if (scrollWindow) {
|
|
window.scrollBy(scrollX, scrollY);
|
|
}
|
|
else {
|
|
if (scrollX) elem.scrollLeft += scrollX;
|
|
if (scrollY) elem.scrollTop += scrollY;
|
|
}
|
|
|
|
// clean up if there's nothing left to do
|
|
if (!left && !top) {
|
|
que = [];
|
|
}
|
|
|
|
if (que.length) {
|
|
requestFrame(step, elem, (1000 / options.frameRate + 1));
|
|
} else {
|
|
pending = false;
|
|
}
|
|
};
|
|
|
|
// start a new queue of actions
|
|
requestFrame(step, elem, 0);
|
|
pending = true;
|
|
}
|
|
|
|
|
|
/***********************************************
|
|
* EVENTS
|
|
***********************************************/
|
|
|
|
/**
|
|
* Mouse wheel handler.
|
|
* @param {Object} event
|
|
*/
|
|
function wheel(event) {
|
|
|
|
if (!initDone) {
|
|
init();
|
|
}
|
|
|
|
var target = event.target;
|
|
var overflowing = overflowingAncestor(target);
|
|
|
|
// use default if there's no overflowing
|
|
// element or default action is prevented
|
|
// or it's a zooming event with CTRL
|
|
if (!overflowing || event.defaultPrevented || event.ctrlKey) {
|
|
return true;
|
|
}
|
|
|
|
// leave embedded content alone (flash & pdf)
|
|
if (isNodeName(activeElement, 'embed') ||
|
|
(isNodeName(target, 'embed') && /\.pdf/i.test(target.src)) ||
|
|
isNodeName(activeElement, 'object')) {
|
|
return true;
|
|
}
|
|
|
|
var deltaX = -event.wheelDeltaX || event.deltaX || 0;
|
|
var deltaY = -event.wheelDeltaY || event.deltaY || 0;
|
|
|
|
if (isMac) {
|
|
if (event.wheelDeltaX && isDivisible(event.wheelDeltaX, 120)) {
|
|
deltaX = -120 * (event.wheelDeltaX / Math.abs(event.wheelDeltaX));
|
|
}
|
|
if (event.wheelDeltaY && isDivisible(event.wheelDeltaY, 120)) {
|
|
deltaY = -120 * (event.wheelDeltaY / Math.abs(event.wheelDeltaY));
|
|
}
|
|
}
|
|
|
|
// use wheelDelta if deltaX/Y is not available
|
|
if (!deltaX && !deltaY) {
|
|
deltaY = -event.wheelDelta || 0;
|
|
}
|
|
|
|
// line based scrolling (Firefox mostly)
|
|
if (event.deltaMode === 1) {
|
|
deltaX *= 40;
|
|
deltaY *= 40;
|
|
}
|
|
|
|
// check if it's a touchpad scroll that should be ignored
|
|
if (!options.touchpadSupport && isTouchpad(deltaY)) {
|
|
return true;
|
|
}
|
|
|
|
// scale by step size
|
|
// delta is 120 most of the time
|
|
// synaptics seems to send 1 sometimes
|
|
if (Math.abs(deltaX) > 1.2) {
|
|
deltaX *= options.stepSize / 120;
|
|
}
|
|
if (Math.abs(deltaY) > 1.2) {
|
|
deltaY *= options.stepSize / 120;
|
|
}
|
|
|
|
scrollArray(overflowing, deltaX, deltaY);
|
|
event.preventDefault();
|
|
scheduleClearCache();
|
|
}
|
|
|
|
/**
|
|
* Keydown event handler.
|
|
* @param {Object} event
|
|
*/
|
|
function keydown(event) {
|
|
|
|
var target = event.target;
|
|
var modifier = event.ctrlKey || event.altKey || event.metaKey ||
|
|
(event.shiftKey && event.keyCode !== key.spacebar);
|
|
|
|
// our own tracked active element could've been removed from the DOM
|
|
if (!document.contains(activeElement)) {
|
|
activeElement = document.activeElement;
|
|
}
|
|
|
|
// do nothing if user is editing text
|
|
// or using a modifier key (except shift)
|
|
// or in a dropdown
|
|
// or inside interactive elements
|
|
var inputNodeNames = /^(textarea|select|embed|object)$/i;
|
|
var buttonTypes = /^(button|submit|radio|checkbox|file|color|image)$/i;
|
|
if ( inputNodeNames.test(target.nodeName) ||
|
|
isNodeName(target, 'input') && !buttonTypes.test(target.type) ||
|
|
isNodeName(activeElement, 'video') ||
|
|
isInsideYoutubeVideo(event) ||
|
|
target.isContentEditable ||
|
|
event.defaultPrevented ||
|
|
modifier ) {
|
|
return true;
|
|
}
|
|
|
|
// spacebar should trigger button press
|
|
if ((isNodeName(target, 'button') ||
|
|
isNodeName(target, 'input') && buttonTypes.test(target.type)) &&
|
|
event.keyCode === key.spacebar) {
|
|
return true;
|
|
}
|
|
|
|
var shift, x = 0, y = 0;
|
|
var elem = overflowingAncestor(activeElement);
|
|
var clientHeight = elem.clientHeight;
|
|
|
|
if (elem == document.body) {
|
|
clientHeight = window.innerHeight;
|
|
}
|
|
|
|
switch (event.keyCode) {
|
|
case key.up:
|
|
y = -options.arrowScroll;
|
|
break;
|
|
case key.down:
|
|
y = options.arrowScroll;
|
|
break;
|
|
case key.spacebar: // (+ shift)
|
|
shift = event.shiftKey ? 1 : -1;
|
|
y = -shift * clientHeight * 0.9;
|
|
break;
|
|
case key.pageup:
|
|
y = -clientHeight * 0.9;
|
|
break;
|
|
case key.pagedown:
|
|
y = clientHeight * 0.9;
|
|
break;
|
|
case key.home:
|
|
y = -elem.scrollTop;
|
|
break;
|
|
case key.end:
|
|
var damt = elem.scrollHeight - elem.scrollTop - clientHeight;
|
|
y = (damt > 0) ? damt+10 : 0;
|
|
break;
|
|
case key.left:
|
|
x = -options.arrowScroll;
|
|
break;
|
|
case key.right:
|
|
x = options.arrowScroll;
|
|
break;
|
|
default:
|
|
return true; // a key we don't care about
|
|
}
|
|
|
|
scrollArray(elem, x, y);
|
|
event.preventDefault();
|
|
scheduleClearCache();
|
|
}
|
|
|
|
/**
|
|
* Mousedown event only for updating activeElement
|
|
*/
|
|
function mousedown(event) {
|
|
activeElement = event.target;
|
|
}
|
|
|
|
|
|
/***********************************************
|
|
* OVERFLOW
|
|
***********************************************/
|
|
|
|
var uniqueID = (function () {
|
|
var i = 0;
|
|
return function (el) {
|
|
return el.uniqueID || (el.uniqueID = i++);
|
|
};
|
|
})();
|
|
|
|
var cache = {}; // cleared out after a scrolling session
|
|
var clearCacheTimer;
|
|
|
|
//setInterval(function () { cache = {}; }, 10 * 1000);
|
|
|
|
function scheduleClearCache() {
|
|
clearTimeout(clearCacheTimer);
|
|
clearCacheTimer = setInterval(function () { cache = {}; }, 1*1000);
|
|
}
|
|
|
|
function setCache(elems, overflowing) {
|
|
for (var i = elems.length; i--;)
|
|
cache[uniqueID(elems[i])] = overflowing;
|
|
return overflowing;
|
|
}
|
|
|
|
// (body) (root)
|
|
// | hidden | visible | scroll | auto |
|
|
// hidden | no | no | YES | YES |
|
|
// visible | no | YES | YES | YES |
|
|
// scroll | no | YES | YES | YES |
|
|
// auto | no | YES | YES | YES |
|
|
|
|
function overflowingAncestor(el) {
|
|
var elems = [];
|
|
var body = document.body;
|
|
var rootScrollHeight = root.scrollHeight;
|
|
do {
|
|
var cached = cache[uniqueID(el)];
|
|
if (cached) {
|
|
return setCache(elems, cached);
|
|
}
|
|
elems.push(el);
|
|
if (rootScrollHeight === el.scrollHeight) {
|
|
var topOverflowsNotHidden = overflowNotHidden(root) && overflowNotHidden(body);
|
|
var isOverflowCSS = topOverflowsNotHidden || overflowAutoOrScroll(root);
|
|
if (isFrame && isContentOverflowing(root) ||
|
|
!isFrame && isOverflowCSS) {
|
|
return setCache(elems, getScrollRoot());
|
|
}
|
|
} else if (isContentOverflowing(el) && overflowAutoOrScroll(el)) {
|
|
return setCache(elems, el);
|
|
}
|
|
} while (el = el.parentElement);
|
|
}
|
|
|
|
function isContentOverflowing(el) {
|
|
return (el.clientHeight + 10 < el.scrollHeight);
|
|
}
|
|
|
|
// typically for <body> and <html>
|
|
function overflowNotHidden(el) {
|
|
var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
|
|
return (overflow !== 'hidden');
|
|
}
|
|
|
|
// for all other elements
|
|
function overflowAutoOrScroll(el) {
|
|
var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
|
|
return (overflow === 'scroll' || overflow === 'auto');
|
|
}
|
|
|
|
|
|
/***********************************************
|
|
* HELPERS
|
|
***********************************************/
|
|
|
|
function addEvent(type, fn) {
|
|
window.addEventListener(type, fn, false);
|
|
}
|
|
|
|
function removeEvent(type, fn) {
|
|
window.removeEventListener(type, fn, false);
|
|
}
|
|
|
|
function isNodeName(el, tag) {
|
|
return (el.nodeName||'').toLowerCase() === tag.toLowerCase();
|
|
}
|
|
|
|
function directionCheck(x, y) {
|
|
x = (x > 0) ? 1 : -1;
|
|
y = (y > 0) ? 1 : -1;
|
|
if (direction.x !== x || direction.y !== y) {
|
|
direction.x = x;
|
|
direction.y = y;
|
|
que = [];
|
|
lastScroll = 0;
|
|
}
|
|
}
|
|
|
|
var deltaBufferTimer;
|
|
|
|
if (window.localStorage && localStorage.SS_deltaBuffer) {
|
|
deltaBuffer = localStorage.SS_deltaBuffer.split(',');
|
|
}
|
|
|
|
function isTouchpad(deltaY) {
|
|
if (!deltaY) return;
|
|
if (!deltaBuffer.length) {
|
|
deltaBuffer = [deltaY, deltaY, deltaY];
|
|
}
|
|
deltaY = Math.abs(deltaY)
|
|
deltaBuffer.push(deltaY);
|
|
deltaBuffer.shift();
|
|
clearTimeout(deltaBufferTimer);
|
|
deltaBufferTimer = setTimeout(function () {
|
|
if (window.localStorage) {
|
|
localStorage.SS_deltaBuffer = deltaBuffer.join(',');
|
|
}
|
|
}, 1000);
|
|
return !allDeltasDivisableBy(120) && !allDeltasDivisableBy(100);
|
|
}
|
|
|
|
function isDivisible(n, divisor) {
|
|
return (Math.floor(n / divisor) == n / divisor);
|
|
}
|
|
|
|
function allDeltasDivisableBy(divisor) {
|
|
return (isDivisible(deltaBuffer[0], divisor) &&
|
|
isDivisible(deltaBuffer[1], divisor) &&
|
|
isDivisible(deltaBuffer[2], divisor));
|
|
}
|
|
|
|
function isInsideYoutubeVideo(event) {
|
|
var elem = event.target;
|
|
var isControl = false;
|
|
if (document.URL.indexOf ('www.youtube.com/watch') != -1) {
|
|
do {
|
|
isControl = (elem.classList &&
|
|
elem.classList.contains('html5-video-controls'));
|
|
if (isControl) break;
|
|
} while (elem = elem.parentNode);
|
|
}
|
|
return isControl;
|
|
}
|
|
|
|
var requestFrame = (function () {
|
|
return (window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
function (callback, element, delay) {
|
|
window.setTimeout(callback, delay || (1000/60));
|
|
});
|
|
})();
|
|
|
|
var MutationObserver = (window.MutationObserver ||
|
|
window.WebKitMutationObserver ||
|
|
window.MozMutationObserver);
|
|
|
|
var getScrollRoot = (function() {
|
|
var SCROLL_ROOT;
|
|
return function() {
|
|
if (!SCROLL_ROOT) {
|
|
var dummy = document.createElement('div');
|
|
dummy.style.cssText = 'height:10000px;width:1px;';
|
|
document.body.appendChild(dummy);
|
|
var bodyScrollTop = document.body.scrollTop;
|
|
var docElScrollTop = document.documentElement.scrollTop;
|
|
window.scrollBy(0, 1);
|
|
if (document.body.scrollTop != bodyScrollTop)
|
|
(SCROLL_ROOT = document.body);
|
|
else
|
|
(SCROLL_ROOT = document.documentElement);
|
|
window.scrollBy(0, -1);
|
|
document.body.removeChild(dummy);
|
|
}
|
|
return SCROLL_ROOT;
|
|
};
|
|
})();
|
|
|
|
|
|
/***********************************************
|
|
* PULSE (by Michael Herf)
|
|
***********************************************/
|
|
|
|
/**
|
|
* Viscous fluid with a pulse for part and decay for the rest.
|
|
* - Applies a fixed force over an interval (a damped acceleration), and
|
|
* - Lets the exponential bleed away the velocity over a longer interval
|
|
* - Michael Herf, http://stereopsis.com/stopping/
|
|
*/
|
|
function pulse_(x) {
|
|
var val, start, expx;
|
|
// test
|
|
x = x * options.pulseScale;
|
|
if (x < 1) { // acceleartion
|
|
val = x - (1 - Math.exp(-x));
|
|
} else { // tail
|
|
// the previous animation ended here:
|
|
start = Math.exp(-1);
|
|
// simple viscous drag
|
|
x -= 1;
|
|
expx = 1 - Math.exp(-x);
|
|
val = start + (expx * (1 - start));
|
|
}
|
|
return val * options.pulseNormalize;
|
|
}
|
|
|
|
function pulse(x) {
|
|
if (x >= 1) return 1;
|
|
if (x <= 0) return 0;
|
|
|
|
if (options.pulseNormalize == 1) {
|
|
options.pulseNormalize /= pulse_(1);
|
|
}
|
|
return pulse_(x);
|
|
}
|
|
|
|
var wheelEvent;
|
|
if ('onwheel' in document.createElement('div'))
|
|
wheelEvent = 'wheel';
|
|
else if ('onmousewheel' in document.createElement('div'))
|
|
wheelEvent = 'mousewheel';
|
|
|
|
|
|
// Press Customizr mod
|
|
//Press Customizr mod wrap following: instructions in a function statement
|
|
//returns whether or not the smootScroll has been initialized
|
|
function _maybeInit( fire ){
|
|
if (wheelEvent) {
|
|
addEvent(wheelEvent, wheel);
|
|
addEvent('mousedown', mousedown);
|
|
if ( ! fire ) addEvent('load', init);
|
|
else init();
|
|
}
|
|
return wheelEvent ? true : false;
|
|
}
|
|
// smoothScroll "constructor"
|
|
smoothScroll = function ( _options ) {
|
|
smoothScroll._setCustomOptions( _options );
|
|
_maybeInit();
|
|
czrapp.$_body.addClass('hu-smoothscroll');
|
|
};
|
|
// expose useful methods ( for the preview )
|
|
smoothScroll._cleanUp = function(){
|
|
cleanup();
|
|
czrapp.$_body.removeClass('hu-smoothscroll');
|
|
};
|
|
smoothScroll._maybeFire = function(){
|
|
//will be called from the preview so when document already loaded
|
|
// pass to the function _fire = true, fire it immediately
|
|
_maybeInit(true);
|
|
czrapp.$_body.addClass('hu-smoothscroll');
|
|
};
|
|
smoothScroll._setCustomOptions = function( _options ){
|
|
options = _options ? _.extend( options, _options) : options;
|
|
};
|
|
// end Press Customizr mod
|
|
})();
|
|
|
|
var smoothScroll;// modified version of
|
|
// outline.js (https://github.com/lindsayevans/outline.js)
|
|
// based on http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/
|
|
var tcOutline;
|
|
(function(d){
|
|
tcOutline = function() {
|
|
var style_element = d.createElement('STYLE'),
|
|
dom_events = 'addEventListener' in d,
|
|
add_event_listener = function(type, callback){
|
|
// Basic cross-browser event handling
|
|
if(dom_events){
|
|
d.addEventListener(type, callback);
|
|
}else{
|
|
d.attachEvent('on' + type, callback);
|
|
}
|
|
},
|
|
set_css = function(css_text){
|
|
// Handle setting of <style> element contents in IE8
|
|
if ( !!style_element.styleSheet )
|
|
style_element.styleSheet.cssText = css_text;
|
|
else
|
|
style_element.innerHTML = css_text;
|
|
}
|
|
;
|
|
|
|
d.getElementsByTagName('HEAD')[0].appendChild(style_element);
|
|
|
|
// Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
|
|
add_event_listener('mousedown', function(){
|
|
set_css('input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus,select:focus,a:focus{outline:0}input[type=file]::-moz-focus-inner,input[type=radio]::-moz-focus-inner,input[type=checkbox]::-moz-focus-inner,select::-moz-focus-inner,a::-moz-focus-inner{border:0;}');
|
|
});
|
|
|
|
add_event_listener('keydown', function(){
|
|
set_css('');
|
|
});
|
|
}
|
|
})(document);
|
|
/*!
|
|
Waypoints - 4.0.0
|
|
Copyright © 2011-2015 Caleb Troughton
|
|
Licensed under the MIT license.
|
|
https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
|
|
*/
|
|
(function() {
|
|
'use strict'
|
|
|
|
var keyCounter = 0
|
|
var allWaypoints = {}
|
|
|
|
/* http://imakewebthings.com/waypoints/api/waypoint */
|
|
function Waypoint(options) {
|
|
if (!options) {
|
|
throw new Error('No options passed to Waypoint constructor')
|
|
}
|
|
if (!options.element) {
|
|
throw new Error('No element option passed to Waypoint constructor')
|
|
}
|
|
if (!options.handler) {
|
|
throw new Error('No handler option passed to Waypoint constructor')
|
|
}
|
|
|
|
this.key = 'waypoint-' + keyCounter
|
|
this.options = Waypoint.Adapter.extend({}, Waypoint.defaults, options)
|
|
this.element = this.options.element
|
|
this.adapter = new Waypoint.Adapter(this.element)
|
|
this.callback = options.handler
|
|
this.axis = this.options.horizontal ? 'horizontal' : 'vertical'
|
|
this.enabled = this.options.enabled
|
|
this.triggerPoint = null
|
|
this.group = Waypoint.Group.findOrCreate({
|
|
name: this.options.group,
|
|
axis: this.axis
|
|
})
|
|
this.context = Waypoint.Context.findOrCreateByElement(this.options.context)
|
|
|
|
if (Waypoint.offsetAliases[this.options.offset]) {
|
|
this.options.offset = Waypoint.offsetAliases[this.options.offset]
|
|
}
|
|
this.group.add(this)
|
|
this.context.add(this)
|
|
allWaypoints[this.key] = this
|
|
keyCounter += 1
|
|
}
|
|
|
|
/* Private */
|
|
Waypoint.prototype.queueTrigger = function(direction) {
|
|
this.group.queueTrigger(this, direction)
|
|
}
|
|
|
|
/* Private */
|
|
Waypoint.prototype.trigger = function(args) {
|
|
if (!this.enabled) {
|
|
return
|
|
}
|
|
if (this.callback) {
|
|
this.callback.apply(this, args)
|
|
}
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/destroy */
|
|
Waypoint.prototype.destroy = function() {
|
|
this.context.remove(this)
|
|
this.group.remove(this)
|
|
delete allWaypoints[this.key]
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/disable */
|
|
Waypoint.prototype.disable = function() {
|
|
this.enabled = false
|
|
return this
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/enable */
|
|
Waypoint.prototype.enable = function() {
|
|
this.context.refresh()
|
|
this.enabled = true
|
|
return this
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/next */
|
|
Waypoint.prototype.next = function() {
|
|
return this.group.next(this)
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/previous */
|
|
Waypoint.prototype.previous = function() {
|
|
return this.group.previous(this)
|
|
}
|
|
|
|
/* Private */
|
|
Waypoint.invokeAll = function(method) {
|
|
var allWaypointsArray = []
|
|
for (var waypointKey in allWaypoints) {
|
|
allWaypointsArray.push(allWaypoints[waypointKey])
|
|
}
|
|
for (var i = 0, end = allWaypointsArray.length; i < end; i++) {
|
|
allWaypointsArray[i][method]()
|
|
}
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/destroy-all */
|
|
Waypoint.destroyAll = function() {
|
|
Waypoint.invokeAll('destroy')
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/disable-all */
|
|
Waypoint.disableAll = function() {
|
|
Waypoint.invokeAll('disable')
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/enable-all */
|
|
Waypoint.enableAll = function() {
|
|
Waypoint.invokeAll('enable')
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/refresh-all */
|
|
Waypoint.refreshAll = function() {
|
|
Waypoint.Context.refreshAll()
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/viewport-height */
|
|
Waypoint.viewportHeight = function() {
|
|
return window.innerHeight || document.documentElement.clientHeight
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/viewport-width */
|
|
Waypoint.viewportWidth = function() {
|
|
return document.documentElement.clientWidth
|
|
}
|
|
|
|
Waypoint.adapters = []
|
|
|
|
Waypoint.defaults = {
|
|
context: window,
|
|
continuous: true,
|
|
enabled: true,
|
|
group: 'default',
|
|
horizontal: false,
|
|
offset: 0
|
|
}
|
|
|
|
Waypoint.offsetAliases = {
|
|
'bottom-in-view': function() {
|
|
return this.context.innerHeight() - this.adapter.outerHeight()
|
|
},
|
|
'right-in-view': function() {
|
|
return this.context.innerWidth() - this.adapter.outerWidth()
|
|
}
|
|
}
|
|
|
|
window.Waypoint = Waypoint
|
|
}())
|
|
;(function() {
|
|
'use strict'
|
|
|
|
function requestAnimationFrameShim(callback) {
|
|
window.setTimeout(callback, 1000 / 60)
|
|
}
|
|
|
|
var keyCounter = 0
|
|
var contexts = {}
|
|
var Waypoint = window.Waypoint
|
|
var oldWindowLoad = window.onload
|
|
|
|
/* http://imakewebthings.com/waypoints/api/context */
|
|
function Context(element) {
|
|
this.element = element
|
|
this.Adapter = Waypoint.Adapter
|
|
this.adapter = new this.Adapter(element)
|
|
this.key = 'waypoint-context-' + keyCounter
|
|
this.didScroll = false
|
|
this.didResize = false
|
|
this.oldScroll = {
|
|
x: this.adapter.scrollLeft(),
|
|
y: this.adapter.scrollTop()
|
|
}
|
|
this.waypoints = {
|
|
vertical: {},
|
|
horizontal: {}
|
|
}
|
|
|
|
element.waypointContextKey = this.key
|
|
contexts[element.waypointContextKey] = this
|
|
keyCounter += 1
|
|
|
|
this.createThrottledScrollHandler()
|
|
this.createThrottledResizeHandler()
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.add = function(waypoint) {
|
|
var axis = waypoint.options.horizontal ? 'horizontal' : 'vertical'
|
|
this.waypoints[axis][waypoint.key] = waypoint
|
|
this.refresh()
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.checkEmpty = function() {
|
|
var horizontalEmpty = this.Adapter.isEmptyObject(this.waypoints.horizontal)
|
|
var verticalEmpty = this.Adapter.isEmptyObject(this.waypoints.vertical)
|
|
if (horizontalEmpty && verticalEmpty) {
|
|
this.adapter.off('.waypoints')
|
|
delete contexts[this.key]
|
|
}
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.createThrottledResizeHandler = function() {
|
|
var self = this
|
|
|
|
function resizeHandler() {
|
|
self.handleResize()
|
|
self.didResize = false
|
|
}
|
|
|
|
this.adapter.on('resize.waypoints', function() {
|
|
if (!self.didResize) {
|
|
self.didResize = true
|
|
Waypoint.requestAnimationFrame(resizeHandler)
|
|
}
|
|
})
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.createThrottledScrollHandler = function() {
|
|
var self = this
|
|
function scrollHandler() {
|
|
self.handleScroll()
|
|
self.didScroll = false
|
|
}
|
|
|
|
this.adapter.on('scroll.waypoints', function() {
|
|
if (!self.didScroll || Waypoint.isTouch) {
|
|
self.didScroll = true
|
|
Waypoint.requestAnimationFrame(scrollHandler)
|
|
}
|
|
})
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.handleResize = function() {
|
|
Waypoint.Context.refreshAll()
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.handleScroll = function() {
|
|
var triggeredGroups = {}
|
|
var axes = {
|
|
horizontal: {
|
|
newScroll: this.adapter.scrollLeft(),
|
|
oldScroll: this.oldScroll.x,
|
|
forward: 'right',
|
|
backward: 'left'
|
|
},
|
|
vertical: {
|
|
newScroll: this.adapter.scrollTop(),
|
|
oldScroll: this.oldScroll.y,
|
|
forward: 'down',
|
|
backward: 'up'
|
|
}
|
|
}
|
|
|
|
for (var axisKey in axes) {
|
|
var axis = axes[axisKey]
|
|
var isForward = axis.newScroll > axis.oldScroll
|
|
var direction = isForward ? axis.forward : axis.backward
|
|
|
|
for (var waypointKey in this.waypoints[axisKey]) {
|
|
var waypoint = this.waypoints[axisKey][waypointKey]
|
|
var wasBeforeTriggerPoint = axis.oldScroll < waypoint.triggerPoint
|
|
var nowAfterTriggerPoint = axis.newScroll >= waypoint.triggerPoint
|
|
var crossedForward = wasBeforeTriggerPoint && nowAfterTriggerPoint
|
|
var crossedBackward = !wasBeforeTriggerPoint && !nowAfterTriggerPoint
|
|
if (crossedForward || crossedBackward) {
|
|
waypoint.queueTrigger(direction)
|
|
triggeredGroups[waypoint.group.id] = waypoint.group
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var groupKey in triggeredGroups) {
|
|
triggeredGroups[groupKey].flushTriggers()
|
|
}
|
|
|
|
this.oldScroll = {
|
|
x: axes.horizontal.newScroll,
|
|
y: axes.vertical.newScroll
|
|
}
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.innerHeight = function() {
|
|
/*eslint-disable eqeqeq */
|
|
if (this.element == this.element.window) {
|
|
return Waypoint.viewportHeight()
|
|
}
|
|
/*eslint-enable eqeqeq */
|
|
return this.adapter.innerHeight()
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.remove = function(waypoint) {
|
|
delete this.waypoints[waypoint.axis][waypoint.key]
|
|
this.checkEmpty()
|
|
}
|
|
|
|
/* Private */
|
|
Context.prototype.innerWidth = function() {
|
|
/*eslint-disable eqeqeq */
|
|
if (this.element == this.element.window) {
|
|
return Waypoint.viewportWidth()
|
|
}
|
|
/*eslint-enable eqeqeq */
|
|
return this.adapter.innerWidth()
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/context-destroy */
|
|
Context.prototype.destroy = function() {
|
|
var allWaypoints = []
|
|
for (var axis in this.waypoints) {
|
|
for (var waypointKey in this.waypoints[axis]) {
|
|
allWaypoints.push(this.waypoints[axis][waypointKey])
|
|
}
|
|
}
|
|
for (var i = 0, end = allWaypoints.length; i < end; i++) {
|
|
allWaypoints[i].destroy()
|
|
}
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/context-refresh */
|
|
Context.prototype.refresh = function() {
|
|
/*eslint-disable eqeqeq */
|
|
var isWindow = this.element == this.element.window
|
|
/*eslint-enable eqeqeq */
|
|
var contextOffset = isWindow ? undefined : this.adapter.offset()
|
|
var triggeredGroups = {}
|
|
var axes
|
|
|
|
this.handleScroll()
|
|
axes = {
|
|
horizontal: {
|
|
contextOffset: isWindow ? 0 : contextOffset.left,
|
|
contextScroll: isWindow ? 0 : this.oldScroll.x,
|
|
contextDimension: this.innerWidth(),
|
|
oldScroll: this.oldScroll.x,
|
|
forward: 'right',
|
|
backward: 'left',
|
|
offsetProp: 'left'
|
|
},
|
|
vertical: {
|
|
contextOffset: isWindow ? 0 : contextOffset.top,
|
|
contextScroll: isWindow ? 0 : this.oldScroll.y,
|
|
contextDimension: this.innerHeight(),
|
|
oldScroll: this.oldScroll.y,
|
|
forward: 'down',
|
|
backward: 'up',
|
|
offsetProp: 'top'
|
|
}
|
|
}
|
|
|
|
for (var axisKey in axes) {
|
|
var axis = axes[axisKey]
|
|
for (var waypointKey in this.waypoints[axisKey]) {
|
|
var waypoint = this.waypoints[axisKey][waypointKey]
|
|
var adjustment = waypoint.options.offset
|
|
var oldTriggerPoint = waypoint.triggerPoint
|
|
var elementOffset = 0
|
|
var freshWaypoint = oldTriggerPoint == null
|
|
var contextModifier, wasBeforeScroll, nowAfterScroll
|
|
var triggeredBackward, triggeredForward
|
|
|
|
if (waypoint.element !== waypoint.element.window) {
|
|
elementOffset = waypoint.adapter.offset()[axis.offsetProp]
|
|
}
|
|
|
|
if (typeof adjustment === 'function') {
|
|
adjustment = adjustment.apply(waypoint)
|
|
}
|
|
else if (typeof adjustment === 'string') {
|
|
adjustment = parseFloat(adjustment)
|
|
if (waypoint.options.offset.indexOf('%') > - 1) {
|
|
adjustment = Math.ceil(axis.contextDimension * adjustment / 100)
|
|
}
|
|
}
|
|
|
|
contextModifier = axis.contextScroll - axis.contextOffset
|
|
waypoint.triggerPoint = elementOffset + contextModifier - adjustment
|
|
wasBeforeScroll = oldTriggerPoint < axis.oldScroll
|
|
nowAfterScroll = waypoint.triggerPoint >= axis.oldScroll
|
|
triggeredBackward = wasBeforeScroll && nowAfterScroll
|
|
triggeredForward = !wasBeforeScroll && !nowAfterScroll
|
|
|
|
if (!freshWaypoint && triggeredBackward) {
|
|
waypoint.queueTrigger(axis.backward)
|
|
triggeredGroups[waypoint.group.id] = waypoint.group
|
|
}
|
|
else if (!freshWaypoint && triggeredForward) {
|
|
waypoint.queueTrigger(axis.forward)
|
|
triggeredGroups[waypoint.group.id] = waypoint.group
|
|
}
|
|
else if (freshWaypoint && axis.oldScroll >= waypoint.triggerPoint) {
|
|
waypoint.queueTrigger(axis.forward)
|
|
triggeredGroups[waypoint.group.id] = waypoint.group
|
|
}
|
|
}
|
|
}
|
|
|
|
Waypoint.requestAnimationFrame(function() {
|
|
for (var groupKey in triggeredGroups) {
|
|
triggeredGroups[groupKey].flushTriggers()
|
|
}
|
|
})
|
|
|
|
return this
|
|
}
|
|
|
|
/* Private */
|
|
Context.findOrCreateByElement = function(element) {
|
|
return Context.findByElement(element) || new Context(element)
|
|
}
|
|
|
|
/* Private */
|
|
Context.refreshAll = function() {
|
|
for (var contextId in contexts) {
|
|
contexts[contextId].refresh()
|
|
}
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/context-find-by-element */
|
|
Context.findByElement = function(element) {
|
|
return contexts[element.waypointContextKey]
|
|
}
|
|
|
|
window.onload = function() {
|
|
if (oldWindowLoad) {
|
|
oldWindowLoad()
|
|
}
|
|
Context.refreshAll()
|
|
}
|
|
|
|
Waypoint.requestAnimationFrame = function(callback) {
|
|
var requestFn = window.requestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
requestAnimationFrameShim
|
|
requestFn.call(window, callback)
|
|
}
|
|
Waypoint.Context = Context
|
|
}())
|
|
;(function() {
|
|
'use strict'
|
|
|
|
function byTriggerPoint(a, b) {
|
|
return a.triggerPoint - b.triggerPoint
|
|
}
|
|
|
|
function byReverseTriggerPoint(a, b) {
|
|
return b.triggerPoint - a.triggerPoint
|
|
}
|
|
|
|
var groups = {
|
|
vertical: {},
|
|
horizontal: {}
|
|
}
|
|
var Waypoint = window.Waypoint
|
|
|
|
/* http://imakewebthings.com/waypoints/api/group */
|
|
function Group(options) {
|
|
this.name = options.name
|
|
this.axis = options.axis
|
|
this.id = this.name + '-' + this.axis
|
|
this.waypoints = []
|
|
this.clearTriggerQueues()
|
|
groups[this.axis][this.name] = this
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.add = function(waypoint) {
|
|
this.waypoints.push(waypoint)
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.clearTriggerQueues = function() {
|
|
this.triggerQueues = {
|
|
up: [],
|
|
down: [],
|
|
left: [],
|
|
right: []
|
|
}
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.flushTriggers = function() {
|
|
for (var direction in this.triggerQueues) {
|
|
var waypoints = this.triggerQueues[direction]
|
|
var reverse = direction === 'up' || direction === 'left'
|
|
waypoints.sort(reverse ? byReverseTriggerPoint : byTriggerPoint)
|
|
for (var i = 0, end = waypoints.length; i < end; i += 1) {
|
|
var waypoint = waypoints[i]
|
|
if (waypoint.options.continuous || i === waypoints.length - 1) {
|
|
waypoint.trigger([direction])
|
|
}
|
|
}
|
|
}
|
|
this.clearTriggerQueues()
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.next = function(waypoint) {
|
|
this.waypoints.sort(byTriggerPoint)
|
|
var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
|
|
var isLast = index === this.waypoints.length - 1
|
|
return isLast ? null : this.waypoints[index + 1]
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.previous = function(waypoint) {
|
|
this.waypoints.sort(byTriggerPoint)
|
|
var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
|
|
return index ? this.waypoints[index - 1] : null
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.queueTrigger = function(waypoint, direction) {
|
|
this.triggerQueues[direction].push(waypoint)
|
|
}
|
|
|
|
/* Private */
|
|
Group.prototype.remove = function(waypoint) {
|
|
var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
|
|
if (index > -1) {
|
|
this.waypoints.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/first */
|
|
Group.prototype.first = function() {
|
|
return this.waypoints[0]
|
|
}
|
|
|
|
/* Public */
|
|
/* http://imakewebthings.com/waypoints/api/last */
|
|
Group.prototype.last = function() {
|
|
return this.waypoints[this.waypoints.length - 1]
|
|
}
|
|
|
|
/* Private */
|
|
Group.findOrCreate = function(options) {
|
|
return groups[options.axis][options.name] || new Group(options)
|
|
}
|
|
|
|
Waypoint.Group = Group
|
|
}())
|
|
;(function() {
|
|
'use strict'
|
|
|
|
var $ = window.jQuery
|
|
var Waypoint = window.Waypoint
|
|
|
|
function JQueryAdapter(element) {
|
|
this.$element = $(element)
|
|
}
|
|
|
|
$.each([
|
|
'innerHeight',
|
|
'innerWidth',
|
|
'off',
|
|
'offset',
|
|
'on',
|
|
'outerHeight',
|
|
'outerWidth',
|
|
'scrollLeft',
|
|
'scrollTop'
|
|
], function(i, method) {
|
|
JQueryAdapter.prototype[method] = function() {
|
|
var args = Array.prototype.slice.call(arguments)
|
|
return this.$element[method].apply(this.$element, args)
|
|
}
|
|
})
|
|
|
|
$.each([
|
|
'extend',
|
|
'inArray',
|
|
'isEmptyObject'
|
|
], function(i, method) {
|
|
JQueryAdapter[method] = $[method]
|
|
})
|
|
|
|
Waypoint.adapters.push({
|
|
name: 'jquery',
|
|
Adapter: JQueryAdapter
|
|
})
|
|
Waypoint.Adapter = JQueryAdapter
|
|
}())
|
|
;(function() {
|
|
'use strict'
|
|
|
|
var Waypoint = window.Waypoint
|
|
|
|
function createExtension(framework) {
|
|
return function() {
|
|
var waypoints = []
|
|
var overrides = arguments[0]
|
|
|
|
if (framework.isFunction(arguments[0])) {
|
|
overrides = framework.extend({}, arguments[1])
|
|
overrides.handler = arguments[0]
|
|
}
|
|
|
|
this.each(function() {
|
|
var options = framework.extend({}, overrides, {
|
|
element: this
|
|
})
|
|
if (typeof options.context === 'string') {
|
|
options.context = framework(this).closest(options.context)[0]
|
|
}
|
|
waypoints.push(new Waypoint(options))
|
|
})
|
|
|
|
return waypoints
|
|
}
|
|
}
|
|
|
|
if (window.jQuery) {
|
|
window.jQuery.fn.waypoint = createExtension(window.jQuery)
|
|
}
|
|
if (window.Zepto) {
|
|
window.Zepto.fn.waypoint = createExtension(window.Zepto)
|
|
}
|
|
}())
|
|
;/**
|
|
* vivus - JavaScript library to make drawing animation on SVG
|
|
* @version v0.3.1
|
|
* @link https://github.com/maxwellito/vivus
|
|
* @license MIT
|
|
*/
|
|
"use strict";!function(t,e){function r(r){if("undefined"==typeof r)throw new Error('Pathformer [constructor]: "element" parameter is required');if(r.constructor===String&&(r=e.getElementById(r),!r))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(!(r.constructor instanceof t.SVGElement||/^svg$/i.test(r.nodeName)))throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=r,this.scan(r)}function n(t,e,r){this.isReady=!1,this.setElement(t,e),this.setOptions(e),this.setCallback(r),this.isReady&&this.init()}r.prototype.TYPES=["line","ellipse","circle","polygon","polyline","rect"],r.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],r.prototype.scan=function(t){for(var e,r,n,i,a=t.querySelectorAll(this.TYPES.join(",")),o=0;o<a.length;o++)r=a[o],e=this[r.tagName.toLowerCase()+"ToPath"],n=e(this.parseAttr(r.attributes)),i=this.pathMaker(r,n),r.parentNode.replaceChild(i,r)},r.prototype.lineToPath=function(t){var e={};return e.d="M"+t.x1+","+t.y1+"L"+t.x2+","+t.y2,e},r.prototype.rectToPath=function(t){var e={},r=parseFloat(t.x)||0,n=parseFloat(t.y)||0,i=parseFloat(t.width)||0,a=parseFloat(t.height)||0;return e.d="M"+r+" "+n+" ",e.d+="L"+(r+i)+" "+n+" ",e.d+="L"+(r+i)+" "+(n+a)+" ",e.d+="L"+r+" "+(n+a)+" Z",e},r.prototype.polylineToPath=function(t){var e,r,n={},i=t.points.trim().split(" ");if(-1===t.points.indexOf(",")){var a=[];for(e=0;e<i.length;e+=2)a.push(i[e]+","+i[e+1]);i=a}for(r="M"+i[0],e=1;e<i.length;e++)-1!==i[e].indexOf(",")&&(r+="L"+i[e]);return n.d=r,n},r.prototype.polygonToPath=function(t){var e=r.prototype.polylineToPath(t);return e.d+="Z",e},r.prototype.ellipseToPath=function(t){var e=t.cx-t.rx,r=t.cy,n=parseFloat(t.cx)+parseFloat(t.rx),i=t.cy,a={};return a.d="M"+e+","+r+"A"+t.rx+","+t.ry+" 0,1,1 "+n+","+i+"A"+t.rx+","+t.ry+" 0,1,1 "+e+","+i,a},r.prototype.circleToPath=function(t){var e={},r=t.cx-t.r,n=t.cy,i=parseFloat(t.cx)+parseFloat(t.r),a=t.cy;return e.d="M"+r+","+n+"A"+t.r+","+t.r+" 0,1,1 "+i+","+a+"A"+t.r+","+t.r+" 0,1,1 "+r+","+a,e},r.prototype.pathMaker=function(t,r){var n,i,a=e.createElementNS("http://www.w3.org/2000/svg","path");for(n=0;n<t.attributes.length;n++)i=t.attributes[n],-1===this.ATTR_WATCH.indexOf(i.name)&&a.setAttribute(i.name,i.value);for(n in r)a.setAttribute(n,r[n]);return a},r.prototype.parseAttr=function(t){for(var e,r={},n=0;n<t.length;n++){if(e=t[n],-1!==this.ATTR_WATCH.indexOf(e.name)&&-1!==e.value.indexOf("%"))throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");r[e.name]=e.value}return r};var i,a,o;n.LINEAR=function(t){return t},n.EASE=function(t){return-Math.cos(t*Math.PI)/2+.5},n.EASE_OUT=function(t){return 1-Math.pow(1-t,3)},n.EASE_IN=function(t){return Math.pow(t,3)},n.EASE_OUT_BOUNCE=function(t){var e=-Math.cos(.5*t*Math.PI)+1,r=Math.pow(e,1.5),n=Math.pow(1-t,2),i=-Math.abs(Math.cos(2.5*r*Math.PI))+1;return 1-n+i*n},n.prototype.setElement=function(r,n){if("undefined"==typeof r)throw new Error('Vivus [constructor]: "element" parameter is required');if(r.constructor===String&&(r=e.getElementById(r),!r))throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');if(this.parentEl=r,n&&n.file){var i=e.createElement("object");i.setAttribute("type","image/svg+xml"),i.setAttribute("data",n.file),i.setAttribute("built-by-vivus","true"),r.appendChild(i),r=i}switch(r.constructor){case t.SVGSVGElement:case t.SVGElement:this.el=r,this.isReady=!0;break;case t.HTMLObjectElement:var a,o;o=this,a=function(t){if(!o.isReady){if(o.el=r.contentDocument&&r.contentDocument.querySelector("svg"),!o.el&&t)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");return o.el?(r.getAttribute("built-by-vivus")&&(o.parentEl.insertBefore(o.el,r),o.parentEl.removeChild(r),o.el.setAttribute("width","100%"),o.el.setAttribute("height","100%")),o.isReady=!0,o.init(),!0):void 0}},a()||r.addEventListener("load",a);break;default:throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}},n.prototype.setOptions=function(e){var r=["delayed","async","oneByOne","scenario","scenario-sync"],i=["inViewport","manual","autostart"];if(void 0!==e&&e.constructor!==Object)throw new Error('Vivus [constructor]: "options" parameter must be an object');if(e=e||{},e.type&&-1===r.indexOf(e.type))throw new Error("Vivus [constructor]: "+e.type+" is not an existing animation `type`");if(this.type=e.type||r[0],e.start&&-1===i.indexOf(e.start))throw new Error("Vivus [constructor]: "+e.start+" is not an existing `start` option");if(this.start=e.start||i[0],this.isIE=-1!==t.navigator.userAgent.indexOf("MSIE")||-1!==t.navigator.userAgent.indexOf("Trident/")||-1!==t.navigator.userAgent.indexOf("Edge/"),this.duration=o(e.duration,120),this.delay=o(e.delay,null),this.dashGap=o(e.dashGap,1),this.forceRender=e.hasOwnProperty("forceRender")?!!e.forceRender:this.isIE,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.frameLength=this.currentFrame=this.map=this.delayUnit=this.speed=this.handle=null,this.ignoreInvisible=e.hasOwnProperty("ignoreInvisible")?!!e.ignoreInvisible:!1,this.animTimingFunction=e.animTimingFunction||n.LINEAR,this.pathTimingFunction=e.pathTimingFunction||n.LINEAR,this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")},n.prototype.setCallback=function(t){if(t&&t.constructor!==Function)throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||function(){}},n.prototype.mapping=function(){var e,r,n,i,a,s,h,u;for(u=s=h=0,r=this.el.querySelectorAll("path"),e=0;e<r.length;e++)n=r[e],this.isInvisible(n)||(a={el:n,length:Math.ceil(n.getTotalLength())},isNaN(a.length)?t.console&&console.warn&&console.warn("Vivus [mapping]: cannot retrieve a path element length",n):(this.map.push(a),n.style.strokeDasharray=a.length+" "+(a.length+2*this.dashGap),n.style.strokeDashoffset=a.length+this.dashGap,a.length+=this.dashGap,s+=a.length,this.renderPath(e)));for(s=0===s?1:s,this.delay=null===this.delay?this.duration/3:this.delay,this.delayUnit=this.delay/(r.length>1?r.length-1:1),e=0;e<this.map.length;e++){switch(a=this.map[e],this.type){case"delayed":a.startAt=this.delayUnit*e,a.duration=this.duration-this.delay;break;case"oneByOne":a.startAt=h/s*this.duration,a.duration=a.length/s*this.duration;break;case"async":a.startAt=0,a.duration=this.duration;break;case"scenario-sync":n=a.el,i=this.parseAttr(n),a.startAt=u+(o(i["data-delay"],this.delayUnit)||0),a.duration=o(i["data-duration"],this.duration),u=void 0!==i["data-async"]?a.startAt:a.startAt+a.duration,this.frameLength=Math.max(this.frameLength,a.startAt+a.duration);break;case"scenario":n=a.el,i=this.parseAttr(n),a.startAt=o(i["data-start"],this.delayUnit)||0,a.duration=o(i["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,a.startAt+a.duration)}h+=a.length,this.frameLength=this.frameLength||this.duration}},n.prototype.drawer=function(){var t=this;this.currentFrame+=this.speed,this.currentFrame<=0?(this.stop(),this.reset(),this.callback(this)):this.currentFrame>=this.frameLength?(this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy(),this.callback(this)):(this.trace(),this.handle=i(function(){t.drawer()}))},n.prototype.trace=function(){var t,e,r,n;for(n=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength,t=0;t<this.map.length;t++)r=this.map[t],e=(n-r.startAt)/r.duration,e=this.pathTimingFunction(Math.max(0,Math.min(1,e))),r.progress!==e&&(r.progress=e,r.el.style.strokeDashoffset=Math.floor(r.length*(1-e)),this.renderPath(t))},n.prototype.renderPath=function(t){if(this.forceRender&&this.map&&this.map[t]){var e=this.map[t],r=e.el.cloneNode(!0);e.el.parentNode.replaceChild(r,e.el),e.el=r}},n.prototype.init=function(){this.frameLength=0,this.currentFrame=0,this.map=[],new r(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this)},n.prototype.starter=function(){switch(this.start){case"manual":return;case"autostart":this.play();break;case"inViewport":var e=this,r=function(){e.isInViewport(e.parentEl,1)&&(e.play(),t.removeEventListener("scroll",r))};t.addEventListener("scroll",r),r()}},n.prototype.getStatus=function(){return 0===this.currentFrame?"start":this.currentFrame===this.frameLength?"end":"progress"},n.prototype.reset=function(){return this.setFrameProgress(0)},n.prototype.finish=function(){return this.setFrameProgress(1)},n.prototype.setFrameProgress=function(t){return t=Math.min(1,Math.max(0,t)),this.currentFrame=Math.round(this.frameLength*t),this.trace(),this},n.prototype.play=function(t){if(t&&"number"!=typeof t)throw new Error("Vivus [play]: invalid speed");return this.speed=t||1,this.handle||this.drawer(),this},n.prototype.stop=function(){return this.handle&&(a(this.handle),this.handle=null),this},n.prototype.destroy=function(){this.stop();var t,e;for(t=0;t<this.map.length;t++)e=this.map[t],e.el.style.strokeDashoffset=null,e.el.style.strokeDasharray=null,this.renderPath(t)},n.prototype.isInvisible=function(t){var e,r=t.getAttribute("data-ignore");return null!==r?"false"!==r:this.ignoreInvisible?(e=t.getBoundingClientRect(),!e.width&&!e.height):!1},n.prototype.parseAttr=function(t){var e,r={};if(t&&t.attributes)for(var n=0;n<t.attributes.length;n++)e=t.attributes[n],r[e.name]=e.value;return r},n.prototype.isInViewport=function(t,e){var r=this.scrollY(),n=r+this.getViewportH(),i=t.getBoundingClientRect(),a=i.height,o=r+i.top,s=o+a;return e=e||0,n>=o+a*e&&s>=r},n.prototype.docElem=t.document.documentElement,n.prototype.getViewportH=function(){var e=this.docElem.clientHeight,r=t.innerHeight;return r>e?r:e},n.prototype.scrollY=function(){return t.pageYOffset||this.docElem.scrollTop},i=function(){return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||function(e){return t.setTimeout(e,1e3/60)}}(),a=function(){return t.cancelAnimationFrame||t.webkitCancelAnimationFrame||t.mozCancelAnimationFrame||t.oCancelAnimationFrame||t.msCancelAnimationFrame||function(e){return t.clearTimeout(e)}}(),o=function(t,e){var r=parseInt(t,10);return r>=0?r:e},"function"==typeof define&&define.amd?define([],function(){return n}):"object"==typeof exports?module.exports=n:t.Vivus=n}(window,document);//@global HUParams
|
|
var czrapp = czrapp || {};
|
|
|
|
/*************************
|
|
* JS LOG UTILITIES
|
|
*************************/
|
|
(function($, czrapp) {
|
|
//Utility : print a js log on front
|
|
czrapp._printLog = function( log ) {
|
|
var _render = function() {
|
|
return $.Deferred( function() {
|
|
var dfd = this;
|
|
$.when( $('#footer').before( $('<div/>', { id : "bulklog" }) ) ).done( function() {
|
|
$('#bulklog').css({
|
|
position: 'fixed',
|
|
'z-index': '99999',
|
|
'font-size': '0.8em',
|
|
color: '#000',
|
|
padding: '5%',
|
|
width: '90%',
|
|
height: '20%',
|
|
overflow: 'hidden',
|
|
bottom: '0',
|
|
left: '0',
|
|
background: 'yellow'
|
|
});
|
|
|
|
dfd.resolve();
|
|
});
|
|
}).promise();
|
|
},
|
|
_print = function() {
|
|
$('#bulklog').prepend('<p>' + czrapp._prettyfy( { consoleArguments : [ log ], prettyfy : false } ) + '</p>');
|
|
};
|
|
|
|
if ( 1 != $('#bulk-log').length ) {
|
|
_render().done( _print );
|
|
} else {
|
|
_print();
|
|
}
|
|
};
|
|
|
|
|
|
czrapp._truncate = function( string , length ){
|
|
length = length || 150;
|
|
if ( ! _.isString( string ) )
|
|
return '';
|
|
return string.length > length ? string.substr( 0, length - 1 ) : string;
|
|
};
|
|
|
|
//CONSOLE / ERROR LOG
|
|
//@return [] for console method
|
|
//@bgCol @textCol are hex colors
|
|
//@arguments : the original console arguments
|
|
czrapp._prettyfy = function( args ) {
|
|
var _defaults = {
|
|
bgCol : '#5ed1f5',
|
|
textCol : '#000',
|
|
consoleArguments : [],
|
|
prettyfy : true
|
|
};
|
|
args = _.extend( _defaults, args );
|
|
|
|
var _toArr = Array.from( args.consoleArguments );
|
|
|
|
//if the array to print is not composed exclusively of strings, then let's stringify it
|
|
//else join()
|
|
if ( ! _.isEmpty( _.filter( _toArr, function( it ) { return ! _.isString( it ); } ) ) ) {
|
|
_toArr = JSON.stringify( _toArr );
|
|
} else {
|
|
_toArr = _toArr.join(' ');
|
|
}
|
|
if ( args.prettyfy )
|
|
return [
|
|
'%c ' + czrapp._truncate( _toArr ),
|
|
[ 'background:' + args.bgCol, 'color:' + args.textCol, 'display: block;' ].join(';')
|
|
];
|
|
else
|
|
return czrapp._truncate( _toArr );
|
|
};
|
|
|
|
//Dev mode aware and IE compatible api.consoleLog()
|
|
czrapp.consoleLog = function() {
|
|
if ( ! czrapp.localized.isDevMode )
|
|
return;
|
|
//fix for IE, because console is only defined when in F12 debugging mode in IE
|
|
if ( ( _.isUndefined( console ) && typeof window.console.log != 'function' ) )
|
|
return;
|
|
|
|
console.log.apply( console, czrapp._prettyfy( { consoleArguments : arguments } ) );
|
|
};
|
|
|
|
czrapp.errorLog = function() {
|
|
//fix for IE, because console is only defined when in F12 debugging mode in IE
|
|
if ( ( _.isUndefined( console ) && typeof window.console.log != 'function' ) )
|
|
return;
|
|
|
|
console.log.apply( console, czrapp._prettyfy( { bgCol : '#ffd5a0', textCol : '#000', consoleArguments : arguments } ) );
|
|
};
|
|
})(jQuery, czrapp);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*************************
|
|
* ADD DOM LISTENER UTILITY
|
|
*************************/
|
|
(function($, czrapp) {
|
|
|
|
/**
|
|
* Return whether the supplied Event object is for a keydown event but not the Enter key.
|
|
*
|
|
* @since 4.1.0
|
|
*
|
|
* @param {jQuery.Event} event
|
|
* @returns {boolean}
|
|
*/
|
|
czrapp.isKeydownButNotEnterEvent = function ( event ) {
|
|
return ( 'keydown' === event.type && 13 !== event.which );
|
|
};
|
|
|
|
//@args = {model : model, dom_el : $_view_el, refreshed : _refreshed }
|
|
czrapp.setupDOMListeners = function( event_map , args, instance ) {
|
|
var _defaultArgs = {
|
|
model : {},
|
|
dom_el : {}
|
|
};
|
|
|
|
if ( _.isUndefined( instance ) || ! _.isObject( instance ) ) {
|
|
czrapp.errorLog( 'setupDomListeners : instance should be an object', args );
|
|
return;
|
|
}
|
|
//event_map : are we good ?
|
|
if ( ! _.isArray( event_map ) ) {
|
|
czrapp.errorLog( 'setupDomListeners : event_map should be an array', args );
|
|
return;
|
|
}
|
|
|
|
//args : are we good ?
|
|
if ( ! _.isObject( args ) ) {
|
|
czrapp.errorLog( 'setupDomListeners : args should be an object', event_map );
|
|
return;
|
|
}
|
|
|
|
args = _.extend( _defaultArgs, args );
|
|
// => we need an existing dom element
|
|
if ( ! ( args.dom_el instanceof jQuery ) || 1 != args.dom_el.length ) {
|
|
czrapp.errorLog( 'setupDomListeners : dom element should be an existing dom element', args );
|
|
return;
|
|
}
|
|
|
|
//loop on the event map and map the relevant callbacks by event name
|
|
// @param _event :
|
|
//{
|
|
// trigger : '',
|
|
// selector : '',
|
|
// name : '',
|
|
// actions : ''
|
|
// },
|
|
_.map( event_map , function( _event ) {
|
|
if ( ! _.isString( _event.selector ) || _.isEmpty( _event.selector ) ) {
|
|
czrapp.errorLog( 'setupDOMListeners : selector must be a string not empty. Aborting setup of action(s) : ' + _event.actions.join(',') );
|
|
return;
|
|
}
|
|
|
|
//Are we good ?
|
|
if ( ! _.isString( _event.selector ) || _.isEmpty( _event.selector ) ) {
|
|
czrapp.errorLog( 'setupDOMListeners : selector must be a string not empty. Aborting setup of action(s) : ' + _event.actions.join(',') );
|
|
return;
|
|
}
|
|
|
|
//LISTEN TO THE DOM => USES EVENT DELEGATION
|
|
args.dom_el.on( _event.trigger , _event.selector, function( e, event_params ) {
|
|
//stop propagation to ancestors modules, typically a sektion
|
|
e.stopPropagation();
|
|
//particular treatment
|
|
if ( czrapp.isKeydownButNotEnterEvent( e ) ) {
|
|
return;
|
|
}
|
|
e.preventDefault(); // Keep this AFTER the key filter above
|
|
|
|
//It is important to deconnect the original object from its source
|
|
//=> because we will extend it when used as params for the action chain execution
|
|
var actionsParams = $.extend( true, {}, args );
|
|
|
|
//always get the latest model from the collection
|
|
if ( _.has( actionsParams, 'model') && _.has( actionsParams.model, 'id') ) {
|
|
if ( _.has( instance, 'get' ) )
|
|
actionsParams.model = instance();
|
|
else
|
|
actionsParams.model = instance.getModel( actionsParams.model.id );
|
|
}
|
|
|
|
//always add the event obj to the passed args
|
|
//+ the dom event
|
|
$.extend( actionsParams, { event : _event, dom_event : e } );
|
|
|
|
//add the event param => useful for triggered event
|
|
$.extend( actionsParams, event_params );
|
|
|
|
//SETUP THE EMITTERS
|
|
//inform the container that something has happened
|
|
//pass the model and the current dom_el
|
|
//the model is always passed as parameter
|
|
if ( ! _.has( actionsParams, 'event' ) || ! _.has( actionsParams.event, 'actions' ) ) {
|
|
czrapp.errorLog( 'executeEventActionChain : missing obj.event or obj.event.actions' );
|
|
return;
|
|
}
|
|
try { czrapp.executeEventActionChain( actionsParams, instance ); } catch( er ) {
|
|
czrapp.errorLog( 'In setupDOMListeners : problem when trying to fire actions : ' + actionsParams.event.actions );
|
|
czrapp.errorLog( 'Error : ' + er );
|
|
}
|
|
});//.on()
|
|
});//_.map()
|
|
};//setupDomListeners
|
|
|
|
|
|
|
|
//GENERIC METHOD TO SETUP EVENT LISTENER
|
|
//NOTE : the args.event must alway be defined
|
|
czrapp.executeEventActionChain = function( args, instance ) {
|
|
//if the actions param is a anonymous function, fire it and stop there
|
|
if ( 'function' === typeof( args.event.actions ) )
|
|
return args.event.actions.call( instance, args );
|
|
|
|
//execute the various actions required
|
|
//first normalizes the provided actions into an array of callback methods
|
|
//then loop on the array and fire each cb if exists
|
|
if ( ! _.isArray( args.event.actions ) )
|
|
args.event.actions = [ args.event.actions ];
|
|
|
|
//if one of the callbacks returns false, then we break the loop
|
|
//=> allows us to stop a chain of callbacks if a condition is not met
|
|
var _break = false;
|
|
_.map( args.event.actions, function( _cb ) {
|
|
if ( _break )
|
|
return;
|
|
|
|
if ( 'function' != typeof( instance[ _cb ] ) ) {
|
|
throw new Error( 'executeEventActionChain : the action : ' + _cb + ' has not been found when firing event : ' + args.event.selector );
|
|
}
|
|
|
|
//Allow other actions to be bound before action and after
|
|
//
|
|
//=> we don't want the event in the object here => we use the one in the event map if set
|
|
//=> otherwise will loop infinitely because triggering always the same cb from args.event.actions[_cb]
|
|
//=> the dom element shall be get from the passed args and fall back to the controler container.
|
|
var $_dom_el = ( _.has(args, 'dom_el') && -1 != args.dom_el.length ) ? args.dom_el : false;
|
|
if ( ! $_dom_el ) {
|
|
czrapp.errorLog( 'missing dom element');
|
|
return;
|
|
}
|
|
$_dom_el.trigger( 'before_' + _cb, _.omit( args, 'event' ) );
|
|
|
|
//executes the _cb and stores the result in a local var
|
|
var _cb_return = instance[ _cb ].call( instance, args );
|
|
//shall we stop the action chain here ?
|
|
if ( false === _cb_return )
|
|
_break = true;
|
|
|
|
//allow other actions to be bound after
|
|
$_dom_el.trigger( 'after_' + _cb, _.omit( args, 'event' ) );
|
|
});//_.map
|
|
};
|
|
})(jQuery, czrapp);//@global HUParams
|
|
var czrapp = czrapp || {};
|
|
czrapp.methods = {};
|
|
|
|
(function( HUParams, $ ){
|
|
var ctor, inherits, slice = Array.prototype.slice;
|
|
|
|
// Shared empty constructor function to aid in prototype-chain creation.
|
|
ctor = function() {};
|
|
|
|
/**
|
|
* Helper function to correctly set up the prototype chain, for subclasses.
|
|
* Similar to `goog.inherits`, but uses a hash of prototype properties and
|
|
* class properties to be extended.
|
|
*
|
|
* @param object parent Parent class constructor to inherit from.
|
|
* @param object protoProps Properties to apply to the prototype for use as class instance properties.
|
|
* @param object staticProps Properties to apply directly to the class constructor.
|
|
* @return child The subclassed constructor.
|
|
*/
|
|
inherits = function( parent, protoProps, staticProps ) {
|
|
var child;
|
|
|
|
// The constructor function for the new subclass is either defined by you
|
|
// (the "constructor" property in your `extend` definition), or defaulted
|
|
// by us to simply call `super()`.
|
|
if ( protoProps && protoProps.hasOwnProperty( 'constructor' ) ) {
|
|
child = protoProps.constructor;
|
|
} else {
|
|
child = function() {
|
|
// Storing the result `super()` before returning the value
|
|
// prevents a bug in Opera where, if the constructor returns
|
|
// a function, Opera will reject the return value in favor of
|
|
// the original object. This causes all sorts of trouble.
|
|
var result = parent.apply( this, arguments );
|
|
return result;
|
|
};
|
|
}
|
|
|
|
// Inherit class (static) properties from parent.
|
|
$.extend( child, parent );
|
|
|
|
// Set the prototype chain to inherit from `parent`, without calling
|
|
// `parent`'s constructor function.
|
|
ctor.prototype = parent.prototype;
|
|
child.prototype = new ctor();
|
|
|
|
// Add prototype properties (instance properties) to the subclass,
|
|
// if supplied.
|
|
if ( protoProps )
|
|
$.extend( child.prototype, protoProps );
|
|
|
|
// Add static properties to the constructor function, if supplied.
|
|
if ( staticProps )
|
|
$.extend( child, staticProps );
|
|
|
|
// Correctly set child's `prototype.constructor`.
|
|
child.prototype.constructor = child;
|
|
|
|
// Set a convenience property in case the parent's prototype is needed later.
|
|
child.__super__ = parent.prototype;
|
|
|
|
return child;
|
|
};
|
|
|
|
/**
|
|
* Base class for object inheritance.
|
|
*/
|
|
czrapp.Class = function( applicator, argsArray, options ) {
|
|
var magic, args = arguments;
|
|
|
|
if ( applicator && argsArray && czrapp.Class.applicator === applicator ) {
|
|
args = argsArray;
|
|
$.extend( this, options || {} );
|
|
}
|
|
|
|
magic = this;
|
|
|
|
/*
|
|
* If the class has a method called "instance",
|
|
* the return value from the class' constructor will be a function that
|
|
* calls the "instance" method.
|
|
*
|
|
* It is also an object that has properties and methods inside it.
|
|
*/
|
|
if ( this.instance ) {
|
|
magic = function() {
|
|
return magic.instance.apply( magic, arguments );
|
|
};
|
|
|
|
$.extend( magic, this );
|
|
}
|
|
|
|
magic.initialize.apply( magic, args );
|
|
return magic;
|
|
};
|
|
|
|
/**
|
|
* Creates a subclass of the class.
|
|
*
|
|
* @param object protoProps Properties to apply to the prototype.
|
|
* @param object staticProps Properties to apply directly to the class.
|
|
* @return child The subclass.
|
|
*/
|
|
czrapp.Class.extend = function( protoProps, classProps ) {
|
|
var child = inherits( this, protoProps, classProps );
|
|
child.extend = this.extend;
|
|
return child;
|
|
};
|
|
|
|
czrapp.Class.applicator = {};
|
|
|
|
/**
|
|
* Initialize a class instance.
|
|
*
|
|
* Override this function in a subclass as needed.
|
|
*/
|
|
czrapp.Class.prototype.initialize = function() {};
|
|
|
|
/*
|
|
* Checks whether a given instance extended a constructor.
|
|
*
|
|
* The magic surrounding the instance parameter causes the instanceof
|
|
* keyword to return inaccurate results; it defaults to the function's
|
|
* prototype instead of the constructor chain. Hence this function.
|
|
*/
|
|
czrapp.Class.prototype.extended = function( constructor ) {
|
|
var proto = this;
|
|
|
|
while ( typeof proto.constructor !== 'undefined' ) {
|
|
if ( proto.constructor === constructor )
|
|
return true;
|
|
if ( typeof proto.constructor.__super__ === 'undefined' )
|
|
return false;
|
|
proto = proto.constructor.__super__;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* An events manager object, offering the ability to bind to and trigger events.
|
|
*
|
|
* Used as a mixin.
|
|
*/
|
|
czrapp.Events = {
|
|
trigger: function( id ) {
|
|
if ( this.topics && this.topics[ id ] )
|
|
this.topics[ id ].fireWith( this, slice.call( arguments, 1 ) );
|
|
return this;
|
|
},
|
|
|
|
bind: function( id ) {
|
|
this.topics = this.topics || {};
|
|
this.topics[ id ] = this.topics[ id ] || $.Callbacks();
|
|
this.topics[ id ].add.apply( this.topics[ id ], slice.call( arguments, 1 ) );
|
|
return this;
|
|
},
|
|
|
|
unbind: function( id ) {
|
|
if ( this.topics && this.topics[ id ] )
|
|
this.topics[ id ].remove.apply( this.topics[ id ], slice.call( arguments, 1 ) );
|
|
return this;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Observable values that support two-way binding.
|
|
*
|
|
* @constructor
|
|
*/
|
|
czrapp.Value = czrapp.Class.extend({
|
|
/**
|
|
* @param {mixed} initial The initial value.
|
|
* @param {object} options
|
|
*/
|
|
initialize: function( initial, options ) {
|
|
this._value = initial; // @todo: potentially change this to a this.set() call.
|
|
this.callbacks = $.Callbacks();
|
|
this._dirty = false;
|
|
|
|
$.extend( this, options || {} );
|
|
|
|
this.set = $.proxy( this.set, this );
|
|
},
|
|
|
|
/*
|
|
* Magic. Returns a function that will become the instance.
|
|
* Set to null to prevent the instance from extending a function.
|
|
*/
|
|
instance: function() {
|
|
return arguments.length ? this.set.apply( this, arguments ) : this.get();
|
|
},
|
|
|
|
/**
|
|
* Get the value.
|
|
*
|
|
* @return {mixed}
|
|
*/
|
|
get: function() {
|
|
return this._value;
|
|
},
|
|
|
|
/**
|
|
* Set the value and trigger all bound callbacks.
|
|
*
|
|
* @param {object} to New value.
|
|
*/
|
|
set: function( to, o ) {
|
|
var from = this._value, dfd = $.Deferred(), self = this, _promises = [];
|
|
|
|
to = this._setter.apply( this, arguments );
|
|
to = this.validate( to );
|
|
args = _.extend( { silent : false }, _.isObject( o ) ? o : {} );
|
|
|
|
// Bail if the sanitized value is null or unchanged.
|
|
if ( null === to || _.isEqual( from, to ) ) {
|
|
return dfd.resolveWith( self, [ to, from, o ] ).promise();
|
|
}
|
|
|
|
this._value = to;
|
|
this._dirty = true;
|
|
if ( true === args.silent ) {
|
|
return dfd.resolveWith( self, [ to, from, o ] ).promise();
|
|
}
|
|
|
|
if ( this._deferreds ) {
|
|
_.each( self._deferreds, function( _prom ) {
|
|
_promises.push( _prom.apply( null, [ to, from, o ] ) );
|
|
});
|
|
|
|
$.when.apply( null, _promises )
|
|
.fail( function() { api.errorLog( 'A deferred callback failed in api.Value::set()'); })
|
|
.then( function() {
|
|
self.callbacks.fireWith( self, [ to, from, o ] );
|
|
dfd.resolveWith( self, [ to, from, o ] );
|
|
});
|
|
} else {
|
|
this.callbacks.fireWith( this, [ to, from, o ] );
|
|
return dfd.resolveWith( self, [ to, from, o ] ).promise( self );
|
|
}
|
|
return dfd.promise( self );
|
|
},
|
|
|
|
/*****************************************************************************
|
|
* A SILENT SET METHOD :
|
|
* => keep the dirtyness param unchanged
|
|
* => stores the api state before callback calls, and reset it after
|
|
* => add an object param to the callback to inform that this is a silent process
|
|
* , this is typically used in the overridden api.Setting.preview method
|
|
*****************************************************************************/
|
|
//@param to : the new value to set
|
|
//@param dirtyness : the current dirtyness status of this setting in the skope
|
|
silent_set : function( to, dirtyness ) {
|
|
var from = this._value,
|
|
_save_state = api.state('saved')();
|
|
|
|
to = this._setter.apply( this, arguments );
|
|
to = this.validate( to );
|
|
|
|
// Bail if the sanitized value is null or unchanged.
|
|
if ( null === to || _.isEqual( from, to ) ) {
|
|
return this;
|
|
}
|
|
|
|
this._value = to;
|
|
this._dirty = ( _.isUndefined( dirtyness ) || ! _.isBoolean( dirtyness ) ) ? this._dirty : dirtyness;
|
|
|
|
this.callbacks.fireWith( this, [ to, from, { silent : true } ] );
|
|
//reset the api state to its value before the callback call
|
|
api.state('saved')( _save_state );
|
|
return this;
|
|
},
|
|
|
|
_setter: function( to ) {
|
|
return to;
|
|
},
|
|
|
|
setter: function( callback ) {
|
|
var from = this.get();
|
|
this._setter = callback;
|
|
// Temporarily clear value so setter can decide if it's valid.
|
|
this._value = null;
|
|
this.set( from );
|
|
return this;
|
|
},
|
|
|
|
resetSetter: function() {
|
|
this._setter = this.constructor.prototype._setter;
|
|
this.set( this.get() );
|
|
return this;
|
|
},
|
|
|
|
validate: function( value ) {
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Bind a function to be invoked whenever the value changes.
|
|
*
|
|
* @param {...Function} A function, or multiple functions, to add to the callback stack.
|
|
*/
|
|
//allows us to specify a list of callbacks + a { deferred : true } param
|
|
//if deferred is found and true, then the callback(s) are added in a list of deferred
|
|
//@see how this deferred list is used in api.Value.prototype.set()
|
|
bind: function() {
|
|
//find an object in the argument
|
|
var self = this,
|
|
_isDeferred = false,
|
|
_cbs = [];
|
|
|
|
$.each( arguments, function( _key, _arg ) {
|
|
if ( ! _isDeferred )
|
|
_isDeferred = _.isObject( _arg ) && _arg.deferred;
|
|
if ( _.isFunction( _arg ) )
|
|
_cbs.push( _arg );
|
|
});
|
|
|
|
if ( _isDeferred ) {
|
|
self._deferreds = self._deferreds || [];
|
|
_.each( _cbs, function( _cb ) {
|
|
if ( ! _.contains( _cb, self._deferreds ) )
|
|
self._deferreds.push( _cb );
|
|
});
|
|
} else {
|
|
//original method
|
|
self.callbacks.add.apply( self.callbacks, arguments );
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Unbind a previously bound function.
|
|
*
|
|
* @param {...Function} A function, or multiple functions, to remove from the callback stack.
|
|
*/
|
|
unbind: function() {
|
|
this.callbacks.remove.apply( this.callbacks, arguments );
|
|
return this;
|
|
},
|
|
|
|
// link: function() { // values*
|
|
// var set = this.set;
|
|
// $.each( arguments, function() {
|
|
// this.bind( set );
|
|
// });
|
|
// return this;
|
|
// },
|
|
|
|
// unlink: function() { // values*
|
|
// var set = this.set;
|
|
// $.each( arguments, function() {
|
|
// this.unbind( set );
|
|
// });
|
|
// return this;
|
|
// },
|
|
|
|
// sync: function() { // values*
|
|
// var that = this;
|
|
// $.each( arguments, function() {
|
|
// that.link( this );
|
|
// this.link( that );
|
|
// });
|
|
// return this;
|
|
// },
|
|
|
|
// unsync: function() { // values*
|
|
// var that = this;
|
|
// $.each( arguments, function() {
|
|
// that.unlink( this );
|
|
// this.unlink( that );
|
|
// });
|
|
// return this;
|
|
// }
|
|
});
|
|
|
|
/**
|
|
* A collection of observable values.
|
|
*
|
|
* @constructor
|
|
* @augments wp.customize.Class
|
|
* @mixes wp.customize.Events
|
|
*/
|
|
czrapp.Values = czrapp.Class.extend({
|
|
|
|
/**
|
|
* The default constructor for items of the collection.
|
|
*
|
|
* @type {object}
|
|
*/
|
|
defaultConstructor: czrapp.Value,
|
|
|
|
initialize: function( options ) {
|
|
$.extend( this, options || {} );
|
|
|
|
this._value = {};
|
|
this._deferreds = {};
|
|
},
|
|
|
|
/**
|
|
* Get the instance of an item from the collection if only ID is specified.
|
|
*
|
|
* If more than one argument is supplied, all are expected to be IDs and
|
|
* the last to be a function callback that will be invoked when the requested
|
|
* items are available.
|
|
*
|
|
* @see {czrapp.Values.when}
|
|
*
|
|
* @param {string} id ID of the item.
|
|
* @param {...} Zero or more IDs of items to wait for and a callback
|
|
* function to invoke when they're available. Optional.
|
|
* @return {mixed} The item instance if only one ID was supplied.
|
|
* A Deferred Promise object if a callback function is supplied.
|
|
*/
|
|
instance: function( id ) {
|
|
if ( arguments.length === 1 )
|
|
return this.value( id );
|
|
|
|
return this.when.apply( this, arguments );
|
|
},
|
|
|
|
/**
|
|
* Get the instance of an item.
|
|
*
|
|
* @param {string} id The ID of the item.
|
|
* @return {[type]} [description]
|
|
*/
|
|
value: function( id ) {
|
|
return this._value[ id ];
|
|
},
|
|
|
|
/**
|
|
* Whether the collection has an item with the given ID.
|
|
*
|
|
* @param {string} id The ID of the item to look for.
|
|
* @return {Boolean}
|
|
*/
|
|
has: function( id ) {
|
|
return typeof this._value[ id ] !== 'undefined';
|
|
},
|
|
|
|
/**
|
|
* Add an item to the collection.
|
|
*
|
|
* @param {string} id The ID of the item.
|
|
* @param {mixed} value The item instance.
|
|
* @return {mixed} The new item's instance.
|
|
*/
|
|
add: function( id, value ) {
|
|
if ( this.has( id ) )
|
|
return this.value( id );
|
|
|
|
this._value[ id ] = value;
|
|
value.parent = this;
|
|
|
|
// Propagate a 'change' event on an item up to the collection.
|
|
if ( value.extended( czrapp.Value ) )
|
|
value.bind( this._change );
|
|
|
|
this.trigger( 'add', value );
|
|
|
|
// If a deferred object exists for this item,
|
|
// resolve it.
|
|
if ( this._deferreds[ id ] )
|
|
this._deferreds[ id ].resolve();
|
|
|
|
return this._value[ id ];
|
|
},
|
|
|
|
/**
|
|
* Create a new item of the collection using the collection's default constructor
|
|
* and store it in the collection.
|
|
*
|
|
* @param {string} id The ID of the item.
|
|
* @param {mixed} value Any extra arguments are passed into the item's initialize method.
|
|
* @return {mixed} The new item's instance.
|
|
*/
|
|
create: function( id ) {
|
|
return this.add( id, new this.defaultConstructor( czrapp.Class.applicator, slice.call( arguments, 1 ) ) );
|
|
},
|
|
|
|
/**
|
|
* Iterate over all items in the collection invoking the provided callback.
|
|
*
|
|
* @param {Function} callback Function to invoke.
|
|
* @param {object} context Object context to invoke the function with. Optional.
|
|
*/
|
|
each: function( callback, context ) {
|
|
context = typeof context === 'undefined' ? this : context;
|
|
|
|
$.each( this._value, function( key, obj ) {
|
|
callback.call( context, obj, key );
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Remove an item from the collection.
|
|
*
|
|
* @param {string} id The ID of the item to remove.
|
|
*/
|
|
remove: function( id ) {
|
|
var value;
|
|
|
|
if ( this.has( id ) ) {
|
|
value = this.value( id );
|
|
this.trigger( 'remove', value );
|
|
if ( value.extended( czrapp.Value ) )
|
|
value.unbind( this._change );
|
|
delete value.parent;
|
|
}
|
|
|
|
delete this._value[ id ];
|
|
delete this._deferreds[ id ];
|
|
},
|
|
|
|
/**
|
|
* Runs a callback once all requested values exist.
|
|
*
|
|
* when( ids*, [callback] );
|
|
*
|
|
* For example:
|
|
* when( id1, id2, id3, function( value1, value2, value3 ) {} );
|
|
*
|
|
* @returns $.Deferred.promise();
|
|
*/
|
|
when: function() {
|
|
var self = this,
|
|
ids = slice.call( arguments ),
|
|
dfd = $.Deferred();
|
|
|
|
// If the last argument is a callback, bind it to .done()
|
|
if ( $.isFunction( ids[ ids.length - 1 ] ) )
|
|
dfd.done( ids.pop() );
|
|
|
|
/*
|
|
* Create a stack of deferred objects for each item that is not
|
|
* yet available, and invoke the supplied callback when they are.
|
|
*/
|
|
$.when.apply( $, $.map( ids, function( id ) {
|
|
if ( self.has( id ) )
|
|
return;
|
|
|
|
/*
|
|
* The requested item is not available yet, create a deferred
|
|
* object to resolve when it becomes available.
|
|
*/
|
|
return self._deferreds[ id ] || $.Deferred();
|
|
})).done( function() {
|
|
var values = $.map( ids, function( id ) {
|
|
return self( id );
|
|
});
|
|
|
|
// If a value is missing, we've used at least one expired deferred.
|
|
// Call Values.when again to generate a new deferred.
|
|
if ( values.length !== ids.length ) {
|
|
// ids.push( callback );
|
|
self.when.apply( self, ids ).done( function() {
|
|
dfd.resolveWith( self, values );
|
|
});
|
|
return;
|
|
}
|
|
|
|
dfd.resolveWith( self, values );
|
|
});
|
|
|
|
return dfd.promise();
|
|
},
|
|
|
|
/**
|
|
* A helper function to propagate a 'change' event from an item
|
|
* to the collection itself.
|
|
*/
|
|
_change: function() {
|
|
this.parent.trigger( 'change', this );
|
|
}
|
|
});
|
|
|
|
// Create a global events bus on the Customizer.
|
|
$.extend( czrapp.Values.prototype, czrapp.Events );
|
|
|
|
})( HUParams, jQuery );//@global HUParams
|
|
var czrapp = czrapp || {};
|
|
/*************************
|
|
* ADD BASE CLASS METHODS
|
|
*************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
/**
|
|
* Cache properties on Dom Ready
|
|
* @return {[type]} [description]
|
|
*/
|
|
cacheProp : function() {
|
|
var self = this;
|
|
$.extend( czrapp, {
|
|
//cache various jQuery el in czrapp obj
|
|
$_window : $(window),
|
|
$_html : $('html'),
|
|
$_body : $('body'),
|
|
$_header : $('#header'),
|
|
$_wpadminbar : $('#wpadminbar'),
|
|
$_mainWrapper : $('.main', '#wrapper'),
|
|
$_mainContent : $('.main', '#wrapper').find('.content'),
|
|
|
|
//various properties definition
|
|
is_responsive : self.isResponsive(),//store the initial responsive state of the window
|
|
current_device : self.getDevice()//store the initial device
|
|
});
|
|
},
|
|
|
|
//bool
|
|
isResponsive : function() {
|
|
return $(window).width() <= 979 - 15;
|
|
},
|
|
|
|
//@return string of current device
|
|
getDevice : function() {
|
|
var _devices = {
|
|
desktop : 979 - 15,
|
|
tablet : 767 - 15,
|
|
smartphone : 480 - 15
|
|
},
|
|
_current_device = 'desktop',
|
|
$_window = czrapp.$_window || $(window);
|
|
|
|
_.map( _devices, function( max_width, _dev ){
|
|
if ( $_window.width() <= max_width )
|
|
_current_device = _dev;
|
|
} );
|
|
return _current_device;
|
|
},
|
|
|
|
emit : function( cbs, args ) {
|
|
cbs = _.isArray(cbs) ? cbs : [cbs];
|
|
var self = this;
|
|
_.map( cbs, function(cb) {
|
|
if ( 'function' == typeof(self[cb]) ) {
|
|
args = 'undefined' == typeof( args ) ? Array() : args ;
|
|
self[cb].apply(self, args );
|
|
czrapp.trigger( cb, _.object( _.keys(args), args ) );
|
|
}
|
|
});//_.map
|
|
},
|
|
|
|
triggerSimpleLoad : function( $_imgs ) {
|
|
if ( 0 === $_imgs.length )
|
|
return;
|
|
|
|
$_imgs.map( function( _ind, _img ) {
|
|
$(_img).load( function () {
|
|
$(_img).trigger('simple_load');
|
|
});//end load
|
|
if ( $(_img)[0] && $(_img)[0].complete )
|
|
$(_img).load();
|
|
} );//end map
|
|
},//end of fn
|
|
|
|
isUserLogged : function() {
|
|
return czrapp.$_body.hasClass('logged-in') || 0 !== czrapp.$_wpadminbar.length;
|
|
},
|
|
|
|
isSelectorAllowed : function( $_el, skip_selectors, requested_sel_type ) {
|
|
var sel_type = 'ids' == requested_sel_type ? 'id' : 'class',
|
|
_selsToSkip = skip_selectors[requested_sel_type];
|
|
|
|
//check if option is well formed
|
|
if ( 'object' != typeof(skip_selectors) || ! skip_selectors[requested_sel_type] || ! $.isArray( skip_selectors[requested_sel_type] ) || 0 === skip_selectors[requested_sel_type].length )
|
|
return true;
|
|
|
|
//has a forbidden parent?
|
|
if ( $_el.parents( _selsToSkip.map( function( _sel ){ return 'id' == sel_type ? '#' + _sel : '.' + _sel; } ).join(',') ).length > 0 )
|
|
return false;
|
|
|
|
//has requested sel ?
|
|
if ( ! $_el.attr( sel_type ) )
|
|
return true;
|
|
|
|
var _elSels = $_el.attr( sel_type ).split(' '),
|
|
_filtered = _elSels.filter( function(classe) { return -1 != $.inArray( classe , _selsToSkip ) ;});
|
|
|
|
//check if the filtered selectors array with the non authorized selectors is empty or not
|
|
//if empty => all selectors are allowed
|
|
//if not, at least one is not allowed
|
|
return 0 === _filtered.length;
|
|
},
|
|
|
|
|
|
//@return bool
|
|
_isMobile : function() {
|
|
return ( _.isFunction( window.matchMedia ) && matchMedia( 'only screen and (max-width: 720px)' ).matches ) || ( this._isCustomizing() && 'desktop' != this.previewDevice() );
|
|
},
|
|
|
|
//@return bool
|
|
_isCustomizing : function() {
|
|
return czrapp.$_body.hasClass('is-customizing') || ( 'undefined' !== typeof wp && 'undefined' !== typeof wp.customize );
|
|
},
|
|
|
|
//Helpers
|
|
//Check if the passed element(s) contains an iframe
|
|
//@return list of containers
|
|
//@param $_elements = mixed
|
|
_has_iframe : function ( $_elements ) {
|
|
var that = this,
|
|
to_return = [];
|
|
_.each( $_elements, function( $_el, container ){
|
|
if ( $_el.length > 0 && $_el.find('IFRAME').length > 0 )
|
|
to_return.push(container);
|
|
});
|
|
return to_return;
|
|
},
|
|
};//_methods{}
|
|
|
|
czrapp.methods.Base = czrapp.methods.Base || {};
|
|
$.extend( czrapp.methods.Base , _methods );//$.extend
|
|
|
|
})(jQuery, czrapp);/***************************
|
|
* ADD BROWSER DETECT METHODS
|
|
****************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
addBrowserClassToBody : function() {
|
|
// Chrome is Webkit, but Webkit is also Safari. If browser = ie + strips out the .0 suffix
|
|
if ( $.browser.chrome )
|
|
czrapp.$_body.addClass("chrome");
|
|
else if ( $.browser.webkit )
|
|
czrapp.$_body.addClass("safari");
|
|
if ( $.browser.mozilla )
|
|
czrapp.$_body.addClass("mozilla");
|
|
else if ( $.browser.msie || '8.0' === $.browser.version || '9.0' === $.browser.version || '10.0' === $.browser.version || '11.0' === $.browser.version )
|
|
czrapp.$_body.addClass("ie").addClass("ie" + $.browser.version.replace(/[.0]/g, ''));
|
|
|
|
//Adds version if browser = ie
|
|
if ( czrapp.$_body.hasClass("ie") )
|
|
czrapp.$_body.addClass($.browser.version);
|
|
}
|
|
};//_methods{}
|
|
czrapp.methods.BrowserDetect = czrapp.methods.BrowserDetect || {};
|
|
$.extend( czrapp.methods.BrowserDetect , _methods );
|
|
|
|
})(jQuery, czrapp);
|
|
var czrapp = czrapp || {};
|
|
/***************************
|
|
* ADD JQUERY PLUGINS METHODS
|
|
****************************/
|
|
(function( $, czrapp ) {
|
|
var _methods = {
|
|
//IMG SMART LOAD
|
|
//.article-container covers all post / page content : single and list
|
|
//__before_main_wrapper covers the single post thumbnail case
|
|
//.widget-front handles the featured pages
|
|
imgSmartLoad : function() {
|
|
var smartLoadEnabled = 1 == HUParams.imgSmartLoadEnabled,
|
|
//Default selectors for where are : $( '.article-container, .__before_main_wrapper, .widget-front' ).find('img');
|
|
_where = HUParams.imgSmartLoadOpts.parentSelectors.join();
|
|
|
|
//Smart-Load images
|
|
//imgSmartLoad plugin will trigger the smartload event when the img will be loaded
|
|
//the centerImages plugin will react to this event centering them
|
|
if ( smartLoadEnabled ) {
|
|
$( _where ).imgSmartLoad(
|
|
_.size( HUParams.imgSmartLoadOpts.opts ) > 0 ? HUParams.imgSmartLoadOpts.opts : {}
|
|
);
|
|
}
|
|
|
|
//If the centerAllImg is on we have to ensure imgs will be centered when simple loaded,
|
|
//for this purpose we have to trigger the simple-load on:
|
|
//1) imgs which have been excluded from the smartloading if enabled
|
|
//2) all the images in the default 'where' if the smartloading isn't enaled
|
|
//simple-load event on holders needs to be triggered with a certain delay otherwise holders will be misplaced (centering)
|
|
if ( 1 == HUParams.centerAllImg ) {
|
|
var self = this,
|
|
$_to_center = smartLoadEnabled ?
|
|
$( _.filter( $( _where ).find('img'), function( img ) {
|
|
return $(img).is(HUParams.imgSmartLoadOpts.opts.excludeImg.join());
|
|
}) ): //filter
|
|
$( _where ).find('img');
|
|
$_to_center_with_delay = $( _.filter( $_to_center, function( img ) {
|
|
return $(img).hasClass('tc-holder-img');
|
|
}) );
|
|
|
|
//imgs to center with delay
|
|
setTimeout( function(){
|
|
self.triggerSimpleLoad( $_to_center_with_delay );
|
|
}, 300 );
|
|
//all other imgs to center
|
|
self.triggerSimpleLoad( $_to_center );
|
|
}
|
|
},
|
|
|
|
|
|
//FIRE EXT LINKS PLUGIN
|
|
//May be add (check if activated by user) external class + target="_blank" to relevant links
|
|
//images are excluded by default
|
|
//links inside post/page content
|
|
extLinks : function() {
|
|
if ( ! HUParams.extLinksStyle && ! HUParams.extLinksTargetExt )
|
|
return;
|
|
$('a' , '.post-inner .entry').extLinks({
|
|
addIcon : HUParams.extLinksStyle,
|
|
iconClassName : 'hu-external',
|
|
newTab : HUParams.extLinksTargetExt,
|
|
skipSelectors : _.isObject(HUParams.extLinksSkipSelectors) ? HUParams.extLinksSkipSelectors : {}
|
|
});
|
|
},
|
|
|
|
parallax : function() {
|
|
$( '.parallax-item' ).czrParallax();
|
|
},
|
|
};//_methods{}
|
|
|
|
czrapp.methods.JQPlugins = czrapp.methods.JQPlugins || {};
|
|
$.extend( czrapp.methods.JQPlugins = {} , _methods );
|
|
|
|
})(jQuery, czrapp);
|
|
var czrapp = czrapp || {};
|
|
|
|
/************************************************
|
|
* USER EXPERIENCE SUB CLASS
|
|
*************************************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
setupUIListeners : function() {
|
|
var self = this;
|
|
//declare and store the main user xp properties and obervable values
|
|
this.windowWidth = new czrapp.Value( czrapp.$_window.width() );
|
|
this.isScrolling = new czrapp.Value( false );
|
|
this.isResizing = new czrapp.Value( false );
|
|
this.scrollPosition = new czrapp.Value( czrapp.$_window.scrollTop() );
|
|
this.scrollDirection = new czrapp.Value('down');
|
|
self.previewDevice = new czrapp.Value( 'desktop' );
|
|
|
|
//PREVIEWED DEVICE ?
|
|
//Listen to the customizer previewed device
|
|
if ( self._isCustomizing() ) {
|
|
var _setPreviewedDevice = function() {
|
|
wp.customize.preview.bind( 'previewed-device', function( device ) {
|
|
self.previewDevice( device );
|
|
});
|
|
};
|
|
if ( wp.customize.preview ) {
|
|
_setPreviewedDevice();
|
|
} else {
|
|
wp.customize.bind( 'preview-ready', function() {
|
|
_setPreviewedDevice();
|
|
});
|
|
}
|
|
}
|
|
|
|
//ABSTRACTION LAYER
|
|
//listen to windowWidth
|
|
self.windowWidth.bind( function( to, from ) {
|
|
//Always bail if is not "real" resize.
|
|
//=> Resize events can be triggered when scrolling on mobile devices, whitout actually resizing the screen
|
|
self.isResizing( self._isMobile ? Math.abs( from - to ) > 2 : Math.abs( from - to ) > 0 );
|
|
clearTimeout( $.data( this, 'resizeTimer') );
|
|
$.data( this, 'resizeTimer', setTimeout(function() {
|
|
self.isResizing( false );
|
|
}, 50 ) );
|
|
});
|
|
|
|
//"real" horizontal resize reaction : refreshed every 50 ms
|
|
self.isResizing.bind( function( is_resizing ) {
|
|
czrapp.$_body.toggleClass( 'is-resizing', is_resizing );
|
|
});
|
|
|
|
//react when scrolling status change
|
|
//=> auto set it self to false after a while
|
|
this.isScrolling.bind( function( to, from ) {
|
|
//self.scrollPosition( czrapp.$_window.scrollTop() );
|
|
czrapp.$_body.toggleClass( 'is-scrolling', to );
|
|
if ( ! to ) {
|
|
czrapp.trigger( 'scrolling-finished' );
|
|
}
|
|
});
|
|
|
|
|
|
//scroll position is set when scrolling
|
|
this.scrollPosition.bind( function( to, from ) {
|
|
//handle scrolling classes
|
|
czrapp.$_body.toggleClass( 'is-scrolled', to > 100 );
|
|
if ( to <= 50 ) {
|
|
czrapp.trigger( 'page-scrolled-top', {} );
|
|
}
|
|
self.scrollDirection( to >= from ? 'down' : 'up' );
|
|
});
|
|
|
|
|
|
//BROWSER LAYER : RESIZE AND SCROLL
|
|
//listen to user DOM actions
|
|
czrapp.$_window.resize( _.throttle( function( ev ) { self.windowWidth( czrapp.$_window.width() ); }, 10 ) );
|
|
czrapp.$_window.scroll( _.throttle( function() {
|
|
self.isScrolling( true );
|
|
//self.previousScrollPosition = self.scrollPosition() || czrapp.$_window.scrollTop();
|
|
self.scrollPosition( czrapp.$_window.scrollTop() );
|
|
clearTimeout( $.data( this, 'scrollTimer') );
|
|
$.data( this, 'scrollTimer', setTimeout(function() {
|
|
self.isScrolling( false );
|
|
}, 100 ) );
|
|
}, 10 ) );
|
|
|
|
}
|
|
};//_methods{}
|
|
|
|
czrapp.methods.UserXP = czrapp.methods.UserXP || {};
|
|
$.extend( czrapp.methods.UserXP , _methods );
|
|
|
|
})(jQuery, czrapp);var czrapp = czrapp || {};
|
|
|
|
/************************************************
|
|
* USER EXPERIENCE SUB CLASS
|
|
*************************************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
|
|
mobileMenu : function() {
|
|
var self = this;
|
|
self.mobileMenu = new czrapp.Values();
|
|
|
|
//Instantiate the menu candidates
|
|
//data-menu-id should be unique. Are not synchronized with the actua menu css # id attribute
|
|
$('.nav-container').each( function( _index ) {
|
|
if ( ! _.isString( $(this).attr( 'data-menu-id' ) ) )
|
|
return;
|
|
|
|
var $container = $(this),
|
|
is_scrollable = _.isString( $(this).attr( 'data-menu-scrollable' ) ) && "false" == $(this).attr( 'data-menu-scrollable' ) ? false : true,
|
|
_candidateId = $container.attr( 'data-menu-id' ),
|
|
ctor;
|
|
|
|
if ( self.mobileMenu.has( _candidateId ) )
|
|
return;
|
|
|
|
var $navWrap = $container.find( '.nav-wrap' );
|
|
// if ( 1 != $navWrap.length ) {
|
|
// czrapp.errorLog( 'Mobile menu : misssing .nav-wrap for menu-id : ' + _candidateId );
|
|
// }
|
|
var button_selectors = '.nav-toggle, .ham__navbar-toggler, .ham__navbar-toggler-two',
|
|
$button = $container.find( button_selectors );
|
|
// if ( 1 != $button.length ) {
|
|
// czrapp.errorLog( 'Mobile menu : misssing container for menu-id : ' + _candidateId );
|
|
// }
|
|
//A mobile menu candidate should have a wrapper an a button selector
|
|
if ( 1 == $navWrap.length && 1 == $button.length ) {
|
|
ctor = czrapp.Value.extend( self.MobileCTOR );
|
|
//do instantiate
|
|
self.mobileMenu.add( _candidateId, new ctor( _candidateId, {
|
|
container : $container,
|
|
menu_wrapper : $navWrap,
|
|
button : $button,
|
|
button_selectors : button_selectors,
|
|
is_scrollable : is_scrollable
|
|
}));
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
//CTOR for each mobile menu Value
|
|
MobileCTOR : {
|
|
//@param constructor_options :
|
|
// {
|
|
// container : $container,
|
|
// menu_wrapper : $navWrap,
|
|
// button : $button,
|
|
// button_selectors : '.nav-toggle, .ham__navbar-toggler, .ham__navbar-toggler-two'
|
|
// }
|
|
initialize: function( mobile_id, constructor_options ) {
|
|
var mobMenu = this;
|
|
czrapp.Value.prototype.initialize.call( mobMenu, null, constructor_options );
|
|
|
|
//write the options as properties
|
|
$.extend( mobMenu, constructor_options || {} );
|
|
|
|
//set initial state
|
|
mobMenu( 'collapsed' );
|
|
|
|
//react on state change
|
|
//@return a deferred
|
|
//=> in a scenario of menu expanded and scroll down, allow us to nicely run the sequence of animation:
|
|
//1) menu collapse
|
|
//2) animate up
|
|
mobMenu.bind( function( state ) {
|
|
return $.Deferred( function() {
|
|
var dfd = this;
|
|
//Always close the search bar before doing anything else
|
|
czrapp.userXP.headerSearchExpanded( false ).done( function() {
|
|
mobMenu._toggleMobileMenu()
|
|
.done( function( state ){
|
|
//remove classes that modify the appearance of the button
|
|
//=> needed for mobile devices because the focus is not automatically removed
|
|
mobMenu.button.toggleClass( 'hovering', 'expanded' == state ).toggleClass( 'focusing', 'expanded' == state );
|
|
dfd.resolve();
|
|
});
|
|
});
|
|
}).promise();
|
|
}, { deferred : true } );
|
|
|
|
//Listen to user actions
|
|
czrapp.setupDOMListeners(
|
|
[
|
|
{
|
|
trigger : 'click keydown',
|
|
selector : mobMenu.button_selectors,
|
|
actions : function() {
|
|
var mobMenu = this;
|
|
mobMenu( 'collapsed' == mobMenu() ? 'expanded' : 'collapsed' );
|
|
}
|
|
},
|
|
{
|
|
trigger : 'mouseenter',
|
|
selector : mobMenu.button_selectors,
|
|
actions : function() {
|
|
this.button.addClass( 'hovering' );
|
|
}
|
|
|
|
},
|
|
{
|
|
trigger : 'mouseleave',
|
|
selector : mobMenu.button_selectors,
|
|
actions : function() {
|
|
this.button.removeClass( 'hovering' );
|
|
}
|
|
|
|
}
|
|
],//actions to execute
|
|
{ dom_el: mobMenu.container },//dom scope
|
|
mobMenu //instance where to look for the cb methods
|
|
);
|
|
|
|
//listen to czrapp events
|
|
//Collapse on resize
|
|
czrapp.userXP.isResizing.bind( function( is_resizing ) {
|
|
if ( ! is_resizing )
|
|
return;
|
|
mobMenu( 'collapsed' );
|
|
});
|
|
},
|
|
|
|
//@return dfd promise()
|
|
//react on mobMenu( 'collapsed' or 'expanded' )
|
|
_toggleMobileMenu : function() {
|
|
var mobMenu = this,
|
|
expand = 'expanded' == mobMenu(),
|
|
dfd = $.Deferred();
|
|
|
|
//Set the button dom state
|
|
mobMenu.button
|
|
.toggleClass( 'collapsed', ! expand )
|
|
.toggleClass( 'active', expand )
|
|
.attr('aria-expanded', expand );
|
|
|
|
$.when( mobMenu.menu_wrapper.toggleClass( 'expanded', expand ) ).done( function() {
|
|
var $navWrap = $(this);
|
|
$navWrap.find('.nav').stop()[ ! expand ? 'slideUp' : 'slideDown' ]( {
|
|
duration : 300,
|
|
complete : function() {
|
|
//makes it scrollable ( currently true for all menu but the footer )
|
|
//scrollable is set in the DOM with data-menu-scrollable
|
|
if ( mobMenu.is_scrollable ) {
|
|
var _winHeight = 'undefined' === typeof window.innerHeight ? window.innerHeight : czrapp.$_window.height(),
|
|
_visibleHeight = _winHeight - $navWrap.offset().top + czrapp.$_window.scrollTop();
|
|
$navWrap.css( {
|
|
'max-height' : expand ? _visibleHeight : '',
|
|
'overflow' : 'auto'
|
|
});
|
|
}
|
|
dfd.resolve( expand );
|
|
}
|
|
} );
|
|
});
|
|
return dfd.promise();
|
|
}
|
|
}//MobileCTOR
|
|
|
|
};//_methods{}
|
|
|
|
czrapp.methods.UserXP = czrapp.methods.UserXP || {};
|
|
$.extend( czrapp.methods.UserXP , _methods );
|
|
|
|
})(jQuery, czrapp);var czrapp = czrapp || {};
|
|
|
|
/************************************************
|
|
* USER EXPERIENCE SUB CLASS
|
|
*************************************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
|
|
/*-----------------------------------------------------
|
|
* MAIN
|
|
------------------------------------------------------*/
|
|
stickify : function() {
|
|
var self = this;
|
|
this.stickyMenuWrapper = false;
|
|
this.stickyMenuDown = new czrapp.Value( '_not_set_' );
|
|
this.stickyHeaderThreshold = 50;
|
|
this.currentStickySelector = new czrapp.Value( '' );//<= will be set on init and on resize
|
|
this.hasStickyCandidate = new czrapp.Value( false );
|
|
this.stickyHeaderAnimating = new czrapp.Value( false );
|
|
|
|
//// SETUP LISTENERS ////
|
|
//react to current sticky selector
|
|
//will be set on init and reset on resize
|
|
this.currentStickySelector.bind( function( to, from ) {
|
|
var _reset = function() {
|
|
czrapp.$_header.css( { 'height' : '' }).removeClass( 'fixed-header-on' );
|
|
self.stickyMenuDown( false );
|
|
self.stickyMenuWrapper = false;
|
|
self.hasStickyCandidate( false );
|
|
};
|
|
|
|
if ( ! _.isEmpty( to ) ) {
|
|
self.hasStickyCandidate( 1 == czrapp.$_header.find( to ).length );
|
|
//Does this selector actually exists ?
|
|
if ( ! self.hasStickyCandidate() ) {
|
|
_reset();
|
|
} else {
|
|
//cache the menu wrapper now
|
|
self.stickyMenuWrapper = czrapp.$_header.find( to );
|
|
//make sure we have the transition class in any cases
|
|
// + Always set the header height on dom ready
|
|
//=> will prevent any wrong value being assigned if menu is expanded before scrolling
|
|
czrapp.$_header.css( { 'height' : czrapp.$_header.height() }).addClass( 'fixed-header-on' );
|
|
}
|
|
} else {
|
|
_reset();
|
|
}
|
|
});
|
|
|
|
//Animate based on scroll position.
|
|
//Must have a sticky candidate
|
|
this.scrollPosition.bind( function( to, from ) {
|
|
if ( ! self.hasStickyCandidate() )
|
|
return;
|
|
//Set up only when scroll up is significant => avoid revealing the menu for minor scroll up actions on mobile devices
|
|
if ( Math.abs( to - from ) <= 5 )
|
|
return;
|
|
self.stickyMenuDown( to < from );
|
|
});
|
|
|
|
|
|
//czrapp.bind( 'page-scrolled-top', _mayBeresetTopPosition );
|
|
var _maybeResetTop = function() {
|
|
if ( 'up' == self.scrollDirection() )
|
|
self._mayBeresetTopPosition();
|
|
};
|
|
czrapp.bind( 'scrolling-finished', _maybeResetTop );//react on scrolling finished <=> after the timer
|
|
czrapp.bind( 'topbar-collapsed', _maybeResetTop );//react on topbar collapsed, @see topNavToLife
|
|
|
|
//animate : make sure we don't hide the menu when too close from top
|
|
self.stickyMenuDown.validate = function( value ) {
|
|
if ( ! self.hasStickyCandidate() )
|
|
return false;
|
|
if ( self.scrollPosition() < self.stickyHeaderThreshold && ! value ) {
|
|
if ( ! self.isScrolling() ) {
|
|
//print a message when attempt to programmatically hide the menu
|
|
czrapp.errorLog('Menu too close from top to be moved up');
|
|
}
|
|
return self.stickyMenuDown();
|
|
} else {
|
|
return value;
|
|
}
|
|
};
|
|
|
|
self.stickyMenuDown.bind( function( to, from, args ){
|
|
if ( ! _.isBoolean( to ) || ! self.hasStickyCandidate() ) {
|
|
return $.Deferred( function() { return this.resolve().promise(); } );
|
|
}
|
|
|
|
args = _.extend(
|
|
{
|
|
direction : to ? 'down' : 'up',
|
|
force : false,
|
|
menu_wrapper : self.stickyMenuWrapper,
|
|
fast : false
|
|
},
|
|
args || {}
|
|
);
|
|
return self._animate( { direction : args.direction, force : args.force, menu_wrapper : args.menu_wrapper, fast : args.fast } );
|
|
}, { deferred : true } );
|
|
|
|
|
|
/*-----------------------------------------------------
|
|
* (real) RESIZE EVENT : refreshed every 50 ms
|
|
------------------------------------------------------*/
|
|
self.isResizing.bind( function( is_resizing ) {
|
|
// if ( ! is_resizing )
|
|
// return;
|
|
//reset the current sticky selector
|
|
self._setStickySelector();
|
|
|
|
if ( self.hasStickyCandidate() ) {
|
|
self.stickyMenuDown( self.scrollPosition() < self.stickyHeaderThreshold , { fast : true } ).done( function() {
|
|
czrapp.$_header.css( 'height' , '' ).removeClass( 'fixed-header-on' );
|
|
if ( self.hasStickyCandidate() ) {
|
|
czrapp.$_header.css( 'height' , czrapp.$_header.height() ).addClass( 'fixed-header-on' );
|
|
}
|
|
});
|
|
} else {
|
|
self.stickyMenuDown( false ).done( function() {
|
|
$('#header').css( 'padding-top', '' );
|
|
});
|
|
}
|
|
|
|
//Adjust padding top if desktop sticky
|
|
if ( ! self._isMobile() ) {
|
|
self._adjustDesktopTopNavPaddingTop();
|
|
} else {
|
|
$('.full-width.topbar-enabled #header').css( 'padding-top', '' );
|
|
//Make sure the transform property is reset when swithing from desktop to mobile on resize
|
|
self._mayBeresetTopPosition();
|
|
}
|
|
} );//resize();
|
|
|
|
|
|
/*-----------------------------------------------------
|
|
* INITIAL ACTIONS
|
|
------------------------------------------------------*/
|
|
//Set initial sticky selector
|
|
self._setStickySelector();
|
|
|
|
|
|
//set fixed-header-on if is desktop because menu is already set to fixed position, we want to have the animation from the start
|
|
// + Adjust padding top if desktop sticky
|
|
if ( ! self._isMobile() && self.hasStickyCandidate() ) {
|
|
self._adjustDesktopTopNavPaddingTop();
|
|
}
|
|
|
|
},//stickify
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------
|
|
* STICKIFY HELPERS
|
|
------------------------------------------------------*/
|
|
//@return void()
|
|
//Is fired on first load and on resize
|
|
//set the currentStickySelector observable Value()
|
|
_setStickySelector : function() {
|
|
var self = this,
|
|
stickyCandidatesMap = {
|
|
'only screen and (max-width: 719px)' : {
|
|
selector : 'mobile-sticky',
|
|
isOn : HUParams.sbStickyUserSettings && HUParams.menuStickyUserSettings.mobile
|
|
},
|
|
'only screen and (min-width: 720px)' : {
|
|
selector : 'desktop-sticky',
|
|
isOn : HUParams.sbStickyUserSettings && HUParams.menuStickyUserSettings.desktop
|
|
},
|
|
},
|
|
_match_ = false;
|
|
|
|
// self.currentStickySelector = self.currentStickySelector || new czrapp.Value('');
|
|
_.each( stickyCandidatesMap, function( _params, _layout ) {
|
|
if ( _.isFunction( window.matchMedia ) && matchMedia( _layout ).matches && _params.isOn ) {
|
|
_match_ = [ '.nav-container', _params.selector ].join('.');
|
|
}
|
|
});
|
|
self.currentStickySelector( _match_ );
|
|
},
|
|
|
|
|
|
//This is specific to Hueman
|
|
_adjustDesktopTopNavPaddingTop : function() {
|
|
var self = this;
|
|
if ( ! self._isMobile() && self.hasStickyCandidate() ) {
|
|
$('.full-width.topbar-enabled #header').css( 'padding-top', czrapp.$_header.find( self.currentStickySelector() ).outerHeight() );
|
|
} else {
|
|
$('#header').css( 'padding-top', '' );
|
|
}
|
|
},
|
|
|
|
//RESET MOBILE HEADER TOP POSITION
|
|
//@return void()
|
|
//Make sure the header is visible when close to the top
|
|
//Fired on each 'scrolling-finished' <=> user has not scrolled during 250 ms
|
|
//+ 'up' == self.scrollDirection()
|
|
_mayBeresetTopPosition : function() {
|
|
var self = this, $menu_wrapper = self.stickyMenuWrapper;
|
|
//Bail if we are scrolling up
|
|
if ( 'up' != self.scrollDirection() )
|
|
return;
|
|
//Bail if no menu wrapper
|
|
//Or if we are already after the threshold
|
|
//Or if we are scrolling down
|
|
if ( ! $menu_wrapper.length )
|
|
return;
|
|
|
|
if ( self.scrollPosition() >= self.stickyHeaderThreshold )
|
|
return;
|
|
|
|
if ( ! self._isMobile() ) {
|
|
self._adjustDesktopTopNavPaddingTop();
|
|
}
|
|
|
|
//Always add this class => make sure the transition is smooth
|
|
//czrapp.$_header.addClass( 'fixed-header-on' );
|
|
self.stickyMenuDown( true, { force : true, fast : true } ).done( function() {
|
|
self.stickyHeaderAnimating( true );
|
|
( function() {
|
|
return $.Deferred( function() {
|
|
var dfd = this;
|
|
_.delay( function() {
|
|
if ( 'up' == self.scrollDirection() && self.scrollPosition() < 10) {
|
|
$menu_wrapper.css({
|
|
'-webkit-transform': '', /* Safari and Chrome */
|
|
'-moz-transform': '', /* Firefox */
|
|
'-ms-transform': '', /* IE 9 */
|
|
'-o-transform': '', /* Opera */
|
|
transform: ''
|
|
});
|
|
}
|
|
self.stickyHeaderAnimating( false );
|
|
dfd.resolve();
|
|
}, 10 );
|
|
}).promise();
|
|
} )().done( function() { });
|
|
});
|
|
},
|
|
|
|
|
|
//args = { direction : up / down , force : false, menu_wrapper : $ element, fast : false }
|
|
_animate : function( args ) {
|
|
args = _.extend(
|
|
{
|
|
direction : 'down',
|
|
force : false,
|
|
menu_wrapper : {},
|
|
fast : false
|
|
},
|
|
args || {}
|
|
);
|
|
var dfd = $.Deferred(),
|
|
self = this,
|
|
$menu_wrapper = ! args.menu_wrapper.length ? czrapp.$_header.find( self.currentStickySelector() ) : args.menu_wrapper,
|
|
_startPosition = self.scrollPosition(),
|
|
_endPosition = _startPosition;
|
|
|
|
//Bail here if we are still animating or if we don't have a menu element
|
|
if ( ! $menu_wrapper.length )
|
|
return;
|
|
|
|
if ( ! czrapp.$_header.hasClass( 'fixed-header-on' ) ) {
|
|
czrapp.$_header.addClass( 'fixed-header-on' );
|
|
}
|
|
var _do = function() {
|
|
var translateYUp = $menu_wrapper.outerHeight(),
|
|
translateYDown = 0,
|
|
_translate;
|
|
|
|
if ( args.fast ) {
|
|
$menu_wrapper.addClass('fast');
|
|
}
|
|
//Handle the specific case of user logged in ( wpadmin bar length not false ) and previewing website with a mobile device < 600 px
|
|
//=> @media screen and (max-width: 600px)
|
|
// admin-bar.css?ver=4.7.3:1097
|
|
// #wpadminbar {
|
|
// position: absolute;
|
|
// }
|
|
if ( _.isFunction( window.matchMedia ) && matchMedia( 'screen and (max-width: 600px)' ).matches && 1 == czrapp.$_wpadminbar.length ) {
|
|
//translateYUp = translateYUp + czrapp.$_wpadminbar.outerHeight();
|
|
translateYDown = translateYDown - $menu_wrapper.outerHeight();
|
|
}
|
|
_translate = 'up' == args.direction ? 'translate(0px, -' + translateYUp + 'px)' : 'translate(0px, -' + translateYDown + 'px)';
|
|
self.stickyHeaderAnimating( true );
|
|
self.stickyHeaderAnimationDirection = args.direction;
|
|
$menu_wrapper.toggleClass( 'sticky-visible', 'down' == args.direction );
|
|
|
|
$menu_wrapper.css({
|
|
//transform: 'up' == args.direction ? 'translate3d(0px, -' + _height + 'px, 0px)' : 'translate3d(0px, 0px, 0px)'
|
|
'-webkit-transform': _translate, /* Safari and Chrome */
|
|
'-moz-transform': _translate, /* Firefox */
|
|
'-ms-transform': _translate, /* IE 9 */
|
|
'-o-transform': _translate, /* Opera */
|
|
transform: _translate
|
|
});
|
|
|
|
_.delay( function() {
|
|
//Say it ain't so
|
|
self.stickyHeaderAnimating( false );
|
|
if ( args.fast ) {
|
|
$menu_wrapper.removeClass('fast');
|
|
}
|
|
dfd.resolve();
|
|
}, args.fast ? 100 : 350 );
|
|
};//_do
|
|
|
|
_.delay( function() {
|
|
//Is the menu expanded ?
|
|
var sticky_menu_id = _.isString( $menu_wrapper.attr('data-menu-id') ) ? $menu_wrapper.attr('data-menu-id') : '';
|
|
if ( czrapp.userXP.mobileMenu.has( sticky_menu_id ) ) {
|
|
czrapp.userXP.mobileMenu( sticky_menu_id )( 'collapsed' ).done( function() {
|
|
_do();
|
|
});
|
|
} else {
|
|
_do();
|
|
}
|
|
}, 50 );
|
|
return dfd.promise();
|
|
}
|
|
};//_methods{}
|
|
|
|
czrapp.methods.UserXP = czrapp.methods.UserXP || {};
|
|
$.extend( czrapp.methods.UserXP , _methods );
|
|
|
|
})(jQuery, czrapp);var czrapp = czrapp || {};
|
|
|
|
/************************************************
|
|
* USER EXPERIENCE SUB CLASS
|
|
*************************************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
/* Sidebar stick and collapse
|
|
/* ------------------------------------ */
|
|
//What does sidebarToLife ?
|
|
//Its job is to listen to both user actions and czrapp events and react :
|
|
//1) toggle sidebar expansion/collapse on user click, on resize
|
|
//2) make sidebars stick on user scroll
|
|
//3) translate vertically when czrapp sticky menu (desktop or mobile) gets animated
|
|
//
|
|
//For performance reasons, the scroll event is bound with a minimal and throttled ( 10 ms ) function that does extremely simple maths.
|
|
//=> the scroll action modifies each sidebar stickyness state independently ( @see _setStickyness method ). Then this state is listened to in each sb instance.
|
|
//Each sb is an observable instance, holding various observable state values.
|
|
//
|
|
//A sidebar instance can take two states : expanded or collapsed : czrapp.sidebars('s1')() = 'collapsed' or 'expanded'
|
|
//Each sidebar instance holds a stickyness state that can take 3 values :
|
|
// 'top' ( before main wrapper), => the sidebar scroll like the page
|
|
// 'between' ( after main wrapper but before the bottom break point, this is when the sidebar position is 'fixed'), => the sidebar is fixed
|
|
// 'bottom' ( after bottom break point ) => the sidebar scroll again like the page
|
|
//
|
|
//Each sidebar is instantiated with a set of properties written as 'data-...' selectors
|
|
//
|
|
//Due to the specificity of the Hueman theme sidebars, which are expandable and candidates to various positionning option ( like content right + 2 sidebars left ), the fixed left positionning is a bit complex to calculate and is highly tied to the CSS part
|
|
//=> @see how the negative margin are defined in particular.
|
|
//
|
|
//Browser Hack : transitionning to a fixed position is not well handled by ios devices @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
|
|
//That's why we add the translateZ(0px) dynamically in js and statically in the css
|
|
//
|
|
// We can stickify if :
|
|
// the user option is checked : 'desktop-sticky-sb'
|
|
// we have a mainWrapper and a mainContent container. //$('.main', '#wrapper') && $('.main', '#wrapper').find('.content')
|
|
// the viewport is wider than 480px
|
|
//
|
|
// Losing stickyfiability ( on resize when going < 480 px ) will trigger a stickyness reset of the css class and style attributes for the sidebar.
|
|
sidebarToLife : function() {
|
|
var self = this;
|
|
self.sidebars = new czrapp.Values();
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// APP EVENTS REACT
|
|
//MAX COLUMN HEIGHT
|
|
//store the max column height
|
|
//=> will be updated on dom ready (now), resize, stickify, sidebar expansion
|
|
self.maxColumnHeight = new czrapp.Value( self._getMaxColumnHeight() );
|
|
//=> refresh the stickyness state here with new maths
|
|
self.maxColumnHeight.bind( function(to) {
|
|
self.sidebars.each( function( _sb_ ) {
|
|
if ( _sb_.isStickyfiable() ) {
|
|
_sb_._setStickyness();
|
|
}
|
|
});
|
|
});
|
|
|
|
//STICKYNESS
|
|
self.sidebars.stickyness = new czrapp.Value( {} );
|
|
//@param state = { s1 : state, s2 : state }
|
|
//Listen to the global stickyness state to set the oveflow of the main content.
|
|
//=> the goal here is to avoid the sidebar content being displayed outside of the main wrapper container when scrolled after top and expanded
|
|
//=> the overflow must be reset in all other case, if not it will hide the social tooltips on tops when hovering the social links
|
|
//Each sb stickyness can take the following state : 'top', 'bottom', 'between'
|
|
self.sidebars.stickyness.bind( function( state ) {
|
|
var _isAfterTop = true;
|
|
self.sidebars.each( function( _sb_ ) {
|
|
_isAfterTop = 'top' != _sb_.stickyness() && _isAfterTop;
|
|
});
|
|
czrapp.$_mainWrapper.css({ overflow : _isAfterTop ? 'hidden' : '' });
|
|
});
|
|
|
|
//HEADER STICKY MENU REACT
|
|
//Listen to sticky menu => translate the sb vertically
|
|
//=> we listen to animating instead of stickyMenuDown which returns a promise when animation is done, with a 350ms delay
|
|
czrapp.ready.then( function() {
|
|
czrapp.userXP.stickyHeaderAnimating.bind( function( animating ) {
|
|
if ( ! self._isStickyOptionOn() )
|
|
return;
|
|
self.sidebars.each( function( _sb_ ) {
|
|
_sb_._translateSbContent( czrapp.userXP.stickyMenuDown() );
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// BROWSER EVENTS REACT
|
|
/// SCROLL
|
|
//Set the stickyness state on scroll
|
|
//=> only if the user option is checked to not add another scroll listener for nothing
|
|
if ( czrapp.userXP._isStickyOptionOn() ) {
|
|
czrapp.$_window.scroll( _.throttle( function() {
|
|
self.sidebars.each( function( _sb_ ) {
|
|
if ( _sb_.isStickyfiable() ) {
|
|
_sb_._setStickyness();
|
|
}
|
|
});
|
|
}, 10 ) );//window.scroll() throttled
|
|
}
|
|
|
|
//SLOW THROTTLED SCROLL LISTENER TO SET THE MAX COLUMS HEIGHT AND STICKIFY WHEN EXPANDED
|
|
//Whithout this listener, the max column height might not be refreshed on time ( )
|
|
//=> Adresses the potential problems of
|
|
czrapp.$_window.scroll( _.throttle( function() {
|
|
czrapp.userXP.maxColumnHeight( czrapp.userXP._getMaxColumnHeight() );
|
|
|
|
//always refresh live when expanded
|
|
self.sidebars.each( function( _sb_ ) {
|
|
if ( _sb_.isStickyfiable() && 'expanded' == _sb_() ) {
|
|
_sb_._stickify();
|
|
}
|
|
});
|
|
}, 300 ) );//window.scroll() throttled
|
|
|
|
//RESIZE
|
|
//Collapse on resize
|
|
czrapp.userXP.windowWidth.bind( function( width ) {
|
|
//update the max column height
|
|
czrapp.userXP.maxColumnHeight( czrapp.userXP._getMaxColumnHeight() );
|
|
|
|
//update the stickyfiability of each sb
|
|
//stickify if needed
|
|
self.sidebars.each( function( _sb_ ) {
|
|
_sb_.isStickyfiable( _sb_._isStickyfiable() );
|
|
_sb_( 'collapsed' ).done( function() {
|
|
_sb_._stickify();
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// DOM aware sidebar instantiation
|
|
$( '.s1, .s2', '#wrapper .main' ).each( function( index ) {
|
|
if ( 1 != $(this).length )
|
|
return;
|
|
|
|
var $container = $(this),
|
|
_id = $container.attr( 'data-sb-id'),
|
|
_position = $container.attr( 'data-position'),
|
|
_userLayout = $container.attr( 'data-layout'),
|
|
ctor;
|
|
|
|
if ( ! _.isString( _position ) || ! _.isString( _userLayout ) || ! _.isString( _id ) ) {
|
|
throw new Error( 'Missing id, position or layout for sidebar ' + _id );
|
|
}
|
|
|
|
if ( 1 != $container.find('.sidebar-content').length || 1 != $container.find('.sidebar-toggle').length ) {
|
|
throw new Error( 'Missing content or toggle button for sidebar ' + _id );
|
|
}
|
|
ctor = czrapp.Value.extend( self.SidebarCTOR );
|
|
|
|
//do instantiate
|
|
self.sidebars.add( _id, new ctor( _id, {
|
|
container : $container,
|
|
position : _position,//can take left, middle-left, middle-right, right
|
|
layout : _userLayout,//can take : col-2cr, co-2cl, col-3cr, col-3cm, col-3cl
|
|
extended_width : 's1' == _id ? 340 : 260//<= hard coded in the base CSS, could be made dynamic in the future
|
|
}));
|
|
});//$( '.s1, .s2', '#wrapper' ).each()
|
|
|
|
},
|
|
|
|
|
|
/* UTILITIES
|
|
/* ------------------------------------ */
|
|
//@return bool
|
|
//HUParams.sbStickyUserSettings = { desktop : bool, mobile : bool }
|
|
_isStickyOptionOn : function() {
|
|
var _dbOpt;
|
|
if ( HUParams.sbStickyUserSettings && _.isObject( HUParams.sbStickyUserSettings ) ) {
|
|
_dbOpt = _.extend( { desktop : false, mobile : false }, HUParams.sbStickyUserSettings );
|
|
return czrapp.userXP._isMobile() ? ( _dbOpt.mobile || false ) : ( _dbOpt.desktop || false );
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
//@return number
|
|
_getMaxColumnHeight : function() {
|
|
var _hs = [];
|
|
//loop on the sb instances to get their container height
|
|
//skip the sb sticky and expanded => those will inherit the height of the content or the other sb
|
|
czrapp.userXP.sidebars.each( function( _sb_ ) {
|
|
_hs.push( _sb_._getVisibleHeight() );
|
|
});
|
|
$('.content', '#wrapper .main').each( function() {
|
|
if ( 1 == $(this).length )
|
|
_hs.push( $(this).outerHeight() );
|
|
});
|
|
return Math.max.apply(null, _hs );
|
|
},
|
|
|
|
|
|
|
|
/* SB Constructor
|
|
/* ------------------------------------ */
|
|
SidebarCTOR : {
|
|
//constructor params :
|
|
//{
|
|
// container : $container,
|
|
// position : _position, <= get from data-position attribute, mandatory
|
|
// layout : col-3cm, col-3cr, etc...
|
|
// extended_width : 's1' == _id ? '340px' : '260px'
|
|
//}
|
|
initialize : function( id, options ) {
|
|
if ( ! $.isReady ) {
|
|
throw new Error( 'Sidebars must be instantiated on DOM ready' );
|
|
}
|
|
var sb = this;
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// SETUP PROPERTIES AND OBSERVABLE VALUES
|
|
//assign the id
|
|
sb.id = id;
|
|
|
|
//write the options as properties
|
|
$.extend( sb, options || {} );
|
|
|
|
sb.button_selectors = '.sidebar-toggle';
|
|
sb.button = sb.container.find( sb.button_selectors );
|
|
|
|
czrapp.Value.prototype.initialize.call( sb, null, options );
|
|
|
|
//declare an observable sticky state
|
|
sb.stickyness = new czrapp.Value();//<= will be set to a string on scroll : 'top', 'between', 'bottom'
|
|
//store the animation state
|
|
sb.animating = new czrapp.Value( false );
|
|
//store the styckifiability : updated on resize
|
|
//=> depends of self._isStickyOptionOn(), existence of content wrapper, and media width should be > 480px
|
|
sb.isStickyfiable = new czrapp.Value( sb._isStickyfiable() );
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// SETUP USER ACTIONS LISTENERS
|
|
//Listen to user actions
|
|
czrapp.setupDOMListeners(
|
|
[
|
|
{
|
|
trigger : 'click keydown',
|
|
selector : sb.button_selectors,
|
|
actions : function() {
|
|
var sb = this;
|
|
//collapse the other expanded
|
|
czrapp.userXP.sidebars.each( function( _sb_ ) {
|
|
_sb_( _sb_.id == sb.id ? _sb_() : 'collapsed' );
|
|
});
|
|
//toggle expansion of this one
|
|
sb( 'collapsed' == sb() ? 'expanded' : 'collapsed' );
|
|
}
|
|
},
|
|
{
|
|
trigger : 'mouseenter',
|
|
selector : sb.button_selectors,
|
|
actions : function() {
|
|
this.button.addClass( 'hovering' );
|
|
}
|
|
|
|
},
|
|
{
|
|
trigger : 'mouseleave',
|
|
selector : sb.button_selectors,
|
|
actions : function() {
|
|
this.button.removeClass( 'hovering' );
|
|
}
|
|
|
|
}
|
|
],//actions to execute
|
|
{ dom_el: sb.container },//dom scope
|
|
sb //instance where to look for the cb methods
|
|
);
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// INITIAL ACTIONS
|
|
//set initial sidebar state
|
|
sb( 'collapsed' );
|
|
|
|
//PREPARE THE SIDEBAR CONTAINER
|
|
//When a dom element position changes to 'fixed' positioning, ios devices needs the element to be handled faster by the GPU
|
|
//=> adding translateZ(0) to the element fixes the problem
|
|
sb.container.css({
|
|
'-webkit-transform': 'translateZ(0)', //Safari and Chrome
|
|
'-moz-transform': 'translateZ(0)', /* Firefox */
|
|
'-ms-transform': 'translateZ(0)', /* IE 9 */
|
|
'-o-transform': 'translateZ(0)', /* Opera */
|
|
transform: 'translateZ(0)'
|
|
});
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// APP EVENTS
|
|
//SIDEBAR REACT
|
|
//Listen to sidebar state ( expandability )
|
|
//$('body').addClass( id +'-collapse').addClass( id +'-collapse');
|
|
//the deferred promise() returned value is only here to allow sequential actions in the future
|
|
//like, expand and then do this or that
|
|
sb.bind( function( state ) {
|
|
return $.Deferred( function() {
|
|
var dfd = this;
|
|
sb._toggleSidebar()
|
|
.done( function( state ){
|
|
sb.button.toggleClass( 'hovering', 'expanded' == state );
|
|
dfd.resolve();
|
|
});
|
|
}).promise();
|
|
}, { deferred : true } );
|
|
|
|
|
|
//Validate the sb change
|
|
//animate : make sure we restrict actions when : 'only screen and (min-width: 480px) and (max-width: 1200px)'
|
|
sb.validate = function( value ) {
|
|
return this._isExpandable() ? value : 'collapsed';
|
|
};
|
|
|
|
//STICKY STATE REACT
|
|
//Listen to stickify state
|
|
//@param : 'top', 'bottom', 'between'
|
|
sb.stickyness.bind( function( to, from ) {
|
|
//Inform the global stickyness of the change
|
|
_stckness = $.extend( {}, true, _.isObject( czrapp.userXP.sidebars.stickyness() ) ? czrapp.userXP.sidebars.stickyness() : {} );
|
|
_stckness[ sb.id ] = to;
|
|
czrapp.userXP.sidebars.stickyness( _stckness );
|
|
|
|
//skip the sticky state 'between' if the sb is the highest column
|
|
var _state = to;
|
|
if ( sb._isHighestColumn() && 'between' == _state ) {
|
|
switch( from ) {
|
|
case 'top' :
|
|
_state = 'bottom';
|
|
break;
|
|
case 'bottom' :
|
|
_state = 'top';
|
|
break;
|
|
}
|
|
}
|
|
sb._stickify( _state );
|
|
});
|
|
|
|
//STICKYFIABILITY REACT
|
|
//=> reset stickyness css added to sb if becoming not stickyfiable on resize
|
|
sb.isStickyfiable.bind( function( isStickyfiable ) {
|
|
if ( ! isStickyfiable )
|
|
sb._resetStickyness();
|
|
});
|
|
},//initialize
|
|
|
|
|
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// STICKYNESS
|
|
/////////////////////////////////////////////////////////////////////////
|
|
//@return void()
|
|
//update the stickyness state sb.stickyness() according to the current scroll position and columns height
|
|
//the stickyness can take three states : top, between and bottom
|
|
_setStickyness : function() {
|
|
var sb = this;
|
|
//true === matchMedia( 'only screen and (min-width: 480px)' ).matches
|
|
if ( ! sb.isStickyfiable() )
|
|
return;
|
|
// For contentBottomToTop, we use the maximum column height value
|
|
// => we can be in a collapsed scenario where a sidebar's height will become higher than the content column height when expanded.
|
|
var startStickingY = czrapp.$_mainWrapper.offset().top,
|
|
contentBottomToTop = startStickingY + czrapp.userXP.maxColumnHeight(),//czrapp.userXP._getMaxColumnHeight()
|
|
topSpacing = 0,//_setTopSpacing();
|
|
scrollTop = czrapp.$_window.scrollTop(),
|
|
stopStickingY = contentBottomToTop - ( sb.container.outerHeight() + topSpacing );
|
|
|
|
|
|
if ( stopStickingY < 0 )
|
|
return;
|
|
|
|
//When the sidebar is expanded ( can only happen below 1200px viewport ), ot it has to be sticky
|
|
//=> in this case, we skip this check with ! expanded
|
|
sb.stickyness( ( function() {
|
|
if ( scrollTop >= stopStickingY ) {
|
|
// //the top value can be negative in this case, if the sidebar is content is higher than the sidebar which is higher than the viewport
|
|
return 'bottom';
|
|
} else if ( scrollTop >= startStickingY ) {
|
|
//The sidebar can be expanded, in this case, its height will be adapted on scroll
|
|
//We are sticky now
|
|
return 'between';
|
|
} else if( scrollTop < startStickingY ) {
|
|
return 'top';
|
|
}
|
|
})() );
|
|
},
|
|
|
|
//mostly designed to react on stickyness() changes
|
|
// but can be called statically to ajust offset top
|
|
//@return void()
|
|
//@param stickyness : top, between, bottom
|
|
_stickify : function( stickyness ) {
|
|
var sb = this;
|
|
if ( ! sb.isStickyfiable() )
|
|
return;
|
|
stickyness = stickyness || sb.stickyness();
|
|
|
|
//update the max column height
|
|
czrapp.userXP.maxColumnHeight( czrapp.userXP._getMaxColumnHeight(), { silent : true } );//<= we update it silently here to avoid infinite looping => the maxColumnHeight always triggers a _stickify action in other contexts
|
|
|
|
// For contentBottomToTop, we use the maximum column height value
|
|
// => we can be in a collapsed scenario where a sidebar's height will become higher than the content column height when expanded.
|
|
var contentBottomToTop = czrapp.$_mainWrapper.offset().top + czrapp.userXP.maxColumnHeight(),
|
|
expanded = 'expanded' == sb();
|
|
|
|
switch( stickyness ) {
|
|
case 'top' :
|
|
sb._resetStickyness();//remove sticky class and dynamic style
|
|
//console.log('ONE : scrollTop < sb.container.offset().top');
|
|
break;
|
|
|
|
case 'between' :
|
|
sb.container.addClass( 'sticky' );
|
|
// $.when( sb.container.addClass( 'sticky' ) ).done( function() {
|
|
// sb._translateSbContent();
|
|
// });
|
|
sb._translateSbContent();
|
|
|
|
sb.container.css({
|
|
position : 'fixed',
|
|
top : '0px',
|
|
//'min-height' : expanded ? czrapp.$_window.height() : '',
|
|
height : expanded ? Math.max( sb._getInnerHeight(), czrapp.$_window.height() ) + 'px' : '',
|
|
left : sb._getStickyXOffset(),//<= depdendant of the sidebar position : left, middle-left, middle-right, right
|
|
// 'margin-left' : 0,
|
|
// 'margin-right' : 0,
|
|
'padding-bottom' : expanded ? 0 : '',
|
|
});
|
|
|
|
//czrapp._printLog('STYLE ? ' + sb.container.attr( 'style' ) );
|
|
//console.log('TWO STICKY : scrollTop >= $mainWrapper.offset().top ' );
|
|
break;
|
|
|
|
case 'bottom' :
|
|
sb._resetStickyness();//remove sticky class and dynamic style
|
|
//the top value can be negative in this case, if the sidebar is content is higher than the sidebar which is higher than the viewport
|
|
if ( ! sb._isHighestColumn() ) {
|
|
sb.container.offset( { top: contentBottomToTop - sb.container.outerHeight() } );
|
|
}
|
|
//console.log('THREE : scrollTop > stopStickingY');
|
|
break;
|
|
}//switch()
|
|
},//stickify
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// EXPANSION / COLLAPSE
|
|
/////////////////////////////////////////////////////////////////////////
|
|
//@react to sb() state change
|
|
//its job is to dumbly expand or collapse according to the current instance state
|
|
//@return promise()
|
|
_toggleSidebar : function() {
|
|
var sb = this,
|
|
expanded = 'expanded' == sb();
|
|
return $.Deferred( function() {
|
|
var _dfd_ = this;
|
|
|
|
var _transX,
|
|
_marginRight,
|
|
_marginLeft,
|
|
_translate;
|
|
( function() {
|
|
return $.Deferred( function() {
|
|
var _dfd = this;
|
|
|
|
sb.animating( true );
|
|
czrapp.$_body
|
|
.toggleClass('sidebar-expanded', expanded )
|
|
.toggleClass('sidebar-expanding', expanded )
|
|
.toggleClass('sidebar-collapsing', ! expanded );
|
|
sb.container
|
|
.toggleClass( 'expanding', expanded )
|
|
.toggleClass( 'collapsing', ! expanded );
|
|
|
|
//PREPARE SB CONTAINER CSS
|
|
//If the sidebar is sticky, we need to translate it while setting the width
|
|
//Set Horizontal left position when 'fixed'
|
|
switch( sb.position ) {
|
|
case 'right' :
|
|
_transX = - ( sb.extended_width - 50 );
|
|
if ( 'col-3cl' == sb.layout ) {
|
|
_marginRight = expanded ? - sb.extended_width - 50 : -100;
|
|
} else {
|
|
_marginRight = expanded ? - sb.extended_width : -50;
|
|
}
|
|
break;
|
|
case 'middle-right' :
|
|
_transX = - ( sb.extended_width - 50 );
|
|
_marginRight = expanded ? - sb.extended_width : -50;
|
|
// if ( 'col-3cl' == sb.layout ) {
|
|
// _marginLeft = expanded ? - sb.extended_width - 50 : -100;
|
|
// } else {
|
|
|
|
// }
|
|
break;
|
|
case 'middle-left' :
|
|
_transX = sb.extended_width - 50;
|
|
_marginLeft = expanded ? - sb.extended_width : -50;
|
|
break;
|
|
case 'left' :
|
|
_transX = sb.extended_width - 50;
|
|
if ( 'col-3cr' == sb.layout ) {
|
|
_marginLeft = expanded ? - sb.extended_width - 50 : -100;
|
|
} else {
|
|
_marginLeft = expanded ? - sb.extended_width : -50;
|
|
}
|
|
break;
|
|
}
|
|
|
|
_transX = expanded ? _transX : 0;
|
|
_translate = 'translate3d(' + _transX + 'px,0px,0px)';
|
|
|
|
//APPLY SB CONTAINER CSS
|
|
sb.container.css({
|
|
width : expanded ? sb.extended_width + 'px' : '50px',
|
|
'margin-right' : _.isEmpty( _marginRight + '' ) ? '' : _marginRight + 'px',
|
|
'margin-left' : _.isEmpty( _marginLeft + '' ) ? '' : _marginLeft + 'px',
|
|
height : expanded ? sb._getExpandedHeight() + 'px' : sb.container.height() + 'px',
|
|
'-webkit-transform': _translate, /* Safari and Chrome */
|
|
'-moz-transform': _translate, /* Firefox */
|
|
'-ms-transform': _translate, /* IE 9 */
|
|
'-o-transform': _translate, /* Opera */
|
|
transform: _translate
|
|
});
|
|
|
|
czrapp.$_mainContent.css({
|
|
'-webkit-transform': _translate, /* Safari and Chrome */
|
|
'-moz-transform': _translate, /* Firefox */
|
|
'-ms-transform': _translate, /* IE 9 */
|
|
'-o-transform': _translate, /* Opera */
|
|
transform: _translate,
|
|
});
|
|
|
|
//OPACITY
|
|
sb.container.find('.sidebar-content').css('opacity', expanded ? 0 : 1 );
|
|
sb.container.find('.icon-sidebar-toggle').css('opacity', 0);
|
|
|
|
//DO
|
|
_.delay( function() {
|
|
_dfd.resolve();
|
|
}, 350 );//transition: width .35s ease-in-out;
|
|
}).promise();
|
|
})().done( function() {
|
|
sb.container.toggleClass( 'expanded', expanded ).toggleClass('collapsed', ! expanded );
|
|
sb.container
|
|
.removeClass( 'expanding')
|
|
.removeClass( 'collapsing')
|
|
.css({
|
|
width : expanded ? sb.extended_width + 'px' : '',
|
|
'margin-right' : '',
|
|
'margin-left' : '',
|
|
height : expanded ? sb._getExpandedHeight() + 'px' : '',
|
|
//height : '',
|
|
//'min-height' : expanded ? czrapp.$_window.height() : '',
|
|
});
|
|
|
|
//END SIDEBAR ANIMATION + CLEAN CLASSES
|
|
sb.container.find('.icon-sidebar-toggle').css('opacity', 1);
|
|
|
|
//sidebar content
|
|
sb.container.find('.sidebar-content')
|
|
.css({
|
|
opacity : '',
|
|
//height : expanded ? 'calc( 100% - 60px )' : ''//<= 60px is the height of the toggle arrow bar
|
|
});
|
|
sb.animating( false );
|
|
//Clean body classes
|
|
czrapp.$_body.removeClass('sidebar-expanding').removeClass('sidebar-collapsing');
|
|
|
|
//update the max column height
|
|
czrapp.userXP.maxColumnHeight( czrapp.userXP._getMaxColumnHeight() );
|
|
|
|
//adjust offset top if expanded when sticky and close to bottom:
|
|
if ( sb.isStickyfiable() ) {
|
|
sb._setStickyness();
|
|
}
|
|
_dfd_.resolve();
|
|
|
|
//PUSH THE CONTENT ON THE LEFT OR ON THE RIGHT
|
|
// ( function() {
|
|
// return $.Deferred( function() {
|
|
// var _dfd = this,
|
|
// _pushDirection = -1 == sb.position.indexOf( 'right' ) ? 'right' : 'left';
|
|
// //Make sure the content column looks good when pushed left or right
|
|
// czrapp.$_mainContent.css({ width: expanded ? 'calc( 100% - ' + ( Math.abs( _transX ) - 1 ) + 'px )' : ''} );
|
|
// czrapp.$_mainContent.css( 'padding-' + _pushDirection , expanded ? ( Math.abs( _transX ) - 1 ) : '' );
|
|
// _.delay( function() {
|
|
// _dfd.resolve();
|
|
// }, 350 );//transition: transform, .35s ease;
|
|
// }).promise();
|
|
// } )().done( function() {
|
|
// //update the max column height
|
|
// czrapp.userXP.maxColumnHeight( czrapp.userXP._getMaxColumnHeight() );
|
|
|
|
// //adjust offset top if expanded when sticky and close to bottom:
|
|
// if ( sb.isStickyfiable() ) {
|
|
// sb._setStickyness();
|
|
// }
|
|
// _dfd_.resolve();
|
|
// });
|
|
});
|
|
}).promise();
|
|
},//toggleSidebar
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// HELPERS FOR STICKYNESS AND EXPANSION
|
|
/////////////////////////////////////////////////////////////////////////
|
|
//@return void()
|
|
//reset style and class that turn the sidebar sticky
|
|
_resetStickyness : function() {
|
|
var sb = this;
|
|
sb.container.removeClass('sticky');
|
|
// $.when( sb.container.removeClass('sticky') ).done( function() {
|
|
// sb._translateSbContent();
|
|
// });
|
|
sb.container
|
|
//.offset( { top: $mainWrapper.offset().top } )
|
|
.css({
|
|
position : '',
|
|
top : '',
|
|
left : '',
|
|
right : '',
|
|
'margin-left' : '',
|
|
'margin-right' : '',
|
|
'padding-bottom' : '',
|
|
'min-height' : ''
|
|
});
|
|
if ( 'expanded' != sb() ) {
|
|
sb.container.css( 'height' , '' );
|
|
}
|
|
sb._translateSbContent();
|
|
},
|
|
|
|
//translate content vertically to follow the sticky menu animation
|
|
//skip if this sidebar is the highest column
|
|
//@return void()
|
|
_translateSbContent : function( stickyMenuDown ) {
|
|
if ( this._isHighestColumn() )
|
|
return;
|
|
stickyMenuDown = stickyMenuDown || czrapp.userXP.stickyMenuDown();
|
|
var sb = this,
|
|
translateYUp = 0,
|
|
translateYDown = 0,
|
|
_translate = '',
|
|
_stickyMenuWrapper = czrapp.userXP.stickyMenuWrapper,//@stored dynamically in userXP stickify
|
|
_stickyMenuHeight = 1 == _stickyMenuWrapper.length ? _stickyMenuWrapper.height() : 50;
|
|
|
|
//Handle the specific case of user logged in ( wpadmin bar length not false ) and previewing website with a mobile device < 600 px
|
|
//=> @media screen and (max-width: 600px)
|
|
// admin-bar.css?ver=4.7.3:1097
|
|
// #wpadminbar {
|
|
// position: absolute;
|
|
// }
|
|
if ( 'between' == sb.stickyness() ) {
|
|
if ( 1 == czrapp.$_wpadminbar.length && czrapp.userXP.hasStickyCandidate() ) {
|
|
translateYUp = translateYUp + czrapp.$_wpadminbar.outerHeight();
|
|
translateYDown = translateYDown + czrapp.$_wpadminbar.outerHeight();
|
|
}
|
|
// if ( stickyMenuDown && _.isFunction( window.matchMedia ) && ! matchMedia( 'screen and (max-width: 600px)' ).matches ) {
|
|
// translateYUp = translateYUp + _stickyMenuHeight;
|
|
// }
|
|
if ( stickyMenuDown && czrapp.userXP.hasStickyCandidate() ) {
|
|
translateYUp = translateYUp + _stickyMenuHeight;
|
|
}
|
|
}
|
|
|
|
_translate = ( stickyMenuDown && 'between' == sb.stickyness() ) ? 'translate(0px, ' + translateYUp + 'px)' : 'translate(0px, ' + translateYDown + 'px)';
|
|
|
|
sb.container.find('.sidebar-content, .sidebar-toggle').css({
|
|
//transform: 'up' == args.direction ? 'translate3d(0px, -' + _height + 'px, 0px)' : 'translate3d(0px, 0px, 0px)'
|
|
'-webkit-transform': _translate, /* Safari and Chrome */
|
|
'-moz-transform': _translate, /* Firefox */
|
|
'-ms-transform': _translate, /* IE 9 */
|
|
'-o-transform': _translate, /* Opera */
|
|
transform: _translate
|
|
});
|
|
},
|
|
|
|
|
|
|
|
//@return a string '' or number + 'px'
|
|
//invoked when sb is sticky
|
|
//only used when sticky;
|
|
_getStickyXOffset : function() {
|
|
var sb = this,
|
|
expanded = 'expanded' == sb(),
|
|
$mainWrapper = $('.main', '#wrapper'),
|
|
$mainContent = $mainWrapper.find('.content'),
|
|
xFixedOffset = '';
|
|
|
|
if ( 'between' != sb.stickyness() )
|
|
return '';
|
|
|
|
//Set Horizontal left position when 'fixed'
|
|
switch( sb.position ) {
|
|
case 'left' :
|
|
if ( expanded ) {
|
|
xFixedOffset = $mainWrapper.offset().left + 50;
|
|
} else {
|
|
xFixedOffset = $mainWrapper.offset().left + sb.container.width();
|
|
}
|
|
if ( 'col-3cr' == sb.layout ) {
|
|
if ( expanded ) {
|
|
xFixedOffset = $mainWrapper.offset().left + czrapp.userXP.sidebars('s2').container.width() + 50;
|
|
} else {
|
|
xFixedOffset = '';
|
|
}
|
|
}
|
|
break;
|
|
case 'middle-left' :
|
|
xFixedOffset = czrapp.userXP.sidebars('s1').container.width() + $mainWrapper.offset().left + 50;
|
|
if ( 'col-3cr' == sb.layout ) {
|
|
if ( expanded ) {
|
|
} else {
|
|
xFixedOffset = '';
|
|
}
|
|
}
|
|
break;
|
|
case 'middle-right' :
|
|
xFixedOffset = $mainWrapper.offset().left + $mainContent.outerWidth();
|
|
break;
|
|
case 'right' :
|
|
if ( expanded ) {
|
|
xFixedOffset = $mainWrapper.offset().left + $mainWrapper.outerWidth() - 50;
|
|
} else {
|
|
xFixedOffset = $mainWrapper.offset().left + $mainWrapper.outerWidth() - sb.container.width();
|
|
}
|
|
break;
|
|
}
|
|
return _.isEmpty( xFixedOffset ) ? xFixedOffset : xFixedOffset + 'px';
|
|
},
|
|
|
|
//invoked in a scenario of sidebar expanded in mobile view : toggle and scroll
|
|
//called before and after expansion
|
|
//@return number
|
|
_getExpandedHeight : function() {
|
|
var sb = this,
|
|
_winHeight = czrapp.$_window.height(),
|
|
_contentBottomToTop = czrapp.$_mainWrapper.offset().top + czrapp.$_mainWrapper.find('.content').outerHeight() - sb.container.offset().top,
|
|
_maxColHeight = czrapp.userXP.maxColumnHeight();
|
|
// //When the sidebar is sticky and expanded
|
|
if ( 'between' == sb.stickyness() ) {
|
|
//if sticky and close to bottom we want the height to be the part that we see from top to bottom of the viewport
|
|
return _contentBottomToTop < _winHeight ? _contentBottomToTop : Math.max( _winHeight, sb._getInnerHeight() );
|
|
} else {
|
|
//return _winHeight > _sbHeight ? _winHeight : _sbHeight;
|
|
//if not sticky, then make sure we are not smaller than the viewport's height
|
|
//return Math.max( _winHeight, _sbHeight > _maxColHeight ? _maxColHeight : _sbHeight );
|
|
return Math.max( _winHeight, sb._getInnerHeight() > _maxColHeight ? _maxColHeight : sb._getInnerHeight() );
|
|
}
|
|
//return Math.max( _winHeight, _sbHeight > _maxColHeight ? _maxColHeight : _sbHeight );
|
|
|
|
|
|
},
|
|
|
|
//@return bool
|
|
_isExpandable : function() {
|
|
return _.isFunction( window.matchMedia ) && matchMedia( 'only screen and (min-width: 480px) and (max-width: 1200px)' ).matches;
|
|
},
|
|
|
|
// We can stickify if :
|
|
// the user option is checked
|
|
// we have a mainWrapper and a mainContent container. //$('.main', '#wrapper') && $('.main', '#wrapper').find('.content')
|
|
// the viewport is wider than 480px
|
|
// @return bool
|
|
_isStickyfiable : function() {
|
|
return czrapp.userXP._isStickyOptionOn() &&
|
|
1 == czrapp.$_mainWrapper.length &&
|
|
1 == czrapp.$_mainContent.length &&
|
|
_.isFunction( window.matchMedia ) && matchMedia( 'only screen and (min-width: 480px)' ).matches;
|
|
},
|
|
|
|
//@return bool
|
|
_isHighestColumn : function() {
|
|
return czrapp.userXP.maxColumnHeight() == this._getInnerHeight();
|
|
},
|
|
|
|
//@return number
|
|
_getInnerHeight : function() {
|
|
return this.container.find('.sidebar-content').height() + this.container.find('.sidebar-toggle').height();
|
|
},
|
|
|
|
//@return number
|
|
_getVisibleHeight : function() {
|
|
return 'expanded' == this() ? this._getInnerHeight() : this.container.height();
|
|
}
|
|
}//SidebarCTOR
|
|
};//_methods{}
|
|
|
|
czrapp.methods.UserXP = czrapp.methods.UserXP || {};
|
|
$.extend( czrapp.methods.UserXP , _methods );
|
|
|
|
})(jQuery, czrapp);var czrapp = czrapp || {};
|
|
|
|
/************************************************
|
|
* USER EXPERIENCE SUB CLASS
|
|
*************************************************/
|
|
(function($, czrapp) {
|
|
var _methods = {
|
|
//outline firefox fix, see https://github.com/presscustomizr/customizr/issues/538
|
|
outline: function() {
|
|
if ( czrapp.$_body.hasClass( 'mozilla' ) && 'function' == typeof( tcOutline ) )
|
|
tcOutline();
|
|
},
|
|
|
|
//SMOOTH SCROLL
|
|
smoothScroll: function() {
|
|
if ( HUParams.SmoothScroll && HUParams.SmoothScroll.Enabled )
|
|
smoothScroll( HUParams.SmoothScroll.Options );
|
|
},
|
|
|
|
|
|
/* Toggle topnav expand
|
|
/* ------------------------------------ */
|
|
topNavToLife : function() {
|
|
var self = this,
|
|
_sel = '.topbar-toggle-down',
|
|
$topbar = $('#nav-topbar.desktop-sticky'),
|
|
$topbarNavWrap = $topbar.find('.nav-wrap');
|
|
|
|
self.topNavExpanded = new czrapp.Value( false );
|
|
if ( 1 != $('#nav-topbar.desktop-sticky').length || 1 != $('#nav-topbar.desktop-sticky').find('.nav-wrap').length )
|
|
return;
|
|
|
|
//Shall we reveal the toggle arrow ?
|
|
// If not mobile :
|
|
//=> on init, on resize and each time the menu is expanded remotely by the app
|
|
var _mayBeToggleArrow = function( force ) {
|
|
$( _sel, $topbar ).css( { display : ( ( $topbarNavWrap.height() > 60 || force ) && ! czrapp.userXP._isMobile() ) ? 'inline-block' : '' } );
|
|
};
|
|
var _updateMaxWidth = function() {
|
|
$topbar.css( { 'max-width' : czrapp.$_window.width() } );
|
|
};
|
|
|
|
//reveal arrow on init, on resize
|
|
//update max width on init, on resize
|
|
_mayBeToggleArrow();
|
|
_updateMaxWidth();
|
|
czrapp.userXP.windowWidth.bind( function() {
|
|
//always update the max-width on resize
|
|
_updateMaxWidth();
|
|
//always update the toglle arraow on resize
|
|
_mayBeToggleArrow();
|
|
czrapp.userXP.topNavExpanded( false );
|
|
});
|
|
|
|
//listen to app event
|
|
//the callback returns a promise to allow sequential actions
|
|
self.topNavExpanded.bind( function( exp, from, params ) {
|
|
params = _.extend( { height : 0 }, params || {} );
|
|
return $.Deferred( function() {
|
|
var _dfd = this,
|
|
_expandHeight = Math.max( $topbarNavWrap.height(), params.height );
|
|
|
|
//always reveal the arrow when expanding
|
|
_mayBeToggleArrow( exp );
|
|
|
|
//always collapse the header search
|
|
czrapp.userXP.headerSearchExpanded( false ).done( function() {
|
|
$.when( $( '#header' ).toggleClass( 'topbar-expanded', exp ) ).done( function() {
|
|
$( _sel, $topbar ).find('i[data-toggle="' + ( exp ? 'down' : 'up' ) + '"]').css( { opacity : 0 });
|
|
|
|
$topbar.css({
|
|
height : exp ? _expandHeight + 'px' : '50px',
|
|
overflow : exp ? 'visible' : ''
|
|
});
|
|
_.delay( function() {
|
|
$( _sel, $topbar ).find('i[data-toggle="' + ( exp ? 'down' : 'up' ) + '"]').css( { display :'none' });
|
|
$( _sel, $topbar ).find('i[data-toggle="' + ( exp ? 'up' : 'down' ) + '"]').css({ display :'inline-block' , opacity : exp ? 1 : '' });
|
|
_dfd.resolve();
|
|
if ( ! exp ) {
|
|
_mayBeToggleArrow();
|
|
czrapp.trigger('topbar-collapsed');//<= will be listened to by the sticky menu to maybe adjust the top padding
|
|
}
|
|
}, 250 );//transition: height 0.35s ease-in-out;
|
|
});
|
|
});
|
|
}).promise();
|
|
}, { deferred : true } );
|
|
|
|
//listen to user actions
|
|
czrapp.setupDOMListeners(
|
|
[
|
|
{
|
|
trigger : 'click keydown',
|
|
selector : _sel,
|
|
actions : function() {
|
|
czrapp.userXP.topNavExpanded( ! czrapp.userXP.topNavExpanded() );
|
|
}
|
|
},
|
|
],//actions to execute
|
|
{ dom_el: $('#header') },//dom scope
|
|
czrapp.userXP //instance where to look for the cb methods
|
|
);
|
|
|
|
//collapse on menu animation
|
|
if ( czrapp.userXP.stickyHeaderAnimating ) {
|
|
czrapp.userXP.stickyHeaderAnimating.bind( function( animating ) {
|
|
czrapp.userXP.topNavExpanded( false );
|
|
});
|
|
}
|
|
},
|
|
|
|
|
|
|
|
/* Toggle header search
|
|
/* ------------------------------------ */
|
|
//@return void()
|
|
headerSearchToLife : function() {
|
|
var self = this,
|
|
_sel = '.toggle-search',
|
|
$topbar = $('#nav-topbar.desktop-sticky');
|
|
|
|
self.headerSearchExpanded = new czrapp.Value( false );
|
|
//listen to app event
|
|
//the callback returns a promise to allow sequential actions, typically when collapsing the nav menu
|
|
self.headerSearchExpanded.bind( function( exp ) {
|
|
return $.Deferred( function() {
|
|
var _dfd = this;
|
|
$.when( $( _sel, '#header' ).toggleClass( 'active', exp ) ).done( function() {
|
|
if ( exp ) {
|
|
$topbar.css( {
|
|
overflow : ! exp ? '' : 'visible',
|
|
height : czrapp.userXP.topNavExpanded() ? ( 1 == $topbar.find('.nav-wrap').length ? $topbar.find('.nav-wrap').height() : 'auto' ) : ''
|
|
});
|
|
}
|
|
$('.search-expand', '#header').stop()[ ! exp ? 'slideUp' : 'slideDown' ]( {
|
|
duration : 250,
|
|
complete : function() {
|
|
if ( exp ) {
|
|
$('.search-expand input', '#header').focus();
|
|
} else {
|
|
$topbar.css( { overflow : '' } );
|
|
if ( ! czrapp.userXP.topNavExpanded() ) {
|
|
$topbar.css( { height : '' });
|
|
}
|
|
}
|
|
_dfd.resolve();
|
|
}
|
|
} );
|
|
});
|
|
}).promise();
|
|
}, { deferred : true } );
|
|
|
|
//listen to user actions
|
|
czrapp.setupDOMListeners(
|
|
[
|
|
{
|
|
trigger : 'click keydown',
|
|
selector : _sel,
|
|
actions : function() {
|
|
czrapp.userXP.headerSearchExpanded( ! czrapp.userXP.headerSearchExpanded() );
|
|
}
|
|
},
|
|
],//actions to execute
|
|
{ dom_el: $('#header') },//dom scope
|
|
czrapp.userXP //instance where to look for the cb methods
|
|
);
|
|
|
|
//collapse on resize
|
|
czrapp.userXP.windowWidth.bind( function() {
|
|
self.headerSearchExpanded( false );
|
|
});
|
|
|
|
//collapse on menu animation
|
|
if ( czrapp.userXP.stickyHeaderAnimating ) {
|
|
czrapp.userXP.stickyHeaderAnimating.bind( function( animating ) {
|
|
self.headerSearchExpanded( false );
|
|
});
|
|
}
|
|
},//toggleHeaderSearch
|
|
|
|
|
|
/* Scroll to top
|
|
/* ------------------------------------ */
|
|
scrollToTop : function() {
|
|
$('a#back-to-top').click(function() {
|
|
$('html, body').animate({scrollTop:0},'slow');
|
|
return false;
|
|
});
|
|
},
|
|
|
|
|
|
/* Tabs widget
|
|
/* ------------------------------------ */
|
|
widgetTabs : function() {
|
|
var $tabsNav = $('.alx-tabs-nav'),
|
|
$tabsNavLis = $tabsNav.children('li'),
|
|
$tabsContainer = $('.alx-tabs-container');
|
|
|
|
$tabsNav.each(function() {
|
|
var $_el = $(this);
|
|
$_el
|
|
.next()
|
|
.children('.alx-tab')
|
|
.stop(true,true)
|
|
.hide()
|
|
.siblings( $_el.find('a').attr('href') ).show();
|
|
|
|
$_el.children('li').first().addClass('active').stop(true,true).show();
|
|
});
|
|
|
|
$tabsNavLis.on('click', function(e) {
|
|
var $this = $(this);
|
|
|
|
$this.siblings().removeClass('active').end()
|
|
.addClass('active');
|
|
|
|
$this.parent().next().children('.alx-tab').stop(true,true).hide()
|
|
.siblings( $this.find('a').attr('href') ).fadeIn();
|
|
e.preventDefault();
|
|
}).children( window.location.hash ? 'a[href="' + window.location.hash + '"]' : 'a:first' ).trigger('click');
|
|
},
|
|
|
|
/* Comments / pingbacks tabs
|
|
/* ------------------------------------ */
|
|
commentTabs : function() {
|
|
$(".comment-tabs li").click(function() {
|
|
$(".comment-tabs li").removeClass('active');
|
|
$(this).addClass("active");
|
|
$(".comment-tab").hide();
|
|
var selected_tab = $(this).find("a").attr("href");
|
|
$(selected_tab).fadeIn();
|
|
return false;
|
|
});
|
|
},
|
|
|
|
|
|
/* Table odd row class
|
|
/* ------------------------------------ */
|
|
tableStyle : function() {
|
|
$('table tr:odd').addClass('alt');
|
|
},
|
|
|
|
|
|
/* Dropdown menu animation
|
|
/* ------------------------------------ */
|
|
dropdownMenu : function() {
|
|
var self = this,
|
|
$topbar = $('#nav-topbar.desktop-sticky'),
|
|
_isHoveringInTopBar = false;
|
|
|
|
//We the topnav is collapsed, some menu items may be hidden because of the fixed height and overflow hidden
|
|
//let's expand the topnav if not already manually expanded by the user.
|
|
//As long as we are hovering, it won't collapse.
|
|
//After 1 second without hovering in, it will collapse
|
|
$('#nav-topbar.desktop-sticky').hover(
|
|
function() {
|
|
if ( czrapp.userXP.topNavExpanded() || czrapp.userXP._isMobile() )
|
|
return;
|
|
_isHoveringInTopBar = true;
|
|
$topbar.css( {
|
|
overflow : 'visible',
|
|
height : 1 == $topbar.find('.nav-wrap').length ? $topbar.find('.nav-wrap').height() : 'auto'
|
|
});
|
|
},
|
|
function() {
|
|
if ( czrapp.userXP.topNavExpanded() || czrapp.userXP._isMobile() )
|
|
return;
|
|
_isHoveringInTopBar = false;
|
|
_.delay( function() {
|
|
if ( _isHoveringInTopBar )
|
|
return;
|
|
if ( ! czrapp.userXP.topNavExpanded() && ! czrapp.userXP.headerSearchExpanded() ) {
|
|
$topbar.css( { overflow : '', height : '' } );
|
|
//after height animation, we might be on top here, so let's trigger this event, listened to by the sticky menu to ajust padding top
|
|
_.delay( function() {
|
|
czrapp.trigger('topbar-collapsed');
|
|
}, 400 );
|
|
}
|
|
}, 1000 );
|
|
}
|
|
);
|
|
$('.nav ul.sub-menu').hide();
|
|
$('.nav li').hover(
|
|
function() {
|
|
if ( czrapp.userXP._isMobile() )
|
|
return;
|
|
$(this).children('ul.sub-menu').stop().slideDown('fast').css( 'opacity', 1 );
|
|
},
|
|
function() {
|
|
if ( czrapp.userXP._isMobile() )
|
|
return;
|
|
$(this).children('ul.sub-menu').stop().css( 'opacity', '' ).slideUp( {
|
|
duration : 'fast',
|
|
complete : function() {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
};//_methods{}
|
|
|
|
czrapp.methods.UserXP = czrapp.methods.UserXP || {};
|
|
$.extend( czrapp.methods.UserXP , _methods );
|
|
|
|
})(jQuery, czrapp);var czrapp = czrapp || {};
|
|
//@global HUParams
|
|
/************************************************
|
|
* LET'S DANCE
|
|
*************************************************/
|
|
( function ( czrapp, $, _ ) {
|
|
//adds the server params to the app now
|
|
czrapp.localized = HUParams || {};
|
|
|
|
//add the events manager object to the root
|
|
$.extend( czrapp, czrapp.Events );
|
|
|
|
//defines a Root class
|
|
//=> adds the constructor options : { id : ctor name, dom_ready : params.ready || [] }
|
|
//=> declares a ready() methods, fired on dom ready
|
|
czrapp.Root = czrapp.Class.extend( {
|
|
initialize : function( options ) {
|
|
$.extend( this, options || {} );
|
|
},
|
|
|
|
//On DOM ready, fires the methods passed to the constructor
|
|
//Populates a czrapp.status array allowing us to remotely check the current app state
|
|
ready : function() {
|
|
var self = this;
|
|
if ( self.dom_ready && _.isArray( self.dom_ready ) ) {
|
|
czrapp.status = czrapp.status || [];
|
|
_.each( self.dom_ready , function( _m_ ) {
|
|
if ( ! _.isFunction( self[_m_]) ) {
|
|
czrapp.status.push( 'Method ' + _m_ + ' was not found and could not be fired on DOM ready.');
|
|
return;
|
|
}
|
|
try { self[_m_](); } catch( er ){
|
|
czrapp.status.push( [ 'NOK', self.id + '::' + _m_, _.isString( er ) ? czrapp._truncate( er ) : er ].join( ' => ') );
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
czrapp.Base = czrapp.Root.extend( czrapp.methods.Base );
|
|
|
|
czrapp.ready = $.Deferred();
|
|
|
|
czrapp.bind( 'czrapp-ready', function() {
|
|
czrapp.consoleLog('front js ready');
|
|
czrapp.ready.resolve();
|
|
});
|
|
|
|
var appMap = {
|
|
base : {
|
|
ctor : czrapp.Base,
|
|
ready : [
|
|
'cacheProp'
|
|
]
|
|
},
|
|
browserDetect : {
|
|
ctor : czrapp.Base.extend( czrapp.methods.BrowserDetect ),
|
|
ready : [ 'addBrowserClassToBody' ]
|
|
},
|
|
jqPlugins : {
|
|
ctor : czrapp.Base.extend( czrapp.methods.JQPlugins ),
|
|
ready : [
|
|
'imgSmartLoad',
|
|
'extLinks',
|
|
'parallax'
|
|
]
|
|
},
|
|
userXP : {
|
|
ctor : czrapp.Base.extend( czrapp.methods.UserXP ),
|
|
ready : [
|
|
'setupUIListeners',//<=setup observables values used in various UX modules
|
|
|
|
'stickify',
|
|
'outline',
|
|
'smoothScroll',
|
|
'headerSearchToLife',
|
|
'scrollToTop',
|
|
'widgetTabs',
|
|
'commentTabs',
|
|
'tableStyle',
|
|
'sidebarToLife',
|
|
'dropdownMenu',
|
|
'mobileMenu',
|
|
'topNavToLife'
|
|
]
|
|
}
|
|
};//map
|
|
|
|
//Instantiates
|
|
_.each( appMap, function( params, name ) {
|
|
if ( _.isObject( params ) ) {
|
|
try { czrapp[ name ] = new params.ctor( { id : name, dom_ready : params.ready || [] } ); }
|
|
catch( er ) {
|
|
czrapp.errorLog( 'Error when loading ' + name + ' | ' + er );
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Fire on DOM ready
|
|
$(function ($) {
|
|
_.each( appMap, function( params, name ) {
|
|
if ( _.isObject( czrapp[ name ] ) && _.isFunction( czrapp[ name ].ready ) ) {
|
|
czrapp[ name ].ready();
|
|
}
|
|
});
|
|
czrapp.status = czrapp.status || 'OK';
|
|
if ( _.isArray( czrapp.status ) ) {
|
|
_.each( czrapp.status, function( error ) {
|
|
czrapp.errorLog( error );
|
|
});
|
|
}
|
|
czrapp.trigger( 'czrapp-ready');
|
|
});
|
|
})( czrapp, jQuery, _ ); |
