Skip to content

Commit

Permalink
feat: implement tiles showcase expand script (#49)
Browse files Browse the repository at this point in the history
* feat: implement tiles showcase expand script

* feat: implement aria-live on tiles showcase
  • Loading branch information
paulovareiro29 authored Nov 13, 2024
1 parent 7b5aad0 commit 97ef88a
Show file tree
Hide file tree
Showing 6 changed files with 207 additions and 273 deletions.
1 change: 1 addition & 0 deletions src/js/scripts.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
import 'bootstrap'
import './darkmode.js'
import './tiles-showcase.js'
70 changes: 70 additions & 0 deletions src/js/tiles-showcase.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
;(() => {
const breakpoints = {
md: 768,
lg: 992,
}

const visibleInitially = {
md: 4,
lg: 6,
}

const getTiles = (section) =>
Array.from(section.querySelectorAll('.col:has(.tile)'))

const getButton = (section) => section.querySelector('button')

const hideTile = (tile) => {
tile.classList.add('d-none')
}

const showTile = (tile) => {
tile.classList.remove('d-none')
}

const resetExpansion = (section) => {
const breakpoint = Object.entries(breakpoints)
.reverse()
.find(([_, value]) => document.documentElement.clientWidth >= value)?.[0]

const visible = visibleInitially[breakpoint] || 2

const button = getButton(section)
button.querySelector('i.bi').classList.replace('bi-dash-lg', 'bi-plus-lg')
button.childNodes[button.childNodes.length - 1].textContent =
'Alle Kategorien anzeigen'

section.setAttribute('aria-expanded', 'false')

const tiles = getTiles(section)
tiles.forEach(hideTile)
tiles.slice(0, visible).forEach(showTile)
}

const handleExpansion = (section) => {
const button = getButton(section)
button.querySelector('i.bi').classList.replace('bi-plus-lg', 'bi-dash-lg')
button.childNodes[button.childNodes.length - 1].textContent =
'Weniger Kategorien anzeigen'

section.setAttribute('aria-expanded', 'true')

const tiles = getTiles(section)
tiles.forEach(showTile)
}

const handleShowMore = (section) => {
const isExpanded = section.getAttribute('aria-expanded') === 'true'

if (isExpanded) {
resetExpansion(section)
} else {
handleExpansion(section)
}
}

document.querySelectorAll('.tile-showcase').forEach((section) => {
resetExpansion(section)
getButton(section).addEventListener('click', () => handleShowMore(section))
})
})()
208 changes: 0 additions & 208 deletions src/pages/homepage-extended-categories.twig

This file was deleted.

1 change: 0 additions & 1 deletion src/pages/index.twig
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
name: 'Home',
variants: [
{ href: './homepage', label: 'Default ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'},
{ href: './homepage-extended-categories', label: 'With extended categories ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'}
]
},
{
Expand Down
16 changes: 14 additions & 2 deletions src/partials/base/b_link.twig
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
{% set _attributes = '' %}
{% for key, value in attributes %}
{% set _attributes = _attributes ~ key ~ '="' ~ value ~ '" ' %}
{% endfor %}

{% if href %}
<a href='{{ href }}' class='btn btn-link {{fontsize|default('fs-5')}}'>
<a
href='{{ href }}'
class='btn btn-link {{fontsize|default('fs-5')}}'
{{ _attributes }}
>
{% if icon %}
<i class='bi bi-{{ icon }} text-primary me-2' aria-hidden='true'></i>
{% endif %}
{{ text }}
</a>
{% else %}
<button class='btn btn-link {{fontsize|default('fs-5')}}'>
<button
class='btn btn-link {{fontsize|default('fs-5')}}'
{{ _attributes }}
>
{% if icon %}
<i class='bi bi-{{ icon }} text-primary me-2' aria-hidden='true'></i>
{% endif %}
Expand Down
Loading

0 comments on commit 97ef88a

Please sign in to comment.