This repository was archived by the owner on Sep 10, 2022. It is now read-only.
This repository was archived by the owner on Sep 10, 2022. It is now read-only.
Touch navigation does not work #85
Open
Description
I believe I know the answer why:
This is part the code for nav in the master:
this.rootElement = document.querySelector('.js-side-nav');
this.sideNavContent = this.rootElement
.querySelector('.js-side-nav-content');
this.sideNavBody = this.rootElement.querySelector('.side-nav__body');
this.rootElement.addEventListener('click', () => {
this.close();
});
this.sideNavContent.addEventListener('click', (e) => {
e.stopPropagation();
});
this.hasUnprefixedTransform = 'transform' in document.documentElement.style;
if (this.hasUnprefixedTransform) {
// Touch slop is a variable that is defined to suggest anything larger
// than this value was an intended gesture by the user.
// 8 is a value from Android platform.
// 3 was added as a factor made up from what felt right.
var TOUCH_SLOP = 8 * window.devicePixelRatio * 3;
var touchStartX;
var sideNavTransform;
var onSideNavTouchStart = (e) => {
e.preventDefault();
touchStartX = e.touches[0].pageX;
};
var onSideNavTouchMove = (e) => {
e.preventDefault();
var newTouchX = e.touches[0].pageX;
sideNavTransform = Math.min(0, newTouchX - touchStartX);
this.sideNavContent.style.transform =
'translateX(' + sideNavTransform + 'px)';
};
var onSideNavTouchEnd = (e) => {
if (sideNavTransform < -TOUCH_SLOP) {
this.close();
return;
}
this.open();
};
this.sideNavContent.addEventListener('touchstart', onSideNavTouchStart);
this.sideNavContent.addEventListener('touchmove', onSideNavTouchMove);
this.sideNavContent.addEventListener('touchend', onSideNavTouchEnd);
However this code from current demo, although obscured slightly, does not look similar but shortened, optimized and fixed the bug in master:
this.rootElement = document.querySelector(".js-side-nav"),
this.sideNavContent = this.rootElement.querySelector(".js-side-nav-content");
var n, r, i = function(e) {
n = e.touches[0].pageX
}, a = function(e) {
var o = e.touches[0].pageX;
r = Math.min(0, o - n),
0 > r && e.preventDefault(),
t.sideNavContent.style.transform = "translateX(" + r + "px)"
}, s = function(e) {
-1 > r && t.closeSideNav()
};
this.rootElement.addEventListener("click", function() {
t.close()
}),
this.sideNavContent.addEventListener("click", function(e) {
e.stopPropagation()
}),
this.sideNavContent.addEventListener("touchstart", i),
this.sideNavContent.addEventListener("touchmove", a),
this.sideNavContent.addEventListener("touchend", s)
If I spent the time to decode it and refactor the code and then do a pull request, seems not as efficient as someone who already seems to have a fix to push theirs to master?
For giggles I have the compiled version of the master code that also looks different from what is running on the demo:
this.rootElement = document.querySelector(".js-side-nav"),
this.sideNavContent = this.rootElement.querySelector(".js-side-nav-content"),
this.sideNavBody = this.rootElement.querySelector(".side-nav__body"),
this.rootElement.addEventListener("click", function() {
t.close()
}),
this.sideNavContent.addEventListener("click", function(e) {
e.stopPropagation()
}),
this.hasUnprefixedTransform = "transform"in document.documentElement.style,
this.hasUnprefixedTransform) {
var n, i, r = 8 * window.devicePixelRatio * 3, s = function(e) {
e.preventDefault(),
n = e.touches[0].pageX
}, a = function(e) {
e.preventDefault();
var o = e.touches[0].pageX;
i = Math.min(0, o - n),
t.sideNavContent.style.transform = "translateX(" + i + "px)"
}, u = function(e) {
return i < -r ? void t.close() : void t.open()
};
this.sideNavContent.addEventListener("touchstart", s),
this.sideNavContent.addEventListener("touchmove", a),
this.sideNavContent.addEventListener("touchend", u)
Please and thank you for fixing and looking at this :)
Metadata
Metadata
Assignees
Labels
No labels