spawntree
/
ihk24
4
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 Commits
6 Branches
448 MiB
 
 
 
 
Tree: 42ebfbf8a9
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '42ebfbf8a9'
${ noResults }
ihk24/gfi-ihk-2024/storybook-static/assets/MarketingHeader.stories-D9q...

49 lines
15 KiB
Raw Blame History 

  1. /* empty css                *//* empty css               */import{$ as W}from"./iframe-DI5_BFY0.js";import{q as Ee,g as t,b as Ae,a as We,h as F}from"./helpers-BI4k4aXK.js";import{c as Ke}from"./ArtworkComponent-D1UyChXE.js";import{c as Le}from"./ButtonComponent-C01NN-p4.js";import{I as $e}from"./slider-BXTkDrww.js";import{c as ze}from"./MiniTeaserComponent-BH0Gaybk.js";import"./preload-helper-C1FmrZbK.js";const a=global.$;class fe{constructor(e){this.input=e.addClass("initiated"),this.api=e.data("api"),this.tileWrapper=e.closest("form").next(".tiles"),this.allResults=a('<a href="#" class="btn has-icon icon-small-arrow-right-simple" />').text("Alle Suchergebnisse"),this.buttonWrapper=a('<span class="all-button-wrapper" />').append(this.allResults),this.resultCount=a('<span class="count" />').appendTo(this.allResults)}handleKeyEvents(){this.input.on("input",()=>{this.input.val().length>0&&this.loadData(this.input.val().toLowerCase())})}loadData(e){fetch(this.api.replace("{SEARCHTERM}",e)).then(i=>i.json()).then(i=>{this.buildResults(i)})}buildResults(e){let i=6;e.results.count>0&&this.tileWrapper.html(""),e.downloads.count>0&&(this.buildGroup(e.downloads,"downloads","Downloads"),i=i-1),e.events.count>0&&(this.buildGroup(e.events,"events","Veranstaltungen"),i=i-1),e["a-z"].count>0&&(this.buildGroup(e["a-z"],"a-z","IHK von A bis Z"),i=i-1),e.contacts.count>0&&(this.buildGroup(e.contacts,"contacts","Ansprechpartner"),i=i-1),e.results.items.map((r,s)=>{s<i&&this.buildResult(r)}),e.proposals.count>0&&this.buildProposals(e.proposals),this.tileWrapper.append(this.buttonWrapper),this.resultCount.text(e.results.count)}buildResult(e){const i=a("<div/>").addClass("tile").addClass("variant-base").appendTo(this.tileWrapper),r=a("<a/>").attr("href",e.url).appendTo(i),s=a("<span/>").addClass("inner").appendTo(r);a("<span/>").addClass("item-title").appendTo(s).text(this.cropTitle(e.title,e.kicker.length>0)),e.kicker.length>0&&a("<span/>").addClass("kicker").text(e.kicker).prependTo(s),e.type.length>0&&i.attr("data-type",e.type)}cropTitle(e,i){const r=i?60:80;return e.length>r?e.substr(0,r)+"…":e}buildGroup(e,i,r){const s=a("<div/>").addClass("tile").addClass("variant-base").addClass(i).appendTo(this.tileWrapper),u=a("<div/>").addClass("outer").appendTo(s),L=a("<div/>").addClass("inner").appendTo(u),P=a("<p/>").appendTo(L),q=a("<ul/>").appendTo(L);a("<a/>").attr("href",e.url).text(r+" ("+e.count+")").appendTo(P),e.items.map((x,N)=>{if(N<2){const w=a("<li/>").appendTo(q);a("<a/>").attr("title",x.title).attr("href",x.url).text(x.title.length>48?x.title.substr(0,48)+"…":x.title).appendTo(w)}})}buildProposals(e){this.tileWrapper.find(".proposals").remove();const i=a("<div/>").addClass("proposals").appendTo(this.tileWrapper),r=a("<p/>").text("Meinten Sie vielleicht: ").appendTo(i);e.items.map(s=>{const u=a("<a/>").attr("href",s.url).text(s.title);r.append(u)})}}a("body").on("ihk-init dynamic-component-loaded gfi-dynamic-init",function(){a(".search-field.typeahead:not(.initiated)").each(function(){new fe(a(this))})});const v=global.$;class ke{constructor(e){this.section=e.addClass("initiated"),this.slider=new $e(e),this.slider.settings={loop:!0,autoplay:!0,infinite:!0,autoplaySpeed:7e3,animationSpeed:600,startSlide:1},this.slider.handleAutoplay(),this.section.on("slide-change",()=>this.syncHeights()),requestAnimationFrame(()=>this.syncHeights()),v(window).on("resize",()=>this.syncHeights())}syncHeights(){this.section.closest(".hero-fullwidth").length&&this.section.find(".slide").each(function(){const e=v(this).find(".text-box"),i=v(this).find(".text-in-image-box");v(window).width()>999?i.height(e.innerHeight()-36):i.css("height","")})}}v("body").on("ihk-init dynamic-component-loaded gfi-dynamic-init",function(){v(".slider:not(.initiated)").each(function(){new ke(v(this))})});const be=[{title:"Beratung und Service",link:"#"},{title:"Interessenvertretung",link:"#"},{title:"Aus- und Weiterbildung",link:"#"},{title:"Unsere Region",link:"#",type:"downloads",count:12,items:[{title:"Standort Hamburg",link:"#"},{title:"Standort Bremen",link:"#"}]},{title:"Handelskammer vor Ort",link:"#"},{title:"Veranstaltungen",link:"#"}],Re=[{category:"Wachstum durch Innovation",title:"Jetzt Teil der Digitalisierungswelle werden.",link:"#",icon:"Virus",buttonlabel:"IHK-Newsletter sichern",type:"standard"},{category:"IHK Mitgliedschaft",title:"Exklusive Einblicke und Branchen-Trends:",link:"#"},{category:"IHK Mitgliedschaft",title:"Exklusive Einblicke und Branchen-Trends:",link:"#"}],Ve=[{category:"Wachstum durch Innovation",title:"Jetzt Teil der Digitalisierungswelle werden.",link:"#",icon:"Virus",buttonlabel:"IHK-Newsletter sichern",type:"infoteaser"},{category:"IHK Mitgliedschaft",title:"Exklusive Einblicke und Branchen-Trends:",link:"#"},{category:"IHK Mitgliedschaft",title:"Exklusive Einblicke und Branchen-Trends:",link:"#"}],Pe=[{kicker:"Lorem Ipsum dolor",headline:"Möglichkeiten der Integration",copy:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",imageSrc:"./dummy/placeholder-3-2.svg",cta:"Mehr erfahren",link:"#",contextImg:"./logos/wirtschaftsdialoge.svg"},{kicker:"Lorem Ipsum dolor 2",headline:"Weitere Möglichkeiten der Integration",copy:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",imageSrc:null,cta:"Mehr erfahren",link:"#",context:"Wirtschaftsmagazin"},{kicker:"Lorem Ipsum dolor 2",headline:"Integration auf drittem Weg",copy:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",imageSrc:"./dummy/placeholder-3-2.svg",cta:"Mehr erfahren",link:"#"}],ve=[{kicker:"Lorem Ipsum dolor",headline:"Nur ein Slide",copy:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",imageSrc:"./dummy/placeholder-3-2.svg",cta:"Mehr erfahren",link:"#",contextImg:"./logos/wirtschaftsdialoge.svg"}],K=global.$;class ye{constructor(e){this.section=e.addClass("initiated");const i=r=>{r.preventDefault(),e.addClass("open"),e.hasClass("open"),this.section.data("single-open")!==!1&&e.siblings(".open").removeClass("open").find(".tiles").slideUp(300,"easeOutQuart")};this.section.find("#search-term").off("click focus").on("click focus",i),this.section.find(".close-search").off("click").on("click",r=>{r.preventDefault(),e.get(0).offsetHeight;var s=document.getElementById("dynamic-style");s&&s.parentNode.removeChild(s);var u=document.createElement("style");u.id="dynamic-style",document.body.appendChild(u),setTimeout(()=>{e.removeClass("open"),e.hasClass("open")},100)}),e.attr("data-type")==="event"&&this.initEvent()}initEvent(){this.openEvent(),this.section.find(".tiles").hide()}openEvent(){const e=this,i=Ee(),r=e.section.find(".tiles"),s=K("#js-event-"+i.terminId);s.length?s.show().closest("li").addClass("open"):r.first().show().closest("li").addClass("open")}}K("body").on("ihk-init dynamic-component-loaded gfi-dynamic-init",function(){K(".marketingheader > .search:not(.initiated)").each(function(d){new ye(K(this))})});const qe=({artworkStyle:d="artwork-both-sides",placeholder:e="Hier Ihr Thema finden",api:i="services/search/{SEARCHTERM}.json",tiles:r=be,kicker:s="Noch 7 Tage offen",headline:u="Jetzt und digital mitreden",copy:L="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:P={label:"Mehr Infos",link:"#",target:"_self"},buttonCta:q={label:"Jetzt beteiligen",link:"#",target:"_self"},showProgress:x=!0,progress:N=60,backgroundImage:w=null,pictoImage:$=null,pictoImageMobile:z=null,isFirstElement:Ne=!1,searchAllButton:G=!1,slides:xe=Pe,teasers:we=Re,maxItems:Se=3,type:R="infoteaser"})=>{const A=t("section",["marketingheader",R],null),l=t("div",["search","variant-subtle-primary"],null,A);if(G&&l.classList.add("has-button-wrapper"),w&&w.length>0&&(l.style="background-image: url("+w+");",l.classList.add("background-image")),$&&$.length>0&&z&&z.length>0){l.classList.add("picto-image");const n=document.createElement("style");n.textContent=`

  2.         .picto-image {background-image: url("${$}");}

  3.         @media (max-width: 767px) {

  4.           .picto-image {background-image: url("${z}");}

  5.         }

  6.       `,l.parentNode.insertBefore(n,l.nextSibling)}const He=Ke({type:d});l.appendChild(He),l.dataset.type=d;const Ce=t("div",["container","small"],null,l),Ie=t("div",["row"],null,Ce),V=t("div",["col"],null,Ie),S=t("form",[],null,V),Me=t("label",["visually-hidden"],"IHK durchsuchen",S);Me.for="search-term",S.appendChild(Ae({api:i,placeholder:e})),S.appendChild(We({})),S.action="#";const _=t("div",["tiles"],null,V);if(r.map(n=>{if(n.type){const g=t("div",["tile",n.type,"variant-base"],null,_),p=t("div",["outer"],null,g),h=t("div",["inner"],null,p),f=t("p",[],null,h),k=t("a",[],n.title+(n.count?" ("+n.count+")":""),f);if(k.href=n.link,n.items&&n.items.length>0){const m=t("ul",[],null,h);n.items.slice(0,2).map(c=>{const o=t("li",[],null,m),b=t("a",[],c.title,o);b.href=c.link,b.title=c.title})}}else{const g=t("div",["tile","variant-base"],null,_),p=t("a",[],n.title,g);p.href=n.link}}),G){const n=t("span",["all-button-wrapper"],null,V);t("div",["btn","has-icon","icon-small-arrow-right-simple"],"Alle Suchergebnisse",n)}i&&new fe(W(S).find("input.typeahead"));const Te=t("div",["container","sc"],null,l);W(document).ready(()=>{new ye(W(l))}),t("button",["close-search"],"",Te);const J=t("div",["container","mainstage"],null,A);R==="hero-fullwidth"&&J.classList.add("variant-solid");const O=t("div",["row"],null,J),Be=t("div",["col","slidercontainer","rotation"],null,O),U=t("div",["slider","btnanimation"],null,Be);if(xe.map((n,g)=>{const p=t("div",["slide"],null,U),h=t("outer",["outer"],null,p),f=n.context?n.context:"",k=n.contextImg?n.contextImg:"",m=t("div",["image-box"],null,h);if(n.imageSrc&&n.imageSrc.length>0){const o=t("picture",[],null,m),b=t("source",[],null,o);b.setAttribute("media","(min-width: 1000px)"),b.setAttribute("srcset",n.imageSrc);const Z=t("source",[],null,o);Z.setAttribute("media","(min-width: 901px)"),Z.setAttribute("srcset",n.imageSrc),F(n.imageSrc,900,600,"Slide "+g,[],o),t("span",["copyright"],"Copyright-Angabe",m).setAttribute("aria-hidden","true"),t("span",["sr-only"],"Copyright-Angabe",m)}else{const o=t("div",["text-in-image-box"],null,m);t("div",["icon","pictogram-bueroklammer"],null,o),t("p",[],"Wachstum durch Innovation lorem ipsum dolor sit amet",o)}if(k){const o=t("div",["context-box","variant-solid","context-box--image"],null,m);F(k,200,50,"",[],o)}else f&&t("div",["context-box","variant-solid"],f,m);const c=t("div",["text-box"],null,h);if((!n.imageSrc||n.imageSrc.length<=0)&&(f||k)&&c.classList.add("context"),n.kicker&&n.kicker.length>0&&t("span",["kicker"],n.kicker,c),n.headline&&n.headline.length>0&&t("div",["like-h2"],n.headline,c),n.copy&&n.copy.length>0&&t("p",[],n.copy,c),n.cta&&n.link){const o=t("p",[],"",c),b=Le({color:"white",icon:"pfeil-simple-rechts",iconPosition:"icon-right",label:n.cta,size:"small"});o.appendChild(b)}}),new ke(W(U)),R==="infoteaser"){const n=t("div",["col"],null,O);we.map((g,p)=>{if(p<Se){var h="standard";p==0&&g.type=="infoteaser"&&(h="infoteaser",A.classList.add("miniinfoteaser"));const f=t("div",["mt"],null,n),k=ze({type:h});f.appendChild(k)}})}return A},De={title:"Sections/MarketingHeader",parameters:{layout:"fullscreen"},argTypes:{type:{name:"Typ",control:{type:"select"},options:["infoteaser","hero-fullwidth"],defaultValue:"infoteaser"},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:be}}},y=({...d})=>qe({...d}),H=y.bind({});H.args={};const C=y.bind({});C.args={backgroundImage:"./dummy/placeholder-4-3.svg"};const I=y.bind({});I.args={pictoImage:"./dummy/marketing-header-picto.svg",pictoImageMobile:"./dummy/marketing-header-picto-mobile.svg"};const M=y.bind({});M.args={teasers:Ve};const T=y.bind({});T.args={slides:ve};const B=y.bind({});B.args={type:"hero-fullwidth"};const E=y.bind({});E.args={type:"hero-fullwidth",slides:ve,searchAllButton:!0};var Q,X,Y;H.parameters={...H.parameters,docs:{...(Q=H.parameters)==null?void 0:Q.docs,source:{originalSource:`({

  7.   ...args

  8. }) => {

  9.   return createMarketingHeader({

  10.     ...args

  11.   });

  12. }`,...(Y=(X=H.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var D,j,ee;C.parameters={...C.parameters,docs:{...(D=C.parameters)==null?void 0:D.docs,source:{originalSource:`({

  13.   ...args

  14. }) => {

  15.   return createMarketingHeader({

  16.     ...args

  17.   });

  18. }`,...(ee=(j=C.parameters)==null?void 0:j.docs)==null?void 0:ee.source}}};var te,ne,ie;I.parameters={...I.parameters,docs:{...(te=I.parameters)==null?void 0:te.docs,source:{originalSource:`({

  19.   ...args

  20. }) => {

  21.   return createMarketingHeader({

  22.     ...args

  23.   });

  24. }`,...(ie=(ne=I.parameters)==null?void 0:ne.docs)==null?void 0:ie.source}}};var ae,re,se;M.parameters={...M.parameters,docs:{...(ae=M.parameters)==null?void 0:ae.docs,source:{originalSource:`({

  25.   ...args

  26. }) => {

  27.   return createMarketingHeader({

  28.     ...args

  29.   });

  30. }`,...(se=(re=M.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var oe,le,ce;T.parameters={...T.parameters,docs:{...(oe=T.parameters)==null?void 0:oe.docs,source:{originalSource:`({

  31.   ...args

  32. }) => {

  33.   return createMarketingHeader({

  34.     ...args

  35.   });

  36. }`,...(ce=(le=T.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var de,ue,pe;B.parameters={...B.parameters,docs:{...(de=B.parameters)==null?void 0:de.docs,source:{originalSource:`({

  37.   ...args

  38. }) => {

  39.   return createMarketingHeader({

  40.     ...args

  41.   });

  42. }`,...(pe=(ue=B.parameters)==null?void 0:ue.docs)==null?void 0:pe.source}}};var he,me,ge;E.parameters={...E.parameters,docs:{...(he=E.parameters)==null?void 0:he.docs,source:{originalSource:`({

  43.   ...args

  44. }) => {

  45.   return createMarketingHeader({

  46.     ...args

  47.   });

  48. }`,...(ge=(me=E.parameters)==null?void 0:me.docs)==null?void 0:ge.source}}};const je=["MarketingHeader","MarketingHeaderSearchBackground","MarketingHeaderPictoBackground","MarketingHeaderInfoBanner","MarketingHeaderSingleSlide","MarketingHeaderStage","MarketingHeaderStageSingle"];export{H as MarketingHeader,M as MarketingHeaderInfoBanner,I as MarketingHeaderPictoBackground,C as MarketingHeaderSearchBackground,T as MarketingHeaderSingleSlide,B as MarketingHeaderStage,E as MarketingHeaderStageSingle,je as __namedExportsOrder,De as default};