131 lines
4.2 KiB
JavaScript
131 lines
4.2 KiB
JavaScript
// Hamburger menu script for mobile.
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// Make all off-site hyperlinks open in a new tab.
|
|
(document.querySelectorAll("a") || []).forEach(node => {
|
|
let href = node.attributes.href;
|
|
if (href === undefined) return;
|
|
href = href.textContent;
|
|
if (href.indexOf("http:") === 0 || href.indexOf("https:") === 0) {
|
|
node.target = "_blank";
|
|
}
|
|
});
|
|
|
|
// Hamburger menu script.
|
|
(function() {
|
|
// Get all "navbar-burger" elements
|
|
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
|
|
|
// Add a click event on each of them
|
|
$navbarBurgers.forEach( el => {
|
|
el.addEventListener('click', () => {
|
|
|
|
// Get the target from the "data-target" attribute
|
|
const target = el.dataset.target;
|
|
const $target = document.getElementById(target);
|
|
|
|
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
|
el.classList.toggle('is-active');
|
|
$target.classList.toggle('is-active');
|
|
|
|
});
|
|
});
|
|
})();
|
|
|
|
// Allow the "More" drop-down to work on mobile (toggle is-active on click instead of requiring mouseover)
|
|
(function() {
|
|
const menu = document.querySelector("#navbar-more"),
|
|
userMenu = document.querySelector("#navbar-user"),
|
|
activeClass = "is-active";
|
|
|
|
if (!menu) return;
|
|
|
|
// Click the "More" menu to permanently toggle the menu.
|
|
menu.addEventListener("click", (e) => {
|
|
if (menu.classList.contains(activeClass)) {
|
|
menu.classList.remove(activeClass);
|
|
} else {
|
|
menu.classList.add(activeClass);
|
|
}
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Touching the user drop-down button toggles it.
|
|
if (userMenu !== null) {
|
|
userMenu.addEventListener("touchstart", (e) => {
|
|
// On mobile/tablet screens they had to hamburger menu their way here anyway, let it thru.
|
|
if (screen.width < 1024) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
if (userMenu.classList.contains(activeClass)) {
|
|
userMenu.classList.remove(activeClass);
|
|
} else {
|
|
userMenu.classList.add(activeClass);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Touching a link from the user menu lets it click thru.
|
|
(document.querySelectorAll(".navbar-dropdown") || []).forEach(node => {
|
|
node.addEventListener("touchstart", (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
|
|
// Clicking the rest of the body will close an active navbar-dropdown.
|
|
(document.addEventListener("click", (e) => {
|
|
(document.querySelectorAll(".navbar-dropdown.is-active, .navbar-item.is-active") || []).forEach(node => {
|
|
node.classList.remove(activeClass);
|
|
});
|
|
}));
|
|
})();
|
|
|
|
// Common event handlers for bulma modals.
|
|
(document.querySelectorAll(".modal-background, .modal-close, .photo-modal") || []).forEach(node => {
|
|
const target = node.closest(".modal");
|
|
if (target.classList.contains("vue-managed")) return;
|
|
node.addEventListener("click", () => {
|
|
target.classList.remove("is-active");
|
|
});
|
|
});
|
|
|
|
// Collapsible cards for mobile view (e.g. People Search filters box)
|
|
(document.querySelectorAll(".card.nonshy-collapsible-mobile") || []).forEach(node => {
|
|
const header = node.querySelector(".card-header"),
|
|
body = node.querySelector(".card-content"),
|
|
icon = header.querySelector("button.card-header-icon > .icon > i");
|
|
|
|
// Icon classes.
|
|
const iconExpanded = "fa-angle-up",
|
|
iconContracted = "fa-angle-down";
|
|
|
|
// If we are already on mobile, hide the body now.
|
|
if (screen.width <= 768) {
|
|
body.style.display = "none";
|
|
if (icon !== null) {
|
|
icon.classList.remove(iconExpanded);
|
|
icon.classList.add(iconContracted);
|
|
}
|
|
}
|
|
|
|
// Add click toggle handler to the header.
|
|
header.addEventListener("click", () => {
|
|
if (body.style.display === "none") {
|
|
body.style.display = "block";
|
|
if (icon !== null) {
|
|
icon.classList.remove(iconContracted);
|
|
icon.classList.add(iconExpanded);
|
|
}
|
|
} else {
|
|
body.style.display = "none";
|
|
if (icon !== null) {
|
|
icon.classList.remove(iconExpanded);
|
|
icon.classList.add(iconContracted);
|
|
}
|
|
}
|
|
});
|
|
})
|
|
});
|