Merge pull request #11 from revolter/feature/full-width-option

Added support for full-width layout
revolter · Jun 18, 2024 · c8b52c1 · c8b52c1
2 parents d1e418c + 2b2d77c
commit c8b52c1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 8 deletions.
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
@@ -58,6 +58,7 @@ body {
                 .toolbar {
                     display: flex;
                     justify-content: flex-end;
+                    gap: $default-spacing;
 
                     button {
                         @include relative-font-size(1);
@@ -73,7 +74,12 @@ body {
                         &:hover {
                             background: $button-hover-background-color;
                         }
+                    }
 
+                    #toggle-full-width {
+                        @media not screen and (min-width: $on-laptop) {
+                            display: none;
+                        }
                     }
                 }
 

diff --git a/index.html b/index.html
@@ -6,6 +6,9 @@
 <script src="{{ 'pako/dist/pako.min.js' | node_module_url | relative_url }}"></script>
 <script src="{{ 'showdown/dist/showdown.min.js' | node_module_url | relative_url }}"></script>
 
+{%- assign full_width_id = 'full-width' -%}
+{%- capture toggle_full_width_id -%}toggle-{{ full_width_id }}{%- endcapture -%}
+
 {%- assign markdown_preview_id = 'markdown-preview' -%}
 {%- capture toggle_markdown_preview_id -%}toggle-{{ markdown_preview_id }}{%- endcapture -%}
 
@@ -30,6 +33,7 @@
 {%- endcapture -%}
 
 <div class="toolbar">
+    <button id="{{ toggle_full_width_id }}">Toggle full-width</button>
     <button id="{{ toggle_markdown_preview_id }}">Toggle Markdown preview</button>
 </div>
 
@@ -48,20 +52,52 @@
     }
 
     function run() {
+        const toggleFullWidth = document.getElementById('{{ toggle_full_width_id }}');
+        loadFullWidthStyle();
+        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);
-        addClickListener(toggleMarkdownPreview);
+        addMarkdownPreviewToggleClickListener(toggleMarkdownPreview);
 
         loadValue(textarea, markdownPreview);
-        addValueListener(textarea);
-        addFocusListener(textarea);
-        addHashListener(textarea, markdownPreview);
+        addTextareaValueChangeListener(textarea);
+        addTextareaFocusChangeListener(textarea);
+        addURLHashListener(textarea, markdownPreview);
+    }
+
+    function loadFullWidthStyle() {
+        const wrappers = document.getElementsByClassName('wrapper');
+        Array.from(wrappers).forEach((wrapper) => {
+            if (isFullWidthEnabled()) {
+                wrapper.style.maxWidth = 'none';
+            } else {
+                wrapper.style.maxWidth = null;
+            }
+        });
+    }
+
+    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();
+        }, false);
+    }
+
+    function isFullWidthEnabled() {
+        const searchParams = new URLSearchParams(window.location.search);
+        return searchParams.has('{{ full_width_id }}');
     }
 
-    function addClickListener(toggleMarkdownPreview) {
+    function addMarkdownPreviewToggleClickListener(toggleMarkdownPreview) {
         toggleMarkdownPreview.addEventListener('click', () => {
             const searchParams = new URLSearchParams(window.location.search);
             if (isMarkdownPreviewEnabled()) {
@@ -107,13 +143,13 @@
         };
     };
 
-    function addValueListener(textarea) {
+    function addTextareaValueChangeListener(textarea) {
         textarea.addEventListener('input', debounce((event) => {
             storeValue(event.target.value);
         }, 300), false);
     }
 
-    function addFocusListener(textarea) {
+    function addTextareaFocusChangeListener(textarea) {
         textarea.addEventListener('blur', () => {
             storeValue(textarea.value);
         }, false);
@@ -123,7 +159,7 @@
         }, false);
     }
 
-    function addHashListener(textarea, markdownPreview) {
+    function addURLHashListener(textarea, markdownPreview) {
         window.addEventListener('hashchange', () => {
             loadValue(textarea, markdownPreview);
         });