86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import { Collapse, Offcanvas } from "bootstrap";
|
|
|
|
// * Menu Bar
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const menuBarBtn = document.getElementById("menu-bar")?.querySelector("button"),
|
|
mainMenu = document.getElementById("main-menu"),
|
|
header = document.querySelector("body > header") as HTMLElement | null;
|
|
|
|
if (menuBarBtn && mainMenu && header) {
|
|
const offCanvas = new Offcanvas(mainMenu);
|
|
mainMenu.addEventListener("hide.bs.offcanvas", () => {
|
|
header.classList.remove("hide-header-bg");
|
|
});
|
|
mainMenu.addEventListener("hidden.bs.offcanvas", () => {
|
|
menuBarBtn.ariaExpanded = "false";
|
|
});
|
|
mainMenu.addEventListener("show.bs.offcanvas", () => {
|
|
header.classList.add("hide-header-bg");
|
|
});
|
|
mainMenu.addEventListener("shown.bs.offcanvas", () => {
|
|
menuBarBtn.ariaExpanded = "true";
|
|
});
|
|
menuBarBtn.addEventListener("click", () => {
|
|
if (menuBarBtn.ariaExpanded === "true") {
|
|
// Oppened
|
|
offCanvas.hide();
|
|
} else {
|
|
// Closed
|
|
offCanvas.show();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// * Stickies on mobile.
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const stickyDiv = document.getElementById("sticky-blocks") as HTMLDivElement;
|
|
if (stickyDiv) {
|
|
stickyDiv.style.display = "none";
|
|
|
|
document.onscroll = function () {
|
|
const stickyDisplayerDiv = document.getElementById("sticky-displayer") as HTMLDivElement;
|
|
|
|
if (stickyDisplayerDiv) {
|
|
const scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
|
|
if (scrollTop < stickyDisplayerDiv.offsetTop - 100) {
|
|
stickyDiv.style.display = "none";
|
|
} else {
|
|
stickyDiv.style.display = "block";
|
|
}
|
|
}
|
|
};
|
|
}
|
|
});
|
|
|
|
// * Search Bar
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const searchBarBtn = document.getElementById("search-bar")?.querySelector("button"),
|
|
inputSearchBoxWrapper = document.getElementById("search-textbox-wrapper");
|
|
|
|
// * Search bar collapser
|
|
if (inputSearchBoxWrapper && searchBarBtn) {
|
|
const searchCollapser = new Collapse(inputSearchBoxWrapper, {
|
|
toggle: false
|
|
});
|
|
inputSearchBoxWrapper.addEventListener("hidden.bs.collapse", () => {searchBarBtn.ariaExpanded = "false";});
|
|
inputSearchBoxWrapper.addEventListener("shown.bs.collapse", () => {searchBarBtn.ariaExpanded = "true";});
|
|
searchBarBtn.addEventListener("click", () => {
|
|
if (searchBarBtn.ariaExpanded === "true") {
|
|
// Oppened
|
|
searchCollapser.hide();
|
|
setTimeout(() => {
|
|
searchBarBtn.classList.add("rounded-pill");
|
|
searchBarBtn.classList.remove("rounded-start-pill");
|
|
}, 300);
|
|
} else {
|
|
// Closed
|
|
searchBarBtn.classList.remove("rounded-pill");
|
|
searchBarBtn.classList.add("rounded-start-pill");
|
|
setTimeout(() => {
|
|
searchCollapser.show();
|
|
}, 60);
|
|
}
|
|
});
|
|
}
|
|
});
|