navdrawer.js
This commit is contained in:
parent
f05fd60371
commit
e5e2c387d7
1 changed files with 229 additions and 83 deletions
|
@ -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();
|
||||
var time = (new Date).getTime() - (backgroundTouchStartTime || 0);
|
||||
velocity = Math.abs(deltaX) / time
|
||||
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()
|
||||
|
||||
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, {
|
||||
passive: !0
|
||||
}))
|
||||
|
||||
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";
|
||||
|
||||
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() {
|
||||
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.animateToPosition = function (pos) {
|
||||
requestAnimationFrame(function () {
|
||||
options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
|
||||
});
|
||||
};
|
||||
|
||||
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.hideMask = function() {
|
||||
mask.classList.remove("backdrop")
|
||||
}, TouchMenuLA.prototype.invoke = function(fn) {
|
||||
fn && fn.apply(self)
|
||||
|
||||
TouchMenuLA.prototype.showMask = function () {
|
||||
mask.classList.remove("hide");
|
||||
mask.offsetWidth;
|
||||
mask.classList.add("backdrop");
|
||||
};
|
||||
|
||||
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, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
||||
passive: !0
|
||||
})) : _edgeSwipeEnabled && (_edgeSwipeEnabled = !1, dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
||||
passive: !0
|
||||
}), dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
||||
passive: !0
|
||||
}), dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
||||
passive: !0
|
||||
})))
|
||||
}, TouchMenuLA.prototype.initialize = function() {
|
||||
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, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}), dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
|
||||
passive: !0
|
||||
})), self.clickMaskClose()
|
||||
}, new TouchMenuLA
|
||||
}
|
||||
});
|
||||
|
||||
TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
|
||||
if (!options.disableEdgeSwipe) {
|
||||
if (browser.touch) {
|
||||
if (enabled) {
|
||||
if (!_edgeSwipeEnabled) {
|
||||
_edgeSwipeEnabled = true;
|
||||
dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (_edgeSwipeEnabled) {
|
||||
_edgeSwipeEnabled = false;
|
||||
dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
};
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue