From 81353715a4fff7b3301c6a38f40510771abd5ea5 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 20 Feb 2025 10:55:53 -0500
Subject: [PATCH] ISTWCMS-5650: Add window the scope of the Flickity carousel
in banners.js
---
src/patterns/04-components/banners/banners.js | 29 ++++++++++---------
1 file changed, 16 insertions(+), 13 deletions(-)
diff --git a/src/patterns/04-components/banners/banners.js b/src/patterns/04-components/banners/banners.js
index 257ca30a..f5b89b16 100644
--- a/src/patterns/04-components/banners/banners.js
+++ b/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);
--
GitLab