move offset logic into scroll-into-view

Author: jdkahn

addon-test-support/scroll-into-view-mock.js

@@ -5,11 +5,20 @@ export default function mockScrollIntoView() {
   let mockScrollIntoViewFunction = function () {
     elementsInvokedOn.push(this);
   };
+
+  let mockScrollToElementWithOffsetFunction = function (options) {
+    elementsInvokedOn.push(options);
+  };
+
   // manually mocking native function
-  let preExistingScrollFunction = window.Element.prototype.scrollIntoView;
+  let preExistingScrollIntoViewFunction =
+    window.Element.prototype.scrollIntoView;
+  let preExistingScrollToFunction = window.scrollTo;
   window.Element.prototype.scrollIntoView = mockScrollIntoViewFunction;
+  window.scrollTo = mockScrollToElementWithOffsetFunction;
+
   // helper fuctions that will be returned
-  let scrollIntoViewCalledWith = (selector) => {
+  let scrollIntoViewCalledWith = (selector, options = {}) => {
     let element;
     // check if it's a string and get the object
     if (typeof selector === 'string') {
@@ -18,11 +27,33 @@ export default function mockScrollIntoView() {
       // element was passed in
       element = selector;
     }
-    return elementsInvokedOn.includes(element);
+
+    if (!options.offset) {
+      return elementsInvokedOn.includes(element);
+    }
+
+    if (!element || !document) {
+      return;
+    }
+    const { behavior = 'smooth', offset = 0, left = 0 } = options;
+
+    const elementTop =
+      element.getBoundingClientRect().top -
+      document.body.getBoundingClientRect().top -
+      offset;
+
+    return elementsInvokedOn.some((calledOptions) => {
+      return (
+        behavior === calledOptions.behavior &&
+        elementTop === calledOptions.top &&
+        left === calledOptions.left
+      );
+    });
   };
 
   let resetMock = () => {
-    window.Element.prototype.scrollIntoView = preExistingScrollFunction;
+    window.Element.prototype.scrollIntoView = preExistingScrollIntoViewFunction;
+    window.scrollTo = preExistingScrollToFunction;
   };
 
   return {

addon-test-support/scroll-to-element-with-offset-mock.js

@@ -12,7 +12,20 @@ export default modifier(function scrollIntoView(
 
   shouldScrollPromise.then((shouldScrollValue) => {
     if (shouldScrollValue && element && !hasBeenRemoved) {
-      element.scrollIntoView(options);
+      if (!options?.offset) {
+        element.scrollIntoView(options);
+      } else {
+        const { behavior = 'auto', offset = 0, left = 0 } = options;
+
+        window?.scrollTo({
+          behavior,
+          top:
+            element.getBoundingClientRect().top -
+            document.body.getBoundingClientRect().top -
+            offset,
+          left,
+        });
+      }
     }
   });
 

addon/modifiers/scroll-into-view.js

@@ -3,18 +3,24 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class EsButtonComponent extends Component {
+  @tracked shouldScrollWithOffset;
   @tracked shouldScroll;
   @tracked offset = 25;
 
   @action
-  onScrollToElementWithOffset() {
+  onScrollIntoView() {
     this.shouldScroll = true;
   }
 
+  @action
+  onScrollIntoViewWithOffset() {
+    this.shouldScrollWithOffset = true;
+  }
+
   @action
   onOffsetChange(event) {
     // clear the shouldScroll value to prevent scrolling on offset change
-    this.shouldScroll = false;
+    this.shouldScrollWithOffset = false;
     this.offset = event.target.value;
   }
 }

addon/modifiers/scroll-to-element-with-offset.js

@@ -1,19 +1,41 @@
 # scroll-into-view
 
-This modifier calls `scrollIntoView` on the modified element.
+This modifier scrolls to the associated element. By default it uses `scrollIntoView`, but if an offset is passed as an option it uses `scrollTo` and calculates the `options.top` attribute.
 
 
 ## When you should use this modifier
 
-You should use this modifier whenever you need to have an element scrolled into view on element insert.
+You should use this modifier whenever you need to have an element scrolled into view. If there is a element, such as a fixed header, passing in an `offset` will scroll to the element minus the `offset` value.
+
 
 
 ## Basic Usage
 
 `scroll-into-view` expects the named `shouldScroll` parameter and an optional `options` named parameter. See [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for the list of possible values and properties of `options`.
 
-```handlebars{data-execute=false}
-<div {{scroll-into-view shouldScroll=this.shouldScrollPromise options=true}}></div>
+
+```handlebars
+  <div {{scroll-into-view shouldScroll=this.shouldScroll options=(hash behavior="smooth")}}>
+    <button type="button" {{on "click" this.onScrollIntoView}}>
+      Trigger scroll-into-view on click
+    </button>
+  </div>
+```
+
+`shouldScroll` can be either a Boolean or a Promise that resolves to a truthy or falsy value. It does not handle a rejected Promise.
+
+
+### Usage with offset
+
+When passing in an offset, it will call `scrollTo`. See [scrollTo](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) for the list of possible values and properties of `options`.
+
+```handlebars
+  <div {{scroll-into-view shouldScroll=this.shouldScrollWithOffset options=(hash offset=this.offset behavior="smooth")}}>
+    <input type="number" value={{this.offset}} {{on "change" this.onOffsetChange}}>
+    <button type="button" {{on "click" this.onScrollIntoViewWithOffset}}>
+      Trigger scroll-into-view with offset on click
+    </button>
+  </div>
 ```
 
 `shouldScroll` can be either a Boolean or a Promise that resolves to a truthy or falsy value. It does not handle a rejected Promise.
@@ -45,9 +67,19 @@ function('test scroll into view', (assert) => {
   ...
   assert.ok(this.mockHelperFunctions.scrollIntoViewCalledWith('[data-test-scroll-into-view-selector]'), 'element scrolled into view');
 });
+
+function('test scroll into view with offset', (assert) => {
+  ...
+  await render(
+    hbs`<div {{scroll-into-view shouldScroll=true options=(hash offset=25)}} data-test-scroll-into-view-selector></div>`
+  );
+  ...
+  assert.ok(this.mockHelperFunctions.scrollIntoViewCalledWith('[data-test-scroll-into-view-selector]', { behavior: 'smooth', top: 25, left: 0 }), 'scrolled to element');
+});
 ```
 
 
 ## Browser Support
 
 This feature is [supported](https://caniuse.com/?search=scrollIntoView) in the latest versions of every browser.
+This feature is [supported](https://caniuse.com/?search=scrollTo) in the latest versions of every browser.

app/modifiers/scroll-to-element-with-offset.js

@@ -46,5 +46,46 @@ module(
         )
       );
     });
+
+    test('scroll into view returns correct parameters with using offset', async function (assert) {
+      this.options = {
+        offset: 10,
+        behavior: 'auto',
+        left: 10,
+      };
+
+      await render(
+        hbs`<div style="height: 10px" {{scroll-into-view shouldScroll=true options=this.options}} data-test-scroll-into-view-selector></div>
+        <div style="height: 10px" data-test-scroll-into-view-not-modified></div>
+        <div style="height: 10px" {{scroll-into-view shouldScroll=false options=this.options}} data-test-scroll-into-view-not-scrolled></div>`
+      );
+
+      assert.ok(
+        this.mockHelperFunctions.scrollIntoViewCalledWith(
+          '[data-test-scroll-into-view-selector]',
+          this.options
+        ),
+        'scrollIntoViewCalledWith should return true for the given element selector'
+      );
+      assert.ok(
+        this.mockHelperFunctions.scrollIntoViewCalledWith(
+          find('[data-test-scroll-into-view-selector]'),
+          this.options
+        ),
+        'scrollIntoViewCalledWith should return true for the given element'
+      );
+      assert.notOk(
+        this.mockHelperFunctions.scrollIntoViewCalledWith(
+          '[data-test-scroll-into-view-not-modified]'
+        ),
+        "scrollIntoViewCalledWith should return false if the element doesn't have the modifier"
+      );
+      assert.notOk(
+        this.mockHelperFunctions.scrollIntoViewCalledWith(
+          '[data-test-scroll-into-view-not-scrolled]'
+        ),
+        'scrollIntoViewCalledWith should return false if the modifier was not triggered'
+      );
+    });
   }
 );