jellyfish-web/dashboard-ui/components/navdrawer/navdrawer.js

1 line
6.6 KiB
JavaScript
Raw Normal View History

2017-11-27 15:14:43 -05:00
define(["browser","dom","css!./navdrawer","scrollStyles"],function(browser,dom){"use strict";return function(options){function getTouches(e){return e.changedTouches||e.targetTouches||e.touches}function onMenuTouchStart(e){options.target.classList.remove("transition");var touches=getTouches(e),touch=touches[0]||{};menuTouchStartX=touch.clientX,menuTouchStartY=touch.clientY,menuTouchStartTime=(new Date).getTime()}function setVelocity(deltaX){var time=(new Date).getTime()-(menuTouchStartTime||0);velocity=Math.abs(deltaX)/time}function onMenuTouchMove(e){var isOpen=self.visible,touches=getTouches(e),touch=touches[0]||{},endX=touch.clientX||0,endY=touch.clientY||0,deltaX=endX-(menuTouchStartX||0),deltaY=endY-(menuTouchStartY||0);setVelocity(deltaX),isOpen&&1!==dragMode&&deltaX>0&&(dragMode=2),0===dragMode&&(!isOpen||Math.abs(deltaX)>=10)&&Math.abs(deltaY)<5?(dragMode=1,scrollContainer.addEventListener("scroll",disableEvent),self.showMask()):0===dragMode&&Math.abs(deltaY)>=5&&(dragMode=2),1===dragMode&&(newPos=currentPos+deltaX,self.changeMenuPos())}function onMenuTouchEnd(e){options.target.classList.add("transition"),scrollContainer.removeEventListener("scroll",disableEvent),dragMode=0;var touches=getTouches(e),touch=touches[0]||{},endX=touch.clientX||0,endY=touch.clientY||0,deltaX=endX-(menuTouchStartX||0),deltaY=endY-(menuTouchStartY||0);currentPos=deltaX,self.checkMenuState(deltaX,deltaY)}function onEdgeTouchStart(e){if(isPeeking)onMenuTouchMove(e);else{var touches=getTouches(e),touch=touches[0]||{},endX=touch.clientX||0;endX<=options.handleSize&&(isPeeking=!0,"touchstart"===e.type&&(dom.removeEventListener(edgeContainer,"touchmove",onEdgeTouchMove,{}),dom.addEventListener(edgeContainer,"touchmove",onEdgeTouchMove,{})),onMenuTouchStart(e))}}function onEdgeTouchMove(e){onEdgeTouchStart(e),e.preventDefault(),e.stopPropagation()}function onEdgeTouchEnd(e){isPeeking&&(isPeeking=!1,dom.removeEventListener(edgeContainer,"touchmove",onEdgeTouchMove,{}),onMenuTouchEnd(e))}function disableEvent(e){e.preventDefault(),e.stopPropagation()}function onBackgroundTouchStart(e){var touches=getTouches(e),touch=touches[0]||{};backgroundTouchStartX=touch.clientX,backgroundTouchStartTime=(new Date).getTime()}function onBackgroundTouchMove(e){var touches=getTouches(e),touch=touches[0]||{},endX=touch.clientX||0;if(endX<=options.width&&self.isVisible){countStart++;var deltaX=endX-(backgroundTouchStartX||0);if(1===countStart&&(startPoint=deltaX),deltaX<0&&2!==dragMode){dragMode=1,newPos=deltaX-startPoint+options.width,self.changeMenuPos();var time=(new Date).getTime()-(backgroundTouchStartTime||0);velocity=Math.abs(deltaX)/time}}e.preventDefault(),e.stopPropagation()}function onBackgroundTouchEnd(e){var touches=getTouches(e),touch=touches[0]||{},endX=touch.clientX||0,deltaX=endX-(backgroundTouchStartX||0);self.checkMenuState(deltaX),countStart=0}function onMaskTransitionEnd(){var classList=mask.classList;classList.contains("backdrop")||classList.add("hide")}var self,defaults,mask,newPos=0,currentPos=0,startPoint=0,countStart=0,velocity=0;options.target.classList.add("transition");var dragMode=0,scrollContainer=options.target.querySelector(".mainDrawer-scrollContainer");scrollContainer.classList.add("scrollY");var TouchMenuLA=function(){self=this,defaults={width:260,handleSize:10,disableMask:!1,maxMaskOpacity:.5},this.isVisible=!1,this.initialize()};TouchMenuLA.prototype.initElements=function(){options.target.classList.add("touch-menu-la"),options.target.style.width=options.width+"px",options.target.style.left=-options.width+"px",options.disableMask||(mask=document.createElement("div"),mask.className="tmla-mask hide",document.body.appendChild(mask),dom.addEventListener(mask,dom.whichTransitionEvent(),onMaskTransitionEnd,{passive:!0}))};var menuTouchStartX,menuTouchStartY,menuTouchStartTime,edgeContainer=document.querySelector(".mainDrawerHandle"),isPeeking=!1;TouchMenuLA.prototype.animateToPosition=function(pos){requestAnimationFrame(function(){pos?options.target.style.transform="translateX("+pos+"px)":options.target.style.transform="none"})},Touc