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";


export const createMarketingHeader =
  ({
    artworkStyle = 'artwork-both-sides',
    placeholder = 'Hier Ihr Thema finden',
    api = 'services/search/{SEARCHTERM}.json',
    tiles = searchData,
    imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
    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,
    isFirstElement = false,
    slides = sliderData,
    teasers = teaserData,
    maxItems = 3,
    type = 'infoteaser',
  }) => {
    const section = createElement('section', ['marketingheader', type], null);
    const search = createElement('div', ['search'], null, section);
    if (backgroundImage && backgroundImage.length > 0) {
      search.style = 'background-image: url(' + backgroundImage + ');';
      search.classList.add('background-image');
    }
    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) => {
      const div = createElement('div', ['tile'], null, tilesContainer);
      const a = createElement('a', [], tile.title, div);
      a.href = tile.link;
    })

    if (api) {
      new IHKSearchTypeahead($(form).find('input.typeahead'));
    }

    /* SLIDER */
   
    const container2 = createElement('div', ['container', 'mainstage'], null, section);
    const row2 = createElement('div', ['row'], null, container2);
    const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2);

    
    //const col2 = createElement('div', ['col'], null, row2);
    const sliderComponent = createElement('div', ['slider'], 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 : '';

      if (slideData.imageSrc && slideData.imageSrc.length > 0) {
        const imageBox = createElement('div', ['image-box'], null, outer);
        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], 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 IHKMHSlider($(sliderComponent));

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

      //const teasers = createMiniTeaser({teasers.type: 'standard'});
      //col3.appendChild(teasers);

      teasers.map((t, i) => {
        if (i < maxItems) {
          var typ = 'standard'; 
          if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser';
          const col4 = createElement('div', ['mt'], null, col3);
          const tea = createMiniTeaser({
            type : typ,
          })
          col4.appendChild(tea);
        }
      })
    }
    /*
    const hasImage = imageSrc && imageSrc.length > 0;
    const stage = createElement('div', ['participation', 'participation-stage'], null, section);
    const container2 = createElement('div', ['container'], null, stage);
    const row2 = createElement('div', ['row'], null, container2);
    const col2 = createElement('div', ['col'], null, row2);
    const tb2 = createElement('div', ['text-box'], null, col2);
  
    if (backgroundImage && backgroundImage.length > 0) {
      //section.content('style=background: red;');
      stage.style = 'background-image: url(' + backgroundImage + ');';
      stage.classList.add('background-image');
    }
  
    if (isFirstElement) {
      stage.classList.add('first-element');
    }
  
    if (kicker && kicker.length > 0) {
      createElement('p', ['kicker'], kicker, tb2);
    }
    if (showProgress) {
      tb2.appendChild(createProgressBar({progress}));
    }
    createElement('h1', ['like-h2'], headline, tb2);
    createElement('p', [], copy, tb2);
    if (moreCta) {
      const more = createElement('a', [], moreCta.label, tb2);
      more.href = moreCta.link;
      more.target = moreCta.target;
    }
    if (buttonCta) {
      const button2 = createButton({
        elementType: 'a',
        link: buttonCta.link,
        color: 'white',
        label: buttonCta.label,
        iconPosition: 'icon-right',
        icon: 'small-arrow-right-simple',
      });
      tb2.appendChild(button2);
    }
 
    if (hasImage) {
      stage.classList.add('image-stage');
      const ib2 = createElement('div', ['image-box'], null, col2);
      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
    }
     */
    return section;   
  
  }