|
|
/*!
|
|
|
* classie v1.0.1
|
|
|
* class helper functions
|
|
|
* from bonzo https://github.com/ded/bonzo
|
|
|
* MIT license
|
|
|
*
|
|
|
* classie.has( elem, 'my-class' ) -> true/false
|
|
|
* classie.add( elem, 'my-new-class' )
|
|
|
* classie.remove( elem, 'my-unwanted-class' )
|
|
|
* classie.toggle( elem, 'my-class' )
|
|
|
*/
|
|
|
|
|
|
/*jshint browser: true, strict: true, undef: true, unused: true */
|
|
|
/*global define: false, module: false */
|
|
|
|
|
|
( function( window ) {
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
// class helper functions from bonzo https://github.com/ded/bonzo
|
|
|
|
|
|
function classReg( className ) {
|
|
|
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
|
|
|
}
|
|
|
|
|
|
// classList support for class management
|
|
|
// altho to be fair, the api sucks because it won't accept multiple classes at once
|
|
|
var hasClass, addClass, removeClass;
|
|
|
|
|
|
if ( 'classList' in document.documentElement ) {
|
|
|
hasClass = function( elem, c ) {
|
|
|
return elem.classList.contains( c );
|
|
|
};
|
|
|
addClass = function( elem, c ) {
|
|
|
elem.classList.add( c );
|
|
|
};
|
|
|
removeClass = function( elem, c ) {
|
|
|
elem.classList.remove( c );
|
|
|
};
|
|
|
}
|
|
|
else {
|
|
|
hasClass = function( elem, c ) {
|
|
|
return classReg( c ).test( elem.className );
|
|
|
};
|
|
|
addClass = function( elem, c ) {
|
|
|
if ( !hasClass( elem, c ) ) {
|
|
|
elem.className = elem.className + ' ' + c;
|
|
|
}
|
|
|
};
|
|
|
removeClass = function( elem, c ) {
|
|
|
elem.className = elem.className.replace( classReg( c ), ' ' );
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function toggleClass( elem, c ) {
|
|
|
var fn = hasClass( elem, c ) ? removeClass : addClass;
|
|
|
fn( elem, c );
|
|
|
}
|
|
|
|
|
|
var classie = {
|
|
|
// full names
|
|
|
hasClass: hasClass,
|
|
|
addClass: addClass,
|
|
|
removeClass: removeClass,
|
|
|
toggleClass: toggleClass,
|
|
|
// short names
|
|
|
has: hasClass,
|
|
|
add: addClass,
|
|
|
remove: removeClass,
|
|
|
toggle: toggleClass
|
|
|
};
|
|
|
|
|
|
// transport
|
|
|
if ( typeof define === 'function' && define.amd ) {
|
|
|
// AMD
|
|
|
define( classie );
|
|
|
} else if ( typeof exports === 'object' ) {
|
|
|
// CommonJS
|
|
|
module.exports = classie;
|
|
|
} else {
|
|
|
// browser global
|
|
|
window.classie = classie;
|
|
|
}
|
|
|
|
|
|
})( window );
|
|
|
|
|
|
|
|
|
/*! modernizr 3.2.0 (Custom Build) | MIT *
|
|
|
* http://modernizr.com/download/?-cssanimations-prefixed !*/
|
|
|
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e[i],a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}}function i(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}function s(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(e,n){return!!~(""+e).indexOf(n)}function f(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var o;for(var i in e)if(e[i]in n)return t===!1?e[i]:(o=n[e[i]],r(o,"function")?l(o,t||n):o);return!1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=n.body;return e||(e=f(x?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var i,s,a,l,u="modernizr",p=f("div"),c=d();if(parseInt(r,10))for(;r--;)a=f("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a);return i=f("style"),i.type="text/css",i.id="s"+u,(c.fake?c:p).appendChild(i),c.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",l=w.style.overflow,w.style.overflow="hidden",w.appendChild(c)),s=t(p,e),c.fake?(c.parentNode.removeChild(c),w.style.overflow=l,w.offsetHeight):p.parentNode.removeChild(p),!!s}function m(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(p(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+p(n[o])+":"+r+")");return i=i.join(" or "),c("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function v(e,n,o,i){function l(){p&&(delete z.style,delete z.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var u=m(e,o);if(!r(u,"undefined"))return u}for(var p,d,c,v,h,y=["modernizr","tspan"];!z.style;)p=!0,z.modElem=f(y.shift()),z.style=z.modElem.style;for(c=e.length,d=0;c>d;d++)if(v=e[d],h=z.style[v],a(v,"-")&&(v=s(v)),z.style[v]!==t){if(i||r(o,"undefined"))return l(),"pfx"==n?v:!0;try{z.style[v]=o}catch(g){}if(z.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes[s],f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var z={style:P.elem.style};Modernizr._q.unshift(function(){delete z.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T<Modernizr._q.length;T++)Modernizr._q[T]();e.Modernizr=Modernizr}(window,document);
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
* main.js
|
|
|
* http://www.codrops.com
|
|
|
*
|
|
|
* Licensed under the MIT license.
|
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
|
*
|
|
|
* Copyright 2015, Codrops
|
|
|
* http://www.codrops.com
|
|
|
*/
|
|
|
|
|
|
;(function(window) {
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
var support = { animations : Modernizr.cssanimations },
|
|
|
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
|
|
|
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
|
|
|
onEndAnimation = function( el, callback ) {
|
|
|
var onEndCallbackFn = function( ev ) {
|
|
|
if( support.animations ) {
|
|
|
if( ev.target != this ) return;
|
|
|
this.removeEventListener( animEndEventName, onEndCallbackFn );
|
|
|
}
|
|
|
if( callback && typeof callback === 'function' ) { callback.call(); }
|
|
|
};
|
|
|
if( support.animations ) {
|
|
|
el.addEventListener( animEndEventName, onEndCallbackFn );
|
|
|
}
|
|
|
else {
|
|
|
onEndCallbackFn();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
function extend( a, b ) {
|
|
|
for( var key in b ) {
|
|
|
if( b.hasOwnProperty( key ) ) {
|
|
|
a[key] = b[key];
|
|
|
}
|
|
|
}
|
|
|
return a;
|
|
|
}
|
|
|
|
|
|
function MLMenu(el, options) {
|
|
|
this.el = el;
|
|
|
this.options = extend( {}, this.options );
|
|
|
extend( this.options, options );
|
|
|
|
|
|
// the menus (<ul>´s)
|
|
|
this.menus = [].slice.call(this.el.querySelectorAll('.menu__level'));
|
|
|
|
|
|
// index of current menu
|
|
|
// Each level is actually a different menu so 0 is root, 1 is sub-1, 2 sub-2, etc.
|
|
|
this.current_menu = 0;
|
|
|
|
|
|
/* Determine what current menu actually is */
|
|
|
var current_menu;
|
|
|
this.menus.forEach(function(menuEl, pos) {
|
|
|
var items = menuEl.querySelectorAll('.menu__item');
|
|
|
items.forEach(function(itemEl, iPos) {
|
|
|
var currentLink = itemEl.querySelector('.menu__link--current');
|
|
|
if (currentLink) {
|
|
|
// This is the actual menu__level that should have current
|
|
|
current_menu = pos;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
if (current_menu) {
|
|
|
this.current_menu = current_menu;
|
|
|
}
|
|
|
|
|
|
this._init();
|
|
|
}
|
|
|
|
|
|
MLMenu.prototype.options = {
|
|
|
// show breadcrumbs
|
|
|
breadcrumbsCtrl : true,
|
|
|
// initial breadcrumb text
|
|
|
initialBreadcrumb : 'all',
|
|
|
// show back button
|
|
|
backCtrl : true,
|
|
|
// delay between each menu item sliding animation
|
|
|
itemsDelayInterval : 60,
|
|
|
// direction
|
|
|
direction : 'r2l',
|
|
|
// callback: item that doesn´t have a submenu gets clicked
|
|
|
// onItemClick([event], [inner HTML of the clicked item])
|
|
|
onItemClick : function(ev, itemName) { return false; }
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._init = function() {
|
|
|
// iterate the existing menus and create an array of menus,
|
|
|
// more specifically an array of objects where each one holds the info of each menu element and its menu items
|
|
|
this.menusArr = [];
|
|
|
this.breadCrumbs = false;
|
|
|
var self = this;
|
|
|
var submenus = [];
|
|
|
|
|
|
/* Loops over root level menu items */
|
|
|
this.menus.forEach(function(menuEl, pos) {
|
|
|
var menu = {menuEl : menuEl, menuItems : [].slice.call(menuEl.querySelectorAll('.menu__item'))};
|
|
|
|
|
|
self.menusArr.push(menu);
|
|
|
|
|
|
// set current menu class
|
|
|
if( pos === self.current_menu ) {
|
|
|
classie.add(menuEl, 'menu__level--current');
|
|
|
}
|
|
|
|
|
|
var menu_x = menuEl.getAttribute('data-menu');
|
|
|
var links = menuEl.querySelectorAll('.menu__link');
|
|
|
links.forEach(function(linkEl, lPos) {
|
|
|
var submenu = linkEl.getAttribute('data-submenu');
|
|
|
if (submenu) {
|
|
|
var pushMe = {"menu":submenu, "name": linkEl.innerHTML };
|
|
|
if (submenus[pos]) {
|
|
|
submenus[pos].push(pushMe);
|
|
|
} else {
|
|
|
submenus[pos] = []
|
|
|
submenus[pos].push(pushMe);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
/* For each MENU, find their parent MENU */
|
|
|
this.menus.forEach(function(menuEl, pos) {
|
|
|
var menu_x = menuEl.getAttribute('data-menu');
|
|
|
submenus.forEach(function(subMenuEl, menu_root) {
|
|
|
subMenuEl.forEach(function(subMenuItem, subPos) {
|
|
|
if (subMenuItem.menu == menu_x) {
|
|
|
self.menusArr[pos].backIdx = menu_root;
|
|
|
self.menusArr[pos].name = subMenuItem.name;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// create breadcrumbs
|
|
|
if( self.options.breadcrumbsCtrl ) {
|
|
|
this.breadcrumbsCtrl = document.createElement('nav');
|
|
|
this.breadcrumbsCtrl.className = 'menu__breadcrumbs';
|
|
|
this.breadcrumbsCtrl.setAttribute('aria-label', 'You are here');
|
|
|
this.el.insertBefore(this.breadcrumbsCtrl, this.el.firstChild);
|
|
|
// add initial breadcrumb
|
|
|
this._addBreadcrumb(0);
|
|
|
|
|
|
// Need to add breadcrumbs for all parents of current submenu
|
|
|
if (self.menusArr[self.current_menu].backIdx != 0 && self.current_menu != 0) {
|
|
|
this._crawlCrumbs(self.menusArr[self.current_menu].backIdx, self.menusArr);
|
|
|
this.breadCrumbs = true;
|
|
|
}
|
|
|
|
|
|
// Create current submenu breadcrumb
|
|
|
if (self.current_menu != 0) {
|
|
|
this._addBreadcrumb(self.current_menu);
|
|
|
this.breadCrumbs = true;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// create back button
|
|
|
if (this.options.backCtrl) {
|
|
|
this.backCtrl = document.createElement('button');
|
|
|
if (this.breadCrumbs) {
|
|
|
this.backCtrl.className = 'menu__back';
|
|
|
} else {
|
|
|
this.backCtrl.className = 'menu__back menu__back--hidden';
|
|
|
}
|
|
|
this.backCtrl.setAttribute('aria-label', 'Go back');
|
|
|
this.backCtrl.innerHTML = '<span class="icon icon--arrow-left"></span>';
|
|
|
this.el.insertBefore(this.backCtrl, this.el.firstChild);
|
|
|
}
|
|
|
|
|
|
// event binding
|
|
|
this._initEvents();
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._initEvents = function() {
|
|
|
var self = this;
|
|
|
|
|
|
for(var i = 0, len = this.menusArr.length; i < len; ++i) {
|
|
|
this.menusArr[i].menuItems.forEach(function(item, pos) {
|
|
|
item.querySelector('a').addEventListener('click', function(ev) {
|
|
|
var submenu = ev.target.getAttribute('data-submenu'),
|
|
|
itemName = ev.target.innerHTML,
|
|
|
subMenuEl = self.el.querySelector('ul[data-menu="' + submenu + '"]');
|
|
|
|
|
|
// check if there's a sub menu for this item
|
|
|
if( submenu && subMenuEl ) {
|
|
|
ev.preventDefault();
|
|
|
// open it
|
|
|
self._openSubMenu(subMenuEl, pos, itemName);
|
|
|
}
|
|
|
else {
|
|
|
// add class current
|
|
|
var currentlink = self.el.querySelector('.menu__link--current');
|
|
|
if( currentlink ) {
|
|
|
classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current');
|
|
|
}
|
|
|
classie.add(ev.target, 'menu__link--current');
|
|
|
|
|
|
// callback
|
|
|
self.options.onItemClick(ev, itemName);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// back navigation
|
|
|
if( this.options.backCtrl ) {
|
|
|
this.backCtrl.addEventListener('click', function() {
|
|
|
self._back();
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._openSubMenu = function(subMenuEl, clickPosition, subMenuName) {
|
|
|
if( this.isAnimating ) {
|
|
|
return false;
|
|
|
}
|
|
|
this.isAnimating = true;
|
|
|
|
|
|
// save "parent" menu index for back navigation
|
|
|
this.menusArr[this.menus.indexOf(subMenuEl)].backIdx = this.current_menu;
|
|
|
// save "parent" menu´s name
|
|
|
this.menusArr[this.menus.indexOf(subMenuEl)].name = subMenuName;
|
|
|
// current menu slides out
|
|
|
this._menuOut(clickPosition);
|
|
|
// next menu (submenu) slides in
|
|
|
this._menuIn(subMenuEl, clickPosition);
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._back = function() {
|
|
|
if( this.isAnimating ) {
|
|
|
return false;
|
|
|
}
|
|
|
this.isAnimating = true;
|
|
|
|
|
|
// current menu slides out
|
|
|
this._menuOut();
|
|
|
// next menu (previous menu) slides in
|
|
|
var backMenu = this.menusArr[this.menusArr[this.current_menu].backIdx].menuEl;
|
|
|
this._menuIn(backMenu);
|
|
|
|
|
|
// remove last breadcrumb
|
|
|
if( this.options.breadcrumbsCtrl ) {
|
|
|
this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._menuOut = function(clickPosition) {
|
|
|
// the current menu
|
|
|
var self = this,
|
|
|
currentMenu = this.menusArr[this.current_menu].menuEl,
|
|
|
isBackNavigation = typeof clickPosition == 'undefined' ? true : false;
|
|
|
|
|
|
// slide out current menu items - first, set the delays for the items
|
|
|
this.menusArr[this.current_menu].menuItems.forEach(function(item, pos) {
|
|
|
item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms';
|
|
|
});
|
|
|
// animation class
|
|
|
if( this.options.direction === 'r2l' ) {
|
|
|
classie.add(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
|
|
|
}
|
|
|
else {
|
|
|
classie.add(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) {
|
|
|
var self = this,
|
|
|
// the current menu
|
|
|
currentMenu = this.menusArr[this.current_menu].menuEl,
|
|
|
isBackNavigation = typeof clickPosition == 'undefined' ? true : false,
|
|
|
// index of the nextMenuEl
|
|
|
nextMenuIdx = this.menus.indexOf(nextMenuEl),
|
|
|
|
|
|
nextMenu = this.menusArr[nextMenuIdx],
|
|
|
nextMenuEl = nextMenu.menuEl,
|
|
|
nextMenuItems = nextMenu.menuItems,
|
|
|
nextMenuItemsTotal = nextMenuItems.length;
|
|
|
|
|
|
// slide in next menu items - first, set the delays for the items
|
|
|
nextMenuItems.forEach(function(item, pos) {
|
|
|
item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms';
|
|
|
|
|
|
// we need to reset the classes once the last item animates in
|
|
|
// the "last item" is the farthest from the clicked item
|
|
|
// let's calculate the index of the farthest item
|
|
|
var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0;
|
|
|
|
|
|
if( pos === farthestIdx ) {
|
|
|
onEndAnimation(item, function() {
|
|
|
// reset classes
|
|
|
if( self.options.direction === 'r2l' ) {
|
|
|
classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
|
|
|
classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
|
|
|
}
|
|
|
else {
|
|
|
classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
|
|
|
classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
|
|
|
}
|
|
|
classie.remove(currentMenu, 'menu__level--current');
|
|
|
classie.add(nextMenuEl, 'menu__level--current');
|
|
|
|
|
|
//reset current
|
|
|
self.current_menu = nextMenuIdx;
|
|
|
|
|
|
// control back button and breadcrumbs navigation elements
|
|
|
if( !isBackNavigation ) {
|
|
|
// show back button
|
|
|
if( self.options.backCtrl ) {
|
|
|
classie.remove(self.backCtrl, 'menu__back--hidden');
|
|
|
}
|
|
|
|
|
|
// add breadcrumb
|
|
|
self._addBreadcrumb(nextMenuIdx);
|
|
|
}
|
|
|
else if( self.current_menu === 0 && self.options.backCtrl ) {
|
|
|
// hide back button
|
|
|
classie.add(self.backCtrl, 'menu__back--hidden');
|
|
|
}
|
|
|
|
|
|
// we can navigate again..
|
|
|
self.isAnimating = false;
|
|
|
|
|
|
// focus retention
|
|
|
nextMenuEl.focus();
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// animation class
|
|
|
if( this.options.direction === 'r2l' ) {
|
|
|
classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
|
|
|
}
|
|
|
else {
|
|
|
classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._addBreadcrumb = function(idx) {
|
|
|
if( !this.options.breadcrumbsCtrl ) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
var bc = document.createElement('a');
|
|
|
bc.href = '#'; // make it focusable
|
|
|
bc.innerHTML = idx ? this.menusArr[idx].name : this.options.initialBreadcrumb;
|
|
|
this.breadcrumbsCtrl.appendChild(bc);
|
|
|
|
|
|
var self = this;
|
|
|
bc.addEventListener('click', function(ev) {
|
|
|
ev.preventDefault();
|
|
|
|
|
|
// do nothing if this breadcrumb is the last one in the list of breadcrumbs
|
|
|
if( !bc.nextSibling || self.isAnimating ) {
|
|
|
return false;
|
|
|
}
|
|
|
self.isAnimating = true;
|
|
|
|
|
|
// current menu slides out
|
|
|
self._menuOut();
|
|
|
// next menu slides in
|
|
|
var nextMenu = self.menusArr[idx].menuEl;
|
|
|
self._menuIn(nextMenu);
|
|
|
|
|
|
// remove breadcrumbs that are ahead
|
|
|
var siblingNode;
|
|
|
while (siblingNode = bc.nextSibling) {
|
|
|
self.breadcrumbsCtrl.removeChild(siblingNode);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
MLMenu.prototype._crawlCrumbs = function(currentMenu, menuArray) {
|
|
|
if (menuArray[currentMenu].backIdx != 0) {
|
|
|
this._crawlCrumbs(menuArray[currentMenu].backIdx, menuArray);
|
|
|
}
|
|
|
// create breadcrumb
|
|
|
this._addBreadcrumb(currentMenu);
|
|
|
}
|
|
|
|
|
|
window.MLMenu = MLMenu;
|
|
|
|
|
|
})(window);
|
|
|
|
|
|
|
|
|
(function () {
|
|
|
var menuEl = document.getElementById('ml-menu'),
|
|
|
mlmenu = new MLMenu(menuEl, {
|
|
|
// breadcrumbsCtrl : true, // show breadcrumbs
|
|
|
// initialBreadcrumb : 'all', // initial breadcrumb text
|
|
|
backCtrl: true, // show back button
|
|
|
// itemsDelayInterval : 60, // delay between each menu item sliding animation
|
|
|
// onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
|
|
|
});
|
|
|
|
|
|
// mobile menu toggle
|
|
|
var openMenuCtrl = document.querySelector('.action--open'),
|
|
|
closeMenuCtrl = document.querySelector('.action--close');
|
|
|
|
|
|
openMenuCtrl.addEventListener('click', openMenu);
|
|
|
closeMenuCtrl.addEventListener('click', closeMenu);
|
|
|
|
|
|
function openMenu() {
|
|
|
classie.add(menuEl, 'menu--open');
|
|
|
closeMenuCtrl.focus();
|
|
|
}
|
|
|
function closeMenu() {
|
|
|
classie.remove(menuEl, 'menu--open');
|
|
|
openMenuCtrl.focus();
|
|
|
}
|
|
|
|
|
|
})();
|