@ecl/ec-component-gallery - npm Package Compare versions

Comparing version 2.28.3 to 2.29.0

ec-component-gallery.js

@@ -12,2 +12,3 @@ import createFocusTrap from 'focus-trap';
  * @param {String} options.closeButtonSelector Selector for close button element
+ * @param {String} options.allButtonSelector Selector for view all button element
  * @param {String} options.overlaySelector Selector for gallery overlay element
@@ -53,2 +54,4 @@ * @param {String} options.overlayHeaderSelector Selector for gallery overlay header element
       closeButtonSelector = '[data-ecl-gallery-close]',
+      viewAllSelector = '[data-ecl-gallery-all]',
+      countSelector = '[data-ecl-gallery-count]',
       overlaySelector = '[data-ecl-gallery-overlay]',
@@ -69,2 +72,3 @@ overlayHeaderSelector = '[data-ecl-gallery-overlay-header]',
       attachKeyListener = true,
+      attachResizeListener = true,
     } = {}
@@ -86,2 +90,4 @@ ) {
     this.closeButtonSelector = closeButtonSelector;
+    this.viewAllSelector = viewAllSelector;
+    this.countSelector = countSelector;
     this.overlaySelector = overlaySelector;
@@ -102,2 +108,3 @@ this.overlayHeaderSelector = overlayHeaderSelector;
     this.attachKeyListener = attachKeyListener;
+    this.attachResizeListener = attachResizeListener;
 
@@ -108,2 +115,4 @@ // Private variables
     this.closeButton = null;
+    this.viewAll = null;
+    this.count = null;
     this.overlay = null;
@@ -124,5 +133,10 @@ this.overlayHeader = null;
     this.focusTrap = null;
+    this.isDesktop = false;
+    this.resizeTimer = null;
+    this.breakpointMd = 768;
+    this.imageHeight = 185;
 
     // Bind `this` for use in callbacks
     this.handleClickOnCloseButton = this.handleClickOnCloseButton.bind(this);
+    this.handleClickOnViewAll = this.handleClickOnViewAll.bind(this);
     this.handleClickOnItem = this.handleClickOnItem.bind(this);
@@ -135,2 +149,3 @@ this.handleKeyPressOnItem = this.handleKeyPressOnItem.bind(this);
     this.handleKeyboard = this.handleKeyboard.bind(this);
+    this.handleResize = this.handleResize.bind(this);
   }
@@ -145,2 +160,4 @@
     this.closeButton = queryOne(this.closeButtonSelector, this.element);
+    this.viewAll = queryOne(this.viewAllSelector, this.element);
+    this.count = queryOne(this.countSelector, this.element);
     this.overlay = queryOne(this.overlaySelector, this.element);
@@ -186,2 +203,7 @@ this.overlayHeader = queryOne(this.overlayHeaderSelector, this.overlay);
 
+    // Bind click event on view all (open first item)
+    if (this.attachClickListener && this.viewAll) {
+      this.viewAll.addEventListener('click', this.handleClickOnViewAll);
+    }
+
     // Bind click event on gallery items
@@ -220,2 +242,11 @@ if (this.attachClickListener && this.galleryItems) {
 
+    // Bind resize events
+    if (this.attachResizeListener) {
+      window.addEventListener('resize', this.handleResize);
+    }
+
+    // Init display of gallery items
+    this.checkScreen();
+    this.hideItems();
+
     // Add number to gallery items
@@ -225,2 +256,7 @@ this.galleryItems.forEach((galleryItem, key) => {
     });
+
+    // Update counter
+    if (this.count) {
+      this.count.innerHTML = this.galleryItems.length;
+    }
   }
@@ -239,2 +275,6 @@
 
