video stage event overview

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

@@ -56,6 +56,11 @@ EventOverviewStageWithImage.args = {
   backgroundImage: './dummy/hero-veranstaltung-photo.jpg',
 }
 
+export const EventOverviewStageWithVideo = Template.bind({});
+EventOverviewStageWithVideo.args = {
+  video: true,
+}
+
 export const EventOverviewStageFive = Template.bind({});
 EventOverviewStageFive.args = {
   tiles: eventOverviewStageDataFive

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

@@ -7,6 +7,7 @@ import {createSearchButton} from "../../atoms/search-button/SearchButtonComponen
 import IHKSearchTypeahead from "../../sections/search/search-typeahead";
 import {createTopicTeaser} from "../../components/topic-teaser/TopicTeaserComponent";
 import IHKEventOverviewTiles from "./eventoverview";
+import {createVideoStage} from "../video-stage/VideoStageComponent";
 
 
 export const createEventOverviewStage = ({
@@ -17,45 +18,47 @@ export const createEventOverviewStage = ({
   placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
   api = 'services/search/{SEARCHTERM}.json',
   tiles = eventOverviewStageData,
+  video = false
 }) => {
   //const hasImage = imageSrc && imageSrc.length > 0;
   const section = createElement('section', ['eventoverview-section']);
-  const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage'], null, section);
-  const container = createElement('div', ['container'], null, sectiondiv);
-  const row = createElement('div', ['row'], null, container);
-  const col = createElement('div', ['col'], null, row);
-  const tb = createElement('div', ['stagetext-box'], null, col);
+  let form = null;
 
-  
-  const tilescontainer = createElement('div', ['container', 'tilescontainer'], null, section);
-  const tilesrow = createElement('div', ['row'], null, tilescontainer);
-  const tilescol = createElement('div', ['col'], null, tilesrow);
-  if (backgroundImage && backgroundImage.length > 0) {
-    //section.content('style=background: red;');
-    sectiondiv.style = 'background-image: url(' + backgroundImage + ');';
-    sectiondiv.classList.add('background-image');
-  }
+  if (video) {
+    section.appendChild(createVideoStage({}));
+  } else {
+    const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage'], null, section);
+    const container = createElement('div', ['container'], null, sectiondiv);
+    const row = createElement('div', ['row'], null, container);
+    const col = createElement('div', ['col'], null, row);
+    const tb = createElement('div', ['stagetext-box'], null, col);
+
+    if (backgroundImage && backgroundImage.length > 0) {
+      //section.content('style=background: red;');
+      sectiondiv.style = 'background-image: url(' + backgroundImage + ');';
+      sectiondiv.classList.add('background-image');
+    }
 
-  /*if (isFirstElement) {
+    /*if (isFirstElement) {
     section.classList.add('first-element');
   }*/
 
-  if (kicker && kicker.length > 0) {
-    createElement('p', ['kicker'], kicker, tb);
-  }
-  /*if (showProgress) {
-    tb.appendChild(createProgressBar({progress}));
-  }*/
-  createElement('h1', ['like-h2'], headline, tb);
-  //createElement('p', [], copy, tb);
- 
-  /*if (hasImage) {
-    section.classList.add('image-stage');
-    const ib = createElement('div', ['image-box'], null, col);
-    createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
-  }*/
+    if (kicker && kicker.length > 0) {
+      createElement('p', ['kicker'], kicker, tb);
+    }
+    /*if (showProgress) {
+      tb.appendChild(createProgressBar({progress}));
+    }*/
+    createElement('h1', ['like-h2'], headline, tb);
+    //createElement('p', [], copy, tb);
 
-  const form = createElement('form', [], null, tb);
+    /*if (hasImage) {
+      section.classList.add('image-stage');
+      const ib = createElement('div', ['image-box'], null, col);
+      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
+    }*/
+
+    form = createElement('form', [], null, tb);
 
     const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form);
     label.for = 'search-term';
@@ -64,20 +67,25 @@ export const createEventOverviewStage = ({
     form.appendChild(createSearchButton({}));
 
     form.action = '#';
+  }
 
-  const tilesContainer = createElement('div', ['tiles', 'row'], null, tilescol);
-    tiles.map((topic, i) => {
-      if (i < maxItems) {
-        const col = createElement('div', ['col'], null, tilesContainer);
-        const teaser = createTopicTeaser({...topic});
-        col.appendChild(teaser);
-      }
-    })
-    new IHKEventOverviewTiles($(section));
+  const tilescontainer = createElement('div', ['container', 'tilescontainer'], null, section);
+  const tilesrow = createElement('div', ['row'], null, tilescontainer);
+  const tilescol = createElement('div', ['col'], null, tilesrow);
 
-    if (api) {
-      new IHKSearchTypeahead($(form).find('input.typeahead'));
+  const tilesContainer = createElement('div', ['tiles', 'row'], null, tilescol);
+  tiles.map((topic, i) => {
+    if (i < maxItems) {
+      const col = createElement('div', ['col'], null, tilesContainer);
+      const teaser = createTopicTeaser({...topic});
+      col.appendChild(teaser);
     }
+  })
+  new IHKEventOverviewTiles($(section));
+
+  if (api) {
+    new IHKSearchTypeahead($(form).find('input.typeahead'));
+  }
 
   return section;
 }

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

@@ -31,7 +31,7 @@
     .video--controls {
       position: absolute;
       left: 20px;
-      bottom: 20px;
+      top: 20px;
       display: flex;
       gap: 20px;
       z-index: 10;