Merge pull request #18 from revolter/feature/read-only

Added support for read-only mode
revolter · Jul 5, 2024 · 0fb2294 · 0fb2294
2 parents 5e3549f + 9d5475a
commit 0fb2294
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 44 deletions.
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
@@ -1,34 +1,43 @@
 $default-spacing: 8px;
 
-$lm-button-background-color: #f0f0f0;
-$lm-button-hover-background-color: #e1e1e1;
+$lm-disabled-text-color: hsl(0 0% 37%);
+$dm-disabled-text-color: hsl(0 0% 53%);
 
-$dm-button-background-color: #333333;
-$dm-button-hover-background-color: #444444;
+$lm-inactive-toggle-text-color: hsl(0 0% 27%);
+$dm-inactive-toggle-text-color: hsl(0 0% 53%);
 
+$lm-button-background-color: hsl(0 0% 94%);
+$lm-button-hover-background-color: hsl(0 0% 88%);
+
+$dm-button-background-color: hsl(0 0% 20%);
+$dm-button-hover-background-color: hsl(0 0% 27%);
+
+$disabled-text-color: $lm-disabled-text-color;
+$inactive-toggle-text-color: $lm-inactive-toggle-text-color;
 $button-background-color: $lm-button-background-color;
 $button-hover-background-color: $lm-button-hover-background-color;
 
