ihk24/gfi-ihk-2024/stories/sections/timeline/TimelineComponent.js

import './timeline.scss';
import '../slider/slider.scss';
import $ from 'jquery';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {TimelineData} from "./TimelineData";
import {createTabs} from "../../atoms/tabs/TabsComponent";
import IHKTimeline from "./timeline";

export const createTimeline = ({
  single = false,
  data = TimelineData,
}) => {
  const wrapper = createElement('div', ['timelines','variant-subtle-primary']);
  const tabsWrapper = createElement('div', ['timeline-tabs'], null, wrapper);
  const timelineWrapper = createElement('section', ['timeline'], null, wrapper);
  createElement('div', ['item-slider'], null, timelineWrapper);
  const years = createElement('div', ['years','variant-solid'], null, timelineWrapper);
  const container = createElement('div', ['container'], null, years);
  const yearsWrapper = createElement('div', ['years-wrapper'], null, container);
  const tabsData = [];

  if (single) {
    data = [data[0]];
  }

  data.map((section) => {
    tabsData.push({
      label: section.tab,
      link: '#' + section.id,
    })
    const anchorItem = createElement('div', ['year-item', 'anchor'], null, yearsWrapper);
    createElement('p', ['year'], section.nav, anchorItem);
    const anchorUl = createElement('ul', ['items'], null, anchorItem);
    const anchorLi = createElement('li', [], null, anchorUl);
    createElement('p', ['title'], null, anchorLi);
    const anchorSlide = createElement('div', ['slide'], null, anchorLi);
    const anchorContainer = createElement('div', ['container'], null, anchorSlide);
    const anchorTextBox = createElement('div', ['text-box'], null, anchorContainer);
    createElement('p', ['year'], section.title, anchorTextBox);
    anchorSlide.id = section.id;

    section.years.map((year) => {
      const yearItem = createElement('div', ['year-item'], null, yearsWrapper);
      createElement('p', ['year'], year.year, yearItem);
      const yearUl = createElement('ul', ['items'], null, yearItem);
      year.items.map((item) => {
        const itemLi = createElement('li', [], null, yearUl);
        createElement('p', ['title'], item.title, itemLi);
        const itemSlide = createElement('div', item.image ? ['slide', 'has-image'] : ['slide'], null, itemLi);
        const itemContainer = createElement('div', ['container'], null, itemSlide);
        if (item.image) {
          const imageBox = createElement('div', ['image-box', item.image.size], null, itemContainer);
          createImage(item.image.src, item.image.width, item.image.height, item.image.alt, [], imageBox);
          if (item.image.caption || item.image.copyright) {
            const caption = createElement('div', ['caption'], null, imageBox);
            if (item.image.caption) {
              createElement('span', [], item.image.caption, caption);
            }
            if (item.image.copyright) {
              const copyright = createElement('span', ['copyright'], item.image.copyright, caption);
              copyright.setAttribute("aria-hidden", "true");
              createElement('span', ['sr-only'], item.image.copyright, caption);
            }
          }
        }
        const itemTextBox = createElement('div', ['text-box'], null, itemContainer);
        createElement('p', ['year'], year.year, itemTextBox);
        if (item.subhead) {
          createElement('p', ['subhead'], item.subhead, itemTextBox);
        }
        if (item.copy) {
          createElement('p', [], item.copy, itemTextBox);
        }
      });
    })
  });

  if (single || data.length === 1) {
    tabsWrapper.remove();
  } else {
    tabsWrapper.appendChild(createTabs({size: 'small', color: 'white', data: tabsData}));
  }

  new IHKTimeline($(timelineWrapper));

  return wrapper;
}