54 lines
2.2 KiB
JavaScript
54 lines
2.2 KiB
JavaScript
const startingSlide = "#quick-picks-slide";
|
|
|
|
function initInteractiveElements() {
|
|
let configurationToggle = document.getElementById("configuration-toggle");
|
|
let configurationElem = document.getElementById("configuration");
|
|
configurationElem.addEventListener("show.bs.collapse", function () {
|
|
configurationToggle.classList.add("active");
|
|
});
|
|
configurationElem.addEventListener("hidden.bs.collapse", function () {
|
|
configurationToggle.classList.remove("active");
|
|
});
|
|
}
|
|
|
|
function initConfigVisuals() {
|
|
const minRatingDisplay = document.querySelector("#configuration #min-rating-display");
|
|
const minRatingSlider = document.querySelector("#configuration #min-rating");
|
|
const updateDisplay = function () {
|
|
minRatingDisplay.innerHTML = `Minimum rating: ${minRatingSlider.value}%`;
|
|
};
|
|
minRatingSlider.addEventListener("input", updateDisplay);
|
|
updateDisplay();
|
|
}
|
|
|
|
function initSlides() {
|
|
document.querySelectorAll("#content-pages > .selectors > .nav-item > button").forEach(tabElem => {
|
|
tabElem.addEventListener("click", () => {
|
|
const destUrl = new URL(tabElem.getAttribute("data-bs-target"), window.location.href);
|
|
if (location.href === destUrl.href) return;
|
|
history.pushState({}, document.title, destUrl);
|
|
});
|
|
});
|
|
const goTo = () => {
|
|
const match = location.href.match("(#[\\w-]+)");
|
|
const idAnchor = match && match[1] ? match[1] : startingSlide;
|
|
document.querySelector("#content-pages > .selectors > .nav-item > .active")?.classList.remove("active");
|
|
document.querySelector("#content-pages > .multipage-slides > .active.show")?.classList.remove("active", "show");
|
|
document.querySelector(`#content-pages > .selectors > .nav-item > [data-bs-target="${idAnchor}"]`).classList.add("active");
|
|
document.querySelector(`#content-pages > .multipage-slides > ${idAnchor}`).classList.add("active", "show");
|
|
};
|
|
window.addEventListener("popstate", goTo);
|
|
goTo();
|
|
|
|
require("bootstrap/js/dist/tab.js");
|
|
document.querySelector("#content-pages").classList.remove("invisible");
|
|
}
|
|
|
|
async function main() {
|
|
initInteractiveElements();
|
|
initConfigVisuals();
|
|
initSlides();
|
|
}
|
|
|
|
main();
|