From 263f712dce5d6b92f9e9acb84e7788269a765c3c Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Wed, 28 Feb 2024 17:11:25 +0100 Subject: [PATCH] Event Teaser Large Slider --- .../event-teaser-large.scss | 12 +- .../EventTeaserLargeSlider.stories.js | 23 ++ .../EventTeaserLargeSliderComponent.js | 70 ++++++ .../EventTeaserLargeSliderData.js | 63 ++++++ .../eventteaserlargeslider.js | 29 +++ .../eventteaserlargeslider.scss | 204 ++++++++++++++++++ 6 files changed, 392 insertions(+), 9 deletions(-) create mode 100644 gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js create mode 100644 gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js create mode 100644 gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js create mode 100644 gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js create mode 100644 gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index ac7cc02..f6e1ae1 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss +++ b/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; + } } } } diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js new file mode 100644 index 0000000..09355c3 --- /dev/null +++ b/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 = {}; diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js new file mode 100644 index 0000000..8c734ce --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js new file mode 100644 index 0000000..866cf2a --- /dev/null +++ b/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', + } +] + diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js new file mode 100644 index 0000000..3b1fbcc --- /dev/null +++ b/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)); + }); +}); + + diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss new file mode 100644 index 0000000..78a4310 --- /dev/null +++ b/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; + } + +}