remove broken scroll navscroll stuff
This commit is contained in:
Jeppe Ernst
parent
ec4603cd11
commit
86300b89da
|
|
@ -1,126 +1,2 @@
|
||||||
document.documentElement.classList.remove("no-js");
|
document.documentElement.classList.remove("no-js");
|
||||||
document.documentElement.classList.add("js");
|
document.documentElement.classList.add("js");
|
||||||
|
|
||||||
var SETTINGS = {
|
|
||||||
navTravelling: false,
|
|
||||||
navTravelDirection: "",
|
|
||||||
navTravelDistance: 150
|
|
||||||
}
|
|
||||||
|
|
||||||
function determineOverflow(content, container) {
|
|
||||||
var containerMetrics = container.getBoundingClientRect();
|
|
||||||
var containerMetricsRight = Math.floor(containerMetrics.right);
|
|
||||||
var containerMetricsLeft = Math.floor(containerMetrics.left);
|
|
||||||
var contentMetrics = content.getBoundingClientRect();
|
|
||||||
var contentMetricsRight = Math.floor(contentMetrics.right);
|
|
||||||
var contentMetricsLeft = Math.floor(contentMetrics.left);
|
|
||||||
if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
|
|
||||||
return "both";
|
|
||||||
} else if (contentMetricsLeft < containerMetricsLeft) {
|
|
||||||
return "left";
|
|
||||||
} else if (contentMetricsRight > containerMetricsRight) {
|
|
||||||
return "right";
|
|
||||||
} else {
|
|
||||||
return "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var nav = document.getElementById("navWrapper")
|
|
||||||
var navElements = document.getElementById("navElements")
|
|
||||||
var navAdvancerLeft = document.getElementById("navAdvancerLeft");
|
|
||||||
var navAdvancerRight = document.getElementById("navAdvancerRight");
|
|
||||||
var last_known_scroll_position = 0;
|
|
||||||
var ticking = false;
|
|
||||||
|
|
||||||
setOverflowIndicator();
|
|
||||||
|
|
||||||
function setOverflowIndicator(scroll_pos) {
|
|
||||||
nav.setAttribute("data-overflowing", determineOverflow(navElements, nav));
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.addEventListener("scroll", function() {
|
|
||||||
last_known_scroll_position = window.scrollY;
|
|
||||||
if (!ticking) {
|
|
||||||
window.requestAnimationFrame(function() {
|
|
||||||
setOverflowIndicator(last_known_scroll_position);
|
|
||||||
ticking = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
ticking = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
navAdvancerLeft.addEventListener("click", function() {
|
|
||||||
// If in the middle of a move return
|
|
||||||
if (SETTINGS.navTravelling === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// If we have content overflowing both sides or on the left
|
|
||||||
if (determineOverflow(navElements, nav) === "left" || determineOverflow(navElements, nav) === "both") {
|
|
||||||
// Find how far this panel has been scrolled
|
|
||||||
var availableScrollLeft = nav.scrollLeft;
|
|
||||||
// If the space available is less than two lots of our desired distance, just move the whole amount
|
|
||||||
// otherwise, move by the amount in the settings
|
|
||||||
if (availableScrollLeft < SETTINGS.navTravelDistance * 2) {
|
|
||||||
navElements.style.transform = "translateX(" + availableScrollLeft + "px)";
|
|
||||||
} else {
|
|
||||||
navElements.style.transform = "translateX(" + SETTINGS.navTravelDistance + "px)";
|
|
||||||
}
|
|
||||||
// We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
|
|
||||||
navElements.classList.remove("pn-ProductNav_Contents-no-transition");
|
|
||||||
// Update our settings
|
|
||||||
SETTINGS.navTravelDirection = "left";
|
|
||||||
SETTINGS.navTravelling = true;
|
|
||||||
}
|
|
||||||
// Now update the attribute in the DOM
|
|
||||||
nav.setAttribute("data-overflowing", determineOverflow(navElements, nav));
|
|
||||||
});
|
|
||||||
|
|
||||||
navAdvancerRight.addEventListener("click", function() {
|
|
||||||
// If in the middle of a move return
|
|
||||||
if (SETTINGS.navTravelling === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// If we have content overflowing both sides or on the right
|
|
||||||
if (determineOverflow(navElements, nav) === "right" || determineOverflow(navElements, nav) === "both") {
|
|
||||||
// Get the right edge of the container and content
|
|
||||||
var navBarRightEdge = navElements.getBoundingClientRect().right;
|
|
||||||
var navBarScrollerRightEdge = nav.getBoundingClientRect().right;
|
|
||||||
// Now we know how much space we have available to scroll
|
|
||||||
var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge);
|
|
||||||
// If the space available is less than two lots of our desired distance, just move the whole amount
|
|
||||||
// otherwise, move by the amount in the settings
|
|
||||||
if (availableScrollRight < SETTINGS.navTravelDistance * 2) {
|
|
||||||
navElements.style.transform = "translateX(-" + availableScrollRight + "px)";
|
|
||||||
} else {
|
|
||||||
navElements.style.transform = "translateX(-" + SETTINGS.navTravelDistance + "px)";
|
|
||||||
}
|
|
||||||
// We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
|
|
||||||
navElements.classList.remove("pn-ProductNav_Contents-no-transition");
|
|
||||||
// Update our settings
|
|
||||||
SETTINGS.navTravelDirection = "right";
|
|
||||||
SETTINGS.navTravelling = true;
|
|
||||||
}
|
|
||||||
// Now update the attribute in the DOM
|
|
||||||
nav.setAttribute("data-overflowing", determineOverflow(navElements, nav));
|
|
||||||
});
|
|
||||||
|
|
||||||
navElements.addEventListener(
|
|
||||||
"transitionend",
|
|
||||||
function() {
|
|
||||||
// get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
|
|
||||||
var styleOfTransform = window.getComputedStyle(navElements, null);
|
|
||||||
var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");
|
|
||||||
// If there is no transition we want to default to 0 and not null
|
|
||||||
var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);
|
|
||||||
navElements.style.transform = "none";
|
|
||||||
navElements.classList.add("pn-ProductNav_Contents-no-transition");
|
|
||||||
// Now lets set the scroll position
|
|
||||||
if (SETTINGS.navTravelDirection === "left") {
|
|
||||||
nav.scrollLeft = nav.scrollLeft - amount;
|
|
||||||
} else {
|
|
||||||
nav.scrollLeft = nav.scrollLeft + amount;
|
|
||||||
}
|
|
||||||
SETTINGS.navTravelling = false;
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
Loading…
Reference in a new issue