From 16b6e2163bfc645784cfd0e869d37781d850e6ad Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 17 Jun 2024 14:51:24 -0700
Subject: [PATCH] chore: revert to js toggle; better support for all cases

---
 package-lock.json                            |  4 +-
 package.json                                 |  2 +-
 src/assets/scripts/text-toggle.js            | 24 +++++++
 src/assets/styles/components/buttons.css     |  3 +-
 src/assets/styles/components/text-toggle.css | 74 +++++---------------
 src/assets/styles/pages/music.css            |  2 -
 src/pages/main/music/artists/artist.html     | 14 ++--
 src/pages/main/music/genre.html              | 20 +++---
 8 files changed, 64 insertions(+), 79 deletions(-)
 create mode 100644 src/assets/scripts/text-toggle.js

diff --git a/package-lock.json b/package-lock.json
index 66d157d5..737d0adf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.4.4",
+  "version": "19.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.4.4",
+      "version": "19.4.5",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
diff --git a/package.json b/package.json
index 7237a1a6..6328cd5f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.4.4",
+  "version": "19.4.5",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/assets/scripts/text-toggle.js b/src/assets/scripts/text-toggle.js
new file mode 100644
index 00000000..a5977c30
--- /dev/null
+++ b/src/assets/scripts/text-toggle.js
@@ -0,0 +1,24 @@
+window.onload = () => {
+  const button = document.querySelector('[data-toggle-button]')
+  const content = document.querySelector('[data-toggle-content]')
+  const text = document.querySelectorAll('[data-toggle-content] p')
+  const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
+  let interiorHeight = 0
+
+  text.forEach(node => interiorHeight += node.scrollHeight)
+
+  if (interiorHeight < minHeight) {
+    content.classList.remove('text-toggle-hidden')
+    button.style.display = 'none'
+  }
+
+  button.addEventListener('click', () => {
+    if (content.classList.contains('text-toggle-hidden')) {
+      content.classList.remove('text-toggle-hidden')
+      button.textContent = 'Show less'
+    } else {
+      content.classList.add('text-toggle-hidden')
+      button.textContent = 'Show more'
+    }
+  });
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 1b222768..ba8f9346 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -1,5 +1,4 @@
-button,
-[aria-role="button"] {
+button {
   &:not(.theme-toggle) {
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);
diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css
index 53c8c0bc..2ff8cbd9 100644
--- a/src/assets/styles/components/text-toggle.css
+++ b/src/assets/styles/components/text-toggle.css
@@ -1,61 +1,25 @@
-.toggle-wrapper {
-  display: flex;
+[data-toggle-content].text-toggle-hidden {
   position: relative;
-  margin-bottom: calc(var(--sizing-base) + 20px);
+  height: 500px;
+  overflow: hidden;
+  margin-bottom: var(--sizing-base);
 
   & p:first-of-type {
     margin-top: 0;
   }
-
-  & .toggle-checkbox {
-    display: none;
-  }
-
-  & .toggle-label {
-    display: inline-block;
-  }
-
-  & [data-toggle-content] {
-    &.text-toggle-hidden {
-      position: relative;
-      height: 500px;
-      overflow: hidden;
-      margin-bottom: var(--sizing-base);
-    }
-
-    &.text-toggle-hidden::after {
-      position: absolute;
-      z-index: 1;
-      content: '';
-      top: 0;
-      left: 0;
-      box-shadow: inset 0 -120px 50px -60px var(--background-color);
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  & .toggle-checkbox:checked ~ [data-toggle-content] {
-    height: auto;
-  }
-
-  & .toggle-checkbox:checked ~ [data-toggle-content]::after {
-    box-shadow: none;
-  }
-
-  & .toggle-checkbox:checked + .toggle-label [aria-role="button"]::after {
-    content: 'Show less';
-  }
-
-  & .toggle-label [aria-role="button"] {
-    position: absolute;
-    z-index: 2;
-    bottom: -20px;
-    left: 0;
-    margin-bottom: 0;
-  }
-
-  & .toggle-label [aria-role="button"]::after {
-    content: 'Show more';
-  }
 }
+
+[data-toggle-content].text-toggle-hidden::after {
+  position: absolute;
+  z-index: 1;
+  content: '';
+  top: 0;
+  left: 0;
+  box-shadow: inset 0 -120px 50px -60px var(--background-color);
+  width: 100%;
+  height: 100%;
+}
+
+[data-toggle-button] {
+  margin-bottom: var(--sizing-base) !important;
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 5c2807ee..a208701a 100644
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@@ -4,8 +4,6 @@
 }
 
 .artist-focus {
-  margin-bottom: var(--sizing-base);
-
   & img {
     border: 1px solid var(--accent-color);
     width: 100%;
diff --git a/src/pages/main/music/artists/artist.html b/src/pages/main/music/artists/artist.html
index fa9db091..2487ad72 100644
--- a/src/pages/main/music/artists/artist.html
+++ b/src/pages/main/music/artists/artist.html
@@ -11,6 +11,11 @@ schema: artist
 {%- capture alt -%}
   {{ artist.name_string }} / {{ artist.country }}
 {%- endcapture -%}
+{% capture js %}
+  {% render "../../../../assets/scripts/text-toggle.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
+<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <article class="artist-focus">
   <div class="artist-display">
@@ -51,13 +56,8 @@ schema: artist
     </div>
   </div>
   {%- if artist.description -%}
-  <div class="toggle-wrapper">
-    <input id="toggle-checkbox" class="toggle-checkbox" type="checkbox">
-    <label class="toggle-label" for="toggle-checkbox">
-      <div aria-role="button"></div>
-    </label>
-    <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
-  </div>
+  <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
+  <button data-toggle-button>Show more</button>
   {%- endif -%}
   <table>
     <tr>
diff --git a/src/pages/main/music/genre.html b/src/pages/main/music/genre.html
index bf1a596b..b777e6d6 100644
--- a/src/pages/main/music/genre.html
+++ b/src/pages/main/music/genre.html
@@ -16,22 +16,22 @@ schema: genre
     is
   {% endif %}
 {%- endcapture -%}
+{% capture js %}
+  {% render "../../../assets/scripts/text-toggle.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
+<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <h2 class="page-header">{{ genre.name }}</h2>
 <article class="genre-focus">
   <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
   <hr />
   {%- if genre.description -%}
-  <div class="toggle-wrapper">
-    <input id="toggle-checkbox" class="toggle-checkbox" type="checkbox">
-    <label class="toggle-label" for="toggle-checkbox">
-      <div aria-role="button"></div>
-    </label>
-    <div data-toggle-content class="text-toggle-hidden">
-      {{ genre.description | markdown }}
-      <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
-      <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
-    </div>
+  <div data-toggle-content class="text-toggle-hidden">
+    {{ genre.description | markdown }}
+    <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
+    <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
   </div>
+  <button data-toggle-button>Show more</button>
   {%- endif -%}
 </article>
\ No newline at end of file