From 97ef88ad171c696f5a084ea4647c44894de3e725 Mon Sep 17 00:00:00 2001 From: Paulo Vareiro <58229468+paulovareiro29@users.noreply.github.com> Date: Wed, 13 Nov 2024 13:33:37 +0000 Subject: [PATCH] feat: implement tiles showcase expand script (#49) * feat: implement tiles showcase expand script * feat: implement aria-live on tiles showcase --- src/js/scripts.js | 1 + src/js/tiles-showcase.js | 70 ++++++ src/pages/homepage-extended-categories.twig | 208 ------------------ src/pages/index.twig | 1 - src/partials/base/b_link.twig | 16 +- .../content-layout/cl_tile-showcase.twig | 184 ++++++++++------ 6 files changed, 207 insertions(+), 273 deletions(-) create mode 100644 src/js/tiles-showcase.js delete mode 100644 src/pages/homepage-extended-categories.twig diff --git a/src/js/scripts.js b/src/js/scripts.js index efb565c..3623ce3 100644 --- a/src/js/scripts.js +++ b/src/js/scripts.js @@ -1,2 +1,3 @@ import 'bootstrap' import './darkmode.js' +import './tiles-showcase.js' diff --git a/src/js/tiles-showcase.js b/src/js/tiles-showcase.js new file mode 100644 index 0000000..bb82cb1 --- /dev/null +++ b/src/js/tiles-showcase.js @@ -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)) + }) +})() diff --git a/src/pages/homepage-extended-categories.twig b/src/pages/homepage-extended-categories.twig deleted file mode 100644 index dfeb44c..0000000 --- a/src/pages/homepage-extended-categories.twig +++ /dev/null @@ -1,208 +0,0 @@ -{% extends 'layouts::base.twig' %} -{% set theme = 'default' %} -{% - set skip_links = [ - { href: '#content', text: 'Zum Inhalt' }, - ] -%} - -{% block content %} - - -
-
-
-

- Hier finden alle Kölner – ob Bürger, Verwaltung, Unternehmen oder Wissenschaft – offene Datensätze, um - gemeinsam einen Mehrwert für alle zu schaffen. -

-
-
-
- -
- {% - include 'partials::content-layout/cl_section-header.twig' with { - title: 'Beliebte Datensätze', - link: { - href: './overview', - text: 'Alle Datensätze', - } - } - %} - -
- {% - include 'partials::base/b_card.twig' with { - 'thumbnail': { - src: 'https://picsum.photos/960/540', - }, - 'direction': 'horizontal', - 'href': './dataset', - 'title': 'Baumkataster Köln 2020', - 'subtitle': 'Herausgeber: Stadt Köln', - 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...', - } - %} -
-
- {% - include 'partials::base/b_card.twig' with { - 'thumbnail': { - src: 'https://picsum.photos/960/540', - }, - 'direction': 'horizontal', - 'href': './dataset', - 'title': 'Baumkataster Köln 2020', - 'subtitle': 'Herausgeber: Stadt Köln', - 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...', - } - %} -
-
- {% - include 'partials::base/b_card.twig' with { - 'thumbnail': { - src: 'https://picsum.photos/960/540', - }, - 'direction': 'horizontal', - 'href': './dataset', - 'title': 'Baumkataster Köln 2020', - 'subtitle': 'Herausgeber: Stadt Köln', - 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...', - } - %} -
-
- {% - include 'partials::base/b_card.twig' with { - 'thumbnail': { - src: 'https://picsum.photos/960/540', - }, - 'direction': 'horizontal', - 'href': './dataset', - 'title': 'Baumkataster Köln 2020', - 'subtitle': 'Herausgeber: Stadt Köln', - 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...', - } - %} -
-
- {% - include 'partials::base/b_card.twig' with { - 'thumbnail': { - src: 'https://picsum.photos/960/540', - }, - 'direction': 'horizontal', - 'href': './dataset', - 'title': 'Baumkataster Köln 2020', - 'subtitle': 'Herausgeber: Stadt Köln', - 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...', - } - %} -
-
- {% - include 'partials::base/b_card.twig' with { - 'thumbnail': { - src: 'https://picsum.photos/960/540', - }, - 'direction': 'horizontal', - 'href': './dataset', - 'title': 'Baumkataster Köln 2020', - 'subtitle': 'Herausgeber: Stadt Köln', - 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...', - } - %} -
-
- -
- {% - include 'partials::content-layout/cl_section-header.twig' with { - title: 'News', - link: { - href: '#', - text: 'Alle News anzeigen', - } - } - %} - -
- {% - include 'partials::base/b_highlight-teaser.twig' with { - copyright: "Stadt Koeln", - content: " -

Title lorem ipsum

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua... -

- Weiterlesen - " - } - %} -
-
- -
- {% - include 'partials::content-layout/cl_section-header.twig' with { - title: 'Beliebte Kategorien' - } - %} - -
- {% include 'partials::content-layout/cl_tile-showcase-extended.twig' %} -
-
- -
- {% - include 'partials::content-layout/cl_section-header.twig' with { - title: 'Daten über Schnittstelle nutzen', - link: { - href: '#', - text: 'Artikel anzeigen', - } - } - %} - -

- Erfahren Sie hier wie Sie mit der DKAN API unsere offenen Datensätze für Ihre eigenen Projekte anschauen, - herunterladen und programmsteuern können. -

-
-{% endblock %} diff --git a/src/pages/index.twig b/src/pages/index.twig index c7da4f8..9bdb3b3 100644 --- a/src/pages/index.twig +++ b/src/pages/index.twig @@ -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'} ] }, { diff --git a/src/partials/base/b_link.twig b/src/partials/base/b_link.twig index f490901..f183b3b 100644 --- a/src/partials/base/b_link.twig +++ b/src/partials/base/b_link.twig @@ -1,12 +1,24 @@ +{% set _attributes = '' %} +{% for key, value in attributes %} + {% set _attributes = _attributes ~ key ~ '="' ~ value ~ '" ' %} +{% endfor %} + {% if href %} - + {% if icon %} {% endif %} {{ text }} {% else %} -