feat(esl-utils): ScrollIntoView new implementation

pages/src/anchor/anchor-link.ts

@@ -2,6 +2,7 @@ import {ESLMixinElement} from '../../../src/modules/esl-mixin-element/ui/esl-mix
 import {listen, memoize} from '../../../src/modules/esl-utils/decorators';
 import {afterNextRender} from '../../../src/modules/esl-utils/async/raf';
 import {ESLEventUtils} from '../../../src/modules/esl-utils/dom/events';
+import {scrollIntoView} from '../../../src/modules/esl-utils/dom/scroll';
 
 /**
  * Demo sample of anchor mixin
@@ -27,12 +28,8 @@ export class ESLDemoAnchorLink extends ESLMixinElement {
     if (!$target) return console.warn('No anchor target found');
 
     ESLEventUtils.dispatch($target, 'esl:show:request');
-    afterNextRender(() => {
-      // TODO: replace with scroll ext version
-      // scrollIntoView($target, {behavior: 'smooth'})
-      //   .then(() => console.log('Scroll to successful: ', $target));
-      $target.scrollIntoView({behavior: 'smooth'});
-    });
+    ($target as HTMLElement).style.scrollMarginTop = '60px';
+    afterNextRender(() => scrollIntoView($target, {behavior: 'smooth', block: 'start'}));
   }
 
   @listen('click')

pages/src/esl-scrollable-controls-demo/scrollable-controls.less

@@ -0,0 +1,53 @@
+@import (reference) "../common/variables.less";
+
+esl-d-scroll-controls {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: @primary-blue;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 40px 0;
+}
+
+.esl-d-scroll-controls {
+  &-ul {
+    margin: 0;
+    flex-wrap: wrap;
+    list-style: none;
+    color: white;
+  }
+
+  @media @lg-xl {
+    &-ul {
+      width: 100%;
+      display: flex;
+    }
+  }
+
+  &-li {
+    margin-right: 10px;
+    @media @md-lg {
+      &:first-child {
+        flex: 0 1 100%;
+      }
+    }
+  }
+
+  &-behavior {
+    display: block;
+    margin: 0;
+    list-style: none;
+
+    &-option {
+      margin-top: 5px;
+      margin-right: 20px;
+    }
+  }
+
+  &-button {
+    background-color: white;
+    margin: 20px 0;
+    width: 100px;
+  }
+}

pages/src/esl-scrollable-controls-demo/scrollable-controls.ts

@@ -0,0 +1,57 @@
+import {TraversingQuery} from '../../../src/modules/esl-traversing-query/core/esl-traversing-query';
+import {attr, ESLBaseElement, listen} from '../../../src/modules/esl-base-element/core';
+import {scrollIntoView} from '../../../src/modules/esl-utils/dom/scroll';
+import type {ESLSelect} from '../../../src/modules/all';
+
+export class ESLDemoScrollControls extends ESLBaseElement {
+  static is = 'esl-d-scroll-controls';
+
+  @attr() public target: string;
+
+  protected connectedCallback(): void {
+    TraversingQuery.all(this.target).forEach((el: HTMLElement) => {
+      const scrollNameValue = el.getAttribute('scrollname');
+      if (!scrollNameValue) return;
+      const option = document.createElement('option');
+      option.innerHTML = scrollNameValue;
+      const target = TraversingQuery.first('::find(#target)', this) as ESLSelect;
+      target.appendChild(option);
+    });
+    super.connectedCallback();
+  }
+
+  // @listen({event: 'click', selector: '#scrollIntoView'})
+  @listen({event: 'click', selector: '.esl-d-scroll-controls-button'})
+  private onClick(e: PointerEvent): void {
+    const behaviorOptions = TraversingQuery.all('::find([name="scroll-behavior"])', this) as HTMLInputElement[];
+    const behavior = behaviorOptions.find((radio) => radio.checked)!.value as ScrollBehavior;
+
+    const block = (TraversingQuery.first('::find(#options_block)', this) as ESLSelect).value as ScrollLogicalPosition;
+    const inline = (TraversingQuery.first('::find(#options_inline)', this) as ESLSelect).value as ScrollLogicalPosition;
+
+    const targetSelect = TraversingQuery.first('::find(#target)', this) as ESLSelect;
+    const target = TraversingQuery.first(`[scrollname="${targetSelect.value?.toString()}"]`);
+
+    const offsetInline = Number((TraversingQuery.first('::find(#offsetInline)', this) as HTMLInputElement).value);
+    const offsetBlock = Number((TraversingQuery.first('::find(#offsetBlock)', this) as HTMLInputElement).value);
+    (target as HTMLElement).style.scrollMarginInline = `${offsetInline}px ${offsetInline}px`;
+    (target as HTMLElement).style.scrollMarginBlock = `${offsetBlock}px ${offsetBlock}px`;
+    if ((e.target as HTMLElement).id.includes('Native')) {
+      target?.scrollIntoView({behavior, block, inline});
+    } else {
+      scrollIntoView(target!, {behavior, block, inline})
+        .then(() => this.$$fire('esl:alert:show',
+          {detail: {
+            text: 'Sucessful scroll to given position',
+            cls: 'alert alert-info'
+          }})
+        )
+        .catch(() => this.$$fire('esl:alert:show',
+          {detail: {
+            text: 'Failed to scroll to given position',
+            cls: 'alert alert-danger'
+          }})
+        );
+    }
+  }
+}

pages/src/esl-scrollable-controls-demo/scrollable-list-demo.less

@@ -0,0 +1,64 @@
+@import (reference) "../common/variables.less";
+
+.scrollable-test {
+  &-lvl {
+    &-1 {
+      display: flex;
+      margin: 30px;
+      min-width: 200px;
+      height: 200px;
+
+      &-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        width: 1050px;
+        margin: 600px;
+      }
+    }
+
+    &-2 {
+      height: 600px;
+      width: 600px;
+
+      &-wrapper {
+        height: 600px;
+        width: 600px;
+        margin: 1000px 2000px;
+      }
+    }
+
+    &-3-wrapper {
+      background-color: @secondary-green;
+    }
+  }
+
+  &-dynamic {
+    background-color: @secondary-blue;
+    color: white;
+    padding: 30px;
+    font-size: 2rem;
+    text-align: center;
+    min-height: 200px;
+    margin-bottom: 40px;
+
+    &-expandable {
+      background-color: @secondary-green;
+      transition: min-height .9s ease;
+    }
+
+    &-expanded {
+      min-height: 1000px;
+    }
+
+    &-target {
+      background-color: @secondary-blue;
+    }
+  }
+
+  &-p {
+    color: white;
+    margin: auto;
+    font-size: 4em;
+  }
+}

pages/src/localdev.less

@@ -33,6 +33,8 @@
 
 @import "./collection-grid/collection-grid.less";
 @import "./esl-media-demo/test-media.less";
+@import "./esl-scrollable-controls-demo/scrollable-list-demo.less";
+@import "./esl-scrollable-controls-demo/scrollable-controls.less";
 
 @import "../../src/modules/all.less";
 @import "../../src/modules/draft/all.less";

pages/src/localdev.ts

@@ -50,6 +50,7 @@ import './esl-media-demo/test-media-source';
 
 import {ESLDemoBackLink} from './back-link/back-link';
 import {ESLDemoMarquee} from './landing/landing';
+import {ESLDemoScrollControls} from './esl-scrollable-controls-demo/scrollable-controls';
 import {ESLDemoSearchBox} from './navigation/header/header-search';
 import {ESLDemoSearchPageWrapper} from './search/search';
 import {ESLDemoSidebar} from './navigation/navigation';
@@ -62,6 +63,7 @@ ESLDemoSidebar.register();
 ESLDemoMarquee.register();
 ESLDemoSearchBox.register();
 ESLDemoSearchPageWrapper.register();
+ESLDemoScrollControls.register();
 ESLDemoAnchorLink.register();
 ESLDemoBackLink.register();
 

pages/views/_includes/scroll/scroll-options.njk

@@ -0,0 +1,82 @@
+{% macro scrollControls(target) %}
+  <esl-d-scroll-controls target="{{ target }}">
+    <form style="width: inherit">
+      <ul class="esl-d-scroll-controls-ul">
+        <li class="esl-d-scroll-controls-li">
+          <label class="form-label">Behavior</label>
+
+          <ul class="esl-d-scroll-controls-behavior">
+            <li class="esl-d-scroll-controls-behavior-option">
+              <input type="radio" name="scroll-behavior" id="smooth" value="smooth">
+              <label class="form-label">Smooth</label>
+            </li>
+
+            <li class="esl-d-scroll-controls-behavior-option">
+              <input type="radio" name="scroll-behavior" id="auto" value="auto" checked>
+              <label class="form-label">Auto</label>
+            </li>
+          </ul>
+        </li>
+
+        <li class="esl-d-scroll-controls-li">
+          <label for="target" class="form-label">Target</label>
+          <esl-select style="display: block" placeholder="Target">
+            <select esl-select-target
+                    id="target"
+                    name="target"
+                    class="form-control">
+            </select>
+          </esl-select>
+        </li>
+
+        <li class="esl-d-scroll-controls-li">
+          <label for="options_block" class="form-label">Block</label>
+          <esl-select style="display: block"
+                      placeholder="Block"
+                      select-all-label="Block">
+            <select esl-select-target
+                    id="options_block"
+                    name="options_block"
+                    class="form-control">
+              <option>start</option>
+              <option>center</option>
+              <option>end</option>
+              <option>nearest</option>
+            </select>
+          </esl-select>
+        </li>
+
+        <li class="esl-d-scroll-controls-li">
+          <label for="options_inline" class="form-label">Inline</label>
+          <esl-select style="display: block" placeholder="Inline">
+            <select esl-select-target
+                    id="options_inline"
+                    name="options_inline"
+                    class="form-control">
+              <option>start</option>
+              <option>center</option>
+              <option>end</option>
+              <option>nearest</option>
+            </select>
+          </esl-select>
+        </li>
+
+        <li class="esl-d-scroll-controls-li">
+          <label>OffsetBlock</label>
+          <input type="text" class="form-control" id="offsetBlock" min="0" max="2000" value="0" size="3">
+        </li>
+
+        <li class="esl-d-scroll-controls-li">
+          <label>OffsetInline</label>
+          <input type="text" class="form-control" id="offsetInline" min="0" max="2000" value="0" size="3">
+        </li>
+
+        <li class="menu-item" style="margin-left: auto">
+          <button type="button" class="btn btn-sec-orange esl-d-scroll-controls-button" id="scrollIntoViewNative">Native</button>
+          <button type="button" class="btn btn-sec-orange esl-d-scroll-controls-button" id="scrollIntoViewPonyfill">Ponyfill</button>
+        </li>
+      </ul>
+    </form>
+    <esl-alert style="position: fixed"></esl-alert>
+  </esl-d-scroll-controls>
+{% endmacro %}

pages/views/examples/anchors.njk

@@ -0,0 +1,83 @@
+---
+layout: empty
+title: Anchors
+name: Anchors
+tags: [examples, draft]
+icon: examples/accordion.svg
+scrollbar: true
+aside:
+  components:
+    - esl-trigger
+    - esl-panel
+---
+
+{% import 'lorem.njk' as lorem %}
+
+{% macro anchorNav() %}
+<ul class="mx-4">
+  <li><a esl-d-anchor class="btn-link" href="#II-1">Scroll to II - 1</a></li>
+  <li><a esl-d-anchor class="btn-link" href="#II-2">Scroll to II - 2</a></li>
+  <li><a esl-d-anchor class="btn-link" href="#II-3">Scroll to II - 3</a></li>
+  <li><a esl-d-anchor class="btn-link" href="#II-4">Scroll to II - 4</a></li>
+  <li><a esl-d-anchor class="btn-link" href="#II-11">Scroll to II - 11</a></li>
+</ul>
+{% endmacro %}
+
+<nav class="mb-1">
+  <h2>Accordion Block anchors</h2>
+  {{ anchorNav() }}
+</nav>
+<section class="row">
+  <div class="col-12">
+    <esl-panel-group class="accordion-group mb-4">
+      <div class="esl-d-accordion">
+        <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
+          Toggle Accordion #1
+        </esl-trigger>
+        <esl-panel open class="esl-d-accordion-panel">
+          <div id="II-1" class="esl-d-accordion-body">
+            {{ lorem.paragraphs(3) }}
+          </div>
+        </esl-panel>
+      </div>
+      <div class="esl-d-accordion">
+        <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
+          Toggle Accordion #2
+        </esl-trigger>
+        <esl-panel class="esl-d-accordion-panel">
+          <div id="II-2" class="esl-d-accordion-body">
+            {{ lorem.paragraphs(7) }}
+          </div>
+        </esl-panel>
+      </div>
+      <h4 id="II-11">Lorem ipsum #11</h4>
+      <div class="esl-d-accordion">
+        <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
+          Toggle Accordion #3
+        </esl-trigger>
+        <esl-panel class="esl-d-accordion-panel">
+          <div id="II-3" class="esl-d-accordion-body">
+            {{ lorem.paragraphs(2) }}
+          </div>
+        </esl-panel>
+      </div>
+      <div class="esl-d-accordion">
+        <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
+          Toggle Accordion #4
+        </esl-trigger>
+        <esl-panel open class="esl-d-accordion-panel">
+          <div id="II-4" class="esl-d-accordion-body">
+            {{ lorem.paragraphs(8) }}
+          </div>
+        </esl-panel>
+      </div>
+    </esl-panel-group>
+  </div>
+  <hr/>
+  <div>
+    {{ lorem.paragraphs(3) }}
+  </div>
+</section>
+<nav class="mb-1">
+  {{ anchorNav() }}
+</nav>