ihk24/gfi-ihk-2024/stories/sections/slider/SliderComponent.js

import './slider.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import $ from 'jquery';
import {createButton} from "../../atoms/button/ButtonComponent";
import IHKSlider from "./slider";
import {sliderData} from "./SliderData";

export const createSlider =
  ({
    slides = sliderData,
  }) => {
    const section = createElement('section', ['rotation'], null);
    const container = createElement('div', ['container'], null, section);
    const sliderComponent = createElement('div', ['slider'], null, container);

    slides.map((slideData, index) => {
      const slide = createElement('div', ['slide'], null, sliderComponent);
      const outer = createElement('outer', ['outer'], null, slide);
      const contextBoxContent = slideData.context ? slideData.context : '';
      const contextBoxContentImg = slideData.contextImg ? slideData.contextImg : '';

      if (slideData.imageSrc && slideData.imageSrc.length > 0) {
        const imageBox = createElement('div', ['image-box'], null, outer);
        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
        if (slideData.copyright && slideData.copyright.length > 0) {
          const copy = createElement('span', ['copyright'], slideData.copyright, imageBox);
          copy.setAttribute("aria-hidden", "true");
          createElement('span', ['sr-only'], slideData.copyright, imageBox);
        }
        if (contextBoxContentImg) {
          const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
          createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
        } else if (contextBoxContent) {
          createElement('div', ['context-box'], contextBoxContent, imageBox);
        }
      }

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

      if (slideData.kicker && slideData.kicker.length > 0) {
        createElement('span', ['kicker'], slideData.kicker, textBox);
      }
      if (slideData.headline && slideData.headline.length > 0) {
        createElement('h3', ['like-h2'], slideData.headline, textBox);
      }
      if (slideData.kicker && slideData.kicker.length > 0) {
        createElement('p', [], slideData.copy, textBox);
      }
      if (slideData.cta && slideData.link) {
        const buttonP = createElement('p', [], '', textBox);
        const btn = createButton({
          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta
        });
        buttonP.appendChild(btn);
      }

      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
        if (contextBoxContent) {
          textBox.classList.add('context');
          if (contextBoxContentImg) {
            const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox);
            createImage(contextBoxContentImg, 200, 50, '', [], contentBox);
          } else if (contextBoxContent) {
            createElement('div', ['context-box'], contextBoxContent, textBox);
          }
        }
      }
    })

    new IHKSlider($(sliderComponent));

    return section;
  }