navdrawer.js

src/components/navdrawer/navdrawer.js

@@ -1,6 +1,7 @@
-define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, dom) {
+define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
     "use strict";
-    return function(options) {
+
+    return function (options) {
         function getTouches(e) {
             return e.changedTouches || e.targetTouches || e.touches;
         }
@@ -9,14 +10,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             options.target.classList.remove("transition");
             var touches = getTouches(e);
             var touch = touches[0] || {};
-
             menuTouchStartX = touch.clientX;
             menuTouchStartY = touch.clientY;
-            menuTouchStartTime = (new Date).getTime();
+            menuTouchStartTime = new Date().getTime();
         }
 
         function setVelocity(deltaX) {
-            var time = (new Date).getTime() - (menuTouchStartTime || 0);
+            var time = new Date().getTime() - (menuTouchStartTime || 0);
             velocity = Math.abs(deltaX) / time;
         }
 
@@ -28,21 +28,38 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             var endY = touch.clientY || 0;
             var deltaX = endX - (menuTouchStartX || 0);
             var 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())
+            setVelocity(deltaX);
+
+            if (isOpen && 1 !== dragMode && deltaX > 0) {
+                dragMode = 2;
+            }
+
+            if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+                dragMode = 1;
+                scrollContainer.addEventListener("scroll", disableEvent);
+                self.showMask();
+            } else {
+                if (0 === dragMode && Math.abs(deltaY) >= 5) {
+                    dragMode = 2;
+                }
+            }
+
+            if (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);
             var touch = touches[0] || {};
             var endX = touch.clientX || 0;
             var endY = touch.clientY || 0;
             var deltaX = endX - (menuTouchStartX || 0);
             var deltaY = endY - (menuTouchStartY || 0);
-
             currentPos = deltaX;
             self.checkMenuState(deltaX, deltaY);
         }
@@ -53,10 +70,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             } else {
                 if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
                     isPeeking = true;
+
                     if (e.type === "touchstart") {
                         dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
                         dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
                     }
+
                     onMenuTouchStart(e);
                 }
             }
@@ -65,38 +84,49 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         function onEdgeTouchMove(e) {
             e.preventDefault();
             e.stopPropagation();
-
             onEdgeTouchStart(e);
         }
 
         function onEdgeTouchEnd(e) {
-            isPeeking && (isPeeking = !1, dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}), onMenuTouchEnd(e))
+            if (isPeeking) {
+                isPeeking = false;
+                dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                onMenuTouchEnd(e);
+            }
         }
 
         function disableEvent(e) {
-            e.preventDefault(), e.stopPropagation()
+            e.preventDefault();
+            e.stopPropagation();
         }
 
         function onBackgroundTouchStart(e) {
             var touches = getTouches(e);
             var touch = touches[0] || {};
-            backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime()
+            backgroundTouchStartX = touch.clientX;
+            backgroundTouchStartTime = new Date().getTime();
         }
 
         function onBackgroundTouchMove(e) {
             var touches = getTouches(e);
             var touch = touches[0] || {};
             var 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();
+                    dragMode = 1;
-                    var time = (new Date).getTime() - (backgroundTouchStartTime || 0);
+                    newPos = deltaX - startPoint + options.width;
-                    velocity = Math.abs(deltaX) / time
+                    self.changeMenuPos();
+                    var time = new Date().getTime() - (backgroundTouchStartTime || 0);
+                    velocity = Math.abs(deltaX) / time;
                 }
             }
-            e.preventDefault(), e.stopPropagation()
+
+            e.preventDefault();
+            e.stopPropagation();
         }
 
         function onBackgroundTouchEnd(e) {
@@ -104,13 +134,18 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             var touch = touches[0] || {};
             var endX = touch.clientX || 0;
             var deltaX = endX - (backgroundTouchStartX || 0);
-            self.checkMenuState(deltaX), countStart = 0
+            self.checkMenuState(deltaX);
+            countStart = 0;
         }
 
         function onMaskTransitionEnd() {
             var classList = mask.classList;
-            classList.contains("backdrop") || classList.add("hide")
+
+            if (!classList.contains("backdrop")) {
+                classList.add("hide");
+            }
         }
+
         var self;
         var defaults;
         var mask;
@@ -123,83 +158,194 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         var dragMode = 0;
         var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
         scrollContainer.classList.add("scrollY");
-        var TouchMenuLA = function() {
+
-            self = this, defaults = {
+        var TouchMenuLA = function () {
+            self = this;
+            defaults = {
                 width: 260,
                 handleSize: 10,
-                disableMask: !1,
+                disableMask: false,
                 maxMaskOpacity: 0.5
-            }, this.isVisible = !1, this.initialize()
+            };
+            this.isVisible = false;
+            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, {
+        TouchMenuLA.prototype.initElements = function () {
-                passive: !0
+            options.target.classList.add("touch-menu-la");
-            }))
+            options.target.style.width = options.width + "px";
+            options.target.style.left = -options.width + "px";
+
+            if (!options.disableMask) {
+                mask = document.createElement("div");
+                mask.className = "tmla-mask hide";
+                document.body.appendChild(mask);
+                dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
+                    passive: true
+                });
+            }
         };
+
         var menuTouchStartX;
         var menuTouchStartY;
         var menuTouchStartTime;
         var edgeContainer = document.querySelector(".mainDrawerHandle");
         var isPeeking = false;
