feat(esl-lazy-template): introducing esl-lazy-template mixin to load HTML parts lazy and asynchronous (#2535)

Author: dshovchko

.commitlintrc.yml

@@ -41,6 +41,7 @@ rules:
       - esl-forms
       - esl-image
       - esl-image-utils
+      - esl-lazy-template
       - esl-media
       - esl-media-query
       - esl-mixin-element

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';
+import {getViewportForEl} from '@exadel/esl/modules/esl-utils/dom/scroll';
+
+export class ESLDemoDistanceToViewportAlert extends ESLMixinElement {
+  public static override is = 'distance-to-viewport-alert';
+
+  @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 = getViewportForEl(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});
+  }
+}

site/src/site.ts

@@ -36,15 +36,15 @@ import {
   ESLAnimateMixin,
   ESLRelatedTarget,
   ESLOpenState,
-
   ESLCarousel,
   ESLCarouselNavDots,
   ESLCarouselNavMixin,
   ESLCarouselTouchMixin,
   ESLCarouselWheelMixin,
   ESLCarouselKeyboardMixin,
   ESLCarouselRelateToMixin,
-  ESLCarouselAutoplayMixin
+  ESLCarouselAutoplayMixin,
+  ESLLazyTemplate
 } from '@exadel/esl/modules/all';
 
 import {ESLRandomText} from '@exadel/esl/modules/esl-random-text/core';
@@ -65,6 +65,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();
 
@@ -81,6 +82,7 @@ ESLDemoBanner.register();
 ESLDemoSwipeArea.register();
 ESLDemoWheelArea.register();
 ESLDemoPopupGame.register();
+ESLDemoDistanceToViewportAlert.register();
 
 // Test Content
 ESLRandomText.register('lorem-ipsum');
@@ -136,6 +138,7 @@ ESLAnimateMixin.register();
 // Register ESL Mixins
 ESLRelatedTarget.register();
 ESLOpenState.register();
+ESLLazyTemplate.register();
 
 // Share component loading
 import(/* webpackChunkName: 'common/esl-share' */'./esl-share/esl-share');

site/static/assets/examples/lazy-template.svg

@@ -0,0 +1,9 @@
+<div id="template-from-url-1"
+    class="text-center"
+    distance-to-viewport-alert
+    style="background: lightyellow; border: 3px dashed darkorange;">
+  <p>...</p>
+  <p>I am content No.1 which was added to DOM by the lazy template and loaded from the specified URL</p>
+  <p>I am inside DIV with id="template-from-url-1".</p>
+  <p>...</p>
+</div>

site/static/assets/lazy-templates/animated-geometric-shapes-background.svg

@@ -0,0 +1,9 @@
+<div id="template-from-url-2"
+    class="text-center"
+    distance-to-viewport-alert
+    style="background: lightyellow; border: 3px dashed darkorange;">
+  <p>...</p>
+  <p>I am content No.2 which was added to DOM by the lazy template and loaded from the specified URL</p>
+  <p>I am inside DIV with id="template-from-url-2".</p>
+  <p>...</p>
+</div>