@materializecss/materialize 2.0.3-alpha → 2.0.3

package/src/toasts.ts

@@ -1,290 +0,0 @@
-import anim from "animejs";
-
-import { BaseOptions } from "./component";
-
-export interface ToastOptions extends BaseOptions {
-  /**
-   * The content of the Toast.
-   * @default ""
-   */
-  text: string;
-  /**
-   * Length in ms the Toast stays before dismissal.
-   * @default 4000
-   */
-  displayLength: number;
-  /**
-   * Transition in duration in milliseconds.
-   * @default 300
-   */
-  inDuration: number;
-  /**
-   * Transition out duration in milliseconds.
-   * @default 375
-   */
-  outDuration: number;
-  /**
-   * Classes to be added to the toast element.
-   * @default ""
-   */
-  classes: string;
-  /**
-   * Callback function called when toast is dismissed.
-   * @default null
-   */
-  completeCallback: () => void;
-  /**
-   * The percentage of the toast's width it takes fora drag
-   * to dismiss a Toast.
-   * @default 0.8
-   */
-  activationPercent: number;
-}
-
-let _defaults: ToastOptions = {
-  text: '',
-  displayLength: 4000,
-  inDuration: 300,
-  outDuration: 375,
-  classes: '',
-  completeCallback: null,
-  activationPercent: 0.8
-};
-
-export class Toast {
-  /** The toast element. */
-  el: HTMLDivElement;
-  /**
-   * The remaining amount of time in ms that the toast
-   * will stay before dismissal.
-   */
-  timeRemaining: number;
-  /**
-   * Describes the current pan state of the Toast.
-   */
-  panning: boolean;
-  options: ToastOptions;
-  message: string;
-  counterInterval: NodeJS.Timeout;
-  wasSwiped: boolean;
-  startingXPos: number;
-  xPos: number;
-  time: number;
-  deltaX: number;
-  velocityX: number;
-
-  static _toasts: Toast[];
-  static _container: any;
-  static _draggedToast: Toast;
-
-  constructor(options: Partial<ToastOptions>) {
-    this.options = {
-      ...Toast.defaults,
-      ...options
-    };
-    this.message = this.options.text;
-    this.panning = false;
-    this.timeRemaining = this.options.displayLength;
-    if (Toast._toasts.length === 0) {
-      Toast._createContainer();
-    }
-    // Create new toast
-    Toast._toasts.push(this);
-    let toastElement = this._createToast();
-    (toastElement as any).M_Toast = this;
-    this.el = toastElement;
-    this._animateIn();
-    this._setTimer();
-  }
-
-  static get defaults(): ToastOptions {
-    return _defaults;
-  }
-
-  static getInstance(el: HTMLElement): Toast {
-    return (el as any).M_Toast;
-  }
-
-  static _createContainer() {
-    const container = document.createElement('div');
-    container.setAttribute('id', 'toast-container');
-    // Add event handler
-    container.addEventListener('touchstart', Toast._onDragStart);
-    container.addEventListener('touchmove', Toast._onDragMove);
-    container.addEventListener('touchend', Toast._onDragEnd);
-    container.addEventListener('mousedown', Toast._onDragStart);
-    document.addEventListener('mousemove', Toast._onDragMove);
-    document.addEventListener('mouseup', Toast._onDragEnd);
-    document.body.appendChild(container);
-    Toast._container = container;
-  }
-
-  static _removeContainer() {
-    document.removeEventListener('mousemove', Toast._onDragMove);
-    document.removeEventListener('mouseup', Toast._onDragEnd);
-    Toast._container.remove();
-    Toast._container = null;
-  }
-
-  static _onDragStart(e: TouchEvent | MouseEvent) {
-    if (e.target && (<HTMLElement>e.target).closest('.toast')) {
-      const toastElem = (<HTMLElement>e.target).closest('.toast');
-      const toast: Toast = (toastElem as any).M_Toast;
-      toast.panning = true;
-      Toast._draggedToast = toast;
-      toast.el.classList.add('panning');
-      toast.el.style.transition = '';
-      toast.startingXPos = Toast._xPos(e);
-      toast.time = Date.now();
-      toast.xPos = Toast._xPos(e);
-    }
-  }
-
-  static _onDragMove(e: TouchEvent | MouseEvent) {
-    if (!!Toast._draggedToast) {
-      e.preventDefault();
-      const toast = Toast._draggedToast;
-      toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
-      toast.xPos = Toast._xPos(e);
-      toast.velocityX = toast.deltaX / (Date.now() - toast.time);
-      toast.time = Date.now();
-
-      const totalDeltaX = toast.xPos - toast.startingXPos;
-      const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-      toast.el.style.transform = `translateX(${totalDeltaX}px)`;
-      toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
-    }
-  }
-
-  static _onDragEnd() {
-    if (!!Toast._draggedToast) {
-      let toast = Toast._draggedToast;
-      toast.panning = false;
-      toast.el.classList.remove('panning');
-
-      let totalDeltaX = toast.xPos - toast.startingXPos;
-      let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-      let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
-
-      // Remove toast
-      if (shouldBeDismissed) {
-        toast.wasSwiped = true;
-        toast.dismiss();
-        // Animate toast back to original position
-      }
-      else {
-        toast.el.style.transition = 'transform .2s, opacity .2s';
-        toast.el.style.transform = '';
-        toast.el.style.opacity = '';
-      }
-      Toast._draggedToast = null;
-    }
-  }
-
-  static _xPos(e: TouchEvent | MouseEvent) {
-    if (e.type.startsWith("touch") && (e as TouchEvent).targetTouches.length >= 1) {
-      return (e as TouchEvent).targetTouches[0].clientX;
-    }
-    // mouse event
-    return (e as MouseEvent).clientX;
-  }
-
-  /**
-   * dismiss all toasts.
-   */
-  static dismissAll() {
-    for (let toastIndex in Toast._toasts) {
-      Toast._toasts[toastIndex].dismiss();
-    }
-  }
-
-  _createToast() {
-    const toast = document.createElement('div');
-    toast.classList.add('toast');
-    toast.setAttribute('role', 'alert');
-    toast.setAttribute('aria-live', 'assertive');
-    toast.setAttribute('aria-atomic', 'true');
-
-    // Add custom classes onto toast
-    if (this.options.classes.length > 0) {
-      toast.classList.add(...this.options.classes.split(' '));
-    }
-
-    // Set text content
-    else toast.innerText = this.message;
-
-    // Append toast
-    Toast._container.appendChild(toast);
-    return toast;
-  }
-
-  _animateIn() {
-    // Animate toast in
-    anim({
-      targets: this.el,
-      top: 0,
-      opacity: 1,
-      duration: this.options.inDuration,
-      easing: 'easeOutCubic'
-    });
-  }
-
-  /**
-   * Create setInterval which automatically removes toast when timeRemaining >= 0
-   * has been reached.
-   */
-  _setTimer() {
-    if (this.timeRemaining !== Infinity) {
-      this.counterInterval = setInterval(() => {
-        // If toast is not being dragged, decrease its time remaining
-        if (!this.panning) {
-          this.timeRemaining -= 20;
-        }
-        // Animate toast out
-        if (this.timeRemaining <= 0) {
-          this.dismiss();
-        }
-      }, 20);
-    }
-  }
-
-  /**
-   * Dismiss toast with animation.
-   */
-  dismiss() {
-    window.clearInterval(this.counterInterval);
-    let activationDistance = this.el.offsetWidth * this.options.activationPercent;
-
-    if (this.wasSwiped) {
-      this.el.style.transition = 'transform .05s, opacity .05s';
-      this.el.style.transform = `translateX(${activationDistance}px)`;
-      this.el.style.opacity = '0';
-    }
-
-    anim({
-      targets: this.el,
-      opacity: 0,
-      marginTop: -40,
-      duration: this.options.outDuration,
-      easing: 'easeOutExpo',
-      complete: () => {
-        // Call the optional callback
-        if (typeof this.options.completeCallback === 'function') {
-          this.options.completeCallback();
-        }
-        // Remove toast from DOM
-        this.el.remove();
-        Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
-        if (Toast._toasts.length === 0) {
-          Toast._removeContainer();
-        }
-      }
-    });
-  }
-
-  static {
-    Toast._toasts = [];
-    Toast._container = null;
-    Toast._draggedToast = null;
-  }
-}

