[matrix] Refactor JS & add searchbar to mobile.

docs/_static/sidebar.js

@@ -1,4 +1,64 @@
-function collapseSection(icon) {
+class Sidebar {
+  constructor(element) {
+    this.element = element;
+    this.activeLink = null;
+
+    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';
+
+        // 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) {
+
+      let next = ref.nextElementSibling;
+
+      if (next && next.tagName === "UL") {
+
+        let icon = document.createElement('span');
+        icon.className = 'material-icons collapsible-arrow expanded';
+        icon.innerText = 'expand_more';
+
+        if (next.parentElement.tagName == "LI") {
+          next.parentElement.classList.add('no-list-style')
+        }
+
+        icon.addEventListener('click', () => {
+          if (icon.classList.contains('expanded')) {
+            collapseSection(icon);
+          } else {
+            expandSection(icon);
+          }
+        })
+
+        ref.classList.add('ref-internal-padding')
+        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';
@@ -6,45 +66,62 @@ function collapseSection(icon) {
     // <arrow><heading> 
     // --> <square><children>
     children.style.display = "none";
-}
+  }
 
-function expandSection(icon) {
+  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', () => {
-    let sidebar = document.getElementById('sidebar');
-    let toc = sidebar.querySelector('ul');
-    let allReferences = toc.querySelectorAll('a.reference.internal:not([href="#"])');
+  sidebar = new Sidebar(document.getElementById('sidebar'));
+  sidebar.resize();
+  sidebar.createCollapsableSections();
 
-    for (let ref of allReferences) {
-
-        let next = ref.nextElementSibling;
-        
-        if (next && next.tagName === "UL") {
-            
-            let icon = document.createElement('span');
-            icon.className = 'material-icons collapsible-arrow expanded';
-            icon.innerText = 'expand_more';
-            
-            if (next.parentElement.tagName == "LI") {
-                next.parentElement.classList.add('no-list-style')
-            }
-            
-            icon.addEventListener('click', () => {
-                if (icon.classList.contains('expanded')) {
-                    collapseSection(icon);
-                } else {
-                    expandSection(icon);
-                }
-            })
-
-            ref.classList.add('ref-internal-padding')
-            ref.parentNode.insertBefore(icon, ref);
-        }
-    }
+  window.addEventListener('scroll', () => {
+    sidebar.setActiveLink(getCurrentSection());
+    sidebar.resize();
+  });
 });
+