+    if (this.attachClickListener && this.viewAll) {
+      this.viewAll.removeEventListener('click', this.handleClickOnViewAll);
+    }
+
     if (this.attachClickListener && this.galleryItems) {
@@ -266,5 +306,72 @@ this.galleryItems.forEach(galleryItem => {
     }
+
+    if (this.attachResizeListener) {
+      window.removeEventListener('resize', this.handleResize);
+    }
   }
 
   /**
+   * Check if current display is desktop or mobile
+   */
+  checkScreen() {
+    if (window.innerWidth > this.breakpointMd) {
+      this.isDesktop = true;
+      return;
+    }
+
+    this.isDesktop = false;
+  }
+
+  /**
+   * Hide several gallery items by default
+   * - 2 "lines" of items on desktop
+   * - only 3 items on mobile
+   */
+  hideItems() {
+    if (!this.viewAll) return;
+
+    if (this.isDesktop) {
+      const galleryY = this.element.getBoundingClientRect().top;
+      let hiddenItemIds = [];
+      // We should browse the list first to mark the items to be hidden, and hide them later
+      // otherwise, it will interfer with the calculus
+      this.galleryItems.forEach((galleryItem, key) => {
+        galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden');
+        if (
+          galleryItem.getBoundingClientRect().top - galleryY >
+          this.imageHeight * 2
+        ) {
+          hiddenItemIds = [...hiddenItemIds, key];
+        }
+      });
+      hiddenItemIds.forEach(id => {
+        this.galleryItems[id].parentNode.classList.add(
+          'ecl-gallery__item--hidden'
+        );
+      });
+      return;
+    }
+
+    this.galleryItems.forEach((galleryItem, key) => {
+      if (key > 2) {
+        galleryItem.parentNode.classList.add('ecl-gallery__item--hidden');
+      } else {
+        galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden');
+      }
+    });
+  }
+
+  /**
+   * Trigger events on resize
+   * Uses a debounce, for performance
+   */
+  handleResize() {
+    clearTimeout(this.resizeTimer);
+    this.resizeTimer = setTimeout(() => {
+      this.checkScreen();
+      this.hideItems();
+    }, 200);
+  }
+
+  /**
    * @param {HTMLElement} selectedItem Media element
@@ -426,2 +533,27 @@ */
   /**
+   * Invoke listeners for on click events on view all.
+   *
+   * @param {Event} e
+   */
+  handleClickOnViewAll(e) {
+    e.preventDefault();
+
+    // Disable scroll on body
+    document.body.classList.add('ecl-u-disablescroll');
+
+    // Display overlay
+    if (this.isDialogSupported) {
+      this.overlay.showModal();
+    } else {
+      this.overlay.setAttribute('open', '');
+    }
+
+    // Update overlay
+    this.updateOverlay(this.galleryItems[0]);
+
+    // Trap focus
+    this.focusTrap.activate();
+  }
+
+  /**
    * Invoke listeners for on click events on the given gallery item.
@@ -428,0 +560,0 @@ *

package.json

@@ -5,3 +5,3 @@ {
   "license": "EUPL-1.1",
-  "version": "2.28.3",
+  "version": "2.29.0",
   "description": "ECL Gallery",
@@ -13,8 +13,8 @@ "main": "ec-component-gallery.js",
   "dependencies": {
-    "@ecl/ec-base": "^2.28.3",
+    "@ecl/ec-base": "^2.29.0",
     "focus-trap": "5.1.0"
   },
   "devDependencies": {
-    "@ecl/ec-specs-gallery": "^2.28.3",
-    "@ecl/ec-utility-disablescroll": "^2.28.3"
+    "@ecl/ec-specs-gallery": "^2.29.0",
+    "@ecl/ec-utility-disablescroll": "^2.29.0"
   },
@@ -37,3 +37,3 @@ "publishConfig": {
   ],
-  "gitHead": "cdc6c94759822486faf8e16aa1d9f2759117bbea"
+  "gitHead": "7fa1fa710e4fa269351dd750252f36f905880a6d"
 }

No alert changes

Improved metrics

Total package byte prevSize

41724

increased by10.4%

Lines of code

541

increased by27%

Dependency changes

• Updated@ecl/ec-base@^2.29.0