|
|
|
|
}this.isAnimating=true;this.menusArr[this.menus.indexOf(subMenuEl)].backIdx=this.current_menu;this.menusArr[this.menus.indexOf(subMenuEl)].name=subMenuName;this._menuOut(clickPosition);this._menuIn(subMenuEl,clickPosition)};MLMenu.prototype._back=function(){if(this.isAnimating){return false}this.isAnimating=true;this._menuOut();var backMenu=this.menusArr[this.menusArr[this.current_menu].backIdx].menuEl;this._menuIn(backMenu);if(this.options.breadcrumbsCtrl){this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild)}};MLMenu.prototype._menuOut=function(clickPosition){var self=this,currentMenu=this.menusArr[this.current_menu].menuEl,isBackNavigation=typeof clickPosition=="undefined"?true:false;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"});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,currentMenu=this.menusArr[this.current_menu].menuEl,isBackNavigation=typeof clickPosition=="undefined"?true:false,nextMenuIdx=this.menus.indexOf(nextMenuEl),nextMenu=this.menusArr[nextMenuIdx],nextMenuEl=nextMenu.menuEl,nextMenuItems=nextMenu.menuItems,nextMenuItemsTotal=nextMenuItems.length;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";var farthestIdx=clickPosition<=nextMenuItemsTotal/2||isBackNavigation?nextMenuItemsTotal-1:0;if(pos===farthestIdx){onEndAnimation(item,function(){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");self.current_menu=nextMenuIdx;if(!isBackNavigation){if(self.options.backCtrl){classie.remove(self.backCtrl,"menu__back--hidden")}self._addBreadcrumb(nextMenuIdx)}else{if(self.current_menu===0&&self.options.backCtrl){classie.add(self.backCtrl,"menu__back--hidden")}}self.isAnimating=false;nextMenuEl.focus()})}});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="#";bc.innerHTML=idx?this.menusArr[idx].name:this.options.initialBreadcrumb;this.breadcrumbsCtrl.appendChild(bc);var self=this;bc.addEventListener("click",function(ev){ev.preventDefault();if(!bc.nextSibling||self.isAnimating){return false}self.isAnimating=true;self._menuOut();var nextMenu=self.menusArr[idx].menuEl;self._menuIn(nextMenu);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)}this._addBreadcrumb(currentMenu)};window.MLMenu=MLMenu})(window);(function(){var menuEl=document.getElementById("ml-menu"),mlmenu=new MLMenu(menuEl,{backCtrl:true,});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()}})();
|