https://www.starwoodhotels.com/themes/custom/starwood/templates/pa…/slick_carousel/slick_carousel.js?tm51dx

1(function ($,Drupal, once) {
2  'use strict';
3
4	// randomize  Items 
5	Drupal.behaviors.randomizeItems = {
6    attach: function (context, settings) {
7      once('randomElements', '.slick-randomize', context).forEach(function(element) {
8				for (var i = element.children.length; i >= 0; i--) {
9					element.appendChild(element.children[Math.random() * i | 0]);
10				}
11			});
12    }
13  };
14
15	 // Carousel Pattern
16	 Drupal.behaviors.carouselPattern = {
17    attach: function (context, settings) {
18      once('slcikCarousel', '.slick-carousel-js', context).forEach(function(element) {
19				var $slick = $(element).slick();
20			});
21    }
22  };
23
24	// Make sure the Carousel that Is RTL changes to normal on Mobile
25	Drupal.behaviors.UpdateRTLcarousel= {
26		attach: function(context, settings){
27			once('updateRTL', '.slick-carousel-js.pattern-slick-carousel--callout_left', context).forEach((element) => {
28
29				this.update(element); // Run Once
30				window.addEventListener('resize', () => {
31					this.update(element);
32				});
33				
34			});
35		},
36
37		update : function(element) {
38			if(window.innerWidth > 768 && !element.slick.slickGetOption("rtl")) {
39				this.addRTL(element);
40			}
41			else if (window.innerWidth < 768 && element.slick.slickGetOption("rtl")){
42				this.removeRTL(element);
43			}
44
45		},
46
47		addRTL: function(element){
48			element.setAttribute("dir","rtl");
49			element.slick.slickSetOption('rtl', true)
50		},
51
52		removeRTL: function(element) {
53			element.removeAttribute("dir");
54			element.slick.slickSetOption('rtl', false)
55		}
56	}
57
58	// This is for analytics 
59	// When we push to the datalayer we tell it if the Card was visible on load ( Did the user see the card without having to interact with the carousel ).
60	// From what I understand they only want a push the datalayer when an item is visible on screen. ( No pushing visible_on_load = false on cards that are still hidden ).
61	// Only for DFP Cards
62	Drupal.behaviors.dfpAnalytics = {
63    attach: function (context, settings) {
64			var thisObj = this;
65			window.dataLayer = window.dataLayer || [];
66
67			once('dfp-analytics', '.slick-carousel-js:not(.sct-js)', context).forEach(function(element) {
68				
69				var callback = function(entries, observer){
70					entries.forEach(entry => {
71						if(entry.isIntersecting){
72							let target = entry.target;
73							let dfpTitle = target.getAttribute('data-dfp-title');
74							let visible_on_load = target.getAttribute('visible_on_load');
75							let slide_number = target.getAttribute('slide_number');
76
77							thisObj.pushToDataLayer(dfpTitle, visible_on_load, slide_number );
78		
79							observer.unobserve(target);
80						}
81					});
82				};
83
84				var observer = new IntersectionObserver(callback, {threshold: .8});
85				var slides = element.querySelectorAll('.slick-slide:not(.slick-cloned)');
86				thisObj.addItemsToObserve(slides, observer);
87			}); 
88
89			// This layout uses two synced Carousels
90			// To avoid the same Cards on different Carousels pushing twice to the datalayer we will find all cards with same name and Unobserve it.
91			once('dfp-analytics', '.slick_carousel_text', context).forEach(function(element) {
92				
93				var callback = function(entries, observer){		
94					entries.forEach(entry => {
95						if(entry.isIntersecting){
96							let target = entry.target;
97							let dfpTitle = target.getAttribute('data-dfp-title');
98							let visible_on_load = target.getAttribute('visible_on_load');
99							let slide_number = target.getAttribute('slide_number');
100		
101							thisObj.pushToDataLayer(dfpTitle, visible_on_load, slide_number );
102
103							var elementsWithSameName = element.querySelectorAll('.slick-slide:not(.slick-cloned) .card[data-dfp-title="'+dfpTitle+'"]');
104							elementsWithSameName.forEach(card => {
105								observer.unobserve(card);
106							});
107						}
108					});
109				};
110			
111				var slides = element.querySelectorAll('.slick-slide:not(.slick-cloned)');
112				var observer = new IntersectionObserver(callback, {threshold: .8});
113				thisObj.addItemsToObserve(slides, observer);
114				
115			}); 
116    },
117
118		pushToDataLayer: function(dfpTitle, visible_on_load, slide_number){
119			window.dataLayer.push({  
120				'event': 'cms_ads_impressions_slider',  
121				'cms_ad_title': dfpTitle,  
122				'visible_on_load': visible_on_load,
123				'slide_number': slide_number
124			});
125
126		},
127
128		addItemsToObserve : function(slides, observer) {
129
130			// Add Attribute to all cards onPageLoad so Observer can send the correct data to the dataLayer later on.

131			slides.forEach(function(slide){
132				var card = slide.querySelector('.card');
133				
134				if (card && card.hasAttribute('data-dfp-title')) {
135					let visible_on_load = false
136
137					if( slide.classList.contains('slick-active') ){
138						visible_on_load = true;
139					}
140
141					card.setAttribute('visible_on_load', visible_on_load);
142					card.setAttribute('slide_number', +slide.getAttribute('data-slick-index') + 1); // The Plus sign before the slide is there on purpose to convert string to int
143					observer.observe(card);
144				}
145			});
146		}, 
147		
148  };
149
150})(jQuery, Drupal, once);