From 10dd21f6e3aaca3f63eac1198a01ee0098b91a25 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 5 Aug 2024 14:20:28 -0700 Subject: [PATCH] chore: consolidate broadly used js + cleanup --- package-lock.json | 4 +-- package.json | 2 +- src/assets/scripts/index.js | 43 +++++++++++++++++++++++ src/assets/scripts/media-toggles.js | 43 +++++++++++------------ src/assets/scripts/menu.js | 25 ------------- src/assets/scripts/modal.js | 8 ----- src/assets/scripts/text-toggle.js | 29 ++++++--------- src/includes/base.liquid | 1 + src/includes/partials/blocks/modal.liquid | 4 --- src/includes/partials/nav/menu.liquid | 4 --- 10 files changed, 78 insertions(+), 85 deletions(-) create mode 100644 src/assets/scripts/index.js delete mode 100644 src/assets/scripts/menu.js delete mode 100644 src/assets/scripts/modal.js diff --git a/package-lock.json b/package-lock.json index f57b49ff..2978a680 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ad6c6c18..15086e08 100644 --- a/package.json +++ b/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": { diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js new file mode 100644 index 00000000..20cbecef --- /dev/null +++ b/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 + }) + } + }) + })() +}) \ No newline at end of file diff --git a/src/assets/scripts/media-toggles.js b/src/assets/scripts/media-toggles.js index ac7601b1..dd69cd37 100644 --- a/src/assets/scripts/media-toggles.js +++ b/src/assets/scripts/media-toggles.js @@ -1,30 +1,27 @@ window.addEventListener('load', () => { - const initializeButtonSet = (buttonSet) => { - const buttons = buttonSet.querySelectorAll('button') - const buttonIds = Array.from(buttons).map(button => button.getAttribute('data-toggle')) + 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')) - buttons.forEach(button => { - button.addEventListener('click', function () { - const targetId = this.getAttribute('data-toggle') - const targetContent = document.getElementById(targetId) + buttons.forEach(button => { + button.addEventListener('click', function () { + const targetId = this.getAttribute('data-toggle') + const targetContent = document.getElementById(targetId) - buttons.forEach(btn => { - btn.classList.remove('active') - btn.classList.add('secondary') + buttons.forEach(btn => { + btn.classList.toggle('active', btn === this) + btn.classList.toggle('secondary', btn !== this) + }) + + buttonIds.forEach(id => { + document.getElementById(id).classList.toggle('hidden', id !== targetId) + }) + + targetContent.classList.remove('hidden') }) - - buttonIds.forEach(id => { - document.getElementById(id).classList.add('hidden') - }) - - this.classList.remove('secondary') - this.classList.add('active') - - targetContent.classList.remove('hidden') }) - }) - } + } - const buttonSets = document.querySelectorAll('.section-header-buttons') - buttonSets.forEach(initializeButtonSet) + buttonSets.forEach(initializeButtonSet) }) \ No newline at end of file diff --git a/src/assets/scripts/menu.js b/src/assets/scripts/menu.js deleted file mode 100644 index fc292560..00000000 --- a/src/assets/scripts/menu.js +++ /dev/null @@ -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 - }) -}) \ No newline at end of file diff --git a/src/assets/scripts/modal.js b/src/assets/scripts/modal.js deleted file mode 100644 index 59b64b07..00000000 --- a/src/assets/scripts/modal.js +++ /dev/null @@ -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 - }) - }) -}) \ No newline at end of file diff --git a/src/assets/scripts/text-toggle.js b/src/assets/scripts/text-toggle.js index 298ed4fb..04e71da3 100644 --- a/src/assets/scripts/text-toggle.js +++ b/src/assets/scripts/text-toggle.js @@ -1,24 +1,17 @@ window.addEventListener('load', () => { 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 + 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 + 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') - button.style.display = 'none' - } - - button.addEventListener('click', () => { - if (content.classList.contains('text-toggle-hidden')) { + if (interiorHeight < minHeight) { content.classList.remove('text-toggle-hidden') - button.textContent = 'Show less' - } else { - content.classList.add('text-toggle-hidden') - button.textContent = 'Show more' + button.style.display = 'none' } - }); + + button.addEventListener('click', () => { + const isHidden = content.classList.toggle('text-toggle-hidden') + button.textContent = isHidden ? 'Show more' : 'Show less' + }) }) \ No newline at end of file diff --git a/src/includes/base.liquid b/src/includes/base.liquid index e16102eb..7f297acb 100644 --- a/src/includes/base.liquid +++ b/src/includes/base.liquid @@ -155,5 +155,6 @@ })() {{ content }} + \ No newline at end of file diff --git a/src/includes/partials/blocks/modal.liquid b/src/includes/partials/blocks/modal.liquid index c16a9911..8ec8043b 100644 --- a/src/includes/partials/blocks/modal.liquid +++ b/src/includes/partials/blocks/modal.liquid @@ -1,7 +1,3 @@ -{%- capture js -%} - {% render "../../../assets/scripts/modal.js" %} -{%- endcapture -%} - {%- capture labelContent -%} {%- if icon -%} {% tablericon icon label %} diff --git a/src/includes/partials/nav/menu.liquid b/src/includes/partials/nav/menu.liquid index b6e354ad..f1566baf 100644 --- a/src/includes/partials/nav/menu.liquid +++ b/src/includes/partials/nav/menu.liquid @@ -1,7 +1,3 @@ -{%- capture js -%} - {% render "../../../assets/scripts/menu.js" %} -{%- endcapture -%} -