Add setting to use proportional font

1 files changed, 32 insertions, 0 deletions

diff --git a/js/main.ts b/js/main.ts
index 32c5a5b..29b4a68 100644
--- a/js/main.ts
+++ b/js/main.ts
@@ -21,6 +21,15 @@ const settings = new KeyValueStore({
         ],
         valueRange: [false, true]
     },
+    monospaceFont: {
+        value: ensureSetting('monospace-font', '1') === '1',
+        callbacks: [
+            value => {
+                localStorage.setItem('monospace-font', value ? '1' : '0');
+            }
+        ],
+        valueRange: [false, true]
+    },
     imagePreviews: {
         value: ensureSetting('image-previews', '1') === '1',
         callbacks: [
@@ -110,6 +119,29 @@ const settings = new KeyValueStore({
 
     //
 
+    const settingMonospaceFontEl      = document.getElementsByClassName('setting--monospace-font')[0];
+    const settingMonospaceFontValueEl = settingMonospaceFontEl.getElementsByClassName('setting__value')[0];
+    const settingMonospaceFontCallback = (value: boolean) => {
+        if (value) {
+            contentEl.classList.add("content--has-monospace-font");
+        } else {
+            contentEl.classList.remove("content--has-monospace-font");
+        }
+
+        settingMonospaceFontValueEl.textContent = value ? '[yes]' : '[no]';
+    }
+
+    settingMonospaceFontValueEl.addEventListener('click', e => {
+        e.preventDefault();
+        settings.cycleValue('monospaceFont');
+        return false;
+    });
+
+    settingMonospaceFontCallback(settings.getValue('monospaceFont'));
+    settings.addCallback('monospaceFont', settingMonospaceFontCallback);
+
+    //
+
     const settingWordWrapEl      = document.getElementsByClassName('setting--word-wrap')[0];
     const settingWordWrapValueEl = settingWordWrapEl.getElementsByClassName('setting__value')[0];
     const settingWordWrapCallback = (value: boolean) => {