@materializecss/materialize 2.0.3-alpha → 2.0.3

package/src/modal.ts

@@ -1,341 +0,0 @@
-import anim from "animejs";
-
-import { Utils } from "./utils";
-import { Component, BaseOptions, InitElements, MElement } from "./component";
-
-export interface ModalOptions extends BaseOptions {
-  /**
-   * Opacity of the modal overlay.
-   * @default 0.5
-   */
-  opacity: number;
-  /**
-   * Transition in duration in milliseconds.
-   * @default 250
-   */
-  inDuration: number;
-  /**
-   * Transition out duration in milliseconds.
-   * @default 250
-   */
-  outDuration: number;
-  /**
-   * Prevent page from scrolling while modal is open.
-   * @default true
-   */
-  preventScrolling: boolean;
-  /**
-   * Callback function called before modal is opened.
-   * @default null
-   */
-  onOpenStart: (this: Modal, el: HTMLElement) => void;
-  /**
-   * Callback function called after modal is opened.
-   * @default null
-   */
-  onOpenEnd: (this: Modal, el: HTMLElement) => void;
-  /**
-   * Callback function called before modal is closed.
-   * @default null
-   */
-  onCloseStart: (el: HTMLElement) => void;
-  /**
-   * Callback function called after modal is closed.
-   * @default null
-   */
-  onCloseEnd: (el: HTMLElement) => void;
-  /**
-   * Allow modal to be dismissed by keyboard or overlay click.
-   * @default true
-   */
-  dismissible: boolean;
-  /**
-   * Starting top offset.
-   * @default '4%'
-   */
-  startingTop: string;
-  /**
-   * Ending top offset.
-   * @default '10%'
-   */
-  endingTop: string;
-}
-
-const _defaults = {
-  opacity: 0.5,
-  inDuration: 250,
-  outDuration: 250,
-  onOpenStart: null,
-  onOpenEnd: null,
-  onCloseStart: null,
-  onCloseEnd: null,
-  preventScrolling: true,
-  dismissible: true,
-  startingTop: '4%',
-  endingTop: '10%'
-};
-
-export class Modal extends Component<ModalOptions> {
-
-  static _modalsOpen: number;
-  static _count: number;
-  
-  /**
-   * ID of the modal element.
-   */
-  id: string;
-  /**
-   * If the modal is open.
-   */
-  isOpen: boolean;
-  
-  private _openingTrigger: any;
-  private _overlay: HTMLElement;
-  private _nthModalOpened: number;
-
-  constructor(el: HTMLElement, options: Partial<ModalOptions>) {
-    super(el, options, Modal);
-    (this.el as any).M_Modal = this;
-
-    this.options = {
-      ...Modal.defaults,
-      ...options
-    };
-    
-    this.isOpen = false;
-    this.id = this.el.id;
-    this._openingTrigger = undefined;
-    this._overlay = document.createElement('div');
-    this._overlay.classList.add('modal-overlay');
-    this.el.tabIndex = 0;
-    this._nthModalOpened = 0;
-    Modal._count++;
-    this._setupEventHandlers();
-  }
-
-  static get defaults() {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Modal.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
-  /**
-   * Initializes instances of Modal.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
-  /**
-   * Initializes instances of Modal.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<ModalOptions> = {}): Modal | Modal[] {
-    return super.init(els, options, Modal);
-  }
-
-  static getInstance(el: HTMLElement): Modal {
-    return (el as any).M_Modal;
-  }
-
-  destroy() {
-    Modal._count--;
-    this._removeEventHandlers();
-    this.el.removeAttribute('style');
-    this._overlay.remove();
-    (this.el as any).M_Modal = undefined;
-  }
-
-  _setupEventHandlers() {
-    if (Modal._count === 1) {
-      document.body.addEventListener('click', this._handleTriggerClick);
-    }
-    this._overlay.addEventListener('click', this._handleOverlayClick);
-    this.el.addEventListener('click', this._handleModalCloseClick);
-  }
-
-  _removeEventHandlers() {
-    if (Modal._count === 0) {
-      document.body.removeEventListener('click', this._handleTriggerClick);
-    }
-    this._overlay.removeEventListener('click', this._handleOverlayClick);
-    this.el.removeEventListener('click', this._handleModalCloseClick);
-  }
-
-  _handleTriggerClick = (e: MouseEvent) => {
-    const trigger = (e.target as HTMLElement).closest('.modal-trigger');
-    if (!trigger) return;
-    const modalId = Utils.getIdFromTrigger(trigger as HTMLElement);
-    const modalInstance = (document.getElementById(modalId) as any).M_Modal;
-    if (modalInstance) modalInstance.open(trigger);
-    e.preventDefault();
-  }
-
-  _handleOverlayClick = () => {
-    if (this.options.dismissible) this.close();
-  }
-
-  _handleModalCloseClick = (e: MouseEvent) => {
-    const closeTrigger = (e.target as HTMLElement).closest('.modal-close');
-    if (closeTrigger) this.close();
-  }
-
-  _handleKeydown = (e: KeyboardEvent) => {
-    if (Utils.keys.ESC.includes(e.key) && this.options.dismissible) this.close();
-  }
-
-  _handleFocus = (e: FocusEvent) => {
-    // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
-    if (!this.el.contains(e.target as HTMLElement) && this._nthModalOpened === Modal._modalsOpen) {
-      this.el.focus();
-    }
-  }
-
-  _animateIn() {
-    // Set initial styles
-    this.el.style.display = 'block';
-    this.el.style.opacity = '0';
-    this._overlay.style.display = 'block';
-    this._overlay.style.opacity = '0';
-    // Animate overlay
-    anim({
-      targets: this._overlay,
-      opacity: this.options.opacity,
-      duration: this.options.inDuration,
-      easing: 'easeOutQuad'
-    });
-    // Define modal animation options
-    const enterAnimOptions = {
-      targets: this.el,
-      duration: this.options.inDuration,
-      easing: 'easeOutCubic',
-      // Handle modal onOpenEnd callback
-      complete: () => {
-        if (typeof this.options.onOpenEnd === 'function') {
-          this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
-        }
-      }
-    };
-    // Bottom sheet animation
-    if (this.el.classList.contains('bottom-sheet')) {
-      enterAnimOptions['bottom'] = 0;
-      enterAnimOptions['opacity'] = 1;
-    }
-    // Normal modal animation
-    else {
-      enterAnimOptions['top'] = [this.options.startingTop, this.options.endingTop];
-      enterAnimOptions['opacity'] = 1;
-      enterAnimOptions['scaleX'] = [0.8, 1];
-      enterAnimOptions['scaleY'] = [0.8, 1];
-    }
-    anim(enterAnimOptions);
-  }
-
-  _animateOut() {
-    // Animate overlay
-    anim({
-      targets: this._overlay,
-      opacity: 0,
-      duration: this.options.outDuration,
-      easing: 'easeOutQuart'
-    });
-    // Define modal animation options
-    const exitAnimOptions = {
-      targets: this.el,
-      duration: this.options.outDuration,
-      easing: 'easeOutCubic',
-      // Handle modal ready callback
-      complete: () => {
-        this.el.style.display = 'none';
-        this._overlay.remove();
-        // Call onCloseEnd callback
-        if (typeof this.options.onCloseEnd === 'function') {
-          this.options.onCloseEnd.call(this, this.el);
-        }
-      }
-    };
-    // Bottom sheet animation
-    if (this.el.classList.contains('bottom-sheet')) {
-      exitAnimOptions['bottom'] = '-100%';
-      exitAnimOptions['opacity'] = 0;
-    }
-    // Normal modal animation
-    else {
-      exitAnimOptions['top'] = [this.options.endingTop, this.options.startingTop];
-      exitAnimOptions['opacity'] = 0;
-      exitAnimOptions['scaleX'] = 0.8;
-      exitAnimOptions['scaleY'] = 0.8;
-    }
-    anim(exitAnimOptions);
-  }
-
-  /**
-   * Open modal.
-   */
-  open = (trigger?: HTMLElement): Modal => {
-    if (this.isOpen) return;
-    this.isOpen = true;
-    Modal._modalsOpen++;
-    this._nthModalOpened = Modal._modalsOpen;
-    // Set Z-Index based on number of currently open modals
-    this._overlay.style.zIndex = (1000 + Modal._modalsOpen * 2).toString();
-    this.el.style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
-    // Set opening trigger, undefined indicates modal was opened by javascript
-    this._openingTrigger = !!trigger ? trigger : undefined;
-    // onOpenStart callback
-    if (typeof this.options.onOpenStart === 'function') {
-      this.options.onOpenStart.call(this, this.el, this._openingTrigger);
-    }
-    if (this.options.preventScrolling) {
-      document.body.style.overflow = 'hidden';
-    }
-    this.el.classList.add('open');
-    this.el.insertAdjacentElement('afterend', this._overlay);
-    if (this.options.dismissible) {
-      document.addEventListener('keydown', this._handleKeydown);
-      document.addEventListener('focus', this._handleFocus, true);
-    }
-    anim.remove(this.el);
-    anim.remove(this._overlay);
-    this._animateIn();
-    // Focus modal
-    this.el.focus();
-    return this;
-  }
-
-  /**
-   * Close modal.
-   */
-  close = () => {
-    if (!this.isOpen) return;
-    this.isOpen = false;
-    Modal._modalsOpen--;
-    this._nthModalOpened = 0;
-    // Call onCloseStart callback
-    if (typeof this.options.onCloseStart === 'function') {
-      this.options.onCloseStart.call(this, this.el);
-    }
-    this.el.classList.remove('open');
-    // Enable body scrolling only if there are no more modals open.
-    if (Modal._modalsOpen === 0) {
-      document.body.style.overflow = '';
-    }
-    if (this.options.dismissible) {
-      document.removeEventListener('keydown', this._handleKeydown);
-      document.removeEventListener('focus', this._handleFocus, true);
-    }
-    anim.remove(this.el);
-    anim.remove(this._overlay);
-    this._animateOut();
-    return this;
-  }
-
-  static{
-    Modal._modalsOpen = 0;
-    Modal._count = 0;
-  }
-}

package/src/parallax.ts

@@ -1,149 +0,0 @@
-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(): ParallaxOptions {
-    return _defaults;
-  }
-
-  /**
-   * 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: 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;
-  }
-
-  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;
-    }
-  }
-
-  _setupEventHandlers() {
-    this._img.addEventListener('load', this._handleImageLoad);
-    if (Parallax._parallaxes.length === 0) {
-      if (!Parallax._handleScrollThrottled){
-        Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5);
-      }
-      if (!Parallax._handleWindowResizeThrottled){
-        Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5);
-      }
-      window.addEventListener('scroll', Parallax._handleScrollThrottled);
-      window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
-    }
-  }
-
-  _removeEventHandlers() {
-    this._img.removeEventListener('load', this._handleImageLoad);
-    if (Parallax._parallaxes.length === 0) {
-      window.removeEventListener('scroll', Parallax._handleScrollThrottled);
-      window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
-    }
-  }
-
-  _setupStyles() {
-    this._img.style.opacity = '1';
-  }
-
-  _handleImageLoad = () => {
-    this._updateParallax();
-  }
-
-  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
-    };
-  }
-
-  _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,165 +0,0 @@
-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 _updateElements() {
-    for (let elIndex in Pushpin._pushpins) {
-      let pInstance = Pushpin._pushpins[elIndex];
-      pInstance._updatePosition();
-    }
-  }
-
-  _setupEventHandlers() {
-    document.addEventListener('scroll', Pushpin._updateElements);
-  }
-
-  _removeEventHandlers() {
-    document.removeEventListener('scroll', Pushpin._updateElements);
-  }
-
-  _updatePosition() {
-    let scrolled = Utils.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`;
-
-      // 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 = [];
-  }
-}