@materializecss/materialize 2.0.0-alpha → 2.0.2-alpha

package/src/scrollspy.ts

@@ -1,223 +1,263 @@
-import { Component } from "./component";
-import { M } from "./global";
 import anim from "animejs";
 
-let _defaults = {
+import { Utils } from "./utils";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface ScrollSpyOptions extends BaseOptions {
+  /**
+   * Throttle of scroll handler.
+   * @default 100
+   */
+  throttle: number;
+  /**
+   * Offset for centering element when scrolled to.
+   * @default 200
+   */
+  scrollOffset: number;
+  /**
+   * Class applied to active elements.
+   * @default 'active'
+   */
+  activeClass: string;
+  /**
+   * Used to find active element.
+   * @default id => 'a[href="#' + id + '"]'
+   */
+  getActiveElement: (id: string) => string;
+};
+
+let _defaults: ScrollSpyOptions = {
   throttle: 100,
   scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
   activeClass: 'active',
   getActiveElement: (id: string): string => { return 'a[href="#'+id+'"]'; }
 };
 
-  export class ScrollSpy extends Component {
-    el: HTMLElement;
-    static _elements: ScrollSpy[];
-    static _count: number;
-    static _increment: number;
-    tickId: number;
-    id: any;
-    static _elementsInView: ScrollSpy[];
-    static _visibleElements: any[];
-    private _handleThrottledResizeBound: any;
-    private _handleWindowScrollBound: any;
-    static _ticks: number;
-
-    constructor(el, options) {
-      super(ScrollSpy, el, options);
-      (this.el as any).M_ScrollSpy = this;
-      this.options = {...ScrollSpy.defaults, ...options};
-      ScrollSpy._elements.push(this);
-      ScrollSpy._count++;
-      ScrollSpy._increment++;
-      this.tickId = -1;
-      this.id = ScrollSpy._increment;
-      this._setupEventHandlers();
-      this._handleWindowScroll();
-    }
+export class ScrollSpy extends Component<ScrollSpyOptions> {
+  static _elements: ScrollSpy[];
+  static _count: number;
+  static _increment: number;
+  tickId: number;
+  id: any;
+  static _elementsInView: ScrollSpy[];
+  static _visibleElements: any[];
+  static _ticks: number;
 
-    static get defaults() {
-      return _defaults;
-    }
+  constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>) {
+    super(el, options, ScrollSpy);
+    (this.el as any).M_ScrollSpy = this;
 
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
+    this.options = {
+      ...ScrollSpy.defaults,
+      ...options
+    };
 
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_ScrollSpy;
-    }
+    ScrollSpy._elements.push(this);
+    ScrollSpy._count++;
+    ScrollSpy._increment++;
+    this.tickId = -1;
+    this.id = ScrollSpy._increment;
+    this._setupEventHandlers();
+    this._handleWindowScroll();
+  }
 
-    destroy() {
-      ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
-      ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
-      ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1);
-      ScrollSpy._count--;
-      this._removeEventHandlers();
-      const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
-      actElem.classList.remove(this.options.activeClass);
-      (this.el as any).M_ScrollSpy = undefined;
-    }
+  static get defaults(): ScrollSpyOptions {
+    return _defaults;
+  }
 
