@materializecss/materialize 2.0.3-alpha → 2.0.3

package/src/dropdown.ts

@@ -1,644 +0,0 @@
-import anim from "animejs";
-
-import { Utils } from "./utils";
-import { Component, BaseOptions, InitElements, MElement, Openable } from "./component";
-
-export interface DropdownOptions extends BaseOptions {
-  /**
-   * Defines the edge the menu is aligned to.
-   * @default 'left'
-   */
-  alignment: 'left' | 'right';
-  /**
-   * If true, automatically focus dropdown el for keyboard.
-   * @default true
-   */
-  autoFocus: boolean;
-  /**
-   * If true, constrainWidth to the size of the dropdown activator.
-   * @default true
-   */
-  constrainWidth: boolean;
-  /**
-   * Provide an element that will be the bounding container of the dropdown.
-   * @default null
-   */
-  container: Element;
-  /**
-   * If false, the dropdown will show below the trigger.
-   * @default true
-   */
-  coverTrigger: boolean;
-  /**
-   * If true, close dropdown on item click.
-   * @default true
-   */
-  closeOnClick: boolean;
-  /**
-   * If true, the dropdown will open on hover.
-   * @default false
-   */
-  hover: boolean;
-  /**
-   * The duration of the transition enter in milliseconds.
-   * @default 150
-   */
-  inDuration: number;
-  /**
-   * The duration of the transition out in milliseconds.
-   * @default 250
-   */
-  outDuration: number;
-  /**
-   * Function called when dropdown starts entering.
-   * @default null
-   */
-  onOpenStart: (el: HTMLElement) => void;
-  /**
-   * Function called when dropdown finishes entering.
-   * @default null
-   */
-  onOpenEnd: (el: HTMLElement) => void;
-  /**
-   * Function called when dropdown starts exiting.
-   * @default null
-   */
-  onCloseStart: (el: HTMLElement) => void;
-  /**
-   * Function called when dropdown finishes exiting.
-   * @default null
-   */
-  onCloseEnd: (el: HTMLElement) => void;
-  /**
-   * Function called when item is clicked.
-   * @default null
-   */
-  onItemClick: (el: HTMLLIElement) => void;
-};
-
-const _defaults: DropdownOptions = {
-  alignment: 'left',
-  autoFocus: true,
-  constrainWidth: true,
-  container: null,
-  coverTrigger: true,
-  closeOnClick: true,
-  hover: false,
-  inDuration: 150,
-  outDuration: 250,
-  onOpenStart: null,
-  onOpenEnd: null,
-  onCloseStart: null,
-  onCloseEnd: null,
-  onItemClick: null
-};
-
-export class Dropdown extends Component<DropdownOptions> implements Openable {
-  static _dropdowns: Dropdown[] = [];
-  /** ID of the dropdown element. */
-  id: string;
-  /** The DOM element of the dropdown. */
-  dropdownEl: HTMLElement;
-  /** If the dropdown is open. */
-  isOpen: boolean;
-  /** If the dropdown content is scrollable. */
-  isScrollable: boolean;
-  isTouchMoving: boolean;
-  /** The index of the item focused. */
-  focusedIndex: number;
-  filterQuery: any[];
-  filterTimeout: NodeJS.Timeout;
-
-  constructor(el: HTMLElement, options: Partial<DropdownOptions>) {
-    super(el, options, Dropdown);
-    (this.el as any).M_Dropdown = this;
-
-    Dropdown._dropdowns.push(this);
-    this.id = Utils.getIdFromTrigger(el);
-    this.dropdownEl = document.getElementById(this.id);
-
-    this.options = {
-      ...Dropdown.defaults,
-      ...options
-    };
-
-    this.isOpen = false;
-    this.isScrollable = false;
-    this.isTouchMoving = false;
-    this.focusedIndex = -1;
-    this.filterQuery = [];
-
-    // Move dropdown-content after dropdown-trigger
-    this._moveDropdown();
-    this._makeDropdownFocusable();
-    this._setupEventHandlers();
-  }
-
-  static get defaults(): DropdownOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Dropdown.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<DropdownOptions>): Dropdown;
-  /**
-   * Initializes instances of Dropdown.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<DropdownOptions>): Dropdown[];
-  /**
-   * Initializes instances of Dropdown.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<DropdownOptions> = {}): Dropdown | Dropdown[] {
-    return super.init(els, options, Dropdown);
-  }
-
-  static getInstance(el: HTMLElement): Dropdown {
-    return (el as any).M_Dropdown;
-  }
-
-  destroy() {
-    this._resetDropdownStyles();
-    this._removeEventHandlers();
-    Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
-    (this.el as any).M_Dropdown = undefined;
-  }
-
-  _setupEventHandlers() {
-    // Trigger keydown handler
-    this.el.addEventListener('keydown', this._handleTriggerKeydown);
-    // Item click handler
-    this.dropdownEl?.addEventListener('click', this._handleDropdownClick);
-    // Hover event handlers
-    if (this.options.hover) {
-      this.el.addEventListener('mouseenter', this._handleMouseEnter);
-      this.el.addEventListener('mouseleave', this._handleMouseLeave);
-      this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave);
-      // Click event handlers
-    } else {
-      this.el.addEventListener('click', this._handleClick);
-    }
-  }
-
-  _removeEventHandlers() {
-    this.el.removeEventListener('keydown', this._handleTriggerKeydown);
-    this.dropdownEl.removeEventListener('click', this._handleDropdownClick);
-    if (this.options.hover) {
-      this.el.removeEventListener('mouseenter', this._handleMouseEnter);
-      this.el.removeEventListener('mouseleave', this._handleMouseLeave);
-      this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave);
-    } else {
-      this.el.removeEventListener('click', this._handleClick);
-    }
-  }
-
-  _setupTemporaryEventHandlers() {
-    // Use capture phase event handler to prevent click
-    document.body.addEventListener('click', this._handleDocumentClick, true);
-    document.body.addEventListener('touchmove', this._handleDocumentTouchmove);
-    this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown);
-  }
-
-  _removeTemporaryEventHandlers() {
-    // Use capture phase event handler to prevent click
-    document.body.removeEventListener('click', this._handleDocumentClick, true);
-    document.body.removeEventListener('touchmove', this._handleDocumentTouchmove);
-    this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown);
-  }
-
-  _handleClick = (e: MouseEvent) => {
-    e.preventDefault();
-    this.open();
-  }
-
-  _handleMouseEnter = () => {
-    this.open();
-  }
-
-  _handleMouseLeave = (e: MouseEvent) => {
-    const toEl = e.relatedTarget as HTMLElement;
-    const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
-    let leaveToActiveDropdownTrigger = false;
-    const closestTrigger = toEl.closest('.dropdown-trigger');
-    if (
-      closestTrigger &&
-      !!(<any>closestTrigger).M_Dropdown &&
-      (<any>closestTrigger).M_Dropdown.isOpen
-    ) {
-      leaveToActiveDropdownTrigger = true;
-    }
-    // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
-    if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
-      this.close();
-    }
-  }
-
-  _handleDocumentClick = (e: MouseEvent) => {
-    const target = <HTMLElement>e.target;
-    if (
-      this.options.closeOnClick &&
-      target.closest('.dropdown-content') &&
-      !this.isTouchMoving
-    ) {
-      // isTouchMoving to check if scrolling on mobile.
-      //setTimeout(() => {
-      this.close();
-      //}, 0);
-    }
-    else if (
-      target.closest('.dropdown-trigger') ||
-      !target.closest('.dropdown-content')
-    ) {
-      //setTimeout(() => {
-      this.close();
-      //}, 0);
-    }
-    this.isTouchMoving = false;
-  }
-
-  _handleTriggerKeydown = (e: KeyboardEvent) => {
-    // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
-    const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
-    if (arrowDownOrEnter && !this.isOpen) {
-      e.preventDefault();
-      this.open();
-    }
-  }
-
-  _handleDocumentTouchmove = (e: TouchEvent) => {
-    const target = <HTMLElement>e.target;
-    if (target.closest('.dropdown-content')) {
-      this.isTouchMoving = true;
-    }
-  }
-
-  _handleDropdownClick = (e: MouseEvent) => {
-    // onItemClick callback
-    if (typeof this.options.onItemClick === 'function') {
-      const itemEl = (<HTMLElement>e.target).closest('li');
-      this.options.onItemClick.call(this, itemEl);
-    }
-  }
-
-  _handleDropdownKeydown = (e: KeyboardEvent) => {
-    const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
-    if (Utils.keys.TAB.includes(e.key)) {
-      e.preventDefault();
-      this.close();
-    }
-    // Navigate down dropdown list
-    else if (arrowUpOrDown && this.isOpen) {
-      e.preventDefault();
-      const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
-      let newFocusedIndex = this.focusedIndex;
-      let hasFoundNewIndex = false;
-      do {
-        newFocusedIndex = newFocusedIndex + direction;
-        if (
-          !!this.dropdownEl.children[newFocusedIndex] &&
-          (<any>this.dropdownEl.children[newFocusedIndex]).tabIndex !== -1
-        ) {
-          hasFoundNewIndex = true;
-          break;
-        }
-      } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
-
-      if (hasFoundNewIndex) {
-        // Remove active class from old element
-        if (this.focusedIndex >= 0)
-          this.dropdownEl.children[this.focusedIndex].classList.remove('active');
-        this.focusedIndex = newFocusedIndex;
-        this._focusFocusedItem();
-      }
-    }
-    // ENTER selects choice on focused item
-    else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
-      // Search for <a> and <button>
-      const focusedElement = this.dropdownEl.children[this.focusedIndex];
-      const activatableElement = <HTMLElement>focusedElement.querySelector('a, button');
-      // Click a or button tag if exists, otherwise click li tag
-      if (!!activatableElement) {
-        activatableElement.click();
-      }
-      else if (!!focusedElement) {
-        if (focusedElement instanceof HTMLElement) {
-          focusedElement.click();
-        }
-      }
-    }
-    // Close dropdown on ESC
-    else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
-      e.preventDefault();
-      this.close();
-    }
-
-    // CASE WHEN USER TYPE LTTERS
-    const keyText = e.key.toLowerCase();
-    const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
-    const specialKeys = [...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP, ...Utils.keys.ENTER, ...Utils.keys.ESC, ...Utils.keys.TAB];
-    if (isLetter && !specialKeys.includes(e.key)) {
-      this.filterQuery.push(keyText);
-      const string = this.filterQuery.join('');
-      const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li'))
-        .find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
-      if (newOptionEl) {
-        this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
-        this._focusFocusedItem();
-      }
-    }
-    this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
-  }
-
-  _resetFilterQuery = () => {
-    this.filterQuery = [];
-  }
-
-  _resetDropdownStyles() {
-    this.dropdownEl.style.display = '';
-    this.dropdownEl.style.width = '';
-    this.dropdownEl.style.height = '';
-    this.dropdownEl.style.left = '';
-    this.dropdownEl.style.top = '';
-    this.dropdownEl.style.transformOrigin = '';
-    this.dropdownEl.style.transform = '';
-    this.dropdownEl.style.opacity = '';
-  }
-
-  // Move dropdown after container or trigger
-  _moveDropdown(containerEl: HTMLElement = null) {
-    if (!!this.options.container) {
-      this.options.container.append(this.dropdownEl);
-    }
-    else if (containerEl) {
-      if (!containerEl.contains(this.dropdownEl)) {
-        containerEl.append(this.dropdownEl);
-      }
-    }
-    else {
-      this.el.after(this.dropdownEl);
-    }
-  }
-
-  _makeDropdownFocusable() {
-    if (!this.dropdownEl) return;
-    // Needed for arrow key navigation
-    this.dropdownEl.tabIndex = 0;
-    // Only set tabindex if it hasn't been set by user
-    Array.from(this.dropdownEl.children).forEach((el)=> {
-      if (!el.getAttribute('tabindex'))
-        el.setAttribute('tabindex', '0');
-    });
-  }
-
-  _focusFocusedItem() {
-    if (
-      this.focusedIndex >= 0 &&
-      this.focusedIndex < this.dropdownEl.children.length &&
-      this.options.autoFocus
-    ) {
-      (this.dropdownEl.children[this.focusedIndex] as HTMLElement).focus({
-        preventScroll: true
-      });
-      this.dropdownEl.children[this.focusedIndex].scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }
-  }
-
-  _getDropdownPosition(closestOverflowParent: HTMLElement) {
-    const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
-    const triggerBRect = this.el.getBoundingClientRect();
-    const dropdownBRect = this.dropdownEl.getBoundingClientRect();
-
-    let idealHeight = dropdownBRect.height;
-    let idealWidth = dropdownBRect.width;
-    let idealXPos = triggerBRect.left - dropdownBRect.left;
-    let idealYPos = triggerBRect.top - dropdownBRect.top;
-
-    const dropdownBounds = {
-      left: idealXPos,
-      top: idealYPos,
-      height: idealHeight,
-      width: idealWidth
-    };
-
-    const alignments = Utils.checkPossibleAlignments(
-      this.el,
-      closestOverflowParent,
-      dropdownBounds,
-      this.options.coverTrigger ? 0 : triggerBRect.height
-    );
-
-    let verticalAlignment = 'top';
-    let horizontalAlignment = this.options.alignment;
-    idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
-
-    // Reset isScrollable
-    this.isScrollable = false;
-
-    if (!alignments.top) {
-      if (alignments.bottom) {
-        verticalAlignment = 'bottom';
-
-        if (!this.options.coverTrigger) {
-          idealYPos -= triggerBRect.height;
-        }
-      } else {
-        this.isScrollable = true;
-
-        // Determine which side has most space and cutoff at correct height
-        idealHeight -= 20; // Add padding when cutoff
-        if (alignments.spaceOnTop > alignments.spaceOnBottom) {
-          verticalAlignment = 'bottom';
-          idealHeight += alignments.spaceOnTop;
-          idealYPos -= this.options.coverTrigger
-            ? alignments.spaceOnTop - 20
-            : alignments.spaceOnTop - 20 + triggerBRect.height;
-        } else {
-          idealHeight += alignments.spaceOnBottom;
-        }
-      }
-    }
-
-    // If preferred horizontal alignment is possible
-    if (!alignments[horizontalAlignment]) {
-      const oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
-      if (alignments[oppositeAlignment]) {
-        horizontalAlignment = oppositeAlignment;
-      } else {
-        // Determine which side has most space and cutoff at correct height
-        if (alignments.spaceOnLeft > alignments.spaceOnRight) {
-          horizontalAlignment = 'right';
-          idealWidth += alignments.spaceOnLeft;
-          idealXPos -= alignments.spaceOnLeft;
-        } else {
-          horizontalAlignment = 'left';
-          idealWidth += alignments.spaceOnRight;
-        }
-      }
-    }
-
-    if (verticalAlignment === 'bottom') {
-      idealYPos =
-        idealYPos - dropdownBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
-    }
-    if (horizontalAlignment === 'right') {
-      idealXPos = idealXPos - dropdownBRect.width + triggerBRect.width;
-    }
-    return {
-      x: idealXPos,
-      y: idealYPos,
-      verticalAlignment: verticalAlignment,
-      horizontalAlignment: horizontalAlignment,
-      height: idealHeight,
-      width: idealWidth
-    };
-  }
-
-  _animateIn() {
-    anim.remove(this.dropdownEl);
-    anim({
-      targets: this.dropdownEl,
-      opacity: {
-        value: [0, 1],
-        easing: 'easeOutQuad'
-      },
-      scaleX: [0.3, 1],
-      scaleY: [0.3, 1],
-      duration: this.options.inDuration,
-      easing: 'easeOutQuint',
-      complete: (anim) => {
-        if (this.options.autoFocus) this.dropdownEl.focus();
-        // onOpenEnd callback
-        if (typeof this.options.onOpenEnd === 'function') {
-          this.options.onOpenEnd.call(this, this.el);
-        }
-      }
-    });
-  }
-
-  _animateOut() {
-    anim.remove(this.dropdownEl);
-    anim({
-      targets: this.dropdownEl,
-      opacity: {
-        value: 0,
-        easing: 'easeOutQuint'
-      },
-      scaleX: 0.3,
-      scaleY: 0.3,
-      duration: this.options.outDuration,
-      easing: 'easeOutQuint',
-      complete: (anim) => {
-        this._resetDropdownStyles();
-        // onCloseEnd callback
-        if (typeof this.options.onCloseEnd === 'function') {
-          this.options.onCloseEnd.call(this, this.el);
-        }
-      }
-    });
-  }
-
-  private _getClosestAncestor(el: HTMLElement, condition: Function): HTMLElement {
-    let ancestor = el.parentNode;
-    while (ancestor !== null && ancestor !== document) {
-      if (condition(ancestor)) {
-        return <HTMLElement>ancestor;
-      }
-      ancestor = ancestor.parentElement;
-    }
-    return null;
-  };
-
-  _placeDropdown() {
-    // Container here will be closest ancestor with overflow: hidden
-    let closestOverflowParent: HTMLElement = this._getClosestAncestor(this.dropdownEl, (ancestor: HTMLElement) => {
-      return !['HTML','BODY'].includes(ancestor.tagName) && getComputedStyle(ancestor).overflow !== 'visible';
-    });
-    // Fallback
-    if (!closestOverflowParent) {
-      closestOverflowParent = <HTMLElement>(!!this.dropdownEl.offsetParent
-        ? this.dropdownEl.offsetParent
-        : this.dropdownEl.parentNode);
-    }
-
-    if (getComputedStyle(closestOverflowParent).position === 'static')
-      closestOverflowParent.style.position = 'relative';
-
-    this._moveDropdown(closestOverflowParent);
-
-    // Set width before calculating positionInfo
-    const idealWidth = this.options.constrainWidth
-      ? this.el.getBoundingClientRect().width
-      : this.dropdownEl.getBoundingClientRect().width;
-    this.dropdownEl.style.width = idealWidth + 'px';
-
-    const positionInfo = this._getDropdownPosition(closestOverflowParent);
-    this.dropdownEl.style.left = positionInfo.x + 'px';
-    this.dropdownEl.style.top = positionInfo.y + 'px';
-    this.dropdownEl.style.height = positionInfo.height + 'px';
-    this.dropdownEl.style.width = positionInfo.width + 'px';
-    this.dropdownEl.style.transformOrigin = `${
-      positionInfo.horizontalAlignment === 'left' ? '0' : '100%'
-    } ${positionInfo.verticalAlignment === 'top' ? '0' : '100%'}`;
-  }
-
-  /**
-   * Open dropdown.
-   */
-  open = () => {
-    if (this.isOpen) return;
-    this.isOpen = true;
-    // onOpenStart callback
-    if (typeof this.options.onOpenStart === 'function') {
-      this.options.onOpenStart.call(this, this.el);
-    }
-    // Reset styles
-    this._resetDropdownStyles();
-    this.dropdownEl.style.display = 'block';
-    this._placeDropdown();
-    this._animateIn();
-    this._setupTemporaryEventHandlers();
-  }
-
-  /**
-   * Close dropdown.
-   */
-  close = () => {
-    if (!this.isOpen) return;
-    this.isOpen = false;
-    this.focusedIndex = -1;
-    // onCloseStart callback
-    if (typeof this.options.onCloseStart === 'function') {
-      this.options.onCloseStart.call(this, this.el);
-    }
-    this._animateOut();
-    this._removeTemporaryEventHandlers();
-    if (this.options.autoFocus) {
-      this.el.focus();
-    }
-  }
-
-  /**
-   * While dropdown is open, you can recalculate its dimensions if its contents have changed.
-   */
-  recalculateDimensions = () => {
-    if (this.isOpen) {
-      this.dropdownEl.style.width = '';
-      this.dropdownEl.style.height = '';
-      this.dropdownEl.style.left = '';
-      this.dropdownEl.style.top = '';
-      this.dropdownEl.style.transformOrigin = '';
-      this._placeDropdown();
-    }
-  }
-
-}

package/src/edges.ts

@@ -1,6 +0,0 @@
-export class Edges {
-  public top: boolean; // If the top edge was exceeded
-  public right: boolean; // If the right edge was exceeded
-  public bottom: boolean; // If the bottom edge was exceeded
-  public left: boolean; // If the left edge was exceeded
-}