fix(types): allow string or element

Author: bartholomej

src/global.interface.ts

@@ -11,7 +11,7 @@ export interface ScrollToElementOptions {
   onDone?: any;
   container?: any;
   onAborting?: any;
-  element?: HTMLElement;
+  element?: HTMLElement | string;
 }
 
 export interface ScrollToElementPosition {

src/helpers/helper.ts

@@ -1,50 +1,55 @@
-import { ScrollToElementOptions, ScrollToElementPosition } from '../global.interface';
+import { ScrollToElementOptions, ScrollToElementPosition } from './../global.interface';
 
-export const $ = (selector: HTMLElement): HTMLElement => {
+export const $ = (selector: HTMLElement | string): HTMLElement => {
   if (typeof selector === 'string') {
     return document.querySelector(selector);
   }
   return selector;
 };
 
-export const extend = (...args: ScrollToElementOptions[]): ScrollToElementOptions =>
-  Object.assign({}, ...args);
+export const extend = (...args: ScrollToElementOptions[]): ScrollToElementOptions => Object.assign({}, ...args);
 
 export const cumulativeOffset = (element: HTMLElement | any): ScrollToElementPosition => {
+  let el = element;
   let top = 0;
   let left = 0;
 
   do {
-    top += element.offsetTop || 0;
-    left += element.offsetLeft || 0;
-    element = element.offsetParent;
-  } while (element);
+    top += el.offsetTop || 0;
+    left += el.offsetLeft || 0;
+    el = el.offsetParent;
+  } while (el);
 
   return {
     top,
     left
   };
 };
 
-export const directScroll = (element: HTMLElement | any): boolean =>
-  element && element !== document && element !== document.body;
+export const directScroll = (element: HTMLElement | any): boolean => element && element !== document && element !== document.body;
 
-export const scrollTop = (element: HTMLElement | any, value?: number): number => {
+export const scrollTop = (el: HTMLElement | string, value?: number): number => {
+  const element = $(el);
   const inSetter = value !== undefined;
   if (directScroll(element)) {
-    return inSetter ? (element.scrollTop = value) : element.scrollTop;
+    const result = inSetter ? (element.scrollTop = value) : element.scrollTop;
+    return result;
   }
-  return inSetter
+  const res = inSetter
     ? (document.documentElement.scrollTop = document.body.scrollTop = value)
     : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+  return res;
 };
 
-export const scrollLeft = (element: HTMLElement, value?: number): number => {
+export const scrollLeft = (el: HTMLElement | string, value?: number): number => {
+  const element = $(el);
   const inSetter = value !== undefined;
   if (directScroll(element)) {
-    return inSetter ? (element.scrollLeft = value) : element.scrollLeft;
+    const res = inSetter ? (element.scrollLeft = value) : element.scrollLeft;
+    return res;
   }
-  return inSetter
+  const res = inSetter
     ? (document.documentElement.scrollLeft = document.body.scrollLeft = value)
     : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return res;
 };

src/services/service.ts

@@ -1,7 +1,7 @@
 import { cubicInOut } from 'svelte/easing';
 import { loop, noop, now } from 'svelte/internal';
 import { ScrollToElementOptions } from '../global.interface';
-import { $, cumulativeOffset, extend, scrollLeft, scrollTop } from '../helpers/helper.js';
+import { $, cumulativeOffset, extend, scrollLeft, scrollTop } from '../helpers/helper';
 
 const defaultOptions: ScrollToElementOptions = {
   container: 'body',
@@ -17,20 +17,7 @@ const defaultOptions: ScrollToElementOptions = {
 };
 
 const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
-  const {
-    duration,
-    delay,
-    easing,
-    x = 0,
-    y = 0,
-    scrollX,
-    scrollY,
-    onStart,
-    onDone,
-    container,
-    onAborting,
-    element
-  } = options;
+  const { duration, delay, easing, x = 0, y = 0, scrollX, scrollY, onStart, onDone, container, onAborting, element } = options;
 
   let { offset } = options;
 
@@ -55,9 +42,9 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
   const startTime = now() + delay;
   const endTime = startTime + duration;
 
-  function scrollToTopLeft(element: HTMLElement, top: number, left: number): void {
-    if (scrollX) scrollLeft(element, left);
-    if (scrollY) scrollTop(element, top);
+  function scrollToTopLeft(el: HTMLElement | string, top: number, left: number): void {
+    if (scrollX) scrollLeft(el, left);
+    if (scrollY) scrollTop(el, top);
   }
 
   function start(delayStart: number | boolean): void {
@@ -106,85 +93,80 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
   return stop;
 };
 
-const proceedOptions = (options: ScrollToElementOptions): ScrollToElementOptions => {
-  const opts = extend({}, defaultOptions, options);
+const proceedOptions = (options: ScrollToElementOptions | string): ScrollToElementOptions => {
+  const opts = extend({}, defaultOptions, options as ScrollToElementOptions);
   opts.container = $(opts.container);
   opts.element = $(opts.element);
   return opts;
 };
 
 const scrollContainerHeight = (containerElement: HTMLElement | Document): number => {
   if (containerElement && containerElement !== document && containerElement !== document.body) {
-    return (
-      (containerElement as HTMLElement).scrollHeight -
-      (containerElement as HTMLElement).offsetHeight
-    );
+    return (containerElement as HTMLElement).scrollHeight - (containerElement as HTMLElement).offsetHeight;
   }
   const { body } = document;
   const html = document.documentElement;
 
-  return Math.max(
-    body.scrollHeight,
-    body.offsetHeight,
-    html.clientHeight,
-    html.scrollHeight,
-    html.offsetHeight
-  );
+  return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
 };
 
 const setGlobalOptions = (options: ScrollToElementOptions): void => {
   extend(defaultOptions, options || {});
 };
 
-const scrollTo = (options: ScrollToElementOptions): (() => void) =>
-  scrollToInternal(proceedOptions(options));
+const scrollTo = (options: ScrollToElementOptions): (() => void) => scrollToInternal(proceedOptions(options));
 
 const scrollToBottom = (options?: ScrollToElementOptions): (() => void) => {
-  options = proceedOptions(options);
+  const opts = proceedOptions(options);
 
   return scrollToInternal(
-    extend(options, {
+    extend(opts, {
       element: null,
       y: scrollContainerHeight(options.container)
     })
   );
 };
 
 const scrollToTop = (options?: ScrollToElementOptions): (() => void) => {
-  options = proceedOptions(options);
+  const opts = proceedOptions(options);
 
   return scrollToInternal(
-    extend(options, {
+    extend(opts, {
       element: null,
       y: 0
     })
   );
 };
 
-const makeScrollToAction =
-  (scrollToFunc: Function) => (node: Node, options: ScrollToElementOptions) => {
-    let current = options;
-    const handle: EventListenerOrEventListenerObject = (e: Event) => {
-      e.preventDefault();
-      scrollToFunc(typeof current === 'string' ? { element: current } : current);
-    };
-    node.addEventListener('click', handle);
-    node.addEventListener('touchstart', handle);
-    return {
-      update(options: ScrollToElementOptions): void {
-        current = options;
-      },
-      destroy(): void {
-        node.removeEventListener('click', handle);
-        node.removeEventListener('touchstart', handle);
-      }
-    };
+const makeScrollToAction = (scrollToFunc: Function) => (node: Node, options: ScrollToElementOptions) => {
+  let current = options;
+  // eslint-disable-next-line no-undef
+  const handle: EventListenerOrEventListenerObject = (e: Event) => {
+    e.preventDefault();
+    scrollToFunc(typeof current === 'string' ? { element: current } : current);
+  };
+  node.addEventListener('click', handle);
+  node.addEventListener('touchstart', handle);
+  return {
+    update(opts: ScrollToElementOptions): void {
+      current = opts;
+    },
+    destroy(): void {
+      node.removeEventListener('click', handle);
+      node.removeEventListener('touchstart', handle);
+    }
   };
+};
 
 // Actions
 export const scrollto = makeScrollToAction(scrollTo);
 export const scrolltotop = makeScrollToAction(scrollToTop);
 export const scrolltobottom = makeScrollToAction(scrollToBottom);
 
 // Methods
-export const animateScroll = { scrollTo, scrollToTop, scrollToBottom, setGlobalOptions };
+export const animateScroll = {
+  scrollTo,
+  scrollToTop,
+  scrollToBottom,
+  setGlobalOptions
+};