-        TouchMenuLA.prototype.animateToPosition = function(pos) {
+
-            requestAnimationFrame(function() {
+        TouchMenuLA.prototype.animateToPosition = function (pos) {
-                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"
+            requestAnimationFrame(function () {
-            })
+                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
-        }, TouchMenuLA.prototype.changeMenuPos = function() {
+            });
-            newPos <= options.width && this.animateToPosition(newPos)
-        }, TouchMenuLA.prototype.clickMaskClose = function() {
-            mask.addEventListener("click", function() {
-                self.close()
-            })
-        }, TouchMenuLA.prototype.checkMenuState = function(deltaX, deltaY) {
-            velocity >= 0.4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close()
-        }, TouchMenuLA.prototype.open = function() {
-            this.animateToPosition(options.width), currentPos = options.width, this.isVisible = !0, options.target.classList.add("drawer-open"), self.showMask(), self.invoke(options.onChange)
-        }, TouchMenuLA.prototype.close = function() {
-            this.animateToPosition(0), currentPos = 0, self.isVisible = !1, options.target.classList.remove("drawer-open"), self.hideMask(), self.invoke(options.onChange)
-        }, TouchMenuLA.prototype.toggle = function() {
-            self.isVisible ? self.close() : self.open()
         };
+
+        TouchMenuLA.prototype.changeMenuPos = function () {
+            if (newPos <= options.width) {
+                this.animateToPosition(newPos);
+            }
+        };
+
+        TouchMenuLA.prototype.clickMaskClose = function () {
+            mask.addEventListener("click", function () {
+                self.close();
+            });
+        };
+
+        TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
+            if (velocity >= 0.4) {
+                if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
+                    self.open();
+                } else {
+                    self.close();
+                }
+            } else {
+                if (newPos >= 100) {
+                    self.open();
+                } else {
+                    if (newPos) {
+                        self.close();
+                    }
+                }
+            }
+        };
+
+        TouchMenuLA.prototype.open = function () {
+            this.animateToPosition(options.width);
+            currentPos = options.width;
+            this.isVisible = true;
+            options.target.classList.add("drawer-open");
+            self.showMask();
+            self.invoke(options.onChange);
+        };
+
+        TouchMenuLA.prototype.close = function () {
+            this.animateToPosition(0);
+            currentPos = 0;
+            self.isVisible = false;
+            options.target.classList.remove("drawer-open");
+            self.hideMask();
+            self.invoke(options.onChange);
+        };
+
+        TouchMenuLA.prototype.toggle = function () {
+            if (self.isVisible) {
+                self.close();
+            } else {
+                self.open();
+            }
+        };
+
         var backgroundTouchStartX;
         var backgroundTouchStartTime;
-        TouchMenuLA.prototype.showMask = function() {
+
-            mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop")
+        TouchMenuLA.prototype.showMask = function () {
-        }, TouchMenuLA.prototype.hideMask = function() {
+            mask.classList.remove("hide");
-            mask.classList.remove("backdrop")
+            mask.offsetWidth;
-        }, TouchMenuLA.prototype.invoke = function(fn) {
+            mask.classList.add("backdrop");
-            fn && fn.apply(self)
         };
+
+        TouchMenuLA.prototype.hideMask = function () {
+            mask.classList.remove("backdrop");
+        };
+
+        TouchMenuLA.prototype.invoke = function (fn) {
+            if (fn) {
+                fn.apply(self);
+            }
+        };
+
         var _edgeSwipeEnabled;
-        return TouchMenuLA.prototype.setEdgeSwipeEnabled = function(enabled) {
+
-            options.disableEdgeSwipe || browser.touch && (enabled ? _edgeSwipeEnabled || (_edgeSwipeEnabled = !0, dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+        TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
-                passive: !0
+            if (!options.disableEdgeSwipe) {
-            }), dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                if (browser.touch) {
-                passive: !0
+                    if (enabled) {
-            }), dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                        if (!_edgeSwipeEnabled) {
-                passive: !0
+                            _edgeSwipeEnabled = true;
-            })) : _edgeSwipeEnabled && (_edgeSwipeEnabled = !1, dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                            dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                passive: !0
+                                passive: true
-            }), dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                            });
-                passive: !0
+                            dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-            }), dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                                passive: true
-                passive: !0
+                            });
-            })))
+                            dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-        }, TouchMenuLA.prototype.initialize = function() {
+                                passive: true
-            options = Object.assign(defaults, options || {}), browser.edge && (options.disableEdgeSwipe = !0), self.initElements(), browser.touch && (dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
+                            });
-                passive: !0
+                        }
-            }), dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
+                    } else {
-                passive: !0
+                        if (_edgeSwipeEnabled) {
-            }), dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
+                            _edgeSwipeEnabled = false;
-                passive: !0
+                            dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-            }), dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
+                                passive: true
-                passive: !0
+                            });
-            }), dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
+                            dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                passive: !0
+                                passive: true
-            }), dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}), dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
+                            });
-                passive: !0
+                            dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-            }), dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
+                                passive: true
-                passive: !0
+                            });
-            })), self.clickMaskClose()
+                        }
-        }, new TouchMenuLA
+                    }
-    }
+                }
-});
+            }
+        };
+
+        TouchMenuLA.prototype.initialize = function () {
+            options = Object.assign(defaults, options || {});
+
+            if (browser.edge) {
+                options.disableEdgeSwipe = true;
+            }
+
+            self.initElements();
+
+            if (browser.touch) {
+                dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
+                dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
+                    passive: true
+                });
+            }
+
+            self.clickMaskClose();
+        };
+
+        return new TouchMenuLA();
+    };
+});