This repository has been archived on 2022-08-26. You can view files and clone it, but cannot push or open issues or pull requests.
gosocial/web/static/js/bulma.js
Noah Petherbridge e80d4e6ad6 iPad Friendly Nav Bar + Mobile NavBar Notifications
* iPad in landscape mode was "desktop" size so got the full nav bar but
  the "More" drop-down was unusable. Add work-arounds for large touch
  devices to make the nav bar functional.
* "Click" on the "More" button will pin it open so that the drop-down
  doesn't rely solely on mouseover events. Clicking off the open
  drop-down or clicking again on "More" toggles it hidden.
* The logged-in user menu now drops its menu on hover like "More" did.
* The logged-in user menu adds "TouchStart" events: touching the menu
  button toggles its drop-down to appear, canceling the link to "/me"
  that clicking the menu button does on desktops. Clicking off the open
  drop-down closes it.
* Add notification indicators for "mobile" devices which only showed the
  brand and hamburger menu by default. Next to the hamburger button will
  be badges for number of friend requests or messages, with icons. Click
  the badge to go to the relevant page, or it hints that there are
  notifications in the drop-down.
2022-08-21 21:35:01 -07:00

75 lines
2.5 KiB
JavaScript

// Hamburger menu script for mobile.
document.addEventListener('DOMContentLoaded', () => {
// 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.
userMenu.addEventListener("touchstart", (e) => {
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");
node.addEventListener("click", () => {
target.classList.remove("is-active");
});
});
});