ihk24/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js

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