From 2fc1c8f038c96d2fc4a19ae5fe706cd6d6a6770c Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 27 Feb 2025 11:27:16 -0500
Subject: [PATCH] ISTWCMS-5650: Replace the image gallery owl carousel with
 flickity libraries

---
 .../image-gallery/_image-gallery.scss         | 40 +++++++++++++
 .../image-gallery/_image-gallery.twig         |  6 ++
 .../image-gallery/image-gallery.js            | 58 +++++++++----------
 3 files changed, 74 insertions(+), 30 deletions(-)

diff --git a/src/patterns/04-components/image-gallery/_image-gallery.scss b/src/patterns/04-components/image-gallery/_image-gallery.scss
index 490d42d4..a50e4eda 100644
--- a/src/patterns/04-components/image-gallery/_image-gallery.scss
+++ b/src/patterns/04-components/image-gallery/_image-gallery.scss
@@ -8,6 +8,16 @@ $size-medium: 4;
 $size-large: 4;
 $size-xlarge: 7;
 .uw-ig {
+  .uw-button--wrap {
+    display:none;
+    margin-top: var(--size-6);
+    &.active {
+      display: flex;
+    }
+  }
+  .flickity-page-dots {
+    bottom: -2rem;
+  }
   &--slider {
     //
   }
@@ -196,6 +206,36 @@ $size-xlarge: 7;
       }
     }
   }
+  &[data-images-num="1"],
+  &[data-images-num="2"],
+  &[data-images-num="3"],
+  &[data-images-num="4"] {
+    .uw-ig__item {
+      margin-left: var(--size-1);
+      width: 100%;
+      &:first-child {
+        margin-left: inherit;
+      }
+    }
+  }
+  @media(min-width: $screen-md) {
+
+    &[data-images-num="2"] {
+      .uw-ig__item {
+        max-width: 45%;
+      }
+    }
+    &[data-images-num="3"] {
+      .uw-ig__item {
+        max-width: 32%;
+      }
+    }
+    &[data-images-num="4"] {
+      .uw-ig__item {
+        max-width: 24.5%;
+      }
+    }
+  }
 }
 //
 // lightbox
diff --git a/src/patterns/04-components/image-gallery/_image-gallery.twig b/src/patterns/04-components/image-gallery/_image-gallery.twig
index ffad9cdd..c36acebd 100644
--- a/src/patterns/04-components/image-gallery/_image-gallery.twig
+++ b/src/patterns/04-components/image-gallery/_image-gallery.twig
@@ -144,4 +144,10 @@
       {% endfor %}
     {% endif %}
   </div>
+  {% if type == NULL or type == 'slider' %}
+    <div class="uw-button--wrap">
+      <button class="uw-ig-button--previous"> < Prev</button>
+      <button class="uw-ig-button--next">Next ></button>
+    </div>
+  {% endif %}
 </div>
diff --git a/src/patterns/04-components/image-gallery/image-gallery.js b/src/patterns/04-components/image-gallery/image-gallery.js
index 86d2eedb..6b4cbb0c 100644
--- a/src/patterns/04-components/image-gallery/image-gallery.js
+++ b/src/patterns/04-components/image-gallery/image-gallery.js
@@ -19,40 +19,38 @@
           var imagesNum = $(this).data('images-num') || 1;
           var navStyle = $(this).data('nav') || 'both';
 
-          // Create owl carouse config first.
-          var carousel = {
-            loop: true,
-            dots: true,
-            nav: true,
-            navContainerClass: 'uw-owl-nav',
-            navText:[
-              'prev',
-              'next'
-            ],
-            margin: 10,
-            responsiveClass: true,
-            responsive: {
-              0: {
-                items: 1
-              },
-              600: {
-                items: imagesNum
-              },
-              1000: {
-                items: imagesNum
-              }
-            }
+          // Create carousel config first.
+          var flickityOptions = {
+            cellAlign: 'left',
+            contain: true,
+            wrapAround: true,
+            draggable: false,
+            groupCells: function () {
+              var width = $(window).width();
+              return width <= 600 ? 1 : imagesNum;
+            },
+            prevNextButtons: false,
+            pageDots: navStyle === 'pagination' || navStyle === 'both'
           };
 
-          if (navStyle === 'pagination') {
-            carousel.nav = false;
-          }
-          else if (navStyle === 'navigation') {
-            carousel.dots = false;
+          var $carousel = $(id + ' .carousel');
+
+          if ($carousel.length) {
+            $carousel.flickity(flickityOptions);
           }
+          // previous button
+          $('.uw-ig-button--previous').on( 'click', function() {
+            $carousel.flickity('previous');
+          });
+          // next
+          $('.uw-ig-button--next').on( 'click', function() {
+            $carousel.flickity('next');
+          });
+
 
-          // Add the carousel to the FF using the id.
-          $(id + ' .owl-carousel').owlCarousel(carousel);
+          if (navStyle === 'navigation' || navStyle === 'both') {
+            $('.uw-button--wrap').addClass('active');
+          }
 
           // Lightbox enchancements
           $('.uw-lightbox__open').on('click', function () {
-- 
GitLab