[matrix] Add sans-serif font toggle to settings modal

* Add sans serif font toggle

* remove unnecessary boolean comparison from setFont

Co-authored-by: slice <[email protected]>

* Update checkbox title

Co-authored-by: slice <[email protected]>

* General cleanup of settings system

* Apply overflow hidden to modal

Co-authored-by: slice <[email protected]>

3 files changed, 102 insertions, 8 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index 97462e46..5c4fa48e 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -3,7 +3,7 @@
 let activeModal = null;
 let activeLink = null;
 let bottomHeightThreshold, sections;
-let settings;
+let settingsModal;
 
 function closeModal(modal) {
   activeModal = null;
@@ -19,10 +19,29 @@ function openModal(modal) {
   modal.style.removeProperty('display');
 }
 
+function updateSetting(element) {
+  localStorage.setItem(element.name, element.checked);
+  if (element.name in settings) {
+    settings[element.name](element.checked);
+  }
+}
+
+function getBodyClassToggle(className) {
+  function toggleBodyClass(add) {
+    document.body.classList.toggle(className, add);
+  }
+  return toggleBodyClass;
+}
+
+const settings = {
+  useSansFont: getBodyClassToggle('sans')
+};
+
 document.addEventListener('DOMContentLoaded', () => {
+
   bottomHeightThreshold = document.documentElement.scrollHeight - 30;
   sections = document.querySelectorAll('div.section');
-  settings = document.querySelector('div#settings.modal')
+  settingsModal = document.querySelector('div#settings.modal')
 
   const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');
   tables.forEach(table => {
@@ -31,6 +50,21 @@ document.addEventListener('DOMContentLoaded', () => {
     // insert ourselves after the element
     parent.insertBefore(table, element.nextSibling);
   });
+
+  Object.entries(settings).forEach(([name, setter]) => {
+    let value = JSON.parse(localStorage.getItem(name));
+
+    try {
+      setter(value);
+      let element = document.querySelector(`input[name=${name}]`);
+      if (element) {
+        element.checked = value === true;
+      }
+    } catch (error) {
+      console.error(`Failed to apply setting "${name}" With value:`, value);
+      console.error(error);
+    }
+  });
 });
 
 window.addEventListener('scroll', () => {
diff --git a/docs/_static/style.css b/docs/_static/style.css
index 3cd20d06..f3449dd7 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -15,6 +15,10 @@ body {
   padding: 0;
 }
 
+body.sans {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 p {
   margin-bottom: 8px;
 }
@@ -63,7 +67,7 @@ div.modal {
   top: 0;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   background-color: rgba(0,0,0,0.4);
   cursor: pointer;
 }
@@ -93,6 +97,53 @@ div.modal-content > span.close:focus {
   color: #444;
 }
 
+label.toggle {
+  position: relative;
+  float: right;
+  width: 42px;
+  height: 24px;
+}
+
+label.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+span.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: .4s;
+}
+
+span.toggle-slider:before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  transition: .4s;
+  background-color: #fff;
+  box-shadow: 0px 2px 4px rgba(0,0,0,0.54);
+}
+
+label.toggle input:checked + span.toggle-slider {
+  background-color: #2591c4;
+}
+
+label.toggle input:checked + span.toggle-slider:before {
+  transform: translateX(18px);
+}
+
+ 
 div.related {
   padding: 10px 10px;
   width: 100%;
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index 8020a1b6..85a055aa 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -13,7 +13,7 @@
 {%- 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>
+    <a title="settings" accesskey="S" onclick="openModal(settingsModal);">settings</a>{{ reldelim2 }}</li>
   {{ super() }}
 {% endblock %}
 
@@ -25,11 +25,20 @@
 {% endblock %}
 
 {%- block content %}
-  <div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settings); }">
+  <div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settingsModal); }">
     <div class="modal-content">
-      <span class="close" onclick="closeModal(settings);" title="Close">&times;</span>
+      <span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span>
       <h1>Settings</h1>
-      <!-- TODO: ADD OPTIONS HERE -->
+
+      <div class='setting'>
+        <h3>Use a sans-serif font:
+          <label class="toggle" title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`.">
+            <input type="checkbox" name="useSansFont" onclick="updateSetting(this);">
+            <span class="toggle-slider"></span>
+          </label>
+        </h3>
+      </div>
+
     </div>
   </div>
   {{ super() }}
@@ -55,4 +64,4 @@
       }
     </script>
   {%- endif %}
-{%- endblock %}
\ No newline at end of file
+{%- endblock %}