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);
  createElement('div', ['title','like-h4'], headline, textBox);
  if (linklistData) {
    textBox.appendChild(createLinkList({links: linklistData}));
  } else {
    createElement('p', [], copy, textBox);
  }

  if (showReadingTime) {
    const rt = createReadingTime({minutes: Math.floor(Math.random() * 10) + 2});
    teaser.appendChild(rt);
  }
  if (type === 'fullwidth') {
    teaser.dataset.imageSize = imageSize;
  }

  const teaserLink = createElement('a', ['teaser--link', type], '', teaser);
  teaserLink.href = link;
  teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');

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

  return teaser;
};