ihk24/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js

import {createElement, createImage} from "../../_global/scripts/helpers";
import './teaser.scss';
import {createReadingTime} from "../../atoms/reading-time/ReadingTimeComponent";
import {createLinkList} from "../linklist/LinkListComponent";

export const createTeaser = ({
  type = 'regular',
  link = '#',
  imageSrc = './dummy/placeholder-3-2.svg',
  copyright = '@ shutterstock.com',
  kicker = 'Fachkräfte',
  headline = 'Anteil der Frauen im Bereich Engineering steigt',
  copy = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita, no sea takimata sanctus est.',
  showReadingTime = false,
  imageSize = 'large',
  chartTitle = 'Chart-Titel des Teasers',
  picto = null,
  pictoText = false,
  linkType = null,
  linklistData = null,
}) => {
  const teaser = createElement('div', ['teaser', type]);
  if (kicker && kicker.length > 0) {
    createElement('span', ['kicker'], kicker, teaser);
  }

  if (imageSrc && imageSrc.length > 0 && type !== 'text' && type !== 'chart' && type !== 'picto' && type !== 'pictoHero') {
    let imageWidth, imageHeight;
    switch (type) {
      case 'hero':
        imageWidth = 630;
        imageHeight = 420;
        break;
      case 'fullwidth':
        if (imageSize === 'large') {
          imageWidth = 880;
          imageHeight = 484;
        } else if (imageSize === 'medium') {
          imageWidth = 650;
          imageHeight = 433;
        } else {
          imageWidth = 535;
          imageHeight = 535;
        }
        break;
      default:
        imageWidth = 420;
        imageHeight = 280;
    }

    const imageBox = createElement('div', ['image-box'], '', teaser);
    const src = imageSrc.replace('420', imageWidth).replace('280', imageHeight);
    createImage(src, imageWidth, imageHeight, 'Teaser-Bild', [], imageBox);

    if (copyright && copyright.length > 0) {
      const copy = createElement('span', ['copyright'], copyright, imageBox);
      copy.setAttribute("aria-hidden", "true");
      createElement('span', ['sr-only'], copyright, imageBox);
    }
  }
  else if ((type === 'chart' && chartTitle && chartTitle.length > 0) || ((!imageSrc || imageSrc.length === 0) && type !== 'text' && chartTitle && chartTitle.length > 0)) {
    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
    createElement('span', ['chart-title'], chartTitle, imageBox);
  }
  else if (type === 'picto' || type === 'pictoHero') {
    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
    const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox);
    const iconBox = createElement('div', ['icon'], null, pictoBox);
    iconBox.classList.add(picto);
    if (pictoText) {
      createElement('span', ['picto-title'], chartTitle, pictoBox);
    }
  }

  else if (type === 'picto' || type === 'pictoHero') {
    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
    const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox);
    const iconBox = createElement('div', ['icon'], null, pictoBox);
    iconBox.classList.add(picto);
    if (pictoText) {
      createElement('span', ['picto-title'], chartTitle, pictoBox);
    }
  }

  const textBox = createElement('div', ['text-box'], '', teaser);

  if (linklistData) {
    // Mit Linkliste: KEINE "title" Klasse, KEIN Link in Headline
    createElement('div', ['like-h4'], headline, textBox);
    textBox.appendChild(createLinkList({links: linklistData}));
  } else {
    // Ohne Linkliste: normale Variante MIT "title" Klasse
    createElement('div', ['title','like-h4'], headline, textBox);
    createElement('p', [], copy, textBox);
  }

  if (showReadingTime) {
    const rt = createReadingTime({minutes: Math.floor(Math.random() * 10) + 2});
    teaser.appendChild(rt);
  }
  if (type === 'fullwidth') {
    const imageSizeMap = {
      'large': 'l',
      'medium': 'm',
      'small': 's'
    };
    teaser.dataset.imageSize = imageSizeMap[imageSize] || imageSize;
  }

// teaserLink nur OHNE linklistData
  if (!linklistData) {
    const teaserLink = createElement('a', ['teaser--link', type], '', teaser);
    teaserLink.href = link;
    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');

    if (linkType) {
      teaser.classList.add(linkType);
    }
  }

  return teaser;
};