ihk24/storybook/stories/sections/teasers/TeasersComponent.js

import './teasers.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {createTeaser} from "../../components/teaser/TeaserComponent";
import {teasersData} from "./TeasersData";
import Masonry from "../../_global/scripts/masonry";
import {createTeaserSocial} from "../../components/teaser-social/TeaserSocialComponent";

export const createTeasersSection = ({
  type = 'regular',
  background = null,
  headline = '',
  teasers = teasersData,
  showReadingTime = false,
  hideKicker = false,
  maxItems = -1,
  includeChart = false,
  includeSocial = false,
}) => {
  const baseTeaser = {
    type: 'regular',
    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.',
    imageSrc: 'https://source.unsplash.com/0K7GgiA8lVE/600x400',
    copyright: '@ shutterstock.com',
    showReadingTime: false,
    link: '#',
    imageSize: 'large',
  };

  switch (type) {
    case 'regular':
      maxItems = maxItems === -1 ? 3 : maxItems;
      break;
    case 'text':
      maxItems = maxItems === -1 ? 3 : maxItems;
      break;
    case 'hero':
      maxItems = maxItems === -1 ? 2 : maxItems;
      break;
    case 'fullwidth':
      maxItems = 1;
      break;
    case 'magazine':
      maxItems = teasers.length;
      break;
  }
  
  const section = createElement('section', type === 'magazine' ? ['teasers', 'magazine-style'] : ['teasers']);
  if (type !== 'magazine') {
    section.dataset.items = maxItems > 3 ? '3' : maxItems.toString();
  }
  if (background && background.length > 0) {
    section.dataset.background = background;
  }

  const container = createElement('div', ['container'], null, section);
  if (headline && headline.length > 0) {
    createElement('h2', [], headline, container);
  }

  const row = createElement('div', ['row'], null, container);

  function getType(index) {
    if (includeChart && index === maxItems - 1) {
      return 'chart';
    }
    return type === 'magazine' ? 'regular' : type;
  }

  if (includeSocial) {
    maxItems -= 1;
  }

  teasers.map((teaserData, index) => {
    if (index >= maxItems) {
      return;
    }
    const col = createElement('div', ['col'], null, row);
    const teaser = createTeaser({
      ...baseTeaser,
      ...teaserData,
      type: getType(index),
      showReadingTime: type === 'magazine' || type === 'fullwidth' ? true : showReadingTime,
      kicker: hideKicker ? null : teaserData.kicker,
    })
    col.appendChild(teaser);
  })

  if (includeSocial) {
    const col = createElement('div', ['col'], null, row);
    col.appendChild(createTeaserSocial({kicker: hideKicker ? null : 'Ihre IHK bei Twitter'}));
  }

  if (type === 'magazine') {
    $(document).ready(() => {
      const btnText = window.ihk.translations.loadMoreArticles;
      section.dataset.type = 'masonry';
      new Masonry($(row), btnText, [
        {minWidth: 0, batchSize: 2},
        {minWidth: 567, batchSize: 3},
        {minWidth: 1000, batchSize: 6}
      ])
    })
  }

  return section;
}