https://www.alfaromeo.com.au/etc.clientlibs/stellantis-d2-core/cli…/core/components/ContentGrid.js

1/*! stellantis_d2_core 1.44.4 202605050651 */
2"use strict";(self.webpackChunkstellantis_d2_core=self.webpackChunkstellantis_d2_core||[]).push([["ContentGrid"],{309:(e,t,i)=>{i.r(t),i.d(t,{default:()=>u});var n=i(2446),o=i(9264);function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function s(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,l(n.key),n)}}function l(e){var t=function(e,t){if("object"!=r(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t||"default");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==r(t)?t:t+""}var a=i(2556).gsap,u=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),t?(this.component=t,this.initializeProperties(),this.initialize()):console.error("ContentGrid: component element is required")},t=[{key:"initializeProperties",value:function(){var e,t,i,n;this.isMosaic=null!==(e=null===(t=this.component)||void 0===t||null===(t=t.classList)||void 0===t?void 0:t.contains("vrt--mosaic"))&&void 0!==e&&e,this.cards=this.getCards(),this.scrollElement=(null===(i=this.component)||void 0===i?void 0:i.querySelector(".cvContentGrid__cards"))||null,this.video=this.getVideoElements(),this.YTIframe=this.getIframeElements(),this.videoToObserve=[],this.videoCount=this.video.length+this.YTIframe.length,this.dataLposVideoControls=(null===(n=this.scrollElement)||void 0===n||null===(n=n.dataset)||void 0===n?void 0:n.lpos)||null,this.cleanupDataAttributes(),this.timeline=null,this.observer=null,this.videoObserver=null}},{key:"getCards",value:function(){if(!this.component)return[];var e=this.component.querySelectorAll(".cvContentGrid__card");return e?Array.from(e):[]}},{key:"getVideoElements",value:function(){if(!this.scrollElement)return[];var e=this.scrollElement.querySelectorAll("video");return e?Array.from(e):[]}},{key:"getIframeElements",value:function(){if(!this.scrollElement)return[];var e=this.scrollElement.querySelectorAll("iframe");return e?Array.from(e):[]}},{key:"cleanupDataAttributes",value:function(){this.scrollElement&&this.scrollElement.removeAttribute("data-lpos")}},{key:"initialize",value:function(){this.initLayout(),this.initAnimations(),this.initObservers(),this.processCards(),this.addButtonStyles(),this.attachEventHandlers()}},{key:"initLayout",value:function(){this.scrollElement&&this.component&&(this.isMosaic&&(0,n.A)(this.scrollElement),4!==this.cards.length&&this.cards.length<=6&&!this.isMosaic&&this.component.classList.add("vrt--threeColumns"))}},{key:"initAnimations",value:function(){if(this.component){this.timeline=a.timeline({paused:!0,defaults:{force3D:!1,duration:.8,ease:"expo.easeOut"}});var e=this.component.querySelectorAll(".cvContentGrid__card");e&&0!==e.length&&this.timeline.fromTo(e,{autoAlpha:0,y:-50},{autoAlpha:1,y:0,stagger:.2})}}},{key:"initObservers",value:function(){this.component&&(this.initAnimationObserver(),this.initVideoObserver(),this.observer&&this.observer.observe(this.component))}},{key:"initAnimationObserver",value:function(){var e=this;this.observer=new IntersectionObserver(function(t){if(t&&0!==t.length){var i=t[0];null!=i&&i.isIntersecting&&e.timeline&&(e.timeline.play(),e.observer&&e.component&&e.observer.unobserve(e.component))}},{root:null,rootMargin:"0px",threshold:[0]})}},{key:"initVideoObserver",value:function(){var e=this;this.videoObserver=new IntersectionObserver(function(t){t&&t.forEach(function(t){e.handleVideoIntersection(t)})},{root:null,rootMargin:"0px",threshold:.9})}},{key:"handleVideoIntersection",value:function(e){if(null!=e&&e.target){var t=e.target;e.isIntersecting?0===this.videoToObserve.length&&t.getAttribute("data-autoplay")&&(0,n.e1)(t):this.pauseVideoOnIntersection(t)}}},{key:"pauseVideoOnIntersection",value:function(e){if(e)if(e.classList.contains("YT__video")){var t=e.querySelector("iframe");t&&(0,n.YX)("pauseVideo",[],null,t)}else(0,n.uv)(e)}},{key:"processCards",value:function(){var e=this;

2this.cards&&0!==this.cards.length&&this.cards.forEach(function(t){t&&e.processCard(t)})}},{key:"processCard",value:function(e){var t,i=e.querySelector("video"),o=e.querySelector(".cvContentGrid__card-title"),r=e.querySelector(".cvParagraph"),s=null==i?void 0:i.querySelector("source");if(this.updateCardTitleAlignment(o,r),this.isYouTubeVideo(s)&&null!=s&&null!==(t=s.dataset)&&void 0!==t&&t.src)return s.dataset.src=(0,n.S_)(s.dataset.src),void this.embedYoutubeVideo(i,s.dataset.src);i&&this.initializeVideo(i,o)}},{key:"updateCardTitleAlignment",value:function(e,t){e&&(t?e.classList.remove("cvTitleAlignment"):e.classList.add("cvTitleAlignment"))}},{key:"isYouTubeVideo",value:function(e){var t;return e&&(null===(t=e.dataset)||void 0===t||null===(t=t.src)||void 0===t?void 0:t.includes("youtube"))||!1}},{key:"initializeVideo",value:function(e,t){var i;if(e){(0,n.se)(e);var o=e.nextElementSibling;null!=o&&null!==(i=o.classList)&&void 0!==i&&i.contains("wcag_videoWdg")&&this.setupWCAGWidget(o,t),1===this.videoCount&&this.videoObserver&&this.videoObserver.observe(e)}}},{key:"setupWCAGWidget",value:function(e,t){if(e){var i=null==t?void 0:t.querySelector("p"),n=(null==i?void 0:i.innerHTML)||"";n&&(0,o.t)(e,n,this.dataLposVideoControls)}}},{key:"embedYoutubeVideo",value:function(e,t){var i;if(e&&t){var n=this.createYouTubeIframeHTML(t),o=null==e||null===(i=e.parentElement)||void 0===i?void 0:i.querySelector(".cvContentGrid__video__aid");e.insertAdjacentElement("beforebegin",n),o&&(o.style.opacity="1",o.classList.add("cvContentGrid__iframe__video__aid")),e.remove()}}},{key:"createYouTubeIframeHTML",value:function(e){if(!e)return null;var t=document.createElement("div");t.className="cvContentGrid__video YT__video";var i=document.createElement("iframe");return i.width="100%",i.height="100%",i.src="".concat(e,"?enablejsapi=1&rel=0"),i.name="YouTube video player",i.title="YouTube video player",i.style.border="none",i.setAttribute("allow","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"),i.setAttribute("allowfullscreen",""),t.appendChild(i),t}},{key:"setVideoDimensions",value:function(){this.component.querySelectorAll(".YT__video iframe").forEach(function(e){var t=e.parentElement;if(t){var i=t.offsetWidth;e.style.height="".concat(9*i/16,"px")}})}},{key:"destroy",value:function(){this.onResize&&(window.removeEventListener("resize",this.onResize),this.onResize=null)}},{key:"toggleVideoState",value:function(e){var t;if(null!=e&&null!==(t=e.target)&&void 0!==t&&t.parentElement){var i=e.target.parentElement.querySelector("iframe"),o=e.target.parentElement.querySelector("video");this.handleVideoObservation(e),i?this.playYouTubeVideo(i):o&&(o.classList.contains("is--playing")?(0,n.uv)(o):(0,n.e1)(o))}}},{key:"playYouTubeVideo",value:function(e){var t;if(e){var i=null===(t=e.parentElement)||void 0===t?void 0:t.parentElement,o=null==i?void 0:i.querySelector(".cvContentGrid__video__aid");e.parentElement&&(e.parentElement.style.opacity="1"),o&&(o.style.opacity="0",o.style.visibility="hidden"),(0,n.YX)("playVideo",[],null,e)}}},{key:"pauseMultipleVideo",value:function(e){if(this.component&&null!=e&&e.target){var t=this.getTargetToMatch(e);this.component.querySelector("iframe")&&(0,n.YX)("pauseVideo",[],this.component,"all"),this.video.forEach(function(e){e&&t!==e&&e.classList.contains("is--playing")&&(0,n.uv)(e)})}}},{key:"getTargetToMatch",value:function(e){var t,i;return null!=e&&e.target?e.target.matches(".cvContentGrid__video")?e.target:e.target.matches(".cvContentGrid__video__aid")?(null===(i=e.target.parentElement)||void 0===i?void 0:i.querySelector("video"))||null:(null===(t=e.target.parentElement)||void 0===t?void 0:t.previousElementSibling)||null:null}},{key:"handleVideoObservation",value:function(e){if(null!=e&&e.target&&this.videoObserver&&this.isValidObservationTarget(e.target)&&(0===this.videoToObserve.length||this.videoCount>1)){if(1===this.videoToObserve.length){this.pauseMultipleVideo(e);var t=this.videoToObserve.pop();t&&this.videoObserver.unobserve(t)}var i=this.getVideoElementToObserve(e.target);i&&(this.videoToObserve.push(i),this.videoObserver.observe(i))}}},{key:"isValidObservationTarget",value:function(e){return!(null==e||!e.classList)&&(e.classList.contains("cvContentGrid__video__aid")||e.classList.contains("wcag_videoWdg__controls")||e.classList.contains("cvContentGrid__video"))}},{key:"getVideoElementToObserve",value:function(e){var t,i;return e?e.matches(".cvContentGrid__video")?e:e.classList.contains("cvContentGrid__video__aid")?(null===(i=e.parentElement)||void 0===i?void 0:i.querySelector(".cvContentGrid__video"))||null:(null===(t=e.parentElement)||void 0===t?void 0:t.previousElementSibling)||null:null}},{key:"setCurrentVideoCardStyles",value:function(e){if(e&&this.cards){this.cards.forEach(function(e){var t;null!=e&&null!==(t=e.style)&&void 0!==t&&t.zIndex&&(e.style.zIndex="10")});var t=e.closest(".cvContentGrid__card");t&&(t.style.removeProperty("transform"),t.style.translateZ="10px",t.style.zIndex="11")}}},{key:"addButtonStyles",value:function(){this.component&&(0,n.Z7)(this.component,"tertiary")}},{key:"attachEventHandlers",value:function(){var e=this;this.component&&this.component.addEventListener("click",function(t){e.handleClick(t)})}},{key:"handleClick",value:function(e){null!=e&&e.target&&((e.target.matches(".cvContentGrid__video__aid")||e.target.matches(".cvContentGrid__video"))&&this.toggleVideoState(e),e.target.matches(".wcag_videoWdg__controls")&&this.handleVideoObservation(e),e.target.matches(".wcag_videoWdg__transcript")&&this.setCurrentVideoCardStyles(e.target))}}],t&&s(e.prototype,t),i&&s(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t,i}()}}]);