@getflip/swirl-components 0.271.0 → 0.273.0

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js

@@ -1,7 +1,12 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { debounce } from "../../utils";
 export class SwirlImageGridItem {
     constructor() {
+        this.handleIntersectionEntries = debounce((entries) => {
+            const sorted = [...entries].sort((a, b) => a.time - b.time);
+            this.inViewport = sorted.at(-1).isIntersecting;
+        }, 250);
         this.onLoad = () => {
             this.error = false;
             this.loaded = true;
@@ -76,14 +81,11 @@ export class SwirlImageGridItem {
         if (this.loading !== "intersecting") {
             return;
         }
-        this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-            threshold: 0,
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            this.handleIntersectionEntries(entries);
         });
         this.intersectionObserver.observe(this.el);
     }
-    onVisibilityChange(entries) {
-        this.inViewport = entries.some((entry) => entry.isIntersecting);
-    }
     async pauseGif() {
         const imageEl = this.img;
         const staticImage = await this.readImageFromCanvas(imageEl.src);
@@ -117,16 +119,16 @@ export class SwirlImageGridItem {
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
         });
-        return (h(Host, { key: '76485aab929a8e33cc8f3b226497d9f1df3bb49d', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '12d24ad20f9a877584cbb3d2e9cdfbad6a4dc2e9', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '6d0fa0c2d90033e3b357323d403e887fb80fe4ec', class: "image-grid-item__background", style: {
+        return (h(Host, { key: '3df6b790bbb8606b4eed5d6d0788d105e04f4b8a', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: 'bb91bd8a691464f03e90ed9e89149f395df74a9d', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '8c1193c46a7d739a0b0980bbb8ba1fc6085800d7', class: "image-grid-item__background", style: {
                 backgroundImage: showBlurredBackground
                     ? `url(${this.computedSrc})`
                     : undefined,
             } }), this.loading !== "intersecting" ||
             this.inViewport ||
-            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '827ad86b66876e451aef554fc24ff090e4d5777d', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '83026738dfc9cbb8a145d309c540712fdb16b000', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '6b666841df8cbaae189d2ef21dafa54fd1891377', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '76908d564832b3b6f63a43928be8815502943425', size: 20 })))), this.loaded &&
+            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: 'ddbdaa408afe0d8fe445256196a23ace3c0fb75b', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'd0d2b4ca348272191442dba90619f4ac9a1bd7ec', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '2818e0abc2a61e1483a69c32678c2ac4e4989290', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'c514991c015cd6f9767dd175f2370eb20937eeda', size: 20 })))), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (h("div", { key: '1870a25ab75a9e71e9f0028312489242e76b3d82', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: 'b8cfc7ed5e18b5df4d319418520a8e599d93563b', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'c6e3fef4dc7e639902af85cd6118754e8d58d3f3', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '6df4e1823d1761eb9344655b30bb4eecfa3807aa' }))), this.loaded && this.error && (h("div", { key: '2a059146e82ae8fd6ec968b34267239f3f1b7071', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '37a20227d442b202a0cd5a66c2203f827836fcb9', color: "critical" }))))));
+            !Boolean(this.overlay) && (h("div", { key: '3fbb938d73610ca670018d66422ce58d92a2c91c', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '435b2fd7a8a94fbe0905636b82a1793202cb1c41', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'a4a2276318afe3424504a200185a038d6dc4161f', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '55a074bfe0459222049673788d7b755608fd9f27' }))), this.loaded && this.error && (h("div", { key: 'cd48b68ce0970d73fed49bad653b9de2f0f4907f', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '60b1c44bb59cf45b8cf5a27528dc680100344896', color: "critical" }))))));
     }
     static get is() { return "swirl-image-grid-item"; }
     static get encapsulation() { return "shadow"; }