Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Esl image: simplify lazy handling #1858

Draft
wants to merge 4 commits into
base: main-beta
Choose a base branch
from
Draft

Esl image: simplify lazy handling #1858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df593af
feat(esl-image): change `lazy` attribute behaviour
Natalie-Smirnova Aug 9, 2023
69adacc
refactor(esl-image): code refactoring
Natalie-Smirnova Feb 21, 2024
4288c1d
refactor(esl-image): code refactoring
Natalie-Smirnova Feb 21, 2024
6bca915
refactor(esl-image): code refactoring
Natalie-Smirnova Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/modules/esl-image/core/esl-image-iobserver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@ 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.$$attr('lazy', 'none');
}
}
15 changes: 3 additions & 12 deletions src/modules/esl-image/core/esl-image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make 'lazy' observable to handle loading accept from the observer or manually


/** Default container class value */
public static DEFAULT_CONTAINER_CLS = 'img-container-loaded';
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -109,9 +107,6 @@ export class ESLImage extends ESLBaseElement {
case 'mode':
this.changeMode(oldVal, newVal);
break;
case 'lazy-triggered':
this.lazyTriggered && this.update();
break;
}
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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';
Expand Down
Loading