Make word wrap optional, better mobile design

1 files changed, 33 insertions, 1 deletions

diff --git a/js/main.ts b/js/main.ts
index 7ef7020..3b2a081 100644
--- a/js/main.ts
+++ b/js/main.ts
@@ -12,10 +12,14 @@ function ensureSetting(key: string, defaultValue: string): string {
 }
 
 const settings = new KeyValueStore({
+    wordWrap: {
+        value: ensureSetting('word-wrap', '1') === '1',
+        valueRange: [false, true]
+    },
     imagePreviews: {
         value: ensureSetting('image-previews', '1') === '1',
         valueRange: [false, true]
-    }
+    },
 });
 
 //
@@ -52,6 +56,10 @@ const settings = new KeyValueStore({
 })();
 
 (() => {
+    const contentEl = document.getElementsByClassName('content')[0];
+    
+    //
+    
     const settingImagePreviewEl      = document.getElementsByClassName('setting--image-previews')[0];
     const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0];
     const settingImagePreviewCallback = (value: boolean, init = false) => {
@@ -73,6 +81,30 @@ const settings = new KeyValueStore({
 
     settingImagePreviewCallback(settings.getValue('imagePreviews'), true);
     settings.addCallback('imagePreviews', settingImagePreviewCallback);
+
+    //
+
+    const settingWordWrapEl      = document.getElementsByClassName('setting--word-wrap')[0];
+    const settingWordWrapValueEl = settingWordWrapEl.getElementsByClassName('setting__value')[0];
+    const settingWordWrapCallback = (value: boolean) => {
+        if (value) {
+            contentEl.classList.add("content--wrap");
+        } else {
+            contentEl.classList.remove("content--wrap");
+        }
+
+        localStorage.setItem('image-previews', value ? '1' : '0');
+        settingWordWrapValueEl.textContent = value ? '[yes]' : '[no]';
+    }
+
+    settingWordWrapValueEl.addEventListener('click', e => {
+        e.preventDefault();
+        settings.cycleValue('wordWrap');
+        return false;
+    });
+
+    settingWordWrapCallback(settings.getValue('wordWrap'));
+    settings.addCallback('wordWrap', settingWordWrapCallback);
 })();
 
 (() => {