@materializecss/materialize 2.0.3-alpha → 2.0.3

package/src/tabs.ts

@@ -1,347 +0,0 @@
-import anim from "animejs";
-
-import { Carousel } from "./carousel";
-import { Component, BaseOptions, InitElements, MElement } from "./component";
-
-export interface TabsOptions extends BaseOptions {
-  /**
-   * Transition duration in milliseconds.
-   * @default 300
-   */
-  duration: number;
-  /**
-   * Callback for when a new tab content is shown.
-   * @default null
-   */
-  onShow: (newContent: Element) => void;
-  /**
-   * Set to true to enable swipeable tabs.
-   * This also uses the responsiveThreshold option.
-   * @default false
-   */
-  swipeable: boolean;
-  /**
-   * The maximum width of the screen, in pixels,
-   * where the swipeable functionality initializes.
-   * @default infinity
-   */
-  responsiveThreshold: number;
-};
-
-let _defaults: TabsOptions = {
-  duration: 300,
-  onShow: null,
-  swipeable: false,
-  responsiveThreshold: Infinity // breakpoint for swipeable
-};
-
-export class Tabs extends Component<TabsOptions> {
-  _tabLinks: NodeListOf<HTMLAnchorElement>;
-  _index: number;
-  _indicator: any;
-  _tabWidth: number;
-  _tabsWidth: number;
-  _tabsCarousel: any;
-  _activeTabLink: any;
-  _content: any;
-
-  constructor(el: HTMLElement, options: Partial<TabsOptions>) {
-    super(el, options, Tabs);
-    (this.el as any).M_Tabs = this;
-
-    this.options = {
-      ...Tabs.defaults,
-      ...options
-    };
-
-    this._tabLinks = this.el.querySelectorAll('li.tab > a');
-    this._index = 0;
-    this._setupActiveTabLink();
-    if (this.options.swipeable) {
-      this._setupSwipeableTabs();
-    } else {
-      this._setupNormalTabs();
-    }
-    // Setup tabs indicator after content to ensure accurate widths
-    this._setTabsAndTabWidth();
-    this._createIndicator();
-    this._setupEventHandlers();
-  }
-
-  static get defaults(): TabsOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Tabs.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<TabsOptions>): Tabs;
-  /**
-   * Initializes instances of Tabs.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<TabsOptions>): Tabs[];
-  /**
-   * Initializes instances of Tabs.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<TabsOptions> = {}): Tabs | Tabs[] {
-    return super.init(els, options, Tabs);
-  }
-
-  static getInstance(el: HTMLElement): Tabs {
-    return (el as any).M_Tabs;
-  }
-
-  destroy() {
-    this._removeEventHandlers();
-    this._indicator.parentNode.removeChild(this._indicator);
-    if (this.options.swipeable) {
-      this._teardownSwipeableTabs();
-    }
-    else {
-      this._teardownNormalTabs();
-    }
-    (this.el as any).M_Tabs = undefined;
-  }
-
-  /**
-   * The index of tab that is currently shown.
-   */
-  get index(){ return this._index; }
-
-  _setupEventHandlers() {
-    window.addEventListener('resize', this._handleWindowResize);
-    this.el.addEventListener('click', this._handleTabClick);
-  }
-
-  _removeEventHandlers() {
-    window.removeEventListener('resize', this._handleWindowResize);
-    this.el.removeEventListener('click', this._handleTabClick);
-  }
-
-  _handleWindowResize = () => {
-    this._setTabsAndTabWidth();
-    if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
-      this._indicator.style.left = this._calcLeftPos(this._activeTabLink)+'px';
-      this._indicator.style.right = this._calcRightPos(this._activeTabLink)+'px';
-    }
-  }
-
-  _handleTabClick = (e: MouseEvent) => {
-    const tabLink = e.target as HTMLAnchorElement;
-    const tab = tabLink.parentElement;
-    // Handle click on tab link only
-    if (!tabLink || !tab.classList.contains('tab')) return;
-    // is disabled?
-    if (tab.classList.contains('disabled')) {
-      e.preventDefault();
-      return;
-    }
-    // Act as regular link if target attribute is specified.
-    if (tabLink.hasAttribute('target')) return;
-    // Make the old tab inactive.
-    this._activeTabLink.classList.remove('active');
-    const _oldContent = this._content;
-    // Update the variables with the new link and content
-
-      this._activeTabLink = tabLink;
-      if (tabLink.hash)
-        this._content = document.querySelector(tabLink.hash);
-      this._tabLinks = this.el.querySelectorAll('li.tab > a');
-      // Make the tab active
-      this._activeTabLink.classList.add('active');
-      const prevIndex = this._index;
-      this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
-
-    // Swap content
-    if (this.options.swipeable) {
-      if (this._tabsCarousel) {
-        this._tabsCarousel.set(this._index, () => {
-          if (typeof this.options.onShow === 'function')
-            this.options.onShow.call(this, this._content);
-        });
-      }
-    } else {
-      if (this._content) {
-        this._content.style.display = 'block';
-        this._content.classList.add('active');
-        if (typeof this.options.onShow === 'function')
-          this.options.onShow.call(this, this._content);
-        if (_oldContent && _oldContent !== this._content) {
-          _oldContent.style.display = 'none';
-          _oldContent.classList.remove('active');
-        }
-      }
-    }
-    // Update widths after content is swapped (scrollbar bugfix)
-    this._setTabsAndTabWidth();
-    this._animateIndicator(prevIndex);
-    e.preventDefault();
-  }
-
-  _createIndicator() {
-    const indicator = document.createElement('li');
-    indicator.classList.add('indicator');
-    this.el.appendChild(indicator);
-    this._indicator = indicator;
-    this._indicator.style.left = this._calcLeftPos(this._activeTabLink)+'px';
-    this._indicator.style.right = this._calcRightPos(this._activeTabLink)+'px';
-  }
-
-  _setupActiveTabLink() {
-    // If the location.hash matches one of the links, use that as the active tab.
-    this._activeTabLink = Array.from(this._tabLinks).find((a: HTMLAnchorElement) => a.getAttribute('href') === location.hash);
-    // If no match is found, use the first link or any with class 'active' as the initial active tab.
-    if (!this._activeTabLink) {
-      this._activeTabLink = this.el.querySelector('li.tab a.active');
-    }
-    if (this._activeTabLink.length === 0) {
-      this._activeTabLink = this.el.querySelector('li.tab a');
-    }
-    Array.from(this._tabLinks).forEach((a: HTMLAnchorElement) => a.classList.remove('active'));
-    this._activeTabLink.classList.add('active');
-
-      this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0);
-      if (this._activeTabLink && this._activeTabLink.hash) {
-        this._content = document.querySelector(this._activeTabLink.hash);
-        this._content.classList.add('active');
-      }
-    }
-
-  _setupSwipeableTabs() {
-    // Change swipeable according to responsive threshold
-    if (window.innerWidth > this.options.responsiveThreshold)
-      this.options.swipeable = false;
-
-      const tabsContent = [];
-      this._tabLinks.forEach(a => {
-        if (a.hash) {
-          const currContent = document.querySelector(a.hash);
-          currContent.classList.add('carousel-item');
-          tabsContent.push(currContent);  
-        }
-      });
-
-    // Create Carousel-Wrapper around Tab-Contents
-    const tabsWrapper = document.createElement('div');
-    tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
-
-    // Wrap around
-    tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
-    tabsContent.forEach(tabContent => {
-      tabsWrapper.appendChild(tabContent);
-      tabContent.style.display = '';
-    });
-
-    // Keep active tab index to set initial carousel slide
-    const tab = this._activeTabLink.parentElement;
-    const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab);
-
-    this._tabsCarousel = Carousel.init(tabsWrapper, {
-      fullWidth: true,
-      noWrap: true,
-      onCycleTo: (item) => {
-        const prevIndex = this._index;
-        this._index = Array.from(item.parentNode.children).indexOf(item);
-        this._activeTabLink.classList.remove('active');
-        this._activeTabLink = Array.from(this._tabLinks)[this._index];
-        this._activeTabLink.classList.add('active');
-        this._animateIndicator(prevIndex);
-        if (typeof this.options.onShow === 'function')
-          this.options.onShow.call(this, this._content);
-      }
-    });
-    // Set initial carousel slide to active tab
-    this._tabsCarousel.set(activeTabIndex);
-  }
-
-  _teardownSwipeableTabs() {
-    const tabsWrapper = this._tabsCarousel.el;
-    this._tabsCarousel.destroy();
-    // Unwrap
-    tabsWrapper.after(tabsWrapper.children);
-    tabsWrapper.remove();
-  }
-
-  _setupNormalTabs() {
-    // Hide Tabs Content
-    Array.from(this._tabLinks).forEach((a) => {
-      if (a === this._activeTabLink) return;
-      if ((<HTMLAnchorElement>a).hash) {
-        const currContent = document.querySelector((<HTMLAnchorElement>a).hash);
-        if (currContent) (<HTMLElement>currContent).style.display = 'none';
-      }
-    });
-  }
-
-  _teardownNormalTabs() {
-    // show Tabs Content
-    this._tabLinks.forEach((a) => {
-      if (a.hash) {
-        const currContent = document.querySelector(a.hash) as HTMLElement;
-        if (currContent) currContent.style.display = '';
-      }
-    });
-  }
-
-  _setTabsAndTabWidth() {
-    this._tabsWidth = this.el.getBoundingClientRect().width;
-    this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
-  }
-
-  _calcRightPos(el) {
-    return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
-  }
-
-  _calcLeftPos(el) {
-    return Math.floor(el.offsetLeft);
-  }
-
-  /**
-   * Recalculate tab indicator position. This is useful when
-   * the indicator position is not correct.
-   */
-  updateTabIndicator() {
-    this._setTabsAndTabWidth();
-    this._animateIndicator(this._index);
-  }
-
-  _animateIndicator(prevIndex) {
-    let leftDelay = 0, rightDelay = 0;
-
-    if (this._index - prevIndex >= 0)
-      leftDelay = 90;
-    else
-      rightDelay = 90;
-
-    const animOptions = {
-      targets: this._indicator,
-      left: {
-        value: this._calcLeftPos(this._activeTabLink),
-        delay: leftDelay
-      },
-      right: {
-        value: this._calcRightPos(this._activeTabLink),
-        delay: rightDelay
-      },
-      duration: this.options.duration,
-      easing: 'easeOutQuad'
-    };
-    anim.remove(this._indicator);
-    anim(animOptions);
-  }
-
-  /**
-   * Show tab content that corresponds to the tab with the id.
-   * @param tabId The id of the tab that you want to switch to.
-   */
-  select(tabId: string) {
-    const tab = Array.from(this._tabLinks).find((a: HTMLAnchorElement) => a.getAttribute('href') === '#'+tabId);
-    if (tab) (<HTMLAnchorElement>tab).click();
-  }
-}

