[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);
+  }
+});

docs/_static/style.css

@@ -1,7 +1,5 @@
 /* this stuff uses a couple of themes as a base with some custom stuff added
-
 In particular thanks to:
-
 - Alabaster for being a good base
   - Which thanks Flask + KR theme
 - Sphinx Readable Theme
@@ -58,6 +56,43 @@ div.footer a {
   text-decoration: underline;
 }
 
+div.modal {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.4);
+  cursor: pointer;
+}
+
+div.modal-content {
+  background-color: #ffffff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.54);
+  padding: 24px;
+  border-radius: 4px;
+  margin: 20% auto;
+  width: 40%;
+  cursor: initial;
+}
+
+div.modal-content > span.close {
+  color: #888;
+  float: right;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+div.modal-content > span.close:hover,
+div.modal-content > span.close:focus {
+  color: #444;
+}
+
 div.related {
   padding: 10px 10px;
   width: 100%;
@@ -617,4 +652,4 @@ div.code-block-caption {
     background-color: transparent;
     border-left: none;
   }
-}
+}

docs/_templates/layout.html

@@ -10,6 +10,13 @@
 
 {%- block relbar2 %}{% endblock %}
 
+{%- block rootrellink %}
+  {# Perhaps override the relbar() macro to place this on the right side of the link list? #}
+  <li class="right"{% if not rellinks %} style="margin-right: 10px"{% endif %}>
+    <a href="javascript:;" title="settings" accesskey="S" onclick="openModal(settings);">settings</a>{{ reldelim2 }}</li>
+  {{ super() }}
+{% endblock %}
+
 {% block header %}
   {{ super() }}
   {% if pagename == 'index' %}
@@ -17,6 +24,17 @@
   {% endif %}
 {% endblock %}
 
+{%- block content %}
+  <div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settings); }">
+    <div class="modal-content">
+      <span class="close" onclick="closeModal(settings);" title="Close">&times;</span>
+      <h1>Settings</h1>
+      <!-- TODO: ADD OPTIONS HERE -->
+    </div>
+  </div>
+  {{ super() }}
+{% endblock %}
+
 
 {%- block footer %}
   <div class="footer">
@@ -37,4 +55,4 @@
       }
     </script>
   {%- endif %}
-{%- endblock %}
+{%- endblock %}