-    _setupEventHandlers() {
-      let throttledResize = M.throttle(this._handleWindowScroll, 200);
-      this._handleThrottledResizeBound = throttledResize.bind(this);
-      this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
-      if (ScrollSpy._count === 1) {
-        window.addEventListener('scroll', this._handleWindowScrollBound);
-        window.addEventListener('resize', this._handleThrottledResizeBound);
-        document.body.addEventListener('click', this._handleTriggerClick);
-      }
+  /**
+   * Initializes instance of ScrollSpy.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
+  /**
+   * Initializes instances of ScrollSpy.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
+  /**
+   * Initializes instances of ScrollSpy.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<ScrollSpyOptions> = {}): ScrollSpy | ScrollSpy[] {
+    return super.init(els, options, ScrollSpy);
+  }
+
+  static getInstance(el: HTMLElement): ScrollSpy {
+    return (el as any).M_ScrollSpy;
+  }
+
+  destroy() {
+    ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
+    ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
+    ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1);
+    ScrollSpy._count--;
+    this._removeEventHandlers();
+    const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
+    actElem.classList.remove(this.options.activeClass);
+    (this.el as any).M_ScrollSpy = undefined;
+  }
+
+  _setupEventHandlers() {
+    if (ScrollSpy._count === 1) {
+      window.addEventListener('scroll', this._handleWindowScroll);
+      window.addEventListener('resize', this._handleThrottledResize);
+      document.body.addEventListener('click', this._handleTriggerClick);
     }
+  }
 
-    _removeEventHandlers() {
-      if (ScrollSpy._count === 0) {
-        window.removeEventListener('scroll', this._handleWindowScrollBound);
-        window.removeEventListener('resize', this._handleThrottledResizeBound);
-        document.body.removeEventListener('click', this._handleTriggerClick);
-      }
+  _removeEventHandlers() {
+    if (ScrollSpy._count === 0) {
+      window.removeEventListener('scroll', this._handleWindowScroll);
+      window.removeEventListener('resize', this._handleThrottledResize);
+      document.body.removeEventListener('click', this._handleTriggerClick);
     }
+  }
 
-    _handleTriggerClick(e) {
-      const trigger = e.target;
-      for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
-        const scrollspy = ScrollSpy._elements[i];
+  _handleThrottledResize: () => void = Utils.throttle(function(){ this._handleWindowScroll(); }, 200).bind(this); 
 
-        const x = document.querySelector('a[href="#'+scrollspy.el.id+'"]');
-        if (trigger === x) {
-          e.preventDefault();
-          const offset = ScrollSpy._offset(scrollspy.el).top + 1;
+  _handleTriggerClick = (e: MouseEvent) => {
+    const trigger = e.target;
+    for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
+      const scrollspy = ScrollSpy._elements[i];
 
-          anim({
-            targets: [document.documentElement, document.body],
-            scrollTop: offset - scrollspy.options.scrollOffset,
-            duration: 400,
-            easing: 'easeOutCubic'
-          });
+      const x = document.querySelector('a[href="#'+scrollspy.el.id+'"]');
+      if (trigger === x) {
+        e.preventDefault();
+        const offset = ScrollSpy._offset(scrollspy.el).top + 1;
 
-          break;
-        }
+        anim({
+          targets: [document.documentElement, document.body],
+          scrollTop: offset - scrollspy.options.scrollOffset,
+          duration: 400,
+          easing: 'easeOutCubic'
+        });
+
+        break;
       }
     }
+  }
 
-    _handleWindowScroll() {
-      // unique tick id
-      ScrollSpy._ticks++;
-
-      // viewport rectangle
-      let top = M.getDocumentScrollTop(),
-        left = M.getDocumentScrollLeft(),
-        right = left + window.innerWidth,
-        bottom = top + window.innerHeight;
-
-      // determine which elements are in view
-      let intersections = ScrollSpy._findElements(top, right, bottom, left);
-      for (let i = 0; i < intersections.length; i++) {
-        let scrollspy = intersections[i];
-        let lastTick = scrollspy.tickId;
-        if (lastTick < 0) {
-          // entered into view
-          scrollspy._enter();
-        }
+  _handleWindowScroll = () => {
+    // unique tick id
+    ScrollSpy._ticks++;
 
-        // update tick id
-        scrollspy.tickId = ScrollSpy._ticks;
-      }
+    // viewport rectangle
+    let top = Utils.getDocumentScrollTop(),
+      left = Utils.getDocumentScrollLeft(),
+      right = left + window.innerWidth,
+      bottom = top + window.innerHeight;
 
-      for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
-        let scrollspy = ScrollSpy._elementsInView[i];
-        let lastTick = scrollspy.tickId;
-        if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
-          // exited from view
-          scrollspy._exit();
-          scrollspy.tickId = -1;
-        }
+    // determine which elements are in view
+    let intersections = ScrollSpy._findElements(top, right, bottom, left);
+    for (let i = 0; i < intersections.length; i++) {
+      let scrollspy = intersections[i];
+      let lastTick = scrollspy.tickId;
+      if (lastTick < 0) {
+        // entered into view
+        scrollspy._enter();
       }
-      // remember elements in view for next tick
-      ScrollSpy._elementsInView = intersections;
+
+      // update tick id
+      scrollspy.tickId = ScrollSpy._ticks;
     }
 
-    static _offset(el) {
-      const box = el.getBoundingClientRect();
-      const docElem = document.documentElement;
-      return {
-        top: box.top + window.pageYOffset - docElem.clientTop,
-        left: box.left + window.pageXOffset - docElem.clientLeft
-      };
+    for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
+      let scrollspy = ScrollSpy._elementsInView[i];
+      let lastTick = scrollspy.tickId;
+      if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
+        // exited from view
+        scrollspy._exit();
+        scrollspy.tickId = -1;
+      }
     }
+    // remember elements in view for next tick
+    ScrollSpy._elementsInView = intersections;
+  }
+
+  static _offset(el) {
+    const box = el.getBoundingClientRect();
+    const docElem = document.documentElement;
+    return {
+      top: box.top + window.pageYOffset - docElem.clientTop,
+      left: box.left + window.pageXOffset - docElem.clientLeft
+    };
+  }
+
+  static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[] {
+    let hits = [];
+    for (let i = 0; i < ScrollSpy._elements.length; i++) {
+      let scrollspy = ScrollSpy._elements[i];
+      let currTop = top + scrollspy.options.scrollOffset || 200;
+
+      if (scrollspy.el.getBoundingClientRect().height > 0) {
+        let elTop = ScrollSpy._offset(scrollspy.el).top,
+          elLeft = ScrollSpy._offset(scrollspy.el).left,
+          elRight = elLeft + scrollspy.el.getBoundingClientRect().width,
+          elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
+
+        let isIntersect = !(
+          elLeft > right ||
+          elRight < left ||
+          elTop > bottom ||
+          elBottom < currTop
+        );
 
-    static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[] {
-      let hits = [];
-      for (let i = 0; i < ScrollSpy._elements.length; i++) {
-        let scrollspy = ScrollSpy._elements[i];
-        let currTop = top + scrollspy.options.scrollOffset || 200;
-
-        if (scrollspy.el.getBoundingClientRect().height > 0) {
-          let elTop = ScrollSpy._offset(scrollspy.el).top,
-            elLeft = ScrollSpy._offset(scrollspy.el).left,
-            elRight = elLeft + scrollspy.el.getBoundingClientRect().width,
-            elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
-
-          let isIntersect = !(
-            elLeft > right ||
-            elRight < left ||
-            elTop > bottom ||
-            elBottom < currTop
-          );
-
-          if (isIntersect) {
-            hits.push(scrollspy);
-          }
+        if (isIntersect) {
+          hits.push(scrollspy);
         }
       }
-      return hits;
     }
+    return hits;
+  }
 
-    _enter() {
-      ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
+  _enter() {
+    ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
 
-      if (ScrollSpy._visibleElements[0]) {
-        const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
-        actElem?.classList.remove(this.options.activeClass);
+    if (ScrollSpy._visibleElements[0]) {
+      const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+      actElem?.classList.remove(this.options.activeClass);
 
-        if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) {
-          ScrollSpy._visibleElements.unshift(this.el);
-        }
-        else {
-          ScrollSpy._visibleElements.push(this.el);
-        }
+      if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) {
+        ScrollSpy._visibleElements.unshift(this.el);
       }
       else {
         ScrollSpy._visibleElements.push(this.el);
       }
-      const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
-      document.querySelector(selector)?.classList.add(this.options.activeClass);
     }
+    else {
+      ScrollSpy._visibleElements.push(this.el);
+    }
+    const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+    document.querySelector(selector)?.classList.add(this.options.activeClass);
+  }
 
-    _exit() {
-      ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
+  _exit() {
+    ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
 
-      if (ScrollSpy._visibleElements[0]) {
-        const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
-        actElem?.classList.remove(this.options.activeClass);
+    if (ScrollSpy._visibleElements[0]) {
+      const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+      actElem?.classList.remove(this.options.activeClass);
 
-        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
+      ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
 
-        if (ScrollSpy._visibleElements[0]) {
-          // Check if empty
-          const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);          
-          document.querySelector(selector)?.classList.add(this.options.activeClass);
-        }
+      if (ScrollSpy._visibleElements[0]) {
+        // Check if empty
+        const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+        document.querySelector(selector)?.classList.add(this.options.activeClass);
       }
     }
+  }
 
-    static {
-      ScrollSpy._elements = [];
-      ScrollSpy._elementsInView = [];
-      ScrollSpy._visibleElements = []; // Array.<cash>
-      ScrollSpy._count = 0;
-      ScrollSpy._increment = 0;
-      ScrollSpy._ticks = 0;
-    }
+  static {
+    ScrollSpy._elements = [];
+    ScrollSpy._elementsInView = [];
+    ScrollSpy._visibleElements = []; // Array.<cash>
+    ScrollSpy._count = 0;
+    ScrollSpy._increment = 0;
+    ScrollSpy._ticks = 0;
   }
-  
+}