@acorex/components 20.3.45 → 20.3.46

package/fesm2022/acorex-components-media-viewer.mjs

@@ -7,7 +7,7 @@ import { isBrowser, AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe } from '@acorex/core/translation';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, signal, inject, input, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, viewChild, contentChild, afterNextRender, computed, NgModule } from '@angular/core';
+import { Injectable, signal, inject, input, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, afterNextRender, viewChild, contentChild, computed, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { AXImageComponent, AXImageModule } from '@acorex/components/image';
@@ -96,10 +96,15 @@ class AXThumbnailViewerComponent extends AXMediaViewerBaseComponent {
         this.item = input(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
         this.index = input(null, ...(ngDevMode ? [{ debugName: "index" }] : []));
         this.service = inject(AXMediaViewerService);
+        this.host = inject(ElementRef);
         this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this.#init = effect(async () => {
+        this.isElementVisible = signal(false, ...(ngDevMode ? [{ debugName: "isElementVisible" }] : []));
+        this.#init = afterNextRender(() => {
+            this.observeElementVisibility();
+        });
+        this.#effect = effect(async () => {
             const item = this.item();
-            if (this.index() === this.service.selectedIndex()) {
+            if (this.isElementVisible()) {
                 if (this.service.dirtyItems.has(`thumbnail-${this.index()}`)) {
                     this.src.set(this.service.dirtyItems.get(`thumbnail-${this.index()}`));
                     return;
@@ -116,12 +121,43 @@ class AXThumbnailViewerComponent extends AXMediaViewerBaseComponent {
                 }
                 this.loading.set(false);
             }
-        }, ...(ngDevMode ? [{ debugName: "#init" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
     }
     #init;
+    #effect;
     handleImageError() {
         this.hasError.set(true);
     }
+    observeElementVisibility() {
+        const containerEl = this.host.nativeElement.closest('ax-media-viewer-container');
+        if (!containerEl)
+            return;
+        const options = {
+            root: containerEl,
+            rootMargin: '0px',
+            threshold: [0, 1],
+        };
+        const callback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.isElementVisible.set(true);
+                }
+                else {
+                    this.isElementVisible.set(false);
+                }
+            });
+        };
+        this.observer = new IntersectionObserver(callback, options);
+        this.observer.observe(this.host.nativeElement);
+    }
+    cleanupObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupObserver();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXThumbnailViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXThumbnailViewerComponent, isStandalone: true, selector: "ax-thumbnail-viewer", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXThumbnailViewerComponent }], usesInheritance: true, ngImport: i0, template: "@if (loading()) {\n  <ax-loading></ax-loading>\n} @else {\n  <ax-image alt=\"image\" [src]=\"src()\" (onError)=\"handleImageError()\">\n    @if (hasError()) {\n      <ax-placeholder>\n        <div class=\"placeholder-image-container\">\n          <span class=\"placeholder-image\">\uD83D\uDDBC\uFE0F</span>\n        </div>\n      </ax-placeholder>\n    }\n  </ax-image>\n}\n", styles: ["ax-thumbnail-viewer ax-image{width:100%!important;height:100%!important}ax-thumbnail-viewer ax-loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center}ax-thumbnail-viewer .placeholder-image-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}ax-thumbnail-viewer .placeholder-image-container .placeholder-image{font-size:3rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }