Merge branch 'release/2.22.1'

epfl-si · Apr 12, 2021 · 078dbfa · 078dbfa
2 parents ac78671 + 260dc6e
commit 078dbfa
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+*2.22.1* (2021-04-12)
+- Fix gallery nav being unresponsive the first time loaded, by rewriting the JS #505
+
 *2.22.0* (2021-04-08)
 - Add DE translation for CookieConsent
 - Revert and set flickity to version to 2.2.1 to fix strange dev behavior

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-2.22.0
+2.22.1
diff --git a/assets/components/molecules/gallery/gallery.js b/assets/components/molecules/gallery/gallery.js
@@ -5,69 +5,93 @@ import FlickityFullscreen from 'flickity-fullscreen'; // eslint-disable-line
 import FlickityNav from 'flickity-as-nav-for'; // eslint-disable-line
 import Imagesloaded from 'imagesloaded';
 
-export default () => {
-  const $galleries = $('.gallery');
-  const $galleryNavs = $('.gallery-nav');
-
-  // Base gallery logic
-  if ($galleries.length > 0) {
-    $galleries.each(function () {
-      Imagesloaded(this, () => {
-        const $items = $(this).find('.gallery-item');
+function setFlickityOnGallery($gallery) {
+  const $items = $gallery.find('.gallery-item');
 
-        // Toggle opacity to avoid load blink
-        $(this).addClass('ready');
+  // Toggle opacity to avoid load blink
+  $gallery.addClass('ready');
 
-        // Add counter
-        $items.each(function (i) {
-          $(this).find('figcaption').append(`
+  // Add counter
+  $items.each(function (i) {
+    $(this).find('figcaption')
+      .append(`
             <span class="gallery-counter">${i + 1}/${$items.length}</span>
           `);
-        });
+  });
 
-        // Instantiate Flickity gallery
-        const flkty = new Flickity(this, {
-          pageDots: false,
-          fullscreen: true,
-          setGallerySize: true,
-          arrowShape: 'M14.2,45.8L53,7.1c1.6-1.6,1.6-4.3,0-5.9s-4.3-1.6-5.9,0L1.2,47c-1.6,1.6-1.6,4.3,0,5.9c0,0,0,0,0,0l45.8,45.8c1.6,1.6,4.3,1.6,5.9,0s1.6-4.3,0-5.9L14.2,54.1h81.6c2.3,0,4.2-1.9,4.2-4.2s-1.9-4.2-4.2-4.2H14.2z',
-        });
+  // Instantiate Flickity gallery
+  const flkty = new Flickity($gallery.get(0), {
+    pageDots: false,
+    fullscreen: true,
+    setGallerySize: true,
+    arrowShape: 'M14.2,45.8L53,7.1c1.6-1.6,1.6-4.3,0-5.9s-4.3-1.6-5.9,0L1.2,47c-1.6,1.6-1.6,4.3,0,5.9c0,0,0,0,0,0l45.8,45.8c1.6,1.6,4.3,1.6,5.9,0s1.6-4.3,0-5.9L14.2,54.1h81.6c2.3,0,4.2-1.9,4.2-4.2s-1.9-4.2-4.2-4.2H14.2z',
+  });
+
+  // Replace fullscreen icons
+  $('.flickity-fullscreen-button-view svg path')
+    .attr(
+      'd',
+      'M32,11.9h-2.7V6.5H24V3.8h8V11.9z M24,28.2v-2.7h5.3v-5.4H32v8.2H24z M0,20.1h2.7v5.4H8v2.7H0V20.1z M8,3.8v2.7H2.7v5.4H0V3.8H8z',
+    );
+  $('.flickity-fullscreen-button-exit svg path')
+    .attr(
+      'd',
+      'M18.1,16l13.4,13.4c0.6,0.6,0.6,1.5,0,2.1c-0.6,0.6-1.5,0.6-2.1,0L16,18.1L2.6,31.6c-0.6,0.6-1.5,0.6-2.1,0c-0.6-0.6-0.6-1.5,0-2.1l0,0L13.9,16L0.4,2.6C-0.1,2-0.1,1,0.4,0.4s1.5-0.6,2.1,0L16,13.9L29.4,0.4c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L18.1,16z',
+    );
+
+  // Improve prev/next buttons position
+  const height = $gallery.find('.gallery-item.is-selected img')
+    .height();
+  $gallery.find('.flickity-prev-next-button')
+    .css('top', `${height / 2}px`);
+}
 
-        // Replace fullscreen icons
-        $('.flickity-fullscreen-button-view svg path').attr(
-          'd',
-          'M32,11.9h-2.7V6.5H24V3.8h8V11.9z M24,28.2v-2.7h5.3v-5.4H32v8.2H24z M0,20.1h2.7v5.4H8v2.7H0V20.1z M8,3.8v2.7H2.7v5.4H0V3.8H8z',
-        );
-        $('.flickity-fullscreen-button-exit svg path').attr(
-          'd',
-          'M18.1,16l13.4,13.4c0.6,0.6,0.6,1.5,0,2.1c-0.6,0.6-1.5,0.6-2.1,0L16,18.1L2.6,31.6c-0.6,0.6-1.5,0.6-2.1,0c-0.6-0.6-0.6-1.5,0-2.1l0,0L13.9,16L0.4,2.6C-0.1,2-0.1,1,0.4,0.4s1.5-0.6,2.1,0L16,13.9L29.4,0.4c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L18.1,16z',
-        );
+function setFlickityGalleryNav($galleryNav) {
+  $galleryNav.imagesLoaded()
+    .always(function (instance) {
+      const target = $galleryNav.data('gallery');
 
-        // Improve prev/next buttons position
-        const height = $(this).find('.gallery-item.is-selected img').height();
-        $(this).find('.flickity-prev-next-button').css('top', `${height / 2}px`);
+      // Toggle opacity to avoid load blink
+      $galleryNav.addClass('ready');
+
+      // Instantiate Flickity nav
+      const flkty = new Flickity($galleryNav.get(0), {
+        asNavFor: `#${target}`,
+        cellAlign: 'left',
+        pageDots: false,
+        prevNextButtons: false,
+        contain: true,
       });
-    });
-  }
+    })
+  .fail(function () {
+    console.log(`one image is broken for a gallery nav`);
+  });
+}
 
-  // Nav gallery logic
-  if ($galleryNavs.length > 0) {
-    $galleryNavs.each(function () {
-      Imagesloaded(this, () => {
-        const target = $(this).data('gallery');
+export default () => {
+  window.flickityInstances = [];
+  const $galleries = $('.gallery');
 
-        // Toggle opacity to avoid load blink
-        $(this).addClass('ready');
+  // Base gallery logic
+  if ($galleries.length > 0) {
+    console.log('starting to gallerynav');
+    $galleries.each(function (i) {
+      $(this).imagesLoaded()
+        .always(function (instance) {
+          setFlickityOnGallery($($galleries[i]));
 
-        // Instantiate Flickity nav
-        const flkty = new Flickity(this, {
-          asNavFor: `#${target}`,
-          cellAlign: 'left',
-          pageDots: false,
-          prevNextButtons: false,
-          contain: true,
+          // once the galary is loaded, try to find any nav linked for the current gallery
+          const $galleryNavs = $(`.gallery-nav[data-gallery='${$galleries[i].id}']`);
+
+          if ($galleryNavs.length > 0) {
+            $galleryNavs.each(function (j) {
+              setFlickityGalleryNav($($galleryNavs[j], $galleries[i].id));
+            });
+          }
+        })
+        .fail(function () {
+          console.log(`one image is broken for a gallery`);
         });
-      });
     });
   }
 };
diff --git a/assets/components/molecules/gallery/gallery.twig b/assets/components/molecules/gallery/gallery.twig
@@ -1,5 +1,5 @@
 <div class="gallery-container">
-  
+
   <div id="my-gallery-{{ id ?: 1 }}" class="gallery gallery-main">
     {% for i in 1..8 %}
       <figure class="gallery-item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
@@ -23,5 +23,5 @@
       </figure>
     {% endfor %}
   </div>
-  
+
 </div>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epfl-elements",
-  "version": "2.22.0",
+  "version": "2.22.1",
   "license": "MIT",
   "main": "index.html",
   "repository": {