ISTWCMS-5650: Add window the scope of the Flickity carousel in banners.js

src/patterns/04-components/banners/banners.js

@@ -4,13 +4,12 @@
  * Ensures autoplay, navigation, and pause/play functionality.
  */
 
-(function ($, Drupal, Flickity) {
+(function ($, Drupal, window) {
   'use strict';
 
   Drupal.behaviors.bannersFlickity = {
     attach: function () {
       $(document).ready(function () {
-
         document.querySelectorAll('.uw-carousel__banner').forEach(function (banner) {
           var selector = 'div[data-uuid="' + banner.getAttribute('data-uuid') + '"] .carousel';
           var elem = document.querySelector(selector);
@@ -20,7 +19,8 @@
 
           // Get the slide speed and autoplay settings.
           var bannerSlideSpeed = parseInt(banner.getAttribute('data-slide-speed'), 10) || 3000;
-          var bannerAutoplay = banner.getAttribute('data-autoplay') !== '0' && !document.querySelector('.layout-builder');
+          var bannerAutoplay = banner.getAttribute('data-autoplay') !== '0' &&
+            !document.querySelector('.layout-builder');
 
           // Add a class if there's only one slide.
           if (elem.children.length <= 1) {
@@ -31,48 +31,51 @@
           var bannerDots = elem.children.length > 1;
 
           // Ensure Flickity is defined before initializing.
-          if (typeof Flickity === 'undefined') {
+          if (typeof window.Flickity === 'undefined') {
             console.error('Flickity is not defined. Ensure the library is loaded.');
             return;
           }
 
-          var flkty = new Flickity(elem, {
+          var flkty = new window.Flickity(elem, {
             autoPlay: bannerAutoplay ? bannerSlideSpeed : false,
             draggable: true,
             fade: true,
             cellSelector: '.card__banner',
             pageDots: bannerDots,
             on: {
-              ready: function(){
+              ready: function () {
                 var dots = document.querySelectorAll('.flickity-page-dots .dot');
 
                 if (!dots.length) {
                   return;
                 }
 
-                dots.forEach(function(dot){
-                  // Make dots focusable
+                dots.forEach(function (dot) {
+                  // Make dots focusable.
                   dot.setAttribute('tabindex', '0');
 
-                  dot.addEventListener('keydown', function(event){
+                  dot.addEventListener('keydown', function (event) {
                     if (event.key === 'Enter' || event.keyCode === 13) {
                       var label = dot.getAttribute('aria-label');
-                      // Get "Page dot # // Extract the number"
+
+                      // Extract the number from "Page dot #".
                       var match = label.match(/\d+/);
                       if (!match) {
                         return;
                       }
 
-                      // Convert to zero-based index
+                      // Convert to zero-based index.
                       var targetIndex = parseInt(match[0], 10) - 1;
 
-                      flkty.select(targetIndex); // Move to the slide
+                      // Move to the slide.
+                      flkty.select(targetIndex);
                     }
                   });
                 });
               }
             }
           });
+
           // Get play and pause buttons.
           var bannerPlay = banner.querySelector('.uw-play');
           var bannerPause = banner.querySelector('.uw-pause');
@@ -108,4 +111,4 @@
       });
     }
   };
-})(jQuery,Drupal, Flickity);
+})(jQuery, Drupal, window);