[matrix] Refactor JS & add searchbar to mobile.

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)`;
-}
+class Modal {
+  constructor(element) {
+    this.element = element;
+  }
 
-function closeModal(modal) {
+  close() {
     activeModal = null;
-  modal.hidden = true;
-}
+    this.element.hidden = true;
+  }
 
-function openModal(modal) {
+  open() {
     if (activeModal) {
-    closeModal(activeModal);
+      activeModal.close();
     }
-
-  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;
-  }
-  if (element.name in settings) {
-    settings[element.name]["setter"](value);
+    activeModal = this;
+    this.element.hidden = false;
   }
 }
 
-function LoadSetting(name, defaultValue) {
-  let value = JSON.parse(localStorage.getItem(name));
-  return value === null ? defaultValue : 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');
+  }
+
+  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";
+  }
+
 }
 
-function getRootAttributeToggle(attributeName, valueName) {
-  function toggleRootAttribute(set) {
-    if (set) {
-      document.documentElement.setAttribute(`data-${attributeName}`, valueName);
-    } else {
-      document.documentElement.removeAttribute(`data-${attributeName}`);
-    }
-  }
-  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);
-  }
-}
-
-const settings = {
-  useSerifFont: {
-    settingType: "checkbox",
-    defaultValue: false,
-    setter: getRootAttributeToggle('font', 'serif')
-  },
-  setTheme: {
-    settingType: "radio",
-    defaultValue: "automatic",
-    setter: setTheme
-  }
-};
-
-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);
-  }
-});
-
 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");
+  hamburgerToggle.addEventListener('click', (e) => {
+    sidebar.element.classList.toggle('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");
-    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();
   }
 });

docs/_static/settings.js

@@ -0,0 +1,106 @@
+'use-strict';
+
+let settingsModal;
+
+class Setting {
+  constructor(name, defaultValue, setter) {
+    this.name = name;
+    this.defaultValue = defaultValue;
+    this.setValue = setter;
+  }
+
+  setElement() {
+    throw new TypeError('Abstract methods should be implemented.');
+  }
+
+  load() {
+    let value = JSON.parse(localStorage.getItem(this.name));
+    this.value = value === null ? this.defaultValue : value;
+    try {
+      this.setValue(value);
+    } catch (error) {
+      console.error(`Failed to apply setting "${this.name}" With value:`, this.value);
+      console.error(error);
+    }
+  }
+
+  update() {
+    throw new TypeError('Abstract methods should be implemented.');
+  }
+
+}
+
+class CheckboxSetting extends Setting {
+
+  setElement() {
+    let element = document.querySelector(`input[name=${this.name}]`);
+    element.checked = this.value;
+  }
+
+  update(element) {
+    localStorage.setItem(this.name, element.checked);
+    this.setValue(element.checked);
+  }
+
+}
+
+class RadioSetting extends Setting {
+
+  setElement() {
+    let element = document.querySelector(`input[name=${this.name}][value=${this.value}]`);
+    element.checked = true;
+  }
+
+  update(element) {
+    localStorage.setItem(this.name, `"${element.value}"`);
+    this.setValue(element.value);
+  }
+
+}
+
+function getRootAttributeToggle(attributeName, valueName) {
+  function toggleRootAttribute(set) {
+    if (set) {
+      document.documentElement.setAttribute(`data-${attributeName}`, valueName);
+    } else {
+      document.documentElement.removeAttribute(`data-${attributeName}`);
+    }
+  }
+  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);
+  }
+}
+
+const settings = [
+  new CheckboxSetting('useSerifFont', false, getRootAttributeToggle('font', 'serif')),
+  new RadioSetting('setTheme', 'automatic', setTheme)
+]
+
+function updateSetting(element) {
+  let setting = settings.find((s) => s.name == element.name);
+  if (setting) {
+    setting.update(element);
+  }
+}
+
+for (const setting of settings) {
+  setting.load();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  settingsModal = new Modal(document.querySelector('div#settings.modal'));
+  for (const setting of settings) {
+    setting.setElement();
+  }
+});

docs/_static/sidebar.js

@@ -1,24 +1,28 @@
-function collapseSection(icon) {
-    icon.classList.remove('expanded');
-    icon.classList.add('collapsed');
-    icon.innerText = 'chevron_right';
-    let children = icon.nextElementSibling.nextElementSibling;
-    // <arrow><heading> 
-    // --> <square><children>
-    children.style.display = "none";
-}
+class Sidebar {
+  constructor(element) {
+    this.element = element;
+    this.activeLink = null;
 
-function expandSection(icon) {
-    icon.classList.remove('collapse');
-    icon.classList.add('expanded');
-    icon.innerText = 'expand_more';
-    let children = icon.nextElementSibling.nextElementSibling;
-    children.style.display = "block";
-}
+    this.element.addEventListener('click', (e) => {
+      // If we click a navigation, close the hamburger menu
+      if (e.target.tagName == 'A' && this.element.classList.contains('sidebar-toggle')) {
+        this.element.classList.remove('sidebar-toggle');
+        let button = hamburgerToggle.firstElementChild;
+        button.textContent = 'menu';
 
-document.addEventListener('DOMContentLoaded', () => {
-    let sidebar = document.getElementById('sidebar');
-    let toc = sidebar.querySelector('ul');
+        // 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);
+      }
+    });
+  }
+
+  createCollapsableSections() {
+    let toc = this.element.querySelector('ul');
     let allReferences = toc.querySelectorAll('a.reference.internal:not([href="#"])');
 
     for (let ref of allReferences) {
@@ -47,4 +51,77 @@ document.addEventListener('DOMContentLoaded', () => {
         ref.parentNode.insertBefore(icon, ref);
       }
     }
+  }
+
+  resize() {
+    let rect = this.element.getBoundingClientRect();
+    this.element.style.height = `calc(100vh - 1em - ${rect.top + document.body.offsetTop}px)`;
+  }
+
+  collapseSection(icon) {
+    icon.classList.remove('expanded');
+    icon.classList.add('collapsed');
+    icon.innerText = 'chevron_right';
+    let children = icon.nextElementSibling.nextElementSibling;
+    // <arrow><heading> 
+    // --> <square><children>
+    children.style.display = "none";
+  }
+
+  expandSection(icon) {
+    icon.classList.remove('collapse');
+    icon.classList.add('expanded');
+    icon.innerText = 'expand_more';
+    let children = icon.nextElementSibling.nextElementSibling;
+    children.style.display = "block";
+  }
+
+  setActiveLink(section) {
+    if (this.activeLink) {
+      this.activeLink.parentElement.classList.remove('active');
+    }
+    if (section) {
+      this.activeLink = document.querySelector(`#sidebar a[href="#${section.id}"]`);
+      if (this.activeLink) {
+        let headingChildren = this.activeLink.parentElement.parentElement;
+        let heading = headingChildren.previousElementSibling.previousElementSibling;
+
+        if (heading && headingChildren.style.display === 'none') {
+          this.activeLink = heading;
+        }
+        this.activeLink.parentElement.classList.add('active');
+      }
+    }
+  }
+
+}
+
+function getCurrentSection() {
+  let currentSection;
+  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;
+        }
+      });
+    }
+  }
+  return currentSection;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  sidebar = new Sidebar(document.getElementById('sidebar'));
+  sidebar.resize();
+  sidebar.createCollapsableSections();
+
+  window.addEventListener('scroll', () => {
+    sidebar.setActiveLink(getCurrentSection());
+    sidebar.resize();
+  });
 });
