ISTWCMS-5650: Add specificity for buttons, add hidden nav state when imagesNum match dots

src/patterns/04-components/image-gallery/_image-gallery.scss

@@ -14,8 +14,14 @@ $size-xlarge: 7;
     &.active {
       display: flex;
     }
+    &.hide {
+      display: none;
+    }
   }
   .flickity-page-dots {
+    &.hide {
+      display: none;
+    }
     bottom: -2rem;
     .dot {
       height: var(--size-2);
@@ -239,7 +245,7 @@ $size-xlarge: 7;
     }
     &[data-images-num="3"] {
       .uw-ig__item {
-        max-width: 32%;
+        max-width: 32.5%;
       }
     }
     &[data-images-num="4"] {

src/patterns/04-components/image-gallery/image-gallery.js

@@ -8,7 +8,6 @@
 
   Drupal.behaviors.imagegallery = {
     attach: function () {
-
       // Ensure code runs after the DOM is fully loaded.
       $(document).ready(function () {
 
@@ -30,6 +29,7 @@
               contain: true,
               wrapAround: true,
               draggable: false,
+              imagesLoaded: true,
               groupCells: function () {
                 // Adjust the number of visible images based on screen width.
                 var width = $(window).width();
@@ -51,8 +51,13 @@
             var flkty = $carousel.data('flickity');
 
             // Handle keyboard navigation for Flickity pagination dots.
-            var dots = document.querySelectorAll('.uw-ig .flickity-page-dots .dot');
+            var dots = $carousel.find('.flickity-page-dots .dot').toArray();
 
+            // Hide the button wrapper if the number of dots equals imagesNum
+            if (dots.length === imagesNum) {
+              $(this).find('.uw-button--wrap').addClass('hide');
+              $(this).find('.flickity-page-dots').addClass('hide');
+            }
             if (!dots.length) {
               return;
             }
@@ -82,11 +87,13 @@
 
           // Previous button event listener.
           $('.uw-ig-button--previous').on('click', function () {
+            var $carousel = $(this).closest('.uw-ig').find('.carousel');
             $carousel.flickity('previous');
           });
 
           // Next button event listener.
           $('.uw-ig-button--next').on('click', function () {
+            var $carousel = $(this).closest('.uw-ig').find('.carousel');
             $carousel.flickity('next');
           });