diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js new file mode 100644 index 0000000..b1cc0d7 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js @@ -0,0 +1,44 @@ +import {createMarketingHeader} from "./MarketingHeaderComponent"; +import {marketingHeaderData} from "./MarketingHeaderData"; + +export default { + title: 'Sections/MarketingHeader', + parameters: { + layout: 'fullscreen', + }, + argTypes: { + artworkStyle: { + name: 'Artwork Stil', + control: {type: 'select'}, + options: ['artwork', 'artwork-image', 'artwork-background-image'], + defaultValue: 'artwork', + }, + headline1: { + name: 'Überschrift Zeile 1', + control: {type: 'text'}, + defaultValue: 'Willkommen bei Ihrer IHK.', + }, + headline2: { + name: 'Überschrift Zeile 2', + control: {type: 'text'}, + defaultValue: 'Wie können wir Ihnen helfen?', + }, + placeholder: { + name: 'Platzhalter', + control: {type: 'text'}, + defaultValue: 'Tippe "Taxischein" für Autocomplete', + }, + tiles: { + name: 'Kacheln', + control: {type: 'object'}, + defaultValue: marketingHeaderData, + } + } +} + +const Template = ({...args}) => { + return createMarketingHeader({...args}); +}; + +export const MarketingHeader = Template.bind({}); +MarketingHeader.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js new file mode 100644 index 0000000..b297ae6 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -0,0 +1,53 @@ +import './marketingheader.scss'; +import '../../components/artwork/artwork.scss'; +import $ from 'jquery'; +import {createElement} from "../../_global/scripts/helpers"; +import {marketingHeaderData} from "./MarketingHeaderData"; +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"; + +export const createMarketingHeader = + ({ + artworkStyle = 'artwork', + headline1 = 'Willkommen bei Ihrer IHK.', + headline2 = 'Wie können wir Ihnen helfen?', + placeholder = 'Tippe "Taxischein" für Autocomplete', + api = 'services/search/{SEARCHTERM}.json', + tiles = marketingHeaderData, + }) => { + const section = createElement('section', ['search'], null); + const artwork = createArtwork({type: artworkStyle}); + section.appendChild(artwork); + section.dataset.type = artworkStyle; + + const container = createElement('div', ['container', 'small'], null, section); + const row = createElement('div', ['row'], null, container); + const col = createElement('div', ['col'], null, row); + + createElement('h1', ['like-h2'], headline1 + '
' + headline2, col); + + 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')); + } + + return section; + } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js new file mode 100644 index 0000000..0f68e64 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -0,0 +1,26 @@ +export const marketingHeaderData = [ + { + title: 'Beratung und Service', + link: '#', + }, + { + title: 'Interessenvertretung', + link: '#', + }, + { + title: 'Aus- und Weiterbildung', + link: '#', + }, + { + title: 'Unsere Region', + link: '#', + }, + { + title: 'Handelskammer vor Ort', + link: '#', + }, + { + title: 'Veranstaltungen', + link: '#', + } +] \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js new file mode 100644 index 0000000..8391e5b --- /dev/null +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js @@ -0,0 +1,128 @@ +const $ = require('jquery'); + +class IHKSearchTypeahead { + constructor(input) { + this.input = input; + this.api = input.data('api'); + this.tileWrapper = input.closest('form').next('.tiles'); + this.allResults = $('').text('Alle Suchergebnisse'); + this.buttonWrapper = $('').append(this.allResults); + this.resultCount = $('').appendTo(this.allResults); + + //$('.results-wrapper').find('.h-kicker').each(function(i) {if (i < 10) {console.log($(this).text())}}); + this.handleKeyEvents(); + } + + handleKeyEvents() { + this.input.on('input', () => { + if (this.input.val().length > 0) { + this.loadData(this.input.val().toLowerCase()); + } + }) + } + + loadData(val) { + fetch(this.api.replace('{SEARCHTERM}', val)) + .then(response => response.json()) + .then(response => { + this.buildResults(response); + }); + } + + buildResults(json) { + let max = 6; + + if (json.results.count > 0) { + this.tileWrapper.html(''); + } + if (json.downloads.count > 0) { + this.buildGroup(json.downloads, 'downloads', 'Downloads'); + max = max - 1; + } + if (json.events.count > 0) { + this.buildGroup(json.events, 'events', 'Veranstaltungen'); + max = max - 1; + } + if (json['a-z'].count > 0) { + this.buildGroup(json['a-z'], 'a-z', 'IHK von A bis Z'); + max = max - 1; + } + if (json['contacts'].count > 0) { + this.buildGroup(json['contacts'], 'contacts', 'Ansprechpartner'); + max = max - 1; + } + + json.results.items.map((result, i) => { + if (i < max) { + this.buildResult(result); + } + }) + + if (json.proposals.count > 0) { + this.buildProposals(json.proposals); + } + + this.tileWrapper.append(this.buttonWrapper); + this.resultCount.text(json.results.count); + } + + buildResult(json) { + const tile = $('
').addClass('tile').appendTo(this.tileWrapper); + const a = $('').attr('href', json.url).appendTo(tile); + const inner = $('').addClass('inner').appendTo(a); + const title = $('').addClass('item-title').appendTo(inner); + title.text(this.cropTitle(json.title, json.kicker.length > 0)); + if (json.kicker.length > 0) { + $('').addClass('kicker').text(json.kicker).prependTo(inner); + } + if (json.type.length > 0) { + tile.attr('data-type', json.type); + } + } + + cropTitle(title, hasKicker) { + const max = hasKicker ? 60 : 80; + if (title.length > max) { + return title.substr(0, max) + '…'; + } else { + return title; + } + } + + buildGroup(json, tileClass, title) { + const tile = $('
').addClass('tile').addClass(tileClass).appendTo(this.tileWrapper); + const outer = $('
').addClass('outer').appendTo(tile); + const inner = $('
').addClass('inner').appendTo(outer); + const p = $('

').appendTo(inner); + const ul = $('