ihk24/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

import './marketingheader.scss';
import '../../components/artwork/artwork.scss';
import '../slider/slider.scss';
import $ from 'jquery';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createArtwork} from "../../components/artwork/ArtworkComponent";
import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
import IHKSearchTypeahead from "./marketingheader-typeahead";
import {createButton} from "../../atoms/button/ButtonComponent";
import IHKMHSlider from "./marketingheaderslider";
import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
import {createMiniTeaser} from "../../components/mini-teaser/MiniTeaserComponent";
import IHKSearchAccordion from "./searchAccordion";


export const createMarketingHeader =
  ({
    artworkStyle = 'artwork-both-sides',
    placeholder = 'Hier Ihr Thema finden',
    api = 'services/search/{SEARCHTERM}.json',
    tiles = searchData,
    kicker = 'Noch 7 Tage offen',
    headline = 'Jetzt und digital mitreden',
    copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
    moreCta = {
      label: 'Mehr Infos',
      link: '#',
      target: '_self',
    },
    buttonCta = {
      label: 'Jetzt beteiligen',
      link: '#',
      target: '_self',
    },
    showProgress = true,
    progress = 60,
    backgroundImage = null,
    pictoImage = null,
    pictoImageMobile = null,
    isFirstElement = false,
    searchAllButton = false,
    slides = sliderData,
    teasers = teaserData,
    maxItems = 3,
    type = 'infoteaser',
  }) => {
    const section = createElement('section', ['marketingheader', type], null);
    const search = createElement('div', ['search','variant-subtle-primary'], null, section);
    if (searchAllButton) {
      search.classList.add('has-button-wrapper');
    }
    if (backgroundImage && backgroundImage.length > 0) {
      search.style = 'background-image: url(' + backgroundImage + ');';
      search.classList.add('background-image');
    }
    if (pictoImage && pictoImage.length > 0 && pictoImageMobile && pictoImageMobile.length > 0) {
      search.classList.add('picto-image');
      const styleElement = document.createElement('style');
      styleElement.textContent = `
        .picto-image {background-image: url("${pictoImage}");}
        @media (max-width: 767px) {
          .picto-image {background-image: url("${pictoImageMobile}");}
        }
      `;
      search.parentNode.insertBefore(styleElement, search.nextSibling);
    }
    const artwork = createArtwork({type: artworkStyle});
    search.appendChild(artwork);
    search.dataset.type = artworkStyle;
    
    const container = createElement('div', ['container', 'small'], null, search);
    
    const row = createElement('div', ['row'], null, container);
    const col = createElement('div', ['col'], null, row);

      const form = createElement('form', [], null, col);

    const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form);
    label.for = 'search-term';

    form.appendChild(createSearchInput({api: api, placeholder: placeholder}));
    form.appendChild(createSearchButton({}));

    form.action = '#';

    const tilesContainer = createElement('div', ['tiles'], null, col);
    tiles.map((tile) => {
      if (tile.type) {
        const div = createElement('div', ['tile', tile.type, 'variant-base'], null, tilesContainer);
        const outer = createElement('div', ['outer'], null, div);
        const inner = createElement('div', ['inner'], null, outer);
        const p = createElement('p', [], null, inner);
        const a = createElement('a', [], tile.title + (tile.count ? ' (' + tile.count + ')' : ''), p);
        a.href = tile.link;
        if (tile.items && tile.items.length > 0) {
          const ul = createElement('ul', [], null, inner);
          tile.items.slice(0, 2).map((item) => {
            const li = createElement('li', [], null, ul);
            const itemA = createElement('a', [], item.title, li);
            itemA.href = item.link;
            itemA.title = item.title;
          });
        }
      } else {
        const div = createElement('div', ['tile','variant-base'], null, tilesContainer);
        const a = createElement('a', [], tile.title, div);
        a.href = tile.link;
      }
    });
    if (searchAllButton) {
      const allButtonWrapper = createElement('span', ['all-button-wrapper'], null, col);
      const searchAllBtn = createElement('div', ['btn', 'has-icon', 'icon-small-arrow-right-simple'], 'Alle Suchergebnisse', allButtonWrapper);
    }

    if (api) {
      new IHKSearchTypeahead($(form).find('input.typeahead'));
    }
    
    /* Accordion */
    const sc = createElement('div', ['container','sc'], null, search);
    $(document).ready(() => {
      new IHKSearchAccordion($(search));
    })
    createElement('button', ['close-search'], '', sc);
    /* SLIDER */
   
    const container2 = createElement('div', ['container', 'mainstage'], null, section);
    if (type === 'hero-fullwidth') {
      container2.classList.add('variant-solid');
    }
    const row2 = createElement('div', ['row'], null, container2);
    const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2);
    const sliderComponent = createElement('div', ['slider', 'btnanimation'], null, colslider);

    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 : '';

      // Image-Box wird IMMER erstellt
      const imageBox = createElement('div', ['image-box'], null, outer);

      // Bild wird nur gerendert, wenn imageSrc vorhanden
      if (slideData.imageSrc && slideData.imageSrc.length > 0) {
        const picture = createElement('picture', [], null, imageBox);
        const src1 = createElement('source', [], null, picture);
        src1.setAttribute('media','(min-width: 1000px)');
        src1.setAttribute('srcset',slideData.imageSrc);
        const src2 = createElement('source', [], null, picture);
        src2.setAttribute('media','(min-width: 901px)');
        src2.setAttribute('srcset',slideData.imageSrc);
        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], picture);
        const copyright = createElement('span', ['copyright'], 'Copyright-Angabe', imageBox);
        copyright.setAttribute("aria-hidden", "true");
        createElement('span', ['sr-only'], 'Copyright-Angabe', imageBox);
      } else {
        const textInImageBox = createElement('div', ['text-in-image-box'], null, imageBox);
        createElement('div', ['icon', 'pictogram-bueroklammer'], null, textInImageBox);
        createElement('p', [], 'Wachstum durch Innovation lorem ipsum dolor sit amet', textInImageBox);
      }

      // Context-Box immer in image-box (egal ob Bild oder nicht)
      if (contextBoxContentImg) {
        const contentBoxImg = createElement('div', ['context-box', 'variant-solid', 'context-box--image'], null, imageBox);
        createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
      } else if (contextBoxContent) {
        createElement('div', ['context-box', 'variant-solid'], contextBoxContent, imageBox);
      }

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

      // Klasse 'context' hinzufügen, wenn kein Bild vorhanden
      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
        if (contextBoxContent || contextBoxContentImg) {
          textBox.classList.add('context');
        }
      }

      if (slideData.kicker && slideData.kicker.length > 0) {
        createElement('span', ['kicker'], slideData.kicker, textBox);
      }
      if (slideData.headline && slideData.headline.length > 0) {
        createElement('div', ['like-h2'], slideData.headline, textBox);
      }
      if (slideData.copy && slideData.copy.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, size: 'small',
        });
        buttonP.appendChild(btn);
      }
    });

    new IHKMHSlider($(sliderComponent));

    if (type === 'infoteaser') {
      const col3 = createElement('div', ['col'], null, row2);

      teasers.map((t, i) => {
        if (i < maxItems) {
          var typ = 'standard'; 
          if (i == 0 && t.type == 'infoteaser'){
           typ = 'infoteaser';
           section.classList.add('miniinfoteaser');
          }
          const col4 = createElement('div', ['mt'], null, col3);
          const tea = createMiniTeaser({
            type : typ,
          })
          col4.appendChild(tea);
        }
      })
    }
    return section;   
  
  }