package/src/tooltip.ts

@@ -1,346 +0,0 @@
-import anim from "animejs";
-
-import { Utils } from "./utils";
-import { Bounding } from "./bounding";
-import { Component, BaseOptions, InitElements, MElement } from "./component";
-
-export interface TooltipOptions extends BaseOptions {
-  /**
-   * Delay time before tooltip disappears.
-   * @default 200
-   */
-  exitDelay: number;
-  /**
-   * Delay time before tooltip appears.
-   * @default 0
-   */
-  enterDelay: number;
-  /**
-   * Text string for the tooltip.
-   * @default ""
-   */
-  text: string;
-  /**
-   * Set distance tooltip appears away from its activator
-   * excluding transitionMovement.
-   * @default 5
-   */
-  margin: number;
-  /**
-   * Enter transition duration.
-   * @default 300
-   */
-  inDuration: number;
-  /**
-   * Opacity of the tooltip.
-   * @default 1
-   */
-  opacity: number;
-  /**
-   * Exit transition duration.
-   * @default 250
-   */
-  outDuration: number;
-  /**
-   * Set the direction of the tooltip.
-   * @default 'bottom'
-   */
-  position: 'top' | 'right' | 'bottom' | 'left';
-  /**
-   * Amount in px that the tooltip moves during its transition.
-   * @default 10
-   */
-  transitionMovement: number;
-}
-
-const _defaults: TooltipOptions = {
-  exitDelay: 200,
-  enterDelay: 0,
-  text: '',
-  margin: 5,
-  inDuration: 250,
-  outDuration: 200,
-  position: 'bottom',
-  transitionMovement: 10,
-  opacity: 1
-};
-
-export class Tooltip extends Component<TooltipOptions> {
-  /**
-   * If tooltip is open.
-   */
-  isOpen: boolean;
-  /**
-   * If tooltip is hovered.
-   */
-  isHovered: boolean;
-  /**
-   * If tooltip is focused.
-   */
-  isFocused: boolean;
-  tooltipEl: HTMLElement;
-  private _exitDelayTimeout: string | number | NodeJS.Timeout;
-  private _enterDelayTimeout: string | number | NodeJS.Timeout;
-  xMovement: number;
-  yMovement: number;
-
-  constructor(el: HTMLElement, options: Partial<TooltipOptions>) {
-    super(el, options, Tooltip);
-    (this.el as any).M_Tooltip = this;
-
-    this.options = {
-      ...Tooltip.defaults,
-      ...options
-    };
-    
-    this.isOpen = false;
-    this.isHovered = false;
-    this.isFocused = false;
-    this._appendTooltipEl();
-    this._setupEventHandlers();
-  }
-
-  static get defaults(): TooltipOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Tooltip.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<TooltipOptions>): Tooltip;
-  /**
-   * Initializes instances of Tooltip.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<TooltipOptions>): Tooltip[];
-  /**
-   * Initializes instances of Tooltip.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<TooltipOptions> = {}): Tooltip | Tooltip[] {
-    return super.init(els, options, Tooltip);
-  }
-
-  static getInstance(el: HTMLElement): Tooltip {
-    return (el as any).M_Tooltip;
-  }
-
-  destroy() {
-    this.tooltipEl.remove();
-    this._removeEventHandlers();
-    (this.el as any).M_Tooltip = undefined;
-  }
-
-  _appendTooltipEl() {
-    this.tooltipEl = document.createElement('div');
-    this.tooltipEl.classList.add('material-tooltip');
-
-    const tooltipContentEl = document.createElement('div');
-    tooltipContentEl.classList.add('tooltip-content');
-    this._setTooltipContent(tooltipContentEl);
-    this.tooltipEl.appendChild(tooltipContentEl);
-    document.body.appendChild(this.tooltipEl);
-  }
-
-  _setTooltipContent(tooltipContentEl: HTMLElement) {
-    tooltipContentEl.innerText = this.options.text;
-  }
-
-  _updateTooltipContent() {
-    this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content'));
-  }
-
-  _setupEventHandlers() {
-    this.el.addEventListener('mouseenter', this._handleMouseEnter);
-    this.el.addEventListener('mouseleave', this._handleMouseLeave);
-    this.el.addEventListener('focus', this._handleFocus, true);
-    this.el.addEventListener('blur', this._handleBlur, true);
-  }
-
-  _removeEventHandlers() {
-    this.el.removeEventListener('mouseenter', this._handleMouseEnter);
-    this.el.removeEventListener('mouseleave', this._handleMouseLeave);
-    this.el.removeEventListener('focus', this._handleFocus, true);
-    this.el.removeEventListener('blur', this._handleBlur, true);
-  }
-
-  /**
-   * Show tooltip.
-   */
-  open = (isManual: boolean) => {
-    if (this.isOpen) return;
-    isManual = isManual === undefined ? true : undefined; // Default value true
-    this.isOpen = true;
-    // Update tooltip content with HTML attribute options
-    this.options = {...this.options, ...this._getAttributeOptions()};
-    this._updateTooltipContent();
-    this._setEnterDelayTimeout(isManual);
-  }
-  
-  /**
-   * Hide tooltip.
-   */
-  close = () => {
-    if (!this.isOpen) return;
-    this.isHovered = false;
-    this.isFocused = false;
-    this.isOpen = false;
-    this._setExitDelayTimeout();
-  }
-
-  _setExitDelayTimeout() {
-    clearTimeout(this._exitDelayTimeout);
-    this._exitDelayTimeout = setTimeout(() => {
-      if (this.isHovered || this.isFocused) return;
-      this._animateOut();
-    }, this.options.exitDelay);
-  }
-
-  _setEnterDelayTimeout(isManual) {
-    clearTimeout(this._enterDelayTimeout);
-    this._enterDelayTimeout = setTimeout(() => {
-      if (!this.isHovered && !this.isFocused && !isManual) return;
-      this._animateIn();
-    }, this.options.enterDelay);
-  }
-
-  _positionTooltip() {
-    const tooltip: HTMLElement = this.tooltipEl;
-    const origin = (this.el as HTMLElement),
-      originHeight = origin.offsetHeight,
-      originWidth = origin.offsetWidth,
-      tooltipHeight = tooltip.offsetHeight,
-      tooltipWidth = tooltip.offsetWidth,
-      margin = this.options.margin;
-
-    (this.xMovement = 0), (this.yMovement = 0);
-
-    let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop();
-    let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
-    if (this.options.position === 'top') {
-      targetTop += -tooltipHeight - margin;
-      targetLeft += originWidth / 2 - tooltipWidth / 2;
-      this.yMovement = -this.options.transitionMovement;
-    } else if (this.options.position === 'right') {
-      targetTop += originHeight / 2 - tooltipHeight / 2;
-      targetLeft += originWidth + margin;
-      this.xMovement = this.options.transitionMovement;
-    } else if (this.options.position === 'left') {
-      targetTop += originHeight / 2 - tooltipHeight / 2;
-      targetLeft += -tooltipWidth - margin;
-      this.xMovement = -this.options.transitionMovement;
-    } else {
-      targetTop += originHeight + margin;
-      targetLeft += originWidth / 2 - tooltipWidth / 2;
-      this.yMovement = this.options.transitionMovement;
-    }
-
-    const newCoordinates = this._repositionWithinScreen(
-      targetLeft,
-      targetTop,
-      tooltipWidth,
-      tooltipHeight
-    );
-
-    tooltip.style.top = newCoordinates.y+'px';
-    tooltip.style.left = newCoordinates.x+'px';
-  }
-
-  _repositionWithinScreen(x: number, y: number, width: number, height: number) {
-    const scrollLeft = Utils.getDocumentScrollLeft();
-    const scrollTop = Utils.getDocumentScrollTop();
-    let newX = x - scrollLeft;
-    let newY = y - scrollTop;
-
-    const bounding: Bounding = {
-      left: newX,
-      top: newY,
-      width: width,
-      height: height
-    };
-    const offset = this.options.margin + this.options.transitionMovement;
-    const edges = Utils.checkWithinContainer(document.body, bounding, offset);
-
-    if (edges.left) {
-      newX = offset;
-    } else if (edges.right) {
-      newX -= newX + width - window.innerWidth;
-    }
-    if (edges.top) {
-      newY = offset;
-    } else if (edges.bottom) {
-      newY -= newY + height - window.innerHeight;
-    }
-    return {
-      x: newX + scrollLeft,
-      y: newY + scrollTop
-    };
-  }
-
-  _animateIn() {
-    this._positionTooltip();
-    this.tooltipEl.style.visibility = 'visible';
-    anim.remove(this.tooltipEl);
-    anim({
-      targets: this.tooltipEl,
-      opacity: this.options.opacity || 1,
-      translateX: this.xMovement,
-      translateY: this.yMovement,
-      duration: this.options.inDuration,
-      easing: 'easeOutCubic'
-    });
-  }
-
-  _animateOut() {
-    anim.remove(this.tooltipEl);
-    anim({
-      targets: this.tooltipEl,
-      opacity: 0,
-      translateX: 0,
-      translateY: 0,
-      duration: this.options.outDuration,
-      easing: 'easeOutCubic'
-    });
-  }
-
-  _handleMouseEnter = () => {
-    this.isHovered = true;
-    this.isFocused = false; // Allows close of tooltip when opened by focus.
-    this.open(false);
-  }
-
-  _handleMouseLeave = () => {
-    this.isHovered = false;
-    this.isFocused = false; // Allows close of tooltip when opened by focus.
-    this.close();
-  }
-
-  _handleFocus = () => {
-    if (Utils.tabPressed) {
-      this.isFocused = true;
-      this.open(false);
-    }
-  }
-
-  _handleBlur = () => {
-    this.isFocused = false;
-    this.close();
-  }
-
-  _getAttributeOptions() {
-    const attributeOptions = {};
-    const tooltipTextOption = this.el.getAttribute('data-tooltip');
-    const positionOption = this.el.getAttribute('data-position');
-    if (tooltipTextOption) {
-      (attributeOptions as any).text = tooltipTextOption;
-    }
-    if (positionOption) {
-      (attributeOptions as any).position = positionOption;
-    }
-    return attributeOptions;
-  }
-}