https://www.italia.it/etc.clientlibs/tdh/components/editorials/her…-5eb9db6176b244b247e4aa3a1356da4c-lc.min.js

1window.AEM = window.AEM || {};
2window.AEM.components = window.AEM.components || {};
3window.AEM.components.heroAssets = window.AEM.components.heroAssets || {};
4const dynamicContentHero = {
5  /**
6   * @param {String} HTML representing a single element
7   * @return {Element}
8   */
9  htmlToElement: (html) => {
10    const template = document.createElement("template");
11    html = html.trim(); // Never return a text node of whitespace as the result
12    template.innerHTML = html;
13    return template.content.firstChild;
14  },
15  selectors: () => {
16    dynamicContentHero._container = document.querySelector(".hero");
17  },
18  generateCarouselIndicators: (items) => {
19    return items.reduce(
20      (accumulator, currentValue, currentIndex) =>
21        accumulator += `<button
22            tabindex="-1"
23            type="button"
24            data-bs-target=".hero.carousel"
25            data-bs-slide-to="${currentIndex}"
26            class='${currentIndex === 0 ? "active" : ""}'
27            aria-label="Slide ${currentIndex+1}"></button>`, '');
28  },
29  generateHeroCarousel: ({items}) => {
30    return `<div>
31          <button class="carousel-control-prev d-none d-lg-flex" type="button" data-bs-target=".hero" data-bs-slide="prev" tabindex="0">
32              <span class="icon-background rounded-circle">
33                  <span class="icon-angle-left color--white" aria-hidden="true"></span>
34              </span>
35              <span class="visually-hidden">Previous</span>
36          </button>
37          <button class="carousel-control-next d-none d-lg-flex" type="button" data-bs-target=".hero" data-bs-slide="next" tabindex="0">
38              <span class="icon-background rounded-circle">
39                  <span class="icon-angle-right color--white" aria-hidden="true"></span>
40              </span>
41              <span class="visually-hidden">Next</span>
42          </button>
43          <div class="carousel-inner">
44            ${dynamicContentHero.generateCarouselItems(items)}
45          </div>
46          <div class="carousel-indicators">
47            ${dynamicContentHero.generateCarouselIndicators(items)}
48          </div>
49          <div class="overlay-mitur hero-item__full-screen-video__overlay align-items-center justify-content-center">
50              <button class="hero-item__full-screen-video__overlay__close d-flex justify-content-center align-items-center">
51                  <span class="visually-hidden">Close</span>
52                  <span class="icon-cross s-30x30 color--white"></span>
53              </button>
54              <div class="hero-item__full-screen-video__content"></div>
55          </div>
56      </div>`;
57  },
58  generateCarouselItems: (items) => {
59    return items.reduce(
60      (accumulator, currentValue, currentIndex) => {
61        const classes = currentIndex === 0 ? "carousel-item active" : "carousel-item";
62        return accumulator += `<div class='${classes}'>${dynamicContentHero.generateHeroItem(currentValue)}</div>`;
63      }, '');
64  },
65  generateImage: (item) => {

66    let creditImage = item.credit ? `data-credit-info="${item.credit}"` : '';
67    return `<picture>
68                <source media="(min-width: 1200px)" srcset="${item.images.desktop}" />
69                <source media="(min-width: 992px)" srcset="${item.images.tablet}" />
70                <source media="(max-width: 991px)" srcset="${item.images.mobile}" />
71                <img loading="lazy" src="${item.images.src}" srcset="${item.images.srcset}" alt="${item.imageAltText}" class="hero-image"
72                  ${creditImage}
73                />
74            </picture>`;
75  },
76  generateHeroItem: (item) => {
77    const overTitle = item.overTitle ? `<h2 class="hero-item__content-overtitle">${item.overTitle}</h2>` : '';
78    const title = item.title ? `<h1 class="hero-item__content-title"><span>${item.title}</span></h1>` : '';
79    let middleButtonText = '';
80    if(item.middleButtonText && item.middleButtonHref) {
81      middleButtonText = `<a href="${item.middleButtonHref}" class="hero-item__cta btn btn-mitur btn-mitur--hero rounded-pill align-self-center" tabindex="0">
82              <strong>${item.middleButtonText}</strong>
83          </a>`;
84    } else if(item.middleButtonText){
85      middleButtonText = `<button class="hero-item__cta btn btn-mitur btn-mitur--hero rounded-pill align-self-center" tabindex="0">
86              <strong>${item.middleButtonText}</strong>
87          </button>`;
88    }
89    const bottomSection =
90      `<div class="hero-item__content d-flex flex-column justify-content-end">
91        <div class="bg-dark-blue d-flex flex-column align-items-center justify-content-center hero__bottom-section hero__bottom-section-onlytext">
92            ${overTitle} ${title}
93        </div>
94        ${middleButtonText}
95      </div>`;
96    return `<div class="hero-item d-flex flex-column justify-content-end">
97        ${dynamicContentHero.generateImage(item)}
98        ${bottomSection}
99    </div>`;
100  },
101  init: (settings) => {
102    if(settings) {
103      dynamicContentHero.selectors();
104      let templateNodes = '';
105      if(settings.params.isCarousel === true) {
106        templateNodes = dynamicContentHero.htmlToElement(dynamicContentHero.generateHeroCarousel(settings));
107      }
108      dynamicContentHero._container.firstElementChild.replaceWith(templateNodes);
109
110      /* after init dynamic content hero */
111      MiTur.handleSizeHeroCarousel();
112      // and so on ..
113    }
114
115    /* Remove AEM loader after dynamic content changes ended */
116    if(typeof hideLoader=="function") {
117      hideLoader();
118    }
119  }
120}
121
122AEM.components.heroAssets.renderComponent = () =>{
123    if(window.AEM.components.heroAssets.runtimeConfig){
124        dynamicContentHero.init(window.AEM.components.heroAssets.runtimeConfig);
125        showHero();
126    }
127}
128AEM.components.heroAssets.renderComponent();