From f3501bae6d7ec63999544dc9823a8fbda9afbaef Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 20:14:10 +0300 Subject: [PATCH 1/8] Refactor: Removed superfluous SCSS code The website is configured to use the `auto` skin, so the support for the `dark` skin is not needed. --- _sass/minima/custom-styles.scss | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index 3bf337a..dc97a70 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -9,26 +9,21 @@ $dm-button-hover-background-color: #444444; $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-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-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; } +$button-background-color: var(--io-button-background-color); +$button-hover-background-color: var(--io-button-hover-background-color); + html { height: 100%; } From c970d49aaa070665a91a8e8f9752d69c888b989e Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 20:15:07 +0300 Subject: [PATCH 2/8] Refactor: Removed superfluous CSS style when the Markdown preview is enabled --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 58d6918..16c030b 100644 --- a/index.html +++ b/index.html @@ -111,7 +111,7 @@ function loadMarkdownPreviewVisibility(markdownPreview) { if (isMarkdownPreviewEnabled()) { - markdownPreview.style.display = 'block'; + markdownPreview.style.display = null; } else { markdownPreview.style.display = 'none'; } From 2195f84903d8c3692e8154197408afb6c56bfd3e Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 20:16:40 +0300 Subject: [PATCH 3/8] Added support for read-only mode --- _sass/minima/custom-styles.scss | 15 +++++++++++++ index.html | 38 +++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index dc97a70..ec604b9 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -1,26 +1,33 @@ $default-spacing: 8px; +$lm-disabled-text-color: #aaaaaa; +$dm-disabled-text-color: #636363; + $lm-button-background-color: #f0f0f0; $lm-button-hover-background-color: #e1e1e1; $dm-button-background-color: #333333; $dm-button-hover-background-color: #444444; +$disabled-text-color: $lm-disabled-text-color; $button-background-color: $lm-button-background-color; $button-hover-background-color: $lm-button-hover-background-color; :root { + --io-disabled-text-color: #{$lm-disabled-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-disabled-text-color: #{$dm-disabled-text-color}; --io-button-background-color: #{$dm-button-background-color}; --io-button-hover-background-color: #{$dm-button-hover-background-color}; } } +$disabled-text-color: var(--io-disabled-text-color); $button-background-color: var(--io-button-background-color); $button-hover-background-color: var(--io-button-hover-background-color); @@ -91,6 +98,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 index 16c030b..d6b5a06 100644 --- 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 @@
+
@@ -67,6 +71,10 @@ addTextareaValueChangeListener(textarea); addTextareaFocusChangeListener(textarea); addURLHashListener(textarea, markdownPreview); + + const toggleReadOnly = document.getElementById('{{ toggle_read_only_id }}'); + loadReadOnlyStyle(textarea); + addReadOnlyToggleClickListener(toggleReadOnly); } function loadFullWidthStyle() { @@ -122,6 +130,36 @@ return searchParams.has('{{ markdown_preview_id }}'); } + function loadReadOnlyStyle(textarea) { + if (isReadOnlyEnabled()) { + if (isMarkdownPreviewEnabled()) { + textarea.style.display = 'none'; + } else { + textarea.readOnly = true; + } + } else { + textarea.style.display = null; + textarea.readOnly = false; + } + } + + function addReadOnlyToggleClickListener(toggleReadOnly) { + toggleReadOnly.addEventListener('click', () => { + const searchParams = new URLSearchParams(window.location.search); + if (isReadOnlyEnabled()) { + searchParams.delete('{{ read_only_id }}'); + } else { + searchParams.set('{{ read_only_id }}', 'true'); + } + document.location.search = searchParams.toString(); + }, false); + } + + function isReadOnlyEnabled() { + const searchParams = new URLSearchParams(window.location.search); + return searchParams.has('{{ read_only_id }}'); + } + function loadValue(textarea, markdownPreview) { const value = retrieveValue(); const oldValue = textarea.value; From 64807b65e6082f5ef8200231f9f4272d4ef54b38 Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 21:58:56 +0300 Subject: [PATCH 4/8] Refactor: Extracted duplicated logic into a function --- index.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d6b5a06..18f258c 100644 --- a/index.html +++ b/index.html @@ -101,8 +101,7 @@ } function isFullWidthEnabled() { - const searchParams = new URLSearchParams(window.location.search); - return searchParams.has('{{ full_width_id }}'); + return isSearchParamEnabled('{{ full_width_id }}'); } function addMarkdownPreviewToggleClickListener(toggleMarkdownPreview) { @@ -126,8 +125,7 @@ } function isMarkdownPreviewEnabled() { - const searchParams = new URLSearchParams(window.location.search); - return searchParams.has('{{ markdown_preview_id }}'); + return isSearchParamEnabled('{{ markdown_preview_id }}'); } function loadReadOnlyStyle(textarea) { @@ -156,8 +154,7 @@ } function isReadOnlyEnabled() { - const searchParams = new URLSearchParams(window.location.search); - return searchParams.has('{{ read_only_id }}'); + return isSearchParamEnabled('{{ read_only_id }}'); } function loadValue(textarea, markdownPreview) { @@ -260,6 +257,11 @@ markdownPreview.innerHTML = html; } + 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) + "…"; From 7437faa9e327cd1707d61cf2754bc5b901503eb4 Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 22:01:33 +0300 Subject: [PATCH 5/8] Refactor: Extracted duplicated logic into a function --- index.html | 34 +++++++++++++--------------------- 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 18f258c..24e1991 100644 --- a/index.html +++ b/index.html @@ -90,13 +90,7 @@ 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); } @@ -106,13 +100,7 @@ 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); } @@ -143,13 +131,7 @@ function addReadOnlyToggleClickListener(toggleReadOnly) { toggleReadOnly.addEventListener('click', () => { - const searchParams = new URLSearchParams(window.location.search); - if (isReadOnlyEnabled()) { - searchParams.delete('{{ read_only_id }}'); - } else { - searchParams.set('{{ read_only_id }}', 'true'); - } - document.location.search = searchParams.toString(); + toggleSearchParam('{{ read_only_id }}'); }, false); } @@ -257,6 +239,16 @@ 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); From bb677d58dfbb44b206a35695e93a8f458308ea21 Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 22:18:39 +0300 Subject: [PATCH 6/8] Added different styles for inactive and active toggle buttons --- _sass/minima/custom-styles.scss | 16 +++++++++++++++- index.html | 19 +++++++++++++------ 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index ec604b9..835586f 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -3,6 +3,9 @@ $default-spacing: 8px; $lm-disabled-text-color: #aaaaaa; $dm-disabled-text-color: #636363; +$lm-inactive-toggle-text-color: #444444; +$dm-inactive-toggle-text-color: #888888; + $lm-button-background-color: #f0f0f0; $lm-button-hover-background-color: #e1e1e1; @@ -10,11 +13,13 @@ $dm-button-background-color: #333333; $dm-button-hover-background-color: #444444; $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; :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}; } @@ -22,12 +27,14 @@ $button-hover-background-color: $lm-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}; } } $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); @@ -59,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; @@ -71,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 { diff --git a/index.html b/index.html index 24e1991..69d066d 100644 --- a/index.html +++ b/index.html @@ -57,14 +57,14 @@ 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); @@ -73,11 +73,11 @@ addURLHashListener(textarea, markdownPreview); const toggleReadOnly = document.getElementById('{{ toggle_read_only_id }}'); - loadReadOnlyStyle(textarea); + loadReadOnlyStyle(toggleReadOnly, textarea); addReadOnlyToggleClickListener(toggleReadOnly); } - function loadFullWidthStyle() { + function loadFullWidthStyle(toggleFullWidth) { const wrappers = document.getElementsByClassName('wrapper'); Array.from(wrappers).forEach((wrapper) => { if (isFullWidthEnabled()) { @@ -86,6 +86,9 @@ wrapper.style.maxWidth = null; } }); + if (isFullWidthEnabled()) { + toggleFullWidth.classList.add('active'); + } } function addFullWidthToggleClickListener(toggleFullWidth) { @@ -104,9 +107,11 @@ }, false); } - function loadMarkdownPreviewVisibility(markdownPreview) { + function loadMarkdownPreviewVisibility(toggleMarkdownPreview, markdownPreview) { if (isMarkdownPreviewEnabled()) { markdownPreview.style.display = null; + + toggleMarkdownPreview.classList.add('active'); } else { markdownPreview.style.display = 'none'; } @@ -116,13 +121,15 @@ return isSearchParamEnabled('{{ markdown_preview_id }}'); } - function loadReadOnlyStyle(textarea) { + 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; From b35d11e97768665715392ae4f0e04fa454471605 Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 23:44:26 +0300 Subject: [PATCH 7/8] Refactor: Replaced HEX colors with HSL ones --- _sass/minima/custom-styles.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index 835586f..e9b4990 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -1,16 +1,16 @@ $default-spacing: 8px; -$lm-disabled-text-color: #aaaaaa; -$dm-disabled-text-color: #636363; +$lm-disabled-text-color: hsl(0 0% 67%); +$dm-disabled-text-color: hsl(0 0% 39%); -$lm-inactive-toggle-text-color: #444444; -$dm-inactive-toggle-text-color: #888888; +$lm-inactive-toggle-text-color: hsl(0 0% 27%); +$dm-inactive-toggle-text-color: hsl(0 0% 53%); -$lm-button-background-color: #f0f0f0; -$lm-button-hover-background-color: #e1e1e1; +$lm-button-background-color: hsl(0 0% 94%); +$lm-button-hover-background-color: hsl(0 0% 88%); -$dm-button-background-color: #333333; -$dm-button-hover-background-color: #444444; +$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; From 9d5475ae374059af9afb9a19065c1d396780d1d8 Mon Sep 17 00:00:00 2001 From: Iulian Onofrei <5748627+revolter@users.noreply.github.com> Date: Thu, 4 Jul 2024 23:52:12 +0300 Subject: [PATCH 8/8] Fixed poor visibility of read-only text --- _sass/minima/custom-styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index e9b4990..79b3040 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -1,7 +1,7 @@ $default-spacing: 8px; -$lm-disabled-text-color: hsl(0 0% 67%); -$dm-disabled-text-color: hsl(0 0% 39%); +$lm-disabled-text-color: hsl(0 0% 37%); +$dm-disabled-text-color: hsl(0 0% 53%); $lm-inactive-toggle-text-color: hsl(0 0% 27%); $dm-inactive-toggle-text-color: hsl(0 0% 53%);