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,6 +1,6 @@
-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);
   }
@@ -10,14 +10,15 @@ export const $ = (selector: HTMLElement): HTMLElement => {
 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,
@@ -27,24 +28,30 @@ export const cumulativeOffset = (element: HTMLElement | any): ScrollToElementPos
 
 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;
 };
 
 export const noop = () => {};

src/services/service.ts

@@ -19,7 +19,7 @@ const defaultOptions: ScrollToElementOptions = {
 
 // Scroll to internal implementation
 const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
-  const { duration, delay, easing, x = 0, y = 0, scrollX, scrollY, onStart, onDone, onAborting, container, element } = options;
+  const { duration, delay, easing, x = 0, y = 0, scrollX, scrollY, onStart, onDone, container, onAborting, element } = options;
 
   let { offset } = options;
 
@@ -44,7 +44,7 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
   const startTime = performance.now() + delay;
   const endTime = startTime + duration;
 
-  const scrollToTopLeft = (el: HTMLElement, top: number, left: number): void => {
+  const scrollToTopLeft = (el: HTMLElement | string, top: number, left: number): void => {
     if (scrollX) scrollLeft(el, left);
     if (scrollY) scrollTop(el, top);
   };
@@ -94,9 +94,8 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
   return stop;
 };
 
-// Helper functions
-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;
@@ -150,8 +149,8 @@ const makeScrollToAction = (scrollToFunc: Function) => (node: Node, options: Scr
   node.addEventListener('click', handle);
   node.addEventListener('touchstart', handle);
   return {
-    update(options: ScrollToElementOptions): void {
-      current = options;
+    update(opts: ScrollToElementOptions): void {
+      current = opts;
     },
     destroy(): void {
       node.removeEventListener('click', handle);