diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js index a7a5553..1a51240 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js +++ b/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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js index e045e3c..1d2f1d8 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js +++ b/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: '#', - } -] \ No newline at end of file + title: 'Alles für Auszubildende', + icon: 'Wissen', + }, +] diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index b1a9df3..1ce5d22 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/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%; + } + } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js new file mode 100644 index 0000000..a1dce03 --- /dev/null +++ b/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)); + }); +})