-@if $color-scheme-auto {
-    :root {
-        --io-button-background-color: #{$lm-button-background-color};
-        --io-button-hover-background-color: #{$lm-button-hover-background-color};
-    }
+:root {
+    --io-disabled-text-color: #{$lm-disabled-text-color};
+    --io-inactive-toggle-text-color: #{$lm-inactive-toggle-text-color};
+    --io-button-background-color: #{$lm-button-background-color};
+    --io-button-hover-background-color: #{$lm-button-hover-background-color};
+}
 
-    @media (prefers-color-scheme: dark) {
-        :root {
-            --io-button-background-color: #{$dm-button-background-color};
-            --io-button-hover-background-color: #{$dm-button-hover-background-color};
-        }
+@media (prefers-color-scheme: dark) {
+    :root {
+        --io-disabled-text-color: #{$dm-disabled-text-color};
+        --io-inactive-toggle-text-color: #{$dm-inactive-toggle-text-color};
+        --io-button-background-color: #{$dm-button-background-color};
+        --io-button-hover-background-color: #{$dm-button-hover-background-color};
     }
-
-    $button-background-color: var(--io-button-background-color);
-    $button-hover-background-color: var(--io-button-hover-background-color);
-} @else if $color-scheme-dark {
-    $button-background-color: $dm-button-background-color;
-    $button-hover-background-color: $dm-button-hover-background-color;
 }
 
+$disabled-text-color: var(--io-disabled-text-color);
+$inactive-toggle-text-color: var(--io-inactive-toggle-text-color);
+$button-background-color: var(--io-button-background-color);
+$button-hover-background-color: var(--io-button-hover-background-color);
+
 html {
     height: 100%;
 }
@@ -57,7 +66,7 @@ body {
 
                     button {
                         @include relative-font-size(1);
-                        color: $text-color;
+                        color: $inactive-toggle-text-color;
                         background: $button-background-color;
                         border-style: solid;
                         border-width: 1px;
@@ -69,6 +78,13 @@ body {
                         &:hover {
                             background: $button-hover-background-color;
                         }
+
+                        &.active {
+                            color: $text-color;
+                            border-style: solid;
+                            border-width: 1px;
+                            border-color: $text-color;
+                        }
                     }
 
                     #toggle-full-width {
@@ -96,6 +112,14 @@ body {
                     textarea {
                         color: $text-color;
                         @include relative-font-size(1);
+
+                        &:read-only {
+                            color: $disabled-text-color;
+
+                            &:focus {
+                                outline: none;
+                            }
+                        }
                     }
 
                     #markdown-preview {

diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
 {%- assign markdown_preview_id = 'markdown-preview' -%}
 {%- capture toggle_markdown_preview_id -%}toggle-{{ markdown_preview_id }}{%- endcapture -%}
 
+{%- assign read_only_id = 'read-only' -%}
+{%- capture toggle_read_only_id -%}toggle-{{ read_only_id }}{%- endcapture -%}
+
 {%- assign textarea_id = 'textarea' -%}
 {%- capture textarea_placeholder -%}
 {{ site.tagline }}.
@@ -35,6 +38,7 @@
 <div class="toolbar">
     <button id="{{ toggle_full_width_id }}">Toggle full-width</button>
     <button id="{{ toggle_markdown_preview_id }}">Toggle Markdown preview</button>
+    <button id="{{ toggle_read_only_id }}">Toggle read-only</button>
 </div>
 
 <div class="content">
@@ -53,23 +57,27 @@
 
     function run() {
         const toggleFullWidth = document.getElementById('{{ toggle_full_width_id }}');
-        loadFullWidthStyle();
+        loadFullWidthStyle(toggleFullWidth);
         addFullWidthToggleClickListener(toggleFullWidth);
 
         const toggleMarkdownPreview = document.getElementById('{{ toggle_markdown_preview_id }}');
         const textarea = document.getElementById('{{ textarea_id }}');
         const markdownPreview = document.getElementById('{{ markdown_preview_id }}');
 
-        loadMarkdownPreviewVisibility(markdownPreview);
+        loadMarkdownPreviewVisibility(toggleMarkdownPreview, markdownPreview);
         addMarkdownPreviewToggleClickListener(toggleMarkdownPreview);
 
         loadValue(textarea, markdownPreview);
         addTextareaValueChangeListener(textarea);
         addTextareaFocusChangeListener(textarea);
         addURLHashListener(textarea, markdownPreview);
+
+        const toggleReadOnly = document.getElementById('{{ toggle_read_only_id }}');
+        loadReadOnlyStyle(toggleReadOnly, textarea);
+        addReadOnlyToggleClickListener(toggleReadOnly);
     }
 
-    function loadFullWidthStyle() {
+    function loadFullWidthStyle(toggleFullWidth) {
         const wrappers = document.getElementsByClassName('wrapper');
         Array.from(wrappers).forEach((wrapper) => {
             if (isFullWidthEnabled()) {
@@ -78,48 +86,64 @@
                 wrapper.style.maxWidth = null;
             }
         });
+        if (isFullWidthEnabled()) {
+            toggleFullWidth.classList.add('active');
+        }
     }
 
     function addFullWidthToggleClickListener(toggleFullWidth) {
         toggleFullWidth.addEventListener('click', () => {
-            const searchParams = new URLSearchParams(window.location.search);
-            if (isFullWidthEnabled()) {
-                searchParams.delete('{{ full_width_id }}');
-            } else {
-                searchParams.set('{{ full_width_id }}', 'true');
-            }
-            document.location.search = searchParams.toString();
+            toggleSearchParam('{{ full_width_id }}');
         }, false);
     }
 
     function isFullWidthEnabled() {
-        const searchParams = new URLSearchParams(window.location.search);
-        return searchParams.has('{{ full_width_id }}');
+        return isSearchParamEnabled('{{ full_width_id }}');
     }
 
     function addMarkdownPreviewToggleClickListener(toggleMarkdownPreview) {
         toggleMarkdownPreview.addEventListener('click', () => {
-            const searchParams = new URLSearchParams(window.location.search);
-            if (isMarkdownPreviewEnabled()) {
-                searchParams.delete('{{ markdown_preview_id }}');
-            } else {
-                searchParams.set('{{ markdown_preview_id }}', 'true');
-            }
-            document.location.search = searchParams.toString();
+            toggleSearchParam('{{ markdown_preview_id }}');
         }, false);
     }
 
-    function loadMarkdownPreviewVisibility(markdownPreview) {
+    function loadMarkdownPreviewVisibility(toggleMarkdownPreview, markdownPreview) {
         if (isMarkdownPreviewEnabled()) {
-            markdownPreview.style.display = 'block';
+            markdownPreview.style.display = null;
+
+            toggleMarkdownPreview.classList.add('active');
         } else {
             markdownPreview.style.display = 'none';
         }
     }
 
     function isMarkdownPreviewEnabled() {
-        const searchParams = new URLSearchParams(window.location.search);
-        return searchParams.has('{{ markdown_preview_id }}');
+        return isSearchParamEnabled('{{ markdown_preview_id }}');
+    }
+
+    function loadReadOnlyStyle(toggleReadOnly, textarea) {
+        if (isReadOnlyEnabled()) {
+            if (isMarkdownPreviewEnabled()) {
+                textarea.style.display = 'none';
+            } else {
+                textarea.readOnly = true;
+            }
+
+            toggleReadOnly.classList.add('active');
+        } else {
+            textarea.style.display = null;
+            textarea.readOnly = false;
+        }
+    }
+
+    function addReadOnlyToggleClickListener(toggleReadOnly) {
+        toggleReadOnly.addEventListener('click', () => {
+            toggleSearchParam('{{ read_only_id }}');
+        }, false);
+    }
+
+    function isReadOnlyEnabled() {
+        return isSearchParamEnabled('{{ read_only_id }}');
     }
 
     function loadValue(textarea, markdownPreview) {
@@ -222,6 +246,21 @@
         markdownPreview.innerHTML = html;
     }
 
+    function toggleSearchParam(param) {
+        const searchParams = new URLSearchParams(window.location.search);
+        if (isSearchParamEnabled(param)) {
+            searchParams.delete(param);
+        } else {
+            searchParams.set(param, 'true');
+        }
+        document.location.search = searchParams.toString();
+    }
+
+    function isSearchParamEnabled(param) {
+        const searchParams = new URLSearchParams(window.location.search);
+        return searchParams.has(param);
+    }
+
     function truncate(string, limit) {
         if (string.length < limit) { return string; }
         return string.slice(0, limit - 1) + "…";