+

docs/_static/style.css

@@ -233,22 +233,44 @@ a:hover {
 
 /* headers */
 
-header {
+header.grid-item {
   grid-area: h;
-  background-color: var(--sub-header-background);
   color: var(--main-text);
+  position: relative;
+  z-index: 1;
+  padding: 0;
 }
 
 header > nav {
+  background-color: var(--sub-header-background);
+  padding: 0.8em;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }
 
-header > nav > a {
+header > nav a {
   color: var(--white);
 }
 
+header > nav.mobile-only {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: -1;
+  padding-top: 0;
+  transition: top 0.5s ease-in-out;
+}
+
+header > nav.mobile-only .search {
+  width: 100%;
+}
+
+header > nav.mobile-only .search-wrapper {
+  background-color: var(--sub-header-background);
+}
+
 .main-heading {
   margin-right: auto;
 }
@@ -402,18 +424,20 @@ aside .material-icons,
 
 /* search button stuff */
 
-.searchwrapper {
+.search-wrapper {
   display: flex;
   align-items: stretch;
 }
 
-.searchwrapper > input[type=search] {
+.search-wrapper > input[type=search] {
   font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
+  outline: none;
+  appearance: none;
   font-size: 1em;
 }
 
-.searchwrapper > input[type=search],
-.searchwrapper > button[type=submit] {
+.search-wrapper > input[type=search],
+.search-wrapper > button[type=submit] {
   background-color: var(--sub-header-background);
   border: none;
   color: var(--search-text);
@@ -422,28 +446,28 @@ aside .material-icons,
   flex: 9;
 }
 
-.searchwrapper {
+.search-wrapper {
   border-bottom: 1px solid var(--search-border);
 }
 
-.searchwrapper:focus-within {
+.search-wrapper:focus-within {
   border-bottom: 1px solid var(--search-focus);
 }
 
-/* .searchwrapper > input[type=search] {
+/* .search-wrapper > input[type=search] {
   border: 1px solid var(--search-border);
   border-right: none;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.searchwrapper > input[type=search]:focus,
+.search-wrapper > input[type=search]:focus,
 button[type=submit]:focus ~ input[type=search] {
   border: 1px solid var(--search-focus);
   border-right: none;
 } */
 
-.searchwrapper > button[type=submit] {
+.search-wrapper > button[type=submit] {
   color: var(--search-button);
   /* border: 1px solid var(--search-border); */
   /* border-left: none; */
@@ -453,13 +477,13 @@ button[type=submit]:focus ~ input[type=search] {
   flex: 1;
 }
 
-/* .searchwrapper > button[type=submit]:focus,
+/* .search-wrapper > button[type=submit]:focus,
 input[type=search]:focus ~ button[type=submit] {
   border: 1px solid var(--search-focus);
   border-left: none;
 } */
 
-.searchwrapper > button[type=submit]:hover {
+.search-wrapper > button[type=submit]:hover {
   background-color: var(--search-border);
   color: var(--search-button-hover);
 }
@@ -1088,6 +1112,10 @@ div.code-block-caption {
     background-color: var(--black);
   }
 
+  header > nav {
+    background-color: unset;
+  }
+
   .sub-header {
     display: flex;
     align-items: center;

docs/_templates/layout.html

@@ -62,14 +62,25 @@
         <a href="https://github.com/Rapptz/discord.py" title="GitHub"><span class="material-icons custom-icons">github</span></a>
         <a href="{{ discord_invite }}" title="{{ _('Discord') }}"><span class="material-icons custom-icons">discord</span></a>
         <a href="{{ pathto('faq') }}" title="FAQ"><span class="material-icons">help_center</span></a>
-        <a href="{{ pathto('search') }}" title="{{ _('Search') }}" class='mobile-only'><span class="material-icons">search</span></a>
         {#- If we have more links we can put them here #}
+        <a onclick="mobileSearch.open();" title="{{ _('Search') }}" id="open-search" class="mobile-only"><span class="material-icons">search</span></a>
+        <a onclick="mobileSearch.close();" title="{{ _('Close') }}" id="close-search" class="mobile-only" hidden><span class="material-icons">close</span></a>
+      </nav>
+      <nav class="mobile-only">
+        <form role="search" class="search" action="search.html" method="get">
+          <div class="search-wrapper">
+            <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
+            <button type="submit">
+              <span class="material-icons">search</span>
+            </button>
+          </div>
+        </form>
       </nav>
     </header>
     {#- The sub-header with search and extension related selection #}
     <div class="sub-header grid-item">
       <label for="documentation_select">{{ _('View Documentation For') }}</label>
-      <select id="documentation_select" onchange="changeDocumentation(this)">
+      <select id="documentation_select" onchange="window.location = this.value;">
         {%- if pagename is prefixedwith 'ext/' %}
         <option value="{{ pathto(master_doc)|e }}">discord</option>
         {%- else %}
@@ -80,21 +91,21 @@
         {%- endfor %}
       </select>
       <form role="search" class="search" action="search.html" method="get">
-        <div class="searchwrapper">
+        <div class="search-wrapper">
           <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
           <button type="submit">
             <span class="material-icons">search</span>
           </button>
         </div>
       </form>
-      <a accesskey="S" class="settings" onclick="openModal(settingsModal);"><span class="material-icons">settings</span></a>
+      <a accesskey="S" class="settings" onclick="settingsModal.open();"><span class="material-icons">settings</span></a>
     </div>
     {#- The sidebar component #}
     <aside class="grid-item">
       <span id="hamburger-toggle">
         <span class="material-icons">menu</span>
       </span>
-      <span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
+      <span id="settings-toggle" class="settings" onclick="settingsModal.open();">
         <span class="material-icons">settings</span>
       </span>
       <div id="sidebar">
@@ -125,7 +136,7 @@
   </div>
   {%- if READTHEDOCS %}
   <script>
-    if (typeof READTHEDOCS_DATA !== 'undefined') {
+    if (typeof READTHEDOCS_DATA !== "undefined") {
         if (!READTHEDOCS_DATA.features) {
           READTHEDOCS_DATA.features = {};
         }
@@ -134,15 +145,15 @@
   </script>
   {%- endif %}
 
-  <div id="settings" class="modal" onclick="if (event.target == this){ closeModal(settingsModal); }" hidden>
+  <div id="settings" class="modal" onclick="if (event.target == this){ settingsModal.close(); }" hidden>
     <div class="modal-content">
-      <span class="close" onclick="closeModal(settingsModal);" title="Close">
+      <span class="close" onclick="settingsModal.close();" title="Close">
         <span class="material-icons">close</span>
       </span>
       <h1>Settings</h1>
 
       <h2>Font</h2>
-      <div class='setting'>
+      <div class="setting">
         <h3>Use a serif font:
           <label class="toggle"
             title="Use a serif font? Your system font will be used, falling back to serif.">
@@ -153,7 +164,7 @@
       </div>
 
       <h2>Theme</h2>
-      <div class='setting'>
+      <div class="setting">
         <h3>
           <label class="toggle" title="Set your theme">
             <input type="radio" name="setTheme" onclick="updateSetting(this);" value="automatic" checked>

docs/conf.py

@@ -244,6 +244,7 @@ html_search_scorer = '_static/scorer.js'
 
 html_js_files = [
   'custom.js',
+  'settings.js',
   'copy.js',
   'sidebar.js'
 ]