cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: consolidate broadly used js + cleanup

Browse source
This commit is contained in:
Cory Dransfeldt 2024-08-05 14:20:28 -07:00
parent ee0832dd0b
commit 10dd21f6e3
No known key found for this signature in database
10 changed files with 78 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -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",

2
package.json
View file

@ -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": {

43
src/assets/scripts/index.js Normal file
View file

@ -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
})
}
})
})()
})

43
src/assets/scripts/media-toggles.js
View file

@ -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)
})

25
src/assets/scripts/menu.js
View file

@ -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
})
})

8
src/assets/scripts/modal.js
View file

@ -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
})
})
})

29
src/assets/scripts/text-toggle.js
View file

@ -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'
})
})

1
src/includes/base.liquid
View file

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

4
src/includes/partials/blocks/modal.liquid
View file

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

4
src/includes/partials/nav/menu.liquid
View file

@ -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">