MarketingHeader Init Stage

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 = {};

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 + '<br>' + 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;
+  }

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: '#',
+  }
+]

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 = $('<a href="#" class="btn has-icon icon-small-arrow-right-simple" />').text('Alle Suchergebnisse');
+    this.buttonWrapper = $('<span class="all-button-wrapper" />').append(this.allResults);
+    this.resultCount = $('<span class="count" />').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 = $('<div/>').addClass('tile').appendTo(this.tileWrapper);
+    const a = $('<a/>').attr('href', json.url).appendTo(tile);
+    const inner = $('<span/>').addClass('inner').appendTo(a);
+    const title = $('<span/>').addClass('item-title').appendTo(inner);
+    title.text(this.cropTitle(json.title, json.kicker.length > 0));
+    if (json.kicker.length > 0) {
+      $('<span/>').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 = $('<div/>').addClass('tile').addClass(tileClass).appendTo(this.tileWrapper);
+    const outer = $('<div/>').addClass('outer').appendTo(tile);
+    const inner = $('<div/>').addClass('inner').appendTo(outer);
+    const p = $('<p/>').appendTo(inner);
+    const ul = $('<ul/>').appendTo(inner);
+
+    $('<a/>').attr('href', json.url).text(title + ' (' + json.count + ')').appendTo(p);
+
+    json.items.map((item, i) => {
+      if (i < 2) {
+        const li = $('<li/>').appendTo(ul);
+        $('<a/>').attr('title', item.title).attr('href', item.url).text(item.title.length > 48 ? item.title.substr(0, 48) + '…' : item.title).appendTo(li);
+      }
+    })
+  }
+
+  buildProposals(json) {
+    this.tileWrapper.find('.proposals').remove();
+
+    const proposals = $('<div/>').addClass('proposals').appendTo(this.tileWrapper);
+    const p = $('<p/>').text('Meinten Sie vielleicht: ').appendTo(proposals);
+
+    json.items.map((item) => {
+      const a = $('<a/>').attr('href', item.url).text(item.title);
+      p.append(a);
+    })
+  }
+}
+
+export default IHKSearchTypeahead;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+  $('.search-field.typeahead:not(.initiated)').each(function () {
+    new IHKSearchTypeahead($(this));
+  })
+})

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -0,0 +1,290 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+section.search {
+  position: relative;
+  padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
+  min-height: calc(24vw + 220px);
+  margin: 0;
+
+  @media(max-width: 767px) {
+    padding: calc(1.5vw + 15px) 0 0;
+    margin-bottom: -10px;
+  }
+
+  + section, + #toclist > section:first-child {
+    @media(min-width: 768px) {
+      margin-top: 0;
+    }
+  }
+
+  .container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .row {
+    min-height: 620px;
+
+    @media(max-width: 567px) {
+      min-height: 0;
+    }
+  }
+
+  .artwork {
+    @media(max-width: 420px) {
+      top: 30px;
+      right: -20px;
+    }
+    @media(max-width: 340px) {
+      top: 40px;
+      right: -30px;
+    }
+  }
+
+  form {
+    position: relative;
+    margin: 32px 0 16px;
+    box-shadow: 0 3px 20px -5px rgba(#000, 0.3);
+    border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
+
+    @media(max-width: 567px) {
+      margin-top: 20px;
+    }
+  }
+
+  h1 {
+    margin-left: 0;
+    margin-top: 0;
+
+    @media(max-width: 567px) {
+      font-size: 24px;
+      margin: 0;
+    }
+  }
+
+  .tiles {
+    margin: 0 -8px;
+    display: flex;
+    flex-wrap: wrap;
+    font-family: "Korb", sans-serif;
+
+    @media(max-width: 567px) {
+      margin: 0 -6px;
+    }
+
+    .tile {
+      position: relative;
+      display: flex;
+      padding: 8px;
+      flex: 1 1 33.3333%;
+      max-width: 33.3333%;
+
+      &::before {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        margin: 10px 8px;
+        font-family: Icons, sans-serif;
+        font-size: 18px;
+        line-height: 1;
+        text-align: center;
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      &[data-type="download"]::before {
+        @include icon-small-download;
+      }
+      &[data-type="external"]::before {
+        @include icon-small-link-external;
+      }
+
+      @media(max-width: 567px) {
+        flex: 1 1 50%;
+        max-width: 50%;
+        padding: 6px;
+      }
+
+      &:nth-child(3) ~ .tile {
+        z-index: 1;
+      }
+
+      &.downloads, &.a-z, &.events {
+        order: 1;
+        background-color: transparent;
+
+        &::before {
+          font-family: "Icons", sans-serif;
+          position: absolute;
+          font-size: 24px;
+          line-height: 1;
+          right: 0;
+          top: 0;
+          margin: 11px 10px;
+          z-index: 1;
+          background-color: white;
+          padding: 7px 6px 5px;
+          border-top-right-radius: 8px;
+          border-bottom-left-radius: 8px;
+
+          @media(max-width: 767px) {
+            margin: 18px;
+            font-size: 24px;
+          }
+        }
+
+        .outer {
+          background-color: var(--theme-color-primary-dimmed-04);
+        }
+
+        p {
+          margin-bottom: 0.4em;
+        }
+      }
+
+      &.downloads::before {
+        @include icon-suche-datei;
+      }
+      &.a-z::before {
+        @include icon-suche-az;
+      }
+      &.events::before {
+        @include icon-suche-veranstaltung;
+      }
+    }
+
+    .tile > a, .outer {
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      min-height: 108px;
+      padding: 18px 24px 24px;
+      border-radius: var(--border-radius-md);
+      box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
+      transition: 0.25s ease;
+      line-height: 1.2;
+      background-color: var(--theme-color-background);
+      overflow: hidden;
+      @include focus-visible();
+
+      @media(max-width: 767px) {
+        font-size: 16px;
+        padding: 10px 10px 15px;
+        min-height: 84px;
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        display: block;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--border-width);
+        background-color: var(--theme-color-secondary);
+        transition: 0.25s $easeOutQuad;
+      }
+
+      &:hover {
+        color: var(--theme-color-secondary-intensed);
+
+        &:before {
+          height: var(--border-width-hover);
+        }
+      }
+    }
+
+    .tile > a {
+      .item-title {
+        text-decoration: underline;
+      }
+    }
+
+    .outer {
+      background-color: var(--theme-primary-light-04);
+      padding: 14px 20px 18px;
+      border: 4px solid white;
+
+      &::after, &::before {
+        display: none;
+      }
+    }
+
+    .inner {
+      display: block;
+      max-width: 100%;
+    }
+
+    .kicker {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 100%;
+      display: block;
+      text-decoration: none;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      font-size: 16px;
+      max-width: 100%;
+      margin: 0;
+
+      li {
+        margin-top: 5px;
+      }
+
+      a {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: 0.2s ease;
+        font-weight: 500;
+
+        &:hover {
+          color: var(--color-secondary-dark);
+        }
+      }
+    }
+
+    .proposals {
+      flex: 1 1 100%;
+      padding: 10px 12px 0;
+      order: 2;
+
+      a {
+        margin: 0 0.3em 0 0.1em;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    .all-button-wrapper {
+      padding: 16px 8px;
+      display: block;
+      flex: 1 1 100%;
+      order: 3;
+
+      .btn {
+        transition: 0.2s ease;
+
+        .count {
+          margin-left: 0.3em;
+
+          &::before {
+            content: '(';
+          }
+          &::after {
+            content: ')';
+          }
+        }
+      }
+    }
+  }
+}