From c3ded883fcdfa9f083b64bd22881659bae59743f Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 24 Jul 2024 21:18:59 +0300 Subject: [PATCH 1/9] feat(esl-utils): create utility to get element that is viewport for specified element --- src/modules/esl-utils/dom/scroll/parent.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/modules/esl-utils/dom/scroll/parent.ts b/src/modules/esl-utils/dom/scroll/parent.ts index 0d97a9829..e92cec2f3 100644 --- a/src/modules/esl-utils/dom/scroll/parent.ts +++ b/src/modules/esl-utils/dom/scroll/parent.ts @@ -44,3 +44,11 @@ export function isScrollable(element: Element): boolean { const {overflow, overflowX, overflowY} = getComputedStyle(element); return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); } + +/** + * Get the element that is the viewport for the specified element. + * @param node - element for which to get the viewport + */ +export function getViewportForEl(node: Element): Element | null { + return getListScrollParents(node).filter((el) => el.scrollHeight !== el.clientHeight).shift()!; +} From e0a07a238d53936fc84072c5bc69006c933458c3 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 24 Jul 2024 21:28:51 +0300 Subject: [PATCH 2/9] feat(esl-lazy-template): create esl-lazy-template mixin --- src/modules/all.ts | 3 + src/modules/esl-lazy-template/core.ts | 1 + .../core/esl-lazy-template.ts | 99 +++++++++++++++++++ 3 files changed, 103 insertions(+) create mode 100644 src/modules/esl-lazy-template/core.ts create mode 100644 src/modules/esl-lazy-template/core/esl-lazy-template.ts diff --git a/src/modules/all.ts b/src/modules/all.ts index 8d2dae0ab..48b669f22 100644 --- a/src/modules/all.ts +++ b/src/modules/all.ts @@ -52,3 +52,6 @@ export * from './esl-share/core'; // Carousel export * from './esl-carousel/core'; + +// Lazy Template +export * from './esl-lazy-template/core'; diff --git a/src/modules/esl-lazy-template/core.ts b/src/modules/esl-lazy-template/core.ts new file mode 100644 index 000000000..889209a10 --- /dev/null +++ b/src/modules/esl-lazy-template/core.ts @@ -0,0 +1 @@ +export * from './core/esl-lazy-template'; diff --git a/src/modules/esl-lazy-template/core/esl-lazy-template.ts b/src/modules/esl-lazy-template/core/esl-lazy-template.ts new file mode 100644 index 000000000..f5e21837f --- /dev/null +++ b/src/modules/esl-lazy-template/core/esl-lazy-template.ts @@ -0,0 +1,99 @@ +import {ESLMixinElement} from '../../esl-mixin-element/core'; +import {attr, listen, prop, memoize} from '../../esl-utils/decorators'; +import {ESLIntersectionTarget, ESLIntersectionEvent} from '../../esl-event-listener/core/targets/intersection.target'; +import {ExportNs} from '../../esl-utils/environment/export-ns'; + +@ExportNs('LazyTemplate') +export class ESLLazyTemplate extends ESLMixinElement { + public static override is = 'esl-lazy-template'; + public static viewportProvider: (node: Element) => Element | null = () => null; + + @prop(750) baseMargin: number; + + @attr({name: ESLLazyTemplate.is}) + public url?: string; + + protected get rootMargin(): string { + return `${this.baseMargin * this.connectionRatio}px`; + } + + protected get connectionRatio(): number { + switch (navigator.connection?.effectiveType) { + case 'slow-2g': + case '2g': return 2; + case '3g': return 1.5; + case '4g': + default: return 1; + } + } + + protected get isHostTemplate(): boolean { + return this.$host instanceof HTMLTemplateElement; + } + + protected get intersectionOptions(): IntersectionObserverInit { + return { + root: ESLLazyTemplate.viewportProvider(this.$host), + rootMargin: this.rootMargin, + threshold: [0.01] + }; + } + + @memoize() + public get $placeholder(): HTMLElement { + const placeholder = document.createElement('div'); + placeholder.className = `${ESLLazyTemplate.is}-placeholder`; + this.$host.before(placeholder); + return placeholder; + } + + protected override disconnectedCallback(): void { + super.disconnectedCallback(); + this.$placeholder.remove(); + memoize.clear(this, '$placeholder'); + } + + @memoize() + protected async loadContent(url: string): Promise { + try { + const response = await fetch(url); + if (!response.ok) return ''; + const $template = document.createElement('template'); + $template.innerHTML = await response.text(); + return $template.content.cloneNode(true); + } catch (e) { + return ''; + } + } + + protected async getContent(): Promise { + if (this.url) return this.loadContent(this.url); + if (this.isHostTemplate) return (this.$host as HTMLTemplateElement).content.cloneNode(true); + return ''; + } + + protected async replaceWithContent(): Promise { + const content = await this.getContent(); + this.$host.replaceWith(content); + } + + @listen({ + event: ESLIntersectionEvent.IN, + target: (that: ESLLazyTemplate) => ESLIntersectionTarget.for(that.$placeholder, that.intersectionOptions) + }) + protected _onIntersect(e: ESLIntersectionEvent): void { + this.replaceWithContent(); + } +} + +declare global { + export interface ESLLibrary { + LazyTemplate: typeof ESLLazyTemplate; + } + + interface Navigator extends NavigatorNetworkInformation {} + interface NavigatorNetworkInformation { + readonly connection?: { + readonly effectiveType: 'slow-2g' | '2g' | '3g' | '4g';}; + } +} From 1d1271c362141ad9fc63415375025ac2c12f2055 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 24 Jul 2024 21:57:18 +0300 Subject: [PATCH 3/9] chore(site): create demo playground for esl-lazy-template --- site/static/assets/examples/lazy-template.svg | 1 + .../assets/lazy-templates/template1.html | 9 ++ .../assets/lazy-templates/template2.html | 9 ++ site/views/components/esl-lazy-template.njk | 13 ++ site/views/examples/lazy-template.njk | 115 ++++++++++++++++++ 5 files changed, 147 insertions(+) create mode 100644 site/static/assets/examples/lazy-template.svg create mode 100644 site/static/assets/lazy-templates/template1.html create mode 100644 site/static/assets/lazy-templates/template2.html create mode 100644 site/views/components/esl-lazy-template.njk create mode 100644 site/views/examples/lazy-template.njk diff --git a/site/static/assets/examples/lazy-template.svg b/site/static/assets/examples/lazy-template.svg new file mode 100644 index 000000000..ce8ee5411 --- /dev/null +++ b/site/static/assets/examples/lazy-template.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/site/static/assets/lazy-templates/template1.html b/site/static/assets/lazy-templates/template1.html new file mode 100644 index 000000000..5c76627ca --- /dev/null +++ b/site/static/assets/lazy-templates/template1.html @@ -0,0 +1,9 @@ +
+

