126 lines
5.4 KiB
JavaScript
126 lines
5.4 KiB
JavaScript
document.documentElement.classList.remove("no-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
|
|
); |