chore: consolidate broadly used js + cleanup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "21.4.3",
+  "version": "21.4.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "21.4.3",
+      "version": "21.4.4",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "21.4.3",
+  "version": "21.4.4",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/scripts/index.js

@@ -0,0 +1,43 @@
+window.addEventListener('load', () => {
+  // menu keyboard controls
+  ;(() => {
+    const menuInput = document.getElementById('menu-toggle')
+    const menuButtonContainer = document.querySelector('.menu-button-container')
+    const menuItems = document.querySelectorAll('.menu-primary li')
+
+    menuButtonContainer.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        menuInput.checked = !menuInput.checked
+      }
+    });
+
+    menuItems.forEach((item) => {
+      item.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          item.querySelector('a').click()
+        }
+      })
+    })
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && menuInput.checked) menuInput.checked = false
+    })
+  })()
+
+  // modal keyboard controls
+  ;(() => {
+    const modalInputs = document.querySelectorAll('.modal-input')
+
+    if (!modalInputs) return // early return if dom nodes are missing
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        modalInputs.forEach((modalInput) => {
+          if (modalInput.checked) modalInput.checked = false
+        })
+      }
+    })
+  })()
+})

src/assets/scripts/media-toggles.js

@@ -1,7 +1,8 @@
 window.addEventListener('load', () => {
+    const buttonSets = document.querySelectorAll('.section-header-buttons')
     const initializeButtonSet = (buttonSet) => {
       const buttons = buttonSet.querySelectorAll('button')
-    const buttonIds = Array.from(buttons).map(button => button.getAttribute('data-toggle'))
+      const buttonIds = Array.from(buttons).map((button) => button.getAttribute('data-toggle'))
 
       buttons.forEach(button => {
         button.addEventListener('click', function () {
@@ -9,22 +10,18 @@ window.addEventListener('load', () => {
           const targetContent = document.getElementById(targetId)
 
           buttons.forEach(btn => {
-          btn.classList.remove('active')
+            btn.classList.toggle('active', btn === this)
-          btn.classList.add('secondary')
+            btn.classList.toggle('secondary', btn !== this)
           })
 
           buttonIds.forEach(id => {
-          document.getElementById(id).classList.add('hidden')
+            document.getElementById(id).classList.toggle('hidden', id !== targetId)
           })
 
-        this.classList.remove('secondary')
-        this.classList.add('active')
-
           targetContent.classList.remove('hidden')
         })
       })
     }
 
-  const buttonSets = document.querySelectorAll('.section-header-buttons')
     buttonSets.forEach(initializeButtonSet)
 })

src/assets/scripts/menu.js

@@ -1,25 +0,0 @@
-window.addEventListener('load', () => {
-  const menuInput = document.getElementById('menu-toggle')
-  const menuButtonContainer = document.querySelector('.menu-button-container')
-  const menuItems = document.querySelectorAll('.menu-primary li')
-
-  menuButtonContainer.addEventListener('keydown', e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault()
-      menuInput.checked = !menuInput.checked
-    }
-  })
-
-  menuItems.forEach(item => {
-    item.addEventListener('keydown', e => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        item.querySelector('a').click()
-      }
-    })
-  })
-
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape' && menuInput.checked) menuInput.checked = false
-  })
-})

src/assets/scripts/modal.js

@@ -1,8 +0,0 @@
-window.addEventListener('load', () => {
-  const modalInputs = document.querySelectorAll('.modal-input')
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape') modalInputs.forEach(modalInput => {
-      if (modalInput.checked) modalInput.checked = false
-    })
-  })
-})

src/assets/scripts/text-toggle.js

@@ -3,9 +3,7 @@ window.addEventListener('load', () => {
     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
+    const interiorHeight = Array.from(text).reduce((acc, node) => acc + node.scrollHeight, 0)
-
-  text.forEach(node => interiorHeight += node.scrollHeight)
 
     if (interiorHeight < minHeight) {
       content.classList.remove('text-toggle-hidden')
@@ -13,12 +11,7 @@ window.addEventListener('load', () => {
     }
 
     button.addEventListener('click', () => {
-    if (content.classList.contains('text-toggle-hidden')) {
+      const isHidden = content.classList.toggle('text-toggle-hidden')
-      content.classList.remove('text-toggle-hidden')
+      button.textContent = isHidden ? 'Show more' : 'Show less'
-      button.textContent = 'Show less'
+    })
-    } else {
-      content.classList.add('text-toggle-hidden')
-      button.textContent = 'Show more'
-    }
-  });
 })

src/includes/base.liquid

@@ -155,5 +155,6 @@
       })()
     </script>
     {{ content }}
+    <script src="/assets/scripts/index.js?v={% appVersion %}" defer></script>
   </body>
 </html>

src/includes/partials/blocks/modal.liquid

@@ -1,7 +1,3 @@
-{%- capture js -%}
-  {% render "../../../assets/scripts/modal.js" %}
-{%- endcapture -%}
-<script>{{ js }}</script>
 {%- capture labelContent -%}
   {%- if icon -%}
     {% tablericon icon label %}

src/includes/partials/nav/menu.liquid

@@ -1,7 +1,3 @@
-{%- capture js -%}
-  {% render "../../../assets/scripts/menu.js" %}
-{%- endcapture -%}
-<script>{{ js }}</script>
 <div class="flex-centered">
   <input id="menu-toggle" type="checkbox" aria-hidden="true" />
   <label class="menu-button-container" for="menu-toggle" tabindex="0">