...

+

I am content No.1 which was added to DOM by the lazy template and loaded from the specified URL

+

I am inside DIV with id="template-from-url-1".

+

...

+
diff --git a/site/static/assets/lazy-templates/template2.html b/site/static/assets/lazy-templates/template2.html new file mode 100644 index 000000000..9bdaa7e6b --- /dev/null +++ b/site/static/assets/lazy-templates/template2.html @@ -0,0 +1,9 @@ +
+

...

+

I am content No.2 which was added to DOM by the lazy template and loaded from the specified URL

+

I am inside DIV with id="template-from-url-2".

+

...

+
diff --git a/site/views/components/esl-lazy-template.njk b/site/views/components/esl-lazy-template.njk new file mode 100644 index 000000000..0a7dd92d3 --- /dev/null +++ b/site/views/components/esl-lazy-template.njk @@ -0,0 +1,13 @@ +--- +layout: content +title: ESL Lazy Template +seoTitle: ESL Image - custom image element with lazy loading, renditions, and different modes of embedding +name: ESL Lazy Template +tags: components +aside: + source: src/modules/esl-lazy-template + examples: + - lazy-template +--- + +{% mdRender 'src/modules/esl-lazy-template/README.md', 'intro' %} diff --git a/site/views/examples/lazy-template.njk b/site/views/examples/lazy-template.njk new file mode 100644 index 000000000..da6f4fd5f --- /dev/null +++ b/site/views/examples/lazy-template.njk @@ -0,0 +1,115 @@ +--- +layout: content +title: Lazy Template +seoTitle: Lazy-loaded templates examples based on ESL web components +name: Lazy Template +tags: [examples, playground, beta] +icon: examples/lazy-template.svg +aside: + components: + - esl-lazy-template +--- +{% import 'lorem.njk' as lorem %} + +{% set imageSrcBase = '/assets/' | url %} + +
+
+ + + + + + + + + + + + + + +
+
From d4556867d3ee8089709749ddedfa3505c5537808 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 24 Jul 2024 21:58:01 +0300 Subject: [PATCH 4/9] chore(site): create demo distance to viewport alert mixin --- .../distance-to-viewport-alert.ts | 47 +++++++++++++++++++ site/src/localdev.ts | 10 +++- 2 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts diff --git a/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts b/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts new file mode 100644 index 000000000..e475fd867 --- /dev/null +++ b/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts @@ -0,0 +1,47 @@ +import {ESLMixinElement} from '@exadel/esl/modules/esl-mixin-element/core'; +import {ready} from '@exadel/esl/modules/esl-utils/decorators'; +import {ESLEventUtils} from '@exadel/esl/modules/esl-utils/dom/events'; +import {Rect} from '@exadel/esl/modules/esl-utils/dom/rect'; +import {getWindowRect} from '@exadel/esl/modules/esl-utils/dom/window'; + +export class ESLDemoDistanceToViewportAlert extends ESLMixinElement { + public static override is = 'distance-to-viewport-alert'; + public static viewportProvider: (node: Element) => Element | null = () => null; + + @ready + protected override connectedCallback(): void { + super.connectedCallback(); + this.showAlert(); + } + + protected calculateDistance(): number { + let topDistance; + let bottomDistance; + const elementRect = Rect.from(this.$host.getBoundingClientRect()); + const $root = ESLDemoDistanceToViewportAlert.viewportProvider(this.$host) as HTMLElement; + if (!$root) { // window + const windowRect = getWindowRect(); + topDistance = elementRect.top - windowRect.height; + bottomDistance = -elementRect.bottom; + } else { + const windowRect = Rect.from($root.getBoundingClientRect()); + topDistance = elementRect.top - windowRect.bottom; + bottomDistance = -elementRect.bottom; + } + return Math.max(topDistance, bottomDistance); + } + + protected showAlert(): void { + const distance = this.calculateDistance(); + const text = distance < 0 + ? `The element with id="${this.$host.id}" was connected to DOM when it was in viewport` + : `The element with id="${this.$host.id}" was connected to DOM at the distance ${distance}px from the viewport`; + + const detail = { + text, + cls: 'alert-info', + hideDelay: 5000 + }; + ESLEventUtils.dispatch(document.body, 'esl:alert:show', {detail}); + } +} diff --git a/site/src/localdev.ts b/site/src/localdev.ts index 02516555d..06aa63ccc 100644 --- a/site/src/localdev.ts +++ b/site/src/localdev.ts @@ -34,7 +34,6 @@ import { ESLAnimateMixin, ESLRelatedTarget, ESLOpenState, - ESLCarousel, ESLCarouselNavDots, ESLCarouselNavMixin, @@ -42,10 +41,12 @@ import { ESLCarouselWheelMixin, ESLCarouselKeyboardMixin, ESLCarouselRelateToMixin, - ESLCarouselAutoplayMixin + ESLCarouselAutoplayMixin, + ESLLazyTemplate } from '@exadel/esl/modules/all'; import {ESLRandomText} from '@exadel/esl/modules/esl-random-text/core'; +import {getViewportForEl} from '@exadel/esl/modules/esl-utils/dom/scroll'; import '@exadel/esl/modules/esl-media/providers/iframe-provider'; import '@exadel/esl/modules/esl-media/providers/html5/audio-provider'; @@ -63,6 +64,7 @@ import {ESLDemoAnchorLink} from './anchor/anchor-link'; import {ESLDemoBanner} from './banner/banner'; import {ESLDemoSwipeArea, ESLDemoWheelArea} from './esl-events-demo/esl-events-demo'; import {ESLDemoPopupGame} from './esl-popup/esl-d-popup-game'; +import {ESLDemoDistanceToViewportAlert} from './esl-lazy-template-demo/distance-to-viewport-alert'; if (!CSS.supports('(height: 100dvh) or (width: 100dvw)')) ESLVSizeCSSProxy.observe(); @@ -79,6 +81,8 @@ ESLDemoBanner.register(); ESLDemoSwipeArea.register(); ESLDemoWheelArea.register(); ESLDemoPopupGame.register(); +ESLDemoDistanceToViewportAlert.viewportProvider = getViewportForEl; +ESLDemoDistanceToViewportAlert.register(); // Test Content ESLRandomText.register('lorem-ipsum'); @@ -131,6 +135,8 @@ ESLAnimateMixin.register(); // Register ESL Mixins ESLRelatedTarget.register(); ESLOpenState.register(); +ESLLazyTemplate.viewportProvider = getViewportForEl; +ESLLazyTemplate.register(); // Share component loading import (/* webpackChunkName: 'common/esl-share' */'./esl-share/esl-share'); From bde1d77a5dd45c2af1c0a684f5467283a74e5466 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 24 Jul 2024 21:59:09 +0300 Subject: [PATCH 5/9] chore(lint): update scope with esl-lazy-template --- .commitlintrc.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.commitlintrc.yml b/.commitlintrc.yml index b5669e87b..c7db7aefb 100644 --- a/.commitlintrc.yml +++ b/.commitlintrc.yml @@ -38,6 +38,7 @@ rules: - esl-footnotes - esl-forms - esl-image + - esl-lazy-template - esl-media - esl-media-query - esl-mixin-element From 8bae3b22394d7e76fbdaa151b1f9f4d5d41a1ac3 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 24 Jul 2024 21:59:44 +0300 Subject: [PATCH 6/9] docs(esl-lazy-template): create README --- src/modules/esl-lazy-template/README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/modules/esl-lazy-template/README.md diff --git a/src/modules/esl-lazy-template/README.md b/src/modules/esl-lazy-template/README.md new file mode 100644 index 000000000..f66750ce0 --- /dev/null +++ b/src/modules/esl-lazy-template/README.md @@ -0,0 +1,20 @@ +# [ESL](../../../) Lazy Template Mixin + +Version: *1.0.0* + +Authors: *Dmytro Shovchko*. + + + +**ESLLazyTemplate** is a custom mixin that can be used in combination with any HTML elements (usually `template` or `div`) to make parts of page markup not present in DOM if they are outside the viewport. It is also possible to not include these invisible parts of the markup in the page markup at once but to load it with a separate request if the user has scrolled the page and the elements marked by the mixin are now in the viewport. + +This can be useful if you don't want to load all the content on the page at once, but load it only if the user scrolls to it. For example, some ads from some advertising networks. + +### Lazy Template Mixin Example + +```html + +
+ + +``` From c7ee5e57436bdb0d6d34ae67963023f91baa753b Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 31 Jul 2024 11:15:33 +0300 Subject: [PATCH 7/9] docs(esl-lazy-template): update README --- src/modules/esl-lazy-template/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/modules/esl-lazy-template/README.md b/src/modules/esl-lazy-template/README.md index f66750ce0..627d9949a 100644 --- a/src/modules/esl-lazy-template/README.md +++ b/src/modules/esl-lazy-template/README.md @@ -10,6 +10,21 @@ Authors: *Dmytro Shovchko*. This can be useful if you don't want to load all the content on the page at once, but load it only if the user scrolls to it. For example, some ads from some advertising networks. +To use **ESLLazyTemplate** you need to include the following code: +```js + ESLLazyTemplate.register(); +``` + +You may also need to make additional settings to specify the viewport. The mixin uses Intersection Observer API to determine when the template position becomes visible and content should be added to the DOM. By default, it uses a browser viewport. However, you can change the viewport by specifying a special provider function that returns the element that is used as the viewport to check visibility. + +We provide such functionality. You can use `getViewportForEl()` from `esl-utils/dom/scroll` and set up **ESLLazyTemplate** with it. +```js + import { getViewportForEl } from '@exadel/esl/modules/esl-utils/dom/scroll'; + ESLLazyTemplate.viewportProvider = getViewportForEl; + ESLLazyTemplate.register(); +``` + + ### Lazy Template Mixin Example ```html From 018bb721b077e5679ec21517804aff46b2ca57d5 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Fri, 30 Aug 2024 17:25:48 +0300 Subject: [PATCH 8/9] refactor(esl-lazy-template): refactor viewport definition --- .../distance-to-viewport-alert.ts | 4 +-- site/src/site.ts | 3 -- .../core/esl-lazy-template.ts | 31 +++++++++++++------ 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts b/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts index e475fd867..78ef4fe27 100644 --- a/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts +++ b/site/src/esl-lazy-template-demo/distance-to-viewport-alert.ts @@ -3,10 +3,10 @@ import {ready} from '@exadel/esl/modules/esl-utils/decorators'; import {ESLEventUtils} from '@exadel/esl/modules/esl-utils/dom/events'; import {Rect} from '@exadel/esl/modules/esl-utils/dom/rect'; import {getWindowRect} from '@exadel/esl/modules/esl-utils/dom/window'; +import {getViewportForEl} from '@exadel/esl/modules/esl-utils/dom/scroll'; export class ESLDemoDistanceToViewportAlert extends ESLMixinElement { public static override is = 'distance-to-viewport-alert'; - public static viewportProvider: (node: Element) => Element | null = () => null; @ready protected override connectedCallback(): void { @@ -18,7 +18,7 @@ export class ESLDemoDistanceToViewportAlert extends ESLMixinElement { let topDistance; let bottomDistance; const elementRect = Rect.from(this.$host.getBoundingClientRect()); - const $root = ESLDemoDistanceToViewportAlert.viewportProvider(this.$host) as HTMLElement; + const $root = getViewportForEl(this.$host) as HTMLElement; if (!$root) { // window const windowRect = getWindowRect(); topDistance = elementRect.top - windowRect.height; diff --git a/site/src/site.ts b/site/src/site.ts index 82b419a88..5ef1436d5 100644 --- a/site/src/site.ts +++ b/site/src/site.ts @@ -46,7 +46,6 @@ import { } from '@exadel/esl/modules/all'; import {ESLRandomText} from '@exadel/esl/modules/esl-random-text/core'; -import {getViewportForEl} from '@exadel/esl/modules/esl-utils/dom/scroll'; import '@exadel/esl/modules/esl-media/providers/iframe-provider'; import '@exadel/esl/modules/esl-media/providers/html5/audio-provider'; @@ -81,7 +80,6 @@ ESLDemoBanner.register(); ESLDemoSwipeArea.register(); ESLDemoWheelArea.register(); ESLDemoPopupGame.register(); -ESLDemoDistanceToViewportAlert.viewportProvider = getViewportForEl; ESLDemoDistanceToViewportAlert.register(); // Test Content @@ -135,7 +133,6 @@ ESLAnimateMixin.register(); // Register ESL Mixins ESLRelatedTarget.register(); ESLOpenState.register(); -ESLLazyTemplate.viewportProvider = getViewportForEl; ESLLazyTemplate.register(); // Share component loading diff --git a/src/modules/esl-lazy-template/core/esl-lazy-template.ts b/src/modules/esl-lazy-template/core/esl-lazy-template.ts index f5e21837f..0e217ac66 100644 --- a/src/modules/esl-lazy-template/core/esl-lazy-template.ts +++ b/src/modules/esl-lazy-template/core/esl-lazy-template.ts @@ -2,21 +2,25 @@ import {ESLMixinElement} from '../../esl-mixin-element/core'; import {attr, listen, prop, memoize} from '../../esl-utils/decorators'; import {ESLIntersectionTarget, ESLIntersectionEvent} from '../../esl-event-listener/core/targets/intersection.target'; import {ExportNs} from '../../esl-utils/environment/export-ns'; +import {getViewportForEl} from '../../esl-utils/dom/scroll'; @ExportNs('LazyTemplate') export class ESLLazyTemplate extends ESLMixinElement { public static override is = 'esl-lazy-template'; - public static viewportProvider: (node: Element) => Element | null = () => null; @prop(750) baseMargin: number; + @prop([0, 0.01]) protected INTERSECTION_THRESHOLD: number[]; + /** URL to load content from */ @attr({name: ESLLazyTemplate.is}) public url?: string; + /** IntersectionObserver rootMargin value */ protected get rootMargin(): string { return `${this.baseMargin * this.connectionRatio}px`; } + /** Connection speed ratio */ protected get connectionRatio(): number { switch (navigator.connection?.effectiveType) { case 'slow-2g': @@ -27,18 +31,12 @@ export class ESLLazyTemplate extends ESLMixinElement { } } + /** Host element is a template */ protected get isHostTemplate(): boolean { return this.$host instanceof HTMLTemplateElement; } - protected get intersectionOptions(): IntersectionObserverInit { - return { - root: ESLLazyTemplate.viewportProvider(this.$host), - rootMargin: this.rootMargin, - threshold: [0.01] - }; - } - + /** LazyTemplate placeholder */ @memoize() public get $placeholder(): HTMLElement { const placeholder = document.createElement('div'); @@ -47,12 +45,19 @@ export class ESLLazyTemplate extends ESLMixinElement { return placeholder; } + /** LazyTemplate viewport (root element for IntersectionObservers checking visibility) */ + @memoize() + protected get $viewport(): Element | undefined { + return getViewportForEl(this.$host); + } + protected override disconnectedCallback(): void { super.disconnectedCallback(); this.$placeholder.remove(); memoize.clear(this, '$placeholder'); } + /** Loads content from the URL */ @memoize() protected async loadContent(url: string): Promise { try { @@ -66,12 +71,14 @@ export class ESLLazyTemplate extends ESLMixinElement { } } + /** Gets content from the URL or host template element */ protected async getContent(): Promise { if (this.url) return this.loadContent(this.url); if (this.isHostTemplate) return (this.$host as HTMLTemplateElement).content.cloneNode(true); return ''; } + /** Replaces host element with content */ protected async replaceWithContent(): Promise { const content = await this.getContent(); this.$host.replaceWith(content); @@ -79,7 +86,11 @@ export class ESLLazyTemplate extends ESLMixinElement { @listen({ event: ESLIntersectionEvent.IN, - target: (that: ESLLazyTemplate) => ESLIntersectionTarget.for(that.$placeholder, that.intersectionOptions) + target: (that: ESLLazyTemplate) => ESLIntersectionTarget.for(that.$placeholder, { + root: that.$viewport, + rootMargin: that.rootMargin, + threshold: that.INTERSECTION_THRESHOLD + }) }) protected _onIntersect(e: ESLIntersectionEvent): void { this.replaceWithContent(); From aadc0d7219c17c960d6d2edf8885647ea7505dff Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Fri, 30 Aug 2024 17:30:33 +0300 Subject: [PATCH 9/9] docs(esl-lazy-template): update README --- src/modules/esl-lazy-template/README.md | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/modules/esl-lazy-template/README.md b/src/modules/esl-lazy-template/README.md index 627d9949a..bf45b5f28 100644 --- a/src/modules/esl-lazy-template/README.md +++ b/src/modules/esl-lazy-template/README.md @@ -1,6 +1,6 @@ # [ESL](../../../) Lazy Template Mixin -Version: *1.0.0* +Version: *1.0.0-beta*. Authors: *Dmytro Shovchko*. @@ -15,16 +15,6 @@ To use **ESLLazyTemplate** you need to include the following code: ESLLazyTemplate.register(); ``` -You may also need to make additional settings to specify the viewport. The mixin uses Intersection Observer API to determine when the template position becomes visible and content should be added to the DOM. By default, it uses a browser viewport. However, you can change the viewport by specifying a special provider function that returns the element that is used as the viewport to check visibility. - -We provide such functionality. You can use `getViewportForEl()` from `esl-utils/dom/scroll` and set up **ESLLazyTemplate** with it. -```js - import { getViewportForEl } from '@exadel/esl/modules/esl-utils/dom/scroll'; - ESLLazyTemplate.viewportProvider = getViewportForEl; - ESLLazyTemplate.register(); -``` - - ### Lazy Template Mixin Example ```html