krnr/ulovliglogning.dk
1
0
Fork 0
forked from ulovliglogning/ulovliglogning.dk
Code Issues Pull requests Releases Wiki Activity

remove broken scroll navscroll stuff

Browse source
This commit is contained in:
Jeppe Ernst 2018-02-03 21:53:30 +01:00
parent ec4603cd11
commit 86300b89da
1 changed files with 0 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
assets/js/main.js
View file

@ -1,126 +1,2 @@
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
);