[matrix] Create settings modal

* Create settings modal

* Fix issue with spacing after settings button

* Fix issue with modal background on mobile devices

* Add close button to modal

* Add tooltip to close button

* Support closing modal with escape key

* Add missing semicolon to keydown event listener

docs/_static/custom.js

@@ -1,11 +1,28 @@
 'use-strict';
 
+let activeModal = null;
 let activeLink = null;
 let bottomHeightThreshold, sections;
+let settings;
+
+function closeModal(modal) {
+  activeModal = null;
+  modal.style.display = 'none';
+}
+
+function openModal(modal) {
+  if (activeModal) {
+    closeModal(activeModal);
+  }
+
+  activeModal = modal;
+  modal.style.removeProperty('display');
+}
 
 document.addEventListener('DOMContentLoaded', () => {
   bottomHeightThreshold = document.documentElement.scrollHeight - 30;
   sections = document.querySelectorAll('div.section');
+  settings = document.querySelector('div#settings.modal')
 
   const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');
   tables.forEach(table => {
@@ -25,7 +42,7 @@ window.addEventListener('scroll', () => {
   else {
     sections.forEach(section => {
       let rect = section.getBoundingClientRect();
-      if (rect.top + document.body.scrollTop - 1 < window.scrollY) {
+      if (rect.top + document.body.offsetTop < 1) {
         currentSection = section;
       }
     });
@@ -37,7 +54,14 @@ window.addEventListener('scroll', () => {
 
   if (currentSection) {
     activeLink = document.querySelector(`.sphinxsidebar a[href="#${currentSection.id}"]`);
-    activeLink.parentElement.classList.add('active');
+    if (activeLink) {
+      activeLink.parentElement.classList.add('active');
+    }
   }
+});
 
-});
+document.addEventListener('keydown', (event) => {
+  if (event.keyCode == 27 && activeModal) {
+    closeModal(activeModal);
+  }
+});