@materializecss/materialize 2.0.3-alpha → 2.0.3

package/src/range.ts

@@ -1,198 +0,0 @@
-import anim from "animejs";
-
-import { Component, BaseOptions, InitElements, MElement } from "./component";
-
-export interface RangeOptions extends BaseOptions {};
-
-const _defaults: RangeOptions = {};
-
-// TODO: !!!!!
-
-export class Range extends Component<RangeOptions> {
-  declare el: HTMLInputElement;
-  private _mousedown: boolean;
-  value: HTMLElement;
-  thumb: HTMLElement;
-
-  constructor(el: HTMLInputElement, options: Partial<RangeOptions>) {
-    super(el, options, Range);
-    (this.el as any).M_Range = this;
-
-    this.options = {
-      ...Range.defaults,
-      ...options
-    };
-
-    this._mousedown = false;
-    this._setupThumb();
-    this._setupEventHandlers();
-  }
-
-  static get defaults(): RangeOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Range.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLInputElement, options?: Partial<RangeOptions>): Range;
-  /**
-   * Initializes instances of Range.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<RangeOptions>): Range[];
-  /**
-   * Initializes instances of Range.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLInputElement | InitElements<HTMLInputElement | MElement>, options: Partial<RangeOptions> = {}): Range | Range[] {
-    return super.init(els, options, Range);
-  }
-
-  static getInstance(el: HTMLInputElement): Range {
-    return (el as any).M_Range;
-  }
-
-  destroy() {
-    this._removeEventHandlers();
-    this._removeThumb();
-    (this.el as any).M_Range = undefined;
-  }
-
-  _setupEventHandlers() {
-    this.el.addEventListener('change', this._handleRangeChange);
-    this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart);
-    this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart);
-    this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove);
-    this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
-    this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
-    this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend);
-    this.el.addEventListener('touchend', this._handleRangeMouseupTouchend);
-    this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
-    this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
-    this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
-  }
-
-  _removeEventHandlers() {
-    this.el.removeEventListener('change', this._handleRangeChange);
-    this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart);
-    this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart);
-    this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove);
-    this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
-    this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
-    this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend);
-    this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend);
-    this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
-    this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
-    this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
-  }
-
-  _handleRangeChange = () => {
-    this.value.innerHTML = this.el.value;
-    if (!this.thumb.classList.contains('active')) {
-      this._showRangeBubble();
-    }
-    const offsetLeft = this._calcRangeOffset();
-    this.thumb.classList.add('active');
-    this.thumb.style.left = offsetLeft+'px';
-  }
-
-  _handleRangeMousedownTouchstart = (e: MouseEvent | TouchEvent) => {
-    // Set indicator value
-    this.value.innerHTML = this.el.value;
-    this._mousedown = true;
-    this.el.classList.add('active');
-    if (!this.thumb.classList.contains('active')) {
-      this._showRangeBubble();
-    }
-    if (e.type !== 'input') {
-      const offsetLeft = this._calcRangeOffset();
-      this.thumb.classList.add('active');
-      this.thumb.style.left = offsetLeft+'px';
-    }
-  }
-
-  _handleRangeInputMousemoveTouchmove = () => {
-    if (this._mousedown) {
-      if (!this.thumb.classList.contains('active')) {
-        this._showRangeBubble();
-      }
-      const offsetLeft = this._calcRangeOffset();
-      this.thumb.classList.add('active');
-      this.thumb.style.left = offsetLeft+'px';
-      this.value.innerHTML = this.el.value;
-    }
-  }
-
-  _handleRangeMouseupTouchend = () => {
-    this._mousedown = false;
-    this.el.classList.remove('active');
-  }
-
-  _handleRangeBlurMouseoutTouchleave = () => {
-    if (!this._mousedown) {
-      const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
-      const marginLeft = 7 + paddingLeft + 'px';
-      if (this.thumb.classList.contains('active')) {
-        anim.remove(this.thumb);
-        anim({
-          targets: this.thumb,
-          height: 0,
-          width: 0,
-          top: 10,
-          easing: 'easeOutQuad',
-          marginLeft: marginLeft,
-          duration: 100
-        });
-      }
-      this.thumb.classList.remove('active');
-    }
-  }
-
-  _setupThumb() {
-    this.thumb = document.createElement('span');
-    this.value = document.createElement('span');
-    this.thumb.classList.add('thumb');
-    this.value.classList.add('value');
-    this.thumb.append(this.value);
-    this.el.after(this.thumb);
-  }
-
-  _removeThumb() {
-    this.thumb.remove();
-  }
-
-  _showRangeBubble() {
-    const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
-    const marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
-    anim.remove(this.thumb);
-    anim({
-      targets: this.thumb,
-      height: 30,
-      width: 30,
-      top: -30,
-      marginLeft: marginLeft,
-      duration: 300,
-      easing: 'easeOutQuint'
-    });
-  }
-
-  _calcRangeOffset(): number {
-    const width = this.el.getBoundingClientRect().width - 15;
-    const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
-    const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
-    const percent = (parseFloat(this.el.value) - min) / (max - min);
-    return percent * width;
-  }
-
-  /**
-   * Initializes every range input in the current document.
-   */
-  static Init(){
-    Range.init((document.querySelectorAll('input[type=range]')) as NodeListOf<HTMLInputElement>, {});
-  }
-}

package/src/scrollspy.ts

@@ -1,263 +0,0 @@
-import anim from "animejs";
-
-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<ScrollSpyOptions> {
-  static _elements: ScrollSpy[];
-  static _count: number;
-  static _increment: number;
-  tickId: number;
-  id: any;
-  static _elementsInView: ScrollSpy[];
-  static _visibleElements: any[];
-  static _ticks: number;
-
-  constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>) {
-    super(el, options, ScrollSpy);
-    (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();
-  }
-
-  static get defaults(): ScrollSpyOptions {
-    return _defaults;
-  }
-
-  /**
-   * 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._handleWindowScroll);
-      window.removeEventListener('resize', this._handleThrottledResize);
-      document.body.removeEventListener('click', this._handleTriggerClick);
-    }
-  }
-
-  _handleThrottledResize: () => void = Utils.throttle(function(){ this._handleWindowScroll(); }, 200).bind(this); 
-
-  _handleTriggerClick = (e: MouseEvent) => {
-    const trigger = e.target;
-    for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
-      const scrollspy = ScrollSpy._elements[i];
-
-      const x = document.querySelector('a[href="#'+scrollspy.el.id+'"]');
-      if (trigger === x) {
-        e.preventDefault();
-        const offset = ScrollSpy._offset(scrollspy.el).top + 1;
-
-        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 = Utils.getDocumentScrollTop(),
-      left = Utils.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();
-      }
-
-      // update tick id
-      scrollspy.tickId = ScrollSpy._ticks;
-    }
-
-    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
-        );
-
-        if (isIntersect) {
-          hits.push(scrollspy);
-        }
-      }
-    }
-    return hits;
-  }
-
-  _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].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) {
-        ScrollSpy._visibleElements.unshift(this.el);
-      }
-      else {
-        ScrollSpy._visibleElements.push(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);
-  }
-
-  _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);
-
-      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);
-      }
-    }
-  }
-
-  static {
-    ScrollSpy._elements = [];
-    ScrollSpy._elementsInView = [];
-    ScrollSpy._visibleElements = []; // Array.<cash>
-    ScrollSpy._count = 0;
-    ScrollSpy._increment = 0;
-    ScrollSpy._ticks = 0;
-  }
-}