[matrix] Refactor JS & add searchbar to mobile.
This commit is contained in:
Josh
Rapptz
204
docs/_static/custom.js
vendored
204
docs/_static/custom.js
vendored
@@ -1,140 +1,69 @@
|
||||
'use-strict';
|
||||
|
||||
let activeModal = null;
|
||||
let activeLink = null;
|
||||
let bottomHeightThreshold, sections;
|
||||
let settingsModal;
|
||||
let hamburgerToggle;
|
||||
let mobileSearch;
|
||||
let sidebar;
|
||||
|
||||
function resizeSidebar() {
|
||||
let rect = sidebar.getBoundingClientRect();
|
||||
sidebar.style.height = `calc(100vh - 1em - ${rect.top + document.body.offsetTop}px)`;
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
activeModal = null;
|
||||
modal.hidden = true;
|
||||
}
|
||||
|
||||
function openModal(modal) {
|
||||
if (activeModal) {
|
||||
closeModal(activeModal);
|
||||
class Modal {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
activeModal = modal;
|
||||
modal.hidden = false;
|
||||
}
|
||||
|
||||
function changeDocumentation(element) {
|
||||
window.location = element.value;
|
||||
}
|
||||
|
||||
function updateSetting(element) {
|
||||
let value;
|
||||
switch (element.type) {
|
||||
case "checkbox":
|
||||
localStorage.setItem(element.name, element.checked);
|
||||
value = element.checked;
|
||||
break;
|
||||
case "radio":
|
||||
localStorage.setItem(element.name, `"${element.value}"`);
|
||||
value = element.value;
|
||||
break;
|
||||
close() {
|
||||
activeModal = null;
|
||||
this.element.hidden = true;
|
||||
}
|
||||
if (element.name in settings) {
|
||||
settings[element.name]["setter"](value);
|
||||
}
|
||||
}
|
||||
|
||||
function LoadSetting(name, defaultValue) {
|
||||
let value = JSON.parse(localStorage.getItem(name));
|
||||
return value === null ? defaultValue : value;
|
||||
}
|
||||
|
||||
function getRootAttributeToggle(attributeName, valueName) {
|
||||
function toggleRootAttribute(set) {
|
||||
if (set) {
|
||||
document.documentElement.setAttribute(`data-${attributeName}`, valueName);
|
||||
} else {
|
||||
document.documentElement.removeAttribute(`data-${attributeName}`);
|
||||
open() {
|
||||
if (activeModal) {
|
||||
activeModal.close();
|
||||
}
|
||||
}
|
||||
return toggleRootAttribute;
|
||||
}
|
||||
|
||||
function setTheme(value) {
|
||||
if (value === "automatic") {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute(`data-theme`, "dark");
|
||||
} else{
|
||||
document.documentElement.setAttribute(`data-theme`, "light");
|
||||
}
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute(`data-theme`, value);
|
||||
activeModal = this;
|
||||
this.element.hidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
const settings = {
|
||||
useSerifFont: {
|
||||
settingType: "checkbox",
|
||||
defaultValue: false,
|
||||
setter: getRootAttributeToggle('font', 'serif')
|
||||
},
|
||||
setTheme: {
|
||||
settingType: "radio",
|
||||
defaultValue: "automatic",
|
||||
setter: setTheme
|
||||
}
|
||||
};
|
||||
class Search {
|
||||
|
||||
Object.entries(settings).forEach(([name, setting]) => {
|
||||
let { defaultValue, setter, ..._ } = setting;
|
||||
let value = LoadSetting(name, defaultValue);
|
||||
try {
|
||||
setter(value);
|
||||
} catch (error) {
|
||||
console.error(`Failed to apply setting "${name}" With value:`, value);
|
||||
console.error(error);
|
||||
constructor() {
|
||||
this.box = document.querySelector('nav.mobile-only');
|
||||
this.bar = document.querySelector('nav.mobile-only input[type="search"]');
|
||||
this.openButton = document.getElementById('open-search');
|
||||
this.closeButton = document.getElementById('close-search');
|
||||
}
|
||||
});
|
||||
|
||||
open() {
|
||||
this.openButton.hidden = true;
|
||||
this.closeButton.hidden = false;
|
||||
this.box.style.top = "100%";
|
||||
this.bar.focus();
|
||||
}
|
||||
|
||||
close() {
|
||||
this.openButton.hidden = false;
|
||||
this.closeButton.hidden = true;
|
||||
this.box.style.top = "0";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
mobileSearch = new Search();
|
||||
|
||||
bottomHeightThreshold = document.documentElement.scrollHeight - 30;
|
||||
sections = document.querySelectorAll('section');
|
||||
settingsModal = document.querySelector('div#settings.modal');
|
||||
hamburgerToggle = document.getElementById("hamburger-toggle");
|
||||
sidebar = document.getElementById("sidebar");
|
||||
hamburgerToggle = document.getElementById('hamburger-toggle');
|
||||
|
||||
resizeSidebar();
|
||||
|
||||
sidebar.addEventListener("click", (e) => {
|
||||
// If we click a navigation, close the hamburger menu
|
||||
if (e.target.tagName == "A" && sidebar.classList.contains("sidebar-toggle")) {
|
||||
sidebar.classList.remove("sidebar-toggle");
|
||||
let button = hamburgerToggle.firstElementChild;
|
||||
button.textContent = "menu";
|
||||
|
||||
// Scroll a little up to actually see the header
|
||||
// Note: this is generally around ~55px
|
||||
// A proper solution is getComputedStyle but it can be slow
|
||||
// Instead let's just rely on this quirk and call it a day
|
||||
// This has to be done after the browser actually processes
|
||||
// the section movement
|
||||
setTimeout(() => window.scrollBy(0, -100), 75);
|
||||
}
|
||||
})
|
||||
|
||||
hamburgerToggle.addEventListener("click", (e) => {
|
||||
sidebar.classList.toggle("sidebar-toggle");
|
||||
hamburgerToggle.addEventListener('click', (e) => {
|
||||
sidebar.element.classList.toggle('sidebar-toggle');
|
||||
let button = hamburgerToggle.firstElementChild;
|
||||
if (button.textContent == "menu") {
|
||||
button.textContent = "close";
|
||||
if (button.textContent == 'menu') {
|
||||
button.textContent = 'close';
|
||||
}
|
||||
else {
|
||||
button.textContent = "menu";
|
||||
button.textContent = 'menu';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -145,59 +74,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// insert ourselves after the element
|
||||
parent.insertBefore(table, element.nextSibling);
|
||||
});
|
||||
|
||||
Object.entries(settings).forEach(([name, setting]) => {
|
||||
let { settingType, defaultValue, ..._ } = setting;
|
||||
let value = LoadSetting(name, defaultValue);
|
||||
if (settingType === "checkbox") {
|
||||
let element = document.querySelector(`input[name=${name}]`);
|
||||
element.checked = value;
|
||||
} else {
|
||||
let element = document.querySelector(`input[name=${name}][value=${value}]`);
|
||||
element.checked = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let currentSection = null;
|
||||
|
||||
if (window.scrollY + window.innerHeight > bottomHeightThreshold) {
|
||||
currentSection = sections[sections.length - 1];
|
||||
}
|
||||
else {
|
||||
if (sections) {
|
||||
sections.forEach(section => {
|
||||
let rect = section.getBoundingClientRect();
|
||||
if (rect.top + document.body.offsetTop < 1) {
|
||||
currentSection = section;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (activeLink) {
|
||||
activeLink.parentElement.classList.remove('active');
|
||||
}
|
||||
|
||||
if (currentSection) {
|
||||
activeLink = document.querySelector(`#sidebar a[href="#${currentSection.id}"]`);
|
||||
if (activeLink) {
|
||||
let headingChildren = activeLink.parentElement.parentElement;
|
||||
let heading = headingChildren.previousElementSibling.previousElementSibling;
|
||||
|
||||
if (heading && headingChildren.style.display === "none") {
|
||||
activeLink = heading;
|
||||
}
|
||||
activeLink.parentElement.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
resizeSidebar();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.keyCode == 27 && activeModal) {
|
||||
closeModal(activeModal);
|
||||
if (event.code == "Escape" && activeModal) {
|
||||
activeModal.close();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user