package/src/tapTarget.ts

@@ -1,273 +0,0 @@
-import { Utils } from "./utils";
-import { Component, BaseOptions, InitElements, MElement, Openable } from "./component";
-
-export interface TapTargetOptions extends BaseOptions {
-  /**
-   * Callback function called when Tap Target is opened.
-   * @default null
-   */
-  onOpen: (origin: HTMLElement) => void;
-  /**
-   * Callback function called when Tap Target is closed.
-   * @default null
-   */
-  onClose: (origin: HTMLElement) => void;
-};
-
-let _defaults: TapTargetOptions = {
-  onOpen: null,
-  onClose: null
-};
-
-export class TapTarget extends Component<TapTargetOptions> implements Openable {
-  /**
-   * If the tap target is open.
-   */
-  isOpen: boolean;
-
-  private wrapper: HTMLElement;
-  private _origin: HTMLElement;
-  private originEl: HTMLElement;
-  private waveEl: HTMLElement & Element & Node;
-  private contentEl: HTMLElement;
-
-  constructor(el: HTMLElement, options: Partial<TapTargetOptions>) {
-    super(el, options, TapTarget);
-    (this.el as any).M_TapTarget = this;
-
-    this.options = {
-      ...TapTarget.defaults,
-      ...options
-    };
-
-    this.isOpen = false;
-    // setup
-    this._origin = document.querySelector(`#${el.dataset.target}`);
-    this._setup();
-    this._calculatePositioning();
-    this._setupEventHandlers();
-  }
-
-  static get defaults(): TapTargetOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of TapTarget.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
-  /**
-   * Initializes instances of TapTarget.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<TapTargetOptions>): TapTarget[];
-  /**
-   * Initializes instances of TapTarget.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<TapTargetOptions> = {}): TapTarget | TapTarget[] {
-    return super.init(els, options, TapTarget);
-  }
-
-  static getInstance(el: HTMLElement): TapTarget {
-    return (el as any).M_TapTarget;
-  }
-
-  destroy() {
-    this._removeEventHandlers();
-    (this.el as any).TapTarget = undefined;
-  }
-
-  _setupEventHandlers() {
-    this.el.addEventListener('click', this._handleTargetClick);
-    this.originEl.addEventListener('click', this._handleOriginClick);
-    // Resize
-    window.addEventListener('resize', this._handleThrottledResize);
-  }
-
-  _removeEventHandlers() {
-    this.el.removeEventListener('click', this._handleTargetClick);
-    this.originEl.removeEventListener('click', this._handleOriginClick);
-    window.removeEventListener('resize', this._handleThrottledResize);
-  }
-
-  _handleThrottledResize: () => void = Utils.throttle(function(){ this._handleResize(); }, 200).bind(this);
-
-  _handleTargetClick = () => {
-    this.open();
-  }
-
-  _handleOriginClick = () => {
-    this.close();
-  }
-
-  _handleResize = () => {
-    this._calculatePositioning();
-  }
-
-  _handleDocumentClick = (e: MouseEvent | TouchEvent) => {
-    if (!(e.target as HTMLElement).closest('.tap-target-wrapper')) {
-      this.close();
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-
-  _setup() {
-    // Creating tap target
-    this.wrapper = this.el.parentElement;
-    this.waveEl = this.wrapper.querySelector('.tap-target-wave');
-    this.originEl = this.wrapper.querySelector('.tap-target-origin');
-    this.contentEl = this.el.querySelector('.tap-target-content');
-    // Creating wrapper
-    if (!this.wrapper.classList.contains('.tap-target-wrapper')) {
-      this.wrapper = document.createElement('div');
-      this.wrapper.classList.add('tap-target-wrapper');
-      this.el.before(this.wrapper);
-      this.wrapper.append(this.el);
-    }
-    // Creating content
-    if (!this.contentEl) {
-      this.contentEl = document.createElement('div');
-      this.contentEl.classList.add('tap-target-content');
-      this.el.append(this.contentEl);
-    }
-    // Creating foreground wave
-    if (!this.waveEl) {
-      this.waveEl = document.createElement('div');
-      this.waveEl.classList.add('tap-target-wave');
-      // Creating origin
-      if (!this.originEl) {
-        this.originEl = <HTMLElement>this._origin.cloneNode(true); // .clone(true, true);
-        this.originEl.classList.add('tap-target-origin');
-        this.originEl.removeAttribute('id');
-        this.originEl.removeAttribute('style');
-        this.waveEl.append(this.originEl);
-      }
-      this.wrapper.append(this.waveEl);
-    }
-  }
-
-  private _offset(el: HTMLElement) {
-    const box = el.getBoundingClientRect();
-    const docElem = document.documentElement;
-    return {
-      top: box.top + window.pageYOffset - docElem.clientTop,
-      left: box.left + window.pageXOffset - docElem.clientLeft
-    };
-  }
-
-  _calculatePositioning() {
-    // Element or parent is fixed position?
-    let isFixed = getComputedStyle(this._origin).position === 'fixed';
-    if (!isFixed) {
-
-      let currentElem: any = this._origin;
-      const parents = [];
-      while ((currentElem = currentElem.parentNode) && currentElem !== document)
-        parents.push(currentElem);
-
-      for (let i = 0; i < parents.length; i++) {
-        isFixed = getComputedStyle(parents[i]).position === 'fixed';
-        if (isFixed) break;
-      }
-    }
-    // Calculating origin
-    const originWidth = this._origin.offsetWidth;
-    const originHeight = this._origin.offsetHeight;
-    const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top;
-    const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left;
-
-    // Calculating screen
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    const scrollBarWidth = windowWidth - document.documentElement.clientWidth;
-    const centerX = windowWidth / 2;
-    const centerY = windowHeight / 2;
-    const isLeft = originLeft <= centerX;
-    const isRight = originLeft > centerX;
-    const isTop = originTop <= centerY;
-    const isBottom = originTop > centerY;
-    const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
-
-    // Calculating tap target
-    const tapTargetWidth = this.el.offsetWidth;
-    const tapTargetHeight = this.el.offsetHeight;
-    const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
-    const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
-    const tapTargetPosition = isFixed ? 'fixed' : 'absolute';
-
-    // Calculating content
-    const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
-    const tapTargetTextHeight = tapTargetHeight / 2;
-    const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
-    const tapTargetTextBottom = 0;
-    const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
-    const tapTargetTextRight = 0;
-    const tapTargetTextPadding = originWidth;
-    const tapTargetTextAlign = isBottom ? 'bottom' : 'top';
-
-    // Calculating wave
-    const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
-    const tapTargetWaveHeight = tapTargetWaveWidth;
-    const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
-    const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
-
-    // Setting tap target
-    this.wrapper.style.top = isTop ? tapTargetTop + 'px' : '';
-    this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : '';
-    this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : '';
-    this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : '';
-    this.wrapper.style.position = tapTargetPosition;
-
-    // Setting content
-    this.contentEl.style.width = tapTargetTextWidth + 'px';
-    this.contentEl.style.height = tapTargetTextHeight + 'px';
-    this.contentEl.style.top = tapTargetTextTop + 'px';
-    this.contentEl.style.right = tapTargetTextRight + 'px';
-    this.contentEl.style.bottom = tapTargetTextBottom + 'px';
-    this.contentEl.style.left = tapTargetTextLeft + 'px';
-    this.contentEl.style.padding = tapTargetTextPadding + 'px';
-    this.contentEl.style.verticalAlign = tapTargetTextAlign;
-
-    // Setting wave
-    this.waveEl.style.top = tapTargetWaveTop+'px';
-    this.waveEl.style.left = tapTargetWaveLeft+'px';
-    this.waveEl.style.width = tapTargetWaveWidth+'px';
-    this.waveEl.style.height = tapTargetWaveHeight+'px';
-  }
-
-  /**
-   * Open Tap Target.
-   */
-  open = () => {
-    if (this.isOpen) return;
-    // onOpen callback
-    if (typeof this.options.onOpen === 'function') {
-      this.options.onOpen.call(this, this._origin);
-    }
-    this.isOpen = true;
-    this.wrapper.classList.add('open');
-    document.body.addEventListener('click', this._handleDocumentClick, true);
-    document.body.addEventListener('touchend', this._handleDocumentClick);
-  };
-
-  /**
-   * Close Tap Target.
-   */
-  close = () => {
-    if (!this.isOpen) return;
-    // onClose callback
-    if (typeof this.options.onClose === 'function') {
-      this.options.onClose.call(this, this._origin);
-    }
-    this.isOpen = false;
-    this.wrapper.classList.remove('open');
-    document.body.removeEventListener('click', this._handleDocumentClick, true);
-    document.body.removeEventListener('touchend', this._handleDocumentClick);
-  };
-}