Event Teaser Large Slider

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -43,11 +43,6 @@
     width:100%;
     margin-right: 0;
     min-height:250px;
-     @media(max-width: 767px) {
-      margin-right: 12px;
-      justify-content: flex-start;
-      padding-top: 10px;
-    }
     .icon-box {
       font-family: 'Pictograms', sans-serif;
       font-size: 48px;
@@ -56,10 +51,6 @@
       position:absolute;
       top:15px;
       left:15px;
-      @media(max-width: 567px) {
-        font-size: 50px;
-        margin-top: 0;
-      }
     }
     .ev-title{
       font-weight: 400;
@@ -227,6 +218,9 @@
             display:inline-block;
           }
         }
+        .ev-desc{
+          font-size:18px;
+        }
       }
     }
   }

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js

@@ -0,0 +1,23 @@
+import {createSlider} from "./EventTeaserLargeSliderComponent";
+import {sliderData} from "./EventTeaserLargeSliderData";
+
+export default {
+  title: 'Sections/EventTeaserLargeSlider',
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    slides: {
+      name: 'Slides',
+      control: {type: 'object'},
+      defaultValue: sliderData,
+    }
+  }
+}
+
+const Template = ({...args}) => {
+  return createSlider({...args});
+};
+
+export const Slider = Template.bind({});
+Slider.args = {};

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js

@@ -0,0 +1,70 @@
+import './eventteaserlargeslider.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import $ from 'jquery';
+import {createButton} from "../../atoms/button/ButtonComponent";
+import IHKETLSlider from "./eventteaserlargeslider";
+import {sliderData} from "./EventTeaserLargeSliderData";
+
+export const createSlider =
+  ({
+    slides = sliderData,
+    widemode = true,
+    moreCta = {
+      label: 'Mehr erfahren',
+      target: '_self',
+    },
+    headline = 'Premium Seminare',
+  }) => {
+
+    const section = createElement('section', ['rotation'], null);
+    const hcontainer = createElement('div', ['container'], null, section);
+    const container = createElement('div', ['container', 'right-open-container'], null, section);
+    if (headline && headline.length > 0) {
+      createElement('h1', [], headline, hcontainer);
+    }
+    const sliderComponent = createElement('div', ['eventteaserlargeslider'], null, container);
+
+    slides.map((slideData, index) => {
+      const slide = createElement('div', ['slide'], null, sliderComponent);
+      const outer = createElement('outer', ['outer'], null, slide);
+      
+      const a = createElement('a', ['event-teaser-large'], null, outer);
+      if (widemode) {
+        a.classList.add('widemode');
+      }
+      const blueBox = createElement('div', ['blue-box'], null, a);
+      const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
+      createElement('div', ['icon-box', 'pictogram-' + slideData.icon.toLowerCase().split(' ').join('-')], null, blueBox);
+      createElement('p', ['ev-title'], slideData.title, blueBox);
+      createElement('p', ['ev-cat'], slideData.category, blueBox);
+      createElement('p', ['ev-desc'], slideData.desc, textBox);
+      const detailBox = createElement('div', ['detail-box'], null, textBox);
+      if (slideData.details) {
+        for (const [key, value] of Object.entries(slideData.details)) {
+          if (typeof value === 'string') {
+            createElement('div', [key], value, detailBox);
+          } else if (typeof value === 'object') {
+            createElement('div', [key, value.type], value.label, detailBox);
+          }
+        }
+      }
+      if (moreCta) {
+        detailBox.appendChild(createButton({
+          label: moreCta.label,
+          link: slideData.link,
+          color: 'primary',
+          size: 'small',
+        }))
+      }
+      if (slideData.bgimage && slideData.bgimage .length > 0) {
+        blueBox.style = 'background-image: url(' + slideData.bgimage + ');';
+        blueBox.classList.add('background-image');
+      }
+
+      a.href = slideData.link;
+    })
+
+    new IHKETLSlider($(section));
+
+    return section;
+  }

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js

@@ -0,0 +1,63 @@
+export const EventTeaserLargeTitles = [
+  'Basisseminar – Besser informiert in die Selbstständigkeit',
+  'NBank-Beratungssprechtag in Göttingen',
+  'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023',
+  'Social Media Manager/-in (IHK) - Webinar',
+]
+
+export const EventTeaserLargeStatus = [
+  {
+    type: 'reserved',
+    label: 'Anmeldefrist abgelaufen',
+  },
+  {
+    type: 'waiting-list',
+    label: 'Warteliste',
+  },
+  {
+    type: 'open',
+    label: 'Freie Plätze vorhanden',
+  }
+]
+export const sliderData = [
+  {
+    date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+    title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+    desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
+    link: '#',
+    details: {
+      date: '20.09.2022',
+      status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+    },
+    icon: 'Roboter',
+    category: 'Gründung und Nachfolge',
+    bgimage: null,
+  },
+  {
+    date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+    title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+    desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
+    link: '#',
+    details: {
+      date: '20.09.2022',
+      status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+    },
+    icon: 'Roboter',
+    category: 'Gründung und Nachfolge',
+    bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  },
+  {
+    date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+    title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+    desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
+    link: '#',
+    details: {
+      date: '20.09.2022',
+      status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+    },
+    icon: 'Roboter',
+    category: 'Gründung und Nachfolge',
+    bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  }
+]
+

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js

