@materializecss/materialize 2.0.0-alpha → 2.0.2-alpha

package/src/parallax.ts

@@ -1,125 +1,149 @@
-import { Component } from "./component";
-import { M } from "./global";
-
-  let _defaults = {
-    responsiveThreshold: 0 // breakpoint for swipeable
-  };
-
-  export class Parallax extends Component {
-    private _enabled: boolean;
-    private _img: HTMLImageElement;
-    private _handleImageLoadBound: any;
-    static _parallaxes: any;
-    static _handleScrollThrottled: any;
-    static _handleWindowResizeThrottled: () => any;
-
-    constructor(el, options) {
-      super(Parallax, el, options);
-      (this.el as any).M_Parallax = this;
-      this.options = {...Parallax.defaults, ...options};
-      this._enabled = window.innerWidth > this.options.responsiveThreshold;
-      this._img = this.el.querySelector('img');      
-      this._updateParallax();
-      this._setupEventHandlers();
-      this._setupStyles();
-      Parallax._parallaxes.push(this);
-    }
+import { Utils } from "./utils";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface ParallaxOptions extends BaseOptions {
+  /**
+   * The minimum width of the screen, in pixels, where the parallax functionality starts working.
+   * @default 0
+   */
+  responsiveThreshold: number;
+}
+
+let _defaults: ParallaxOptions = {
+  responsiveThreshold: 0 // breakpoint for swipeable
+};
+
+export class Parallax extends Component<ParallaxOptions> {
+  private _enabled: boolean;
+  private _img: HTMLImageElement;
+  static _parallaxes: Parallax[] = [];
+  static _handleScrollThrottled: () => any;
+  static _handleWindowResizeThrottled: () => any;
+
+  constructor(el: HTMLElement, options: Partial<ParallaxOptions>) {
+    super(el, options, Parallax);
+    (this.el as any).M_Parallax = this;
+
+    this.options = {
+      ...Parallax.defaults,
+      ...options
+    };
+    
+    this._enabled = window.innerWidth > this.options.responsiveThreshold;
+    this._img = this.el.querySelector('img');
+    this._updateParallax();
+    this._setupEventHandlers();
+    this._setupStyles();
+    Parallax._parallaxes.push(this);
+  }
 
-    static get defaults() {
-      return _defaults;
-    }
+  static get defaults(): ParallaxOptions {
+    return _defaults;
+  }
 
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
+  /**
+   * Initializes instance of Parallax.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<ParallaxOptions>): Parallax;
+  /**
+   * Initializes instances of Parallax.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<ParallaxOptions>): Parallax[];
+  /**
+   * Initializes instances of Parallax.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<ParallaxOptions> = {}): Parallax | Parallax[] {
+    return super.init(els, options, Parallax);
+  }
 
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Parallax;
-    }
+  static getInstance(el: HTMLElement): Parallax {
+    return (el as any).M_Parallax;
+  }
 
-    destroy() {
-      Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
-      this._img.style.transform = '';
-      this._removeEventHandlers();
-      (this.el as any).M_Parallax = undefined;
-    }
+  destroy() {
+    Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
+    this._img.style.transform = '';
+    this._removeEventHandlers();
+    (this.el as any).M_Parallax = undefined;
+  }
 
-    static _handleScroll() {
-      for (let i = 0; i < Parallax._parallaxes.length; i++) {
-        let parallaxInstance = Parallax._parallaxes[i];
-        parallaxInstance._updateParallax.call(parallaxInstance);
-      }
+  static _handleScroll() {
+    for (let i = 0; i < Parallax._parallaxes.length; i++) {
+      let parallaxInstance = Parallax._parallaxes[i];
+      parallaxInstance._updateParallax.call(parallaxInstance);
     }
+  }
 
-    static _handleWindowResize() {
-      for (let i = 0; i < Parallax._parallaxes.length; i++) {
-        let parallaxInstance = Parallax._parallaxes[i];
-        parallaxInstance._enabled =
-          window.innerWidth > parallaxInstance.options.responsiveThreshold;
-      }
+  static _handleWindowResize() {
+    for (let i = 0; i < Parallax._parallaxes.length; i++) {
+      let parallaxInstance = Parallax._parallaxes[i];
+      parallaxInstance._enabled =
+        window.innerWidth > parallaxInstance.options.responsiveThreshold;
     }
+  }
 
-    _setupEventHandlers() {
-      this._handleImageLoadBound = this._handleImageLoad.bind(this);
-      this._img.addEventListener('load', this._handleImageLoadBound);
-      if (Parallax._parallaxes.length === 0) {
-        Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5);
-        window.addEventListener('scroll', Parallax._handleScrollThrottled);
-        Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5);
-        window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
+  _setupEventHandlers() {
+    this._img.addEventListener('load', this._handleImageLoad);
+    if (Parallax._parallaxes.length === 0) {
+      if (!Parallax._handleScrollThrottled){
+        Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5);
       }
-    }
-
-    _removeEventHandlers() {
-      this._img.removeEventListener('load', this._handleImageLoadBound);
-      if (Parallax._parallaxes.length === 0) {
-        window.removeEventListener('scroll', Parallax._handleScrollThrottled);
-        window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
+      if (!Parallax._handleWindowResizeThrottled){
+        Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5);
       }
+      window.addEventListener('scroll', Parallax._handleScrollThrottled);
+      window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
     }
+  }
 
-    _setupStyles() {
-      this._img.style.opacity = '1';
+  _removeEventHandlers() {
+    this._img.removeEventListener('load', this._handleImageLoad);
+    if (Parallax._parallaxes.length === 0) {
+      window.removeEventListener('scroll', Parallax._handleScrollThrottled);
+      window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
     }
+  }
 
-    _handleImageLoad() {
-      this._updateParallax();
-    }
+  _setupStyles() {
+    this._img.style.opacity = '1';
+  }
 
-    private _offset(el: Element) {
-      const box = el.getBoundingClientRect();
-      const docElem = document.documentElement;
-      return {
-        top: box.top + window.pageYOffset - docElem.clientTop,
-        left: box.left + window.pageXOffset - docElem.clientLeft
-      };
-    }
+  _handleImageLoad = () => {
+    this._updateParallax();
+  }
 
-    _updateParallax() {
-      const containerHeight = this.el.getBoundingClientRect().height > 0 ? (this.el.parentNode as any).offsetHeight : 500;
-      const imgHeight = this._img.offsetHeight;
-      const parallaxDist = imgHeight - containerHeight;
-      const bottom = this._offset(this.el).top + containerHeight;
-      const top = this._offset(this.el).top;
-      const scrollTop = M.getDocumentScrollTop();
-      const windowHeight = window.innerHeight;
-      const windowBottom = scrollTop + windowHeight;
-      const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
-      const parallax = parallaxDist * percentScrolled;
-      
-      if (!this._enabled) {
-        this._img.style.transform = '';
-      }
-      else if (bottom > scrollTop && top < scrollTop + windowHeight) {
-        this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
-      }
-    }
+  private _offset(el: Element) {
+    const box = el.getBoundingClientRect();
+    const docElem = document.documentElement;
+    return {
+      top: box.top + window.pageYOffset - docElem.clientTop,
+      left: box.left + window.pageXOffset - docElem.clientLeft
+    };
+  }
 
-    static {
-      Parallax._parallaxes = [];
+  _updateParallax() {
+    const containerHeight = this.el.getBoundingClientRect().height > 0 ? (this.el.parentNode as any).offsetHeight : 500;
+    const imgHeight = this._img.offsetHeight;
+    const parallaxDist = imgHeight - containerHeight;
+    const bottom = this._offset(this.el).top + containerHeight;
+    const top = this._offset(this.el).top;
+    const scrollTop = Utils.getDocumentScrollTop();
+    const windowHeight = window.innerHeight;
+    const windowBottom = scrollTop + windowHeight;
+    const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+    const parallax = parallaxDist * percentScrolled;
+
+    if (!this._enabled) {
+      this._img.style.transform = '';
+    }
+    else if (bottom > scrollTop && top < scrollTop + windowHeight) {
+      this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
     }
   }
-
-  
-
+}

package/src/pushpin.ts

@@ -1,120 +1,165 @@
-import { Component } from "./component";
-import { M } from "./global";
-
-  let _defaults = {
-    top: 0,
-    bottom: Infinity,
-    offset: 0,
-    onPositionChange: null
-  };
-
-  export class Pushpin extends Component {
-    static _pushpins: any[];
-    originalOffset: any;
-
-    constructor(el, options) {
-      super(Pushpin, el, options);
-      (this.el as any).M_Pushpin = this;
-      this.options = {...Pushpin.defaults, ...options};
-      this.originalOffset = (this.el as HTMLElement).offsetTop;
-      Pushpin._pushpins.push(this);
-      this._setupEventHandlers();
-      this._updatePosition();
+import { Utils } from "./utils";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface PushpinOptions extends BaseOptions {
+  /**
+   * The distance in pixels from the top of the page where
+   * the element becomes fixed.
+   * @default 0
+   */
+  top: number;
+  /**
+   * The distance in pixels from the top of the page where
+   * the elements stops being fixed.
+   * @default Infinity
+   */
+  bottom: number;
+  /**
+   * The offset from the top the element will be fixed at.
+   * @default 0
+   */
+  offset: number;
+  /**
+   * Callback function called when pushpin position changes.
+   * You are provided with a position string.
+   * @default null
+   */
+  onPositionChange: (position: "pinned" | "pin-top" | "pin-bottom") => void;
+}
+
+let _defaults = {
+  top: 0,
+  bottom: Infinity,
+  offset: 0,
+  onPositionChange: null
+};
+
+export class Pushpin extends Component<PushpinOptions> {
+  static _pushpins: any[];
+  originalOffset: any;
+
+  constructor(el: HTMLElement, options: Partial<PushpinOptions>) {
+    super(el, options, Pushpin);
+    (this.el as any).M_Pushpin = this;
+
+    this.options = {
+      ...Pushpin.defaults,
+      ...options
+    };
+
+    this.originalOffset = (this.el as HTMLElement).offsetTop;
+    Pushpin._pushpins.push(this);
+    this._setupEventHandlers();
+    this._updatePosition();
+  }
+
+  static get defaults(): PushpinOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Pushpin.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<PushpinOptions>): Pushpin;
+  /**
+   * Initializes instances of Pushpin.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<PushpinOptions>): Pushpin[];
+  /**
+   * Initializes instances of Pushpin.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<PushpinOptions> = {}): Pushpin | Pushpin[] {
+    return super.init(els, options, Pushpin);
+  }
+
+  static getInstance(el: HTMLElement): Pushpin {
+    return (el as any).M_Pushpin;
+  }
+
+  destroy() {
+    (this.el as HTMLElement).style.top = null;
+    this._removePinClasses();
+    // Remove pushpin Inst
+    let index = Pushpin._pushpins.indexOf(this);
+    Pushpin._pushpins.splice(index, 1);
+    if (Pushpin._pushpins.length === 0) {
+      this._removeEventHandlers();
     }
+    (this.el as any).M_Pushpin = undefined;
+  }
 
-    static get defaults() {
-      return _defaults;
+  static _updateElements() {
+    for (let elIndex in Pushpin._pushpins) {
+      let pInstance = Pushpin._pushpins[elIndex];
+      pInstance._updatePosition();
     }
+  }
 
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
+  _setupEventHandlers() {
+    document.addEventListener('scroll', Pushpin._updateElements);
+  }
 
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Pushpin;
-    }
+  _removeEventHandlers() {
+    document.removeEventListener('scroll', Pushpin._updateElements);
+  }
+
+  _updatePosition() {
+    let scrolled = Utils.getDocumentScrollTop() + this.options.offset;
 
-    destroy() {
-      (this.el as HTMLElement).style.top = null;
+    if (
+      this.options.top <= scrolled &&
+      this.options.bottom >= scrolled &&
+      !this.el.classList.contains('pinned')
+    ) {
       this._removePinClasses();
-      // Remove pushpin Inst
-      let index = Pushpin._pushpins.indexOf(this);
-      Pushpin._pushpins.splice(index, 1);
-      if (Pushpin._pushpins.length === 0) {
-        this._removeEventHandlers();
-      }
-      (this.el as any).M_Pushpin = undefined;
-    }
+      (this.el as HTMLElement).style.top = `${this.options.offset}px`;
+      this.el.classList.add('pinned');
 
-    static _updateElements() {
-      for (let elIndex in Pushpin._pushpins) {
-        let pInstance = Pushpin._pushpins[elIndex];
-        pInstance._updatePosition();
+      // onPositionChange callback
+      if (typeof this.options.onPositionChange === 'function') {
+        this.options.onPositionChange.call(this, 'pinned');
       }
     }
 
-    _setupEventHandlers() {
-      document.addEventListener('scroll', Pushpin._updateElements);
-    }
-
-    _removeEventHandlers() {
-      document.removeEventListener('scroll', Pushpin._updateElements);
-    }
-
-    _updatePosition() {
-      let scrolled = M.getDocumentScrollTop() + this.options.offset;
-
-      if (
-        this.options.top <= scrolled &&
-        this.options.bottom >= scrolled &&
-        !this.el.classList.contains('pinned')
-      ) {
-        this._removePinClasses();
-        (this.el as HTMLElement).style.top = `${this.options.offset}px`;
-        this.el.classList.add('pinned');
-
-        // onPositionChange callback
-        if (typeof this.options.onPositionChange === 'function') {
-          this.options.onPositionChange.call(this, 'pinned');
-        }
-      }
-
-      // Add pin-top (when scrolled position is above top)
-      if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
-        this._removePinClasses();
-        (this.el as HTMLElement).style.top = '0';
-        this.el.classList.add('pin-top');
-
-        // onPositionChange callback
-        if (typeof this.options.onPositionChange === 'function') {
-          this.options.onPositionChange.call(this, 'pin-top');
-        }
-      }
-
-      // Add pin-bottom (when scrolled position is below bottom)
-      if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
-        this._removePinClasses();
-        this.el.classList.add('pin-bottom');
-        (this.el as HTMLElement).style.top = `${this.options.bottom - this.originalOffset}px`;
+    // Add pin-top (when scrolled position is above top)
+    if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
+      this._removePinClasses();
+      (this.el as HTMLElement).style.top = '0';
+      this.el.classList.add('pin-top');
 
-        // onPositionChange callback
-        if (typeof this.options.onPositionChange === 'function') {
-          this.options.onPositionChange.call(this, 'pin-bottom');
-        }
+      // onPositionChange callback
+      if (typeof this.options.onPositionChange === 'function') {
+        this.options.onPositionChange.call(this, 'pin-top');
       }
     }
 
-    _removePinClasses() {
-      // IE 11 bug (can't remove multiple classes in one line)
-      this.el.classList.remove('pin-top');
-      this.el.classList.remove('pinned');
-      this.el.classList.remove('pin-bottom');
-    }
+    // Add pin-bottom (when scrolled position is below bottom)
+    if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
+      this._removePinClasses();
+      this.el.classList.add('pin-bottom');
+      (this.el as HTMLElement).style.top = `${this.options.bottom - this.originalOffset}px`;
 
-    static {
-      Pushpin._pushpins = [];
+      // onPositionChange callback
+      if (typeof this.options.onPositionChange === 'function') {
+        this.options.onPositionChange.call(this, 'pin-bottom');
+      }
     }
-  }  
-
-  
+  }
+
+  _removePinClasses() {
+    // IE 11 bug (can't remove multiple classes in one line)
+    this.el.classList.remove('pin-top');
+    this.el.classList.remove('pinned');
+    this.el.classList.remove('pin-bottom');
+  }
+
+  static {
+    Pushpin._pushpins = [];
+  }
+}