[matrix] Refactor JS & add searchbar to mobile.

1 files changed, 39 insertions, 159 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index bb03bdbf..6e5c4ff5 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -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();
     }
+    activeModal = this;
+    this.element.hidden = false;
   }
-  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);
+class Search {
+
+  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');
   }
-}
 
-const settings = {
-  useSerifFont: {
-    settingType: "checkbox",
-    defaultValue: false,
-    setter: getRootAttributeToggle('font', 'serif')
-  },
-  setTheme: {
-    settingType: "radio",
-    defaultValue: "automatic",
-    setter: setTheme
+  open() {
+    this.openButton.hidden = true;
+    this.closeButton.hidden = false;
+    this.box.style.top = "100%";
+    this.bar.focus();
   }
-};
 
-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);
+  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");
-
-  resizeSidebar();
+  hamburgerToggle = document.getElementById('hamburger-toggle');
 
-  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();
   }
 });