@@ -0,0 +1,29 @@
+import $ from 'jquery';
+import 'jquery.easing';
+import Slider from "../slider/slider";
+
+class IHKETLSlider {
+  constructor(section) {
+    this.section = section.addClass('initiated');
+    this.slides = section.children();
+    this.slider = new Slider(section.find('.eventteaserlargeslider'));
+    this.stringLength = 0;
+
+    this.slider.section.on('in-viewport slide-change', () => {
+      const curr = this.slider.currentSlide;
+      if (this.slides[curr].hasCounter) {
+        this.startCounter(curr);
+      }
+    })
+  }
+}
+
+export default IHKETLSlider;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+  $('.rotation:not(.initiated)').each(function() {
+    new IHKETLSlider($(this));
+  });
+});
+
+

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -0,0 +1,204 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+@import '../../components/event-teaser-large/event-teaser-large.scss';
+
+.right-open-container{
+  width: calc((var(--container-width) / 2) + 50vw - 20px);
+  margin-left:auto;
+  margin-right:0;
+  padding-right:0;
+}
+
+.eventteaserlargeslider {
+  opacity: 0;
+  transition: opacity 0.4s linear;
+
+  &.initiated {
+    opacity: 1;
+  }
+
+  &.single-slide {
+    .controls {
+      display: none;
+    }
+  }
+
+  .slide-overflow {
+    overflow: hidden;
+    transition: height 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  img.loading {
+    opacity: 0;
+  }
+
+  img.loaded {
+    transition: 0.3s ease;
+    opacity: 1;
+  }
+
+  .slide-wrapper {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 80000px;
+    contain: layout;
+    margin:0 -15px;
+    &.no-transition {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      .image-box:after {
+        content: "";
+        @include full-size;
+        z-index: 2;
+      }
+    }
+
+    img, a {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-user-drag: none;
+      -moz-user-drag: none;
+    }
+  }
+
+  .slide {
+    position: relative;
+    //width: 100% !important;
+    width:1%;
+    max-width:1%;
+    min-width:1%;
+    //max-width: 800px !important;
+    min-height:400px;
+    padding:0 15px;
+  }
+
+  .prev-clone,
+  .next-clone {
+    position: absolute;
+    display: flex;
+    width: 100%;
+  }
+
+  .prev-clone {
+    position: absolute;
+    right: 100%;
+    justify-content: flex-end;
+  }
+}
+
+.rotation .eventteaserlargeslider  {
+  margin-bottom:2rem;
+  position: relative;
+  display: block;
+
+  button {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    
+  }
+  .slider-tabs, .tabs {
+    position: absolute;
+    bottom: -2rem;
+    left: 50%;
+    right: 0;
+    padding: 0;
+    list-style: none;
+    transform: translate(-50%, 0);
+    text-align: center;
+    font-size: 0;
+    line-height: 0;
+    margin: 0;
+
+    @media(max-width: 567px) {
+      margin-bottom: 12px;
+    }
+
+    li {
+      display: inline-block;
+      vertical-align: top;
+
+      &.active button:before {
+        background-color: var(--theme-color-primary);
+        box-shadow: 0 0 0 2px var(--theme-color-primary);
+      }
+    }
+
+    .btn {
+      --button-min-size: 24px;
+      font-size: 0;
+      line-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::before {
+        content: "";
+        position: relative;
+        display: block;
+        width: 10px;
+        height: 10px;
+        border: 2px solid var(--theme-color-primary);
+        border-radius: 5px;
+        transition: 0.2s ease;
+      }
+
+      &::after {
+        display: none;
+      }
+
+      &:hover {
+        background-color: transparent;
+
+        &::before {
+          background-color: var(--theme-color-primary);
+        }
+      }
+    }
+  }
+  
+  .prev, .next {
+    position: absolute;
+    top: -100px;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    left: calc(var(--container-width) - 2 * var(--container-padding) - 60px);
+    //margin: -25px 10px;
+    color: var(--theme-color-primary);
+    right:auto;
+    border-radius: 24px;
+
+    background: var(--theme-color-primary-dimmed-04);
+    @media(max-width: 767px) {
+      display: none;
+    }
+
+    &:before {
+      @include icon-small-arrow-right-simple;
+      font-family: "Icons", sans-serif;
+      font-size: 30px;
+    }
+  }
+
+  .prev {
+    left: calc(var(--container-width) - 2 * var(--container-padding) - 140px);
+    transform: rotate(180deg);
+  }
+  .count{
+    display:none;
+  }
+  h2, .like-h2 {
+    margin-top: 0.3em;
+    margin-bottom: 0.4em;
+  }
+
+}