From e9b4d897b96f3822767a2fc4cc01fd29369575c5 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Thu, 3 Apr 2025 10:37:15 +0200 Subject: [PATCH] fixes april --- .../stories/components/accordion/accordion.js | 4 +- .../components/accordion/accordion.scss | 5 ++ .../marketingheader/searchAccordion.js | 19 ++++--- .../sections/tile-grid/TileGrid.stories.js | 2 +- .../sections/tile-grid/TileGridComponent.js | 22 +++++-- .../sections/tile-grid/TileGridData.js | 16 +++--- .../stories/sections/tile-grid/tile-grid.js | 57 +++++++++++++++++++ .../stories/sections/tile-grid/tile-grid.scss | 21 ++++++- 8 files changed, 124 insertions(+), 22 deletions(-) create mode 100644 gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js diff --git a/gfi-ihk-2024/stories/components/accordion/accordion.js b/gfi-ihk-2024/stories/components/accordion/accordion.js index a011a7d..7f428ef 100644 --- a/gfi-ihk-2024/stories/components/accordion/accordion.js +++ b/gfi-ihk-2024/stories/components/accordion/accordion.js @@ -17,7 +17,9 @@ class IHKAccordion { item.attr('aria-label', 'Klappmenü geschlossen'); } if (this.section.data('single-open') !== false) { - item.siblings('.open').removeClass('open').find('.accordion-content').slideUp(300, 'easeOutQuad'); + const siblingsToClose = item.siblings('.open'); + siblingsToClose.attr('aria-label', 'Klappmenü geschlossen'); + siblingsToClose.removeClass('open').find('.accordion-content').slideUp(300, 'easeOutQuad'); } }); diff --git a/gfi-ihk-2024/stories/components/accordion/accordion.scss b/gfi-ihk-2024/stories/components/accordion/accordion.scss index 8a1288b..2e82e0c 100644 --- a/gfi-ihk-2024/stories/components/accordion/accordion.scss +++ b/gfi-ihk-2024/stories/components/accordion/accordion.scss @@ -18,6 +18,11 @@ list-style: none; border-bottom: 1px solid var(--theme-color-primary-dimmed-02); + .richtext & { + padding: 0; + margin: 0; + } + @media(max-width: 567px) { margin: 0 calc(var(--container-padding) * -1); --accordion-icon-width: var(--container-padding); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js b/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js index 3fcd753..eb94cbf 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js @@ -4,21 +4,26 @@ const $ = global.$; class IHKSearchAccordion { constructor(section) { this.section = section.addClass('initiated'); - this.section.find('#search-term').attr('aria-label', 'Klappmenü geschlossen'); + // this.section.find('#search-term').attr('aria-label', 'Klappmenü geschlossen'); - this.section.find('#search-term').off('click').on('click', (e) => { + const openSearchHandler = (e) => { e.preventDefault(); section.addClass('open'); if(section.hasClass('open')){ - section.attr('aria-label', 'Klappmenü geöffnet'); + // section.attr('aria-label', 'Klappmenü geöffnet'); } else{ - section.attr('aria-label', 'Klappmenü geschlossen'); + // section.attr('aria-label', 'Klappmenü geschlossen'); } if (this.section.data('single-open') !== false) { section.siblings('.open').removeClass('open').find('.tiles').slideUp(300, 'easeOutQuad'); } - }); + } + + this.section.find('#search-term') + .off('click focus') + .on('click focus', openSearchHandler); + /* CLOSE */ this.section.find('.close-search').off('click').on('click', (e) => { e.preventDefault(); @@ -35,10 +40,10 @@ class IHKSearchAccordion { setTimeout(() => { section.removeClass('open'); if(section.hasClass('open')){ - section.attr('aria-label', 'Klappmenü geschlossen'); + // section.attr('aria-label', 'Klappmenü geschlossen'); } else{ - section.attr('aria-label', 'Klappmenü geöffnet'); + // section.attr('aria-label', 'Klappmenü geöffnet'); } }, 100); }); diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js index 0b7117d..29f09b6 100644 --- a/gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js +++ b/gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js @@ -17,4 +17,4 @@ const Template = ({...args}) => { }; export const TileGrid = Template.bind({}); -TileGrid.args = {}; \ No newline at end of file +TileGrid.args = {}; diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js index 56007b4..c65bd67 100644 --- a/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js +++ b/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js @@ -1,6 +1,8 @@ import './tile-grid.scss'; import {createElement, createImage} from "../../_global/scripts/helpers"; import {TileGridData} from "./TileGridData"; +import IHKTileGrid from "./tile-grid"; +import IHKEventOverviewTiles from "../eventoverview-stage/eventoverview"; export const createTileGrid = ({ headline = 'Daten und Fakten auf einen Blick', @@ -20,10 +22,21 @@ export const createTileGrid = ({ group.tiles.map((item) => { const tile = createElement('div', ['tile'], null, col); - const tileLink = createElement('a', ['tile-outer'], null, tile); - tileLink.href = item.url; - const iconBox = createElement('div', ['icon'], null, tileLink); - createImage(item.icon, 220, 220, ['icon'], [], iconBox); + let tileLink; + if (item.url) { + tileLink = createElement('a', ['tile-outer'], null, tile); + tileLink.href = item.url; + } else { + tileLink = createElement('span', ['tile-outer'], null, tile); + } + if (item.icon) { + const iconBox = createElement('div', ['icon'], null, tileLink); + createImage(item.icon, 220, 220, ['icon'], [], iconBox); + } + if (item.dynamicIcon) { + const iconBox = createElement('div', ['icon','dynamic-icon'], null, tileLink); + iconBox.classList.add(item.dynamicIcon); + } const p = createElement('p', [], null, tileLink); const num = createElement('span', ['number'], item.number, p); if (item.unit) { @@ -31,6 +44,7 @@ export const createTileGrid = ({ } createElement('span', ['label'], item.label, p); }) + new IHKTileGrid($(section)); }) return section; diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js index 90a2ed3..48def78 100644 --- a/gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js +++ b/gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js @@ -8,25 +8,30 @@ export const TileGridData = [ number: '5.235', unit: null, label: 'Vollversammlungs­mitglieder', - url: '#', }, { - icon: './dummy/tile-grid/tile-02.svg', + dynamicIcon: 'pictogram-bueroklammer', number: '78', unit: '%', label: 'KMU-Vertreter in IHK-Vollversammlungen', url: '#', }, { - icon: './dummy/tile-grid/tile-03.svg', + dynamicIcon: 'pictogram-gruppe-idee', number: '22', unit: '%', label: 'weibliche Mitglieder in IHK-Vollversammlungen', url: '#', }, { - icon: './dummy/tile-grid/tile-04.svg', + dynamicIcon: 'pictogram-rakete-a', number: '163.000', unit: null, label: 'ehrenamtliche Prüfer in Aus- und Weiterbildung', url: '#', + }, { + dynamicIcon: 'pictogram-reisepass', + number: '127.400', + unit: null, + label: 'männliche Mitglieder in IHK-Vollversammlungen', + url: '#', }, ], }, @@ -35,7 +40,6 @@ export const TileGridData = [ titleUrl: '#', tiles: [ { - icon: './dummy/tile-grid/tile-05.svg', number: '286.000', unit: null, label: 'abgenommene Abschlussprüfungen in der Ausbildung', @@ -60,11 +64,9 @@ export const TileGridData = [ titleUrl: '#', tiles: [ { - icon: './dummy/tile-grid/tile-08.svg', number: '1.9', unit: 'Mio.', label: 'Außenwirtschafts­bescheinigungen ausgestellt', - url: '#', }, { icon: './dummy/tile-grid/tile-09.svg', number: '177.000', diff --git a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js new file mode 100644 index 0000000..8257c35 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js @@ -0,0 +1,57 @@ +import $ from 'jquery'; + +class IHKTileGrid { + constructor(section) { + this.$dynamicIcon = $(section); + this.iconSize(); + + // Event-Listener für Resize + $(window).on('resize', () => { + this.iconSize(); + }); + } + + iconSize() { + // Die Höhe des Parent-Elements (tile-outer) holen + const $tileOuter = this.$dynamicIcon.closest('.tile-outer'); + + // Prüfen ob das Element existiert und sichtbar ist + if ($tileOuter.length && $tileOuter.is(':visible')) { + const containerHeight = $tileOuter.outerHeight(); + + // Nur setzen wenn containerHeight gültig ist + if (containerHeight && containerHeight > 0) { + this.$dynamicIcon.css('--icon-height', `${containerHeight}px`); + console.log('Icon höhe gesetzt:', containerHeight, 'px für', this.$dynamicIcon); + } else { + console.warn('Ungültige Höhe:', containerHeight); + // Fallback setzen + this.$dynamicIcon.css('--icon-height', '100%'); + } + } else { + console.warn('Tile-outer nicht gefunden oder nicht sichtbar'); + // Fallback setzen + this.$dynamicIcon.css('--icon-height', '100%'); + } + } +} + +export default IHKTileGrid; + +// Nur einmal initialisieren, aber mit besserer Timing-Sicherheit +function initIcons() { + $('.tile-grid .dynamic-icon').each((i, el) => { + new IHKTileGrid(el); + }); +} + +// Bei allen relevanten Events ausführen +$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', initIcons); + +// Beim Laden der Seite und kurz danach nochmal (für Storybook) +$(document).ready(() => { + initIcons(); + + // Nach kurzer Verzögerung nochmal ausführen, falls DOM noch ändert + setTimeout(initIcons, 500); +}); \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss index 2c99763..7a74acf 100644 --- a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss +++ b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss @@ -36,7 +36,7 @@ } &:nth-child(odd) { - .tile a { + .tile .tile-outer { background-color: var(--theme-color-secondary-dimmed); color: var(--theme-color-secondary-intensed); } @@ -90,7 +90,7 @@ } } - a { + .tile-outer { position: relative; display: block; background-color: var(--theme-color-primary-dimmed-04); @@ -153,6 +153,23 @@ height: 100%; float: right; } + &.dynamic-icon { + width: 100%; + height: 100%; + overflow: hidden; + &:before { + display: block; + height: 100%; + width: 100%; + position: absolute; + right: -8px; + top: 0; + font-family: "Pictograms", sans-serif; + color: var(--theme-color-white); + font-size: calc(var(--icon-height, 1em) + 14px); + line-height: 1; + } + } } p {