From df593af95bf45b363f423f242ee134e27b9b1aa9 Mon Sep 17 00:00:00 2001 From: nsmirnova Date: Wed, 9 Aug 2023 10:35:47 +0200 Subject: [PATCH 1/4] feat(esl-image): change `lazy` attribute behaviour --- .../esl-image/core/esl-image-iobserver.ts | 3 ++- src/modules/esl-image/core/esl-image.ts | 17 ++++------------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/src/modules/esl-image/core/esl-image-iobserver.ts b/src/modules/esl-image/core/esl-image-iobserver.ts index 8350f8d4a..1ed4f3064 100644 --- a/src/modules/esl-image/core/esl-image-iobserver.ts +++ b/src/modules/esl-image/core/esl-image-iobserver.ts @@ -21,6 +21,7 @@ function handleViewport(entry: IntersectionObserverEntry): void { // Check that entry is going to appear in the viewport area if (entry.isIntersecting || entry.intersectionRatio > 0) { - image.triggerLoad(); + image.removeAttribute('lazy'); + image.update(true); } } diff --git a/src/modules/esl-image/core/esl-image.ts b/src/modules/esl-image/core/esl-image.ts index 93d216d6e..a15ac9921 100644 --- a/src/modules/esl-image/core/esl-image.ts +++ b/src/modules/esl-image/core/esl-image.ts @@ -22,7 +22,7 @@ const isLoadState = (state: string): state is LoadState => ['error', 'loaded', ' @ExportNs('Image') export class ESLImage extends ESLBaseElement { public static override is = 'esl-image'; - public static observedAttributes = ['alt', 'role', 'mode', 'aria-label', 'data-src', 'data-src-base', 'lazy-triggered']; + public static observedAttributes = ['alt', 'role', 'mode', 'aria-label', 'data-src', 'data-src-base']; /** Default container class value */ public static DEFAULT_CONTAINER_CLS = 'img-container-loaded'; @@ -43,7 +43,6 @@ export class ESLImage extends ESLBaseElement { @attr({dataAttr: true}) public srcBase: string; @attr({defaultValue: 'none'}) public lazy: 'auto' | 'manual' | 'none' | ''; - @boolAttr() public lazyTriggered: boolean; @boolAttr() public refreshOnUpdate: boolean; @attr({defaultValue: 'inner-image'}) public innerImageClass: string; @@ -70,7 +69,6 @@ export class ESLImage extends ESLBaseElement { this.updateA11y(); this.srcRules = ESLMediaRuleList.parse(this.src); if (this.lazyObservable) { - this.removeAttribute('lazy-triggered'); getIObserver().observe(this); this._detachLazyTrigger = function (): void { getIObserver().unobserve(this); @@ -109,9 +107,6 @@ export class ESLImage extends ESLBaseElement { case 'mode': this.changeMode(oldVal, newVal); break; - case 'lazy-triggered': - this.lazyTriggered && this.update(); - break; } } @@ -139,11 +134,11 @@ export class ESLImage extends ESLBaseElement { } public get canUpdate(): boolean { - return this.lazyTriggered || this.lazy === 'none'; + return this.lazy === 'none'; } public get lazyObservable(): boolean { - return this.lazy !== 'none' && this.lazy !== 'manual'; + return this.lazy === 'auto' || this.lazy === ''; } public get originalWidth(): number { @@ -154,10 +149,6 @@ export class ESLImage extends ESLBaseElement { return this._shadowImageElement ? this._shadowImageElement.height : 0; } - public triggerLoad(): void { - this.setAttribute('lazy-triggered', ''); - } - protected changeMode(oldVal: string, newVal: string): void { oldVal = oldVal || 'save-ratio'; newVal = newVal || 'save-ratio'; @@ -170,7 +161,7 @@ export class ESLImage extends ESLBaseElement { if (this.loaded) this.syncImage(); } - protected update(force: boolean = false): void { + update(force: boolean = false): void { if (!this.canUpdate) return; const src = this.getPath(this.srcRules.activeValue); From 69adacccf586adddab9270e94dd276cbe915680b Mon Sep 17 00:00:00 2001 From: Natalie Smirnova <55104823+Natalie-Smirnova@users.noreply.github.com> Date: Wed, 21 Feb 2024 09:30:57 +0100 Subject: [PATCH 2/4] refactor(esl-image): code refactoring Co-authored-by: ala'n (Alexey Stsefanovich) --- src/modules/esl-image/core/esl-image.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/esl-image/core/esl-image.ts b/src/modules/esl-image/core/esl-image.ts index a15ac9921..a073298a9 100644 --- a/src/modules/esl-image/core/esl-image.ts +++ b/src/modules/esl-image/core/esl-image.ts @@ -161,7 +161,7 @@ export class ESLImage extends ESLBaseElement { if (this.loaded) this.syncImage(); } - update(force: boolean = false): void { + protected update(force: boolean = false): void { if (!this.canUpdate) return; const src = this.getPath(this.srcRules.activeValue); From 4288c1d16ae3e7372a855a56aab8de497bb74da4 Mon Sep 17 00:00:00 2001 From: Natalie Smirnova <55104823+Natalie-Smirnova@users.noreply.github.com> Date: Wed, 21 Feb 2024 09:31:11 +0100 Subject: [PATCH 3/4] refactor(esl-image): code refactoring Co-authored-by: ala'n (Alexey Stsefanovich) --- src/modules/esl-image/core/esl-image-iobserver.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/esl-image/core/esl-image-iobserver.ts b/src/modules/esl-image/core/esl-image-iobserver.ts index 1ed4f3064..3d76b7a2e 100644 --- a/src/modules/esl-image/core/esl-image-iobserver.ts +++ b/src/modules/esl-image/core/esl-image-iobserver.ts @@ -21,7 +21,7 @@ function handleViewport(entry: IntersectionObserverEntry): void { // Check that entry is going to appear in the viewport area if (entry.isIntersecting || entry.intersectionRatio > 0) { - image.removeAttribute('lazy'); + image.$$attr('lazy', 'none'); image.update(true); } } From 6bca9153b6ac9b89828e20d9fea87eb3fb9fe70c Mon Sep 17 00:00:00 2001 From: Natalie Smirnova <55104823+Natalie-Smirnova@users.noreply.github.com> Date: Wed, 21 Feb 2024 09:31:39 +0100 Subject: [PATCH 4/4] refactor(esl-image): code refactoring Co-authored-by: ala'n (Alexey Stsefanovich) --- src/modules/esl-image/core/esl-image-iobserver.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modules/esl-image/core/esl-image-iobserver.ts b/src/modules/esl-image/core/esl-image-iobserver.ts index 3d76b7a2e..99318c825 100644 --- a/src/modules/esl-image/core/esl-image-iobserver.ts +++ b/src/modules/esl-image/core/esl-image-iobserver.ts @@ -22,6 +22,5 @@ function handleViewport(entry: IntersectionObserverEntry): void { // Check that entry is going to appear in the viewport area if (entry.isIntersecting || entry.intersectionRatio > 0) { image.$$attr('lazy', 'none'); - image.update(true); } }