Eventoverviewstage Verbesserung

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js

@@ -2,26 +2,27 @@ import './eventoverview-stage.scss';
 import {createElement, createImage} from "../../_global/scripts/helpers";
 import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
 import {createButton} from "../../atoms/button/ButtonComponent";
+import {eventOverviewStageData} from "./EventOverviewStageData";
+import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
+import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
+import IHKSearchTypeahead from "../../sections/search/search-typeahead";
+import {createTopicTeaser} from "../../components/topic-teaser/TopicTeaserComponent";
+import IHKTopicTeasers from "./topic-teasers";
+
 
 export const createEventOverviewStage = ({
   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',
-  },
+  maxItems = 6,
   showProgress = true,
   progress = 60,
   backgroundImage = null,
   isFirstElement = false,
+  placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
+  api = 'services/search/{SEARCHTERM}.json',
+  tiles = eventOverviewStageData,
 }) => {
   const hasImage = imageSrc && imageSrc.length > 0;
   const section = createElement('section', ['eventoverview', 'eventoverview-stage']);
@@ -48,28 +49,37 @@ export const createEventOverviewStage = ({
   }
   createElement('h1', ['like-h2'], headline, tb);
   createElement('p', [], copy, tb);
-  if (moreCta) {
-    const more = createElement('a', [], moreCta.label, tb);
-    more.href = moreCta.link;
-    more.target = moreCta.target;
-  }
-  if (buttonCta) {
-    const button = createButton({
-      elementType: 'a',
-      link: buttonCta.link,
-      color: 'white',
-      label: buttonCta.label,
-      iconPosition: 'icon-right',
-      icon: 'small-arrow-right-simple',
-    });
-    tb.appendChild(button);
-  }
-
+ 
   if (hasImage) {
     section.classList.add('image-stage');
     const ib = createElement('div', ['image-box'], null, col);
     createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
   }
 
+  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', 'row'], null, col);
+    tiles.map((topic, i) => {
+      if (i < maxItems) {
+        const col = createElement('div', ['col'], null, tilesContainer);
+        const teaser = createTopicTeaser({...topic});
+        col.appendChild(teaser);
+      }
+    })
+    new IHKTopicTeasers($(section));
+    if (api) {
+      new IHKSearchTypeahead($(form).find('input.typeahead'));
+    }
+
+    
+
   return section;
 }

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js

@@ -1,26 +1,26 @@
 export const eventOverviewStageData = [
   {
-    title: 'Beratung und Service',
-    link: '#',
+    title: 'Alles für Gründer',
+    icon: 'Foundation',
   },
   {
-    title: 'Interessenvertretung',
-    link: '#',
+    title: 'Alles Wichtige zum Brexit',
+    icon: 'Brexit',
   },
   {
-    title: 'Aus- und Weiterbildung',
-    link: '#',
+    title: 'Schwerpunkt­thema Digitalisierung',
+    icon: 'Roboter',
   },
   {
-    title: 'Unsere Region',
-    link: '#',
+    title: 'Schwerpunkt­thema Nachfolge',
+    icon: 'Uebergabe',
   },
   {
-    title: 'Handelskammer vor Ort',
-    link: '#',
+    title: 'Alle wichtigen Infos zum Corona-Virus',
+    icon: 'Virus',
   },
   {
-    title: 'Veranstaltungen',
-    link: '#',
-  }
-]
+    title: 'Alles für Auszubildende',
+    icon: 'Wissen',
+  },
+]

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -160,4 +160,57 @@
       }
     }
   }
+}
+
+.tiles {
+  &.row {
+    margin: calc(var(--col-padding) * -1);
+  }
+
+  @media(max-width: 767px) {
+    &.row {
+      margin: 0 -7px;
+    }
+  }
+
+  .title {
+    font-weight: 400;
+  }
+
+  .col {
+    position: relative;
+    display: flex;
+    flex: 1 1 16.6666666667%;
+    max-width: 16.6666666667%;
+
+    &.width-half {
+      flex: 1 1 50%;
+      max-width: 50%;
+
+      &:first-child:last-child {
+        flex: 1 1 100%;
+        max-width: 100%;
+      }
+    }
+
+    @media(max-width: 567px) {
+      flex: 1 1 50%;
+      max-width: 50%;
+
+      &:nth-child(odd):last-child {
+        flex: 1 1 100%;
+        max-width: 100%;
+      }
+    }
+    @media(max-width: 767px) {
+      padding: 6px;
+    }
+  }
+
+  &[data-type='list'] .col {
+    @media(max-width: 567px) {
+      max-width: 100%;
+      flex: 1 1 100%;
+    }
+  }
 }

gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js

@@ -0,0 +1,30 @@
+import $ from 'jquery';
+
+class IHKTopicTeasers {
+  constructor(section) {
+    this.section = section.addClass('initiated');
+    this.cols = section.find('.col');
+
+    const fullOffset = Math.ceil(this.cols.length / 3) * 3 - this.cols.last().index() - 1;
+
+    if (fullOffset === 0) {
+      return;
+    }
+
+    let firstHalfWidth = this.cols.length - fullOffset * 2;
+
+    if (firstHalfWidth < 0) {
+      firstHalfWidth = 0;
+    }
+
+    this.cols.eq(firstHalfWidth).addClass('width-half').nextAll().addClass('width-half');
+  }
+}
+
+export default IHKTopicTeasers;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+  $('.topics:not(.initiated)').each(() => {
+    new IHKTopicTeasers($(this));
+  });
+})