@materializecss/materialize 2.0.3-alpha → 2.0.3

package/src/collapsible.ts

@@ -1,249 +0,0 @@
-import anim from "animejs";
-
-import { Utils } from "./utils";
-import { Component, BaseOptions, InitElements, MElement } from "./component";
-
-export interface CollapsibleOptions extends BaseOptions {
-  /**
-   * If accordion versus collapsible.
-   * @default true
-   */
-  accordion: boolean;
-  /**
-   * Transition in duration in milliseconds.
-   * @default 300
-   */
-  inDuration: number;
-  /**
-   * Transition out duration in milliseconds.
-   * @default 300
-   */
-  outDuration: number;
-  /**
-   * Callback function called before collapsible is opened.
-   * @default null
-   */
-  onOpenStart: (el: Element) => void;
-  /**
-   * Callback function called after collapsible is opened.
-   * @default null
-   */
-  onOpenEnd: (el: Element) => void;
-  /**
-   * Callback function called before collapsible is closed.
-   * @default null
-   */
-  onCloseStart: (el: Element) => void;
-  /**
-   * Callback function called after collapsible is closed.
-   * @default null
-   */
-  onCloseEnd: (el: Element) => void;
-}
-
-const _defaults: CollapsibleOptions = {
-  accordion: true,
-  onOpenStart: null,
-  onOpenEnd: null,
-  onCloseStart: null,  
-  onCloseEnd: null,
-  inDuration: 300,
-  outDuration: 300
-};
-
-export class Collapsible extends Component<CollapsibleOptions> {
-  private _headers: HTMLElement[];
-
-  constructor(el: HTMLElement, options: Partial<CollapsibleOptions>) {
-    super(el, options, Collapsible);
-    (this.el as any).M_Collapsible = this;
-
-    this.options = {
-      ...Collapsible.defaults,
-      ...options
-    };
-
-    // Setup tab indices
-    this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
-    this._headers.forEach(el => el.tabIndex = 0);
-    this._setupEventHandlers();
-    // Open first active
-    const activeBodies: HTMLElement[] = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
-    if (this.options.accordion)
-      if (activeBodies.length > 0)
-        activeBodies[0].style.display = 'block'; // Accordion
-    else
-      activeBodies.forEach(el => el.style.display = 'block'); // Expandables
-  }
-
-  static get defaults(): CollapsibleOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Collapsible.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<CollapsibleOptions>): Collapsible;
-  /**
-   * Initializes instances of Collapsible.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
-  /**
-   * Initializes instances of Collapsible.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<CollapsibleOptions> = {}): Collapsible | Collapsible[] {
-    return super.init(els, options, Collapsible);
-  }
-
-  static getInstance(el: HTMLElement): Collapsible {
-    return (el as any).M_Collapsible;
-  }
-
-  destroy() {
-    this._removeEventHandlers();
-    (this.el as any).M_Collapsible = undefined;
-  }
-
-  _setupEventHandlers() {
-    this.el.addEventListener('click', this._handleCollapsibleClick);
-    this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydown));
-  }
-
-  _removeEventHandlers() {
-    this.el.removeEventListener('click', this._handleCollapsibleClick);
-    this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
-  }
-
-  _handleCollapsibleClick = (e: MouseEvent | KeyboardEvent) => {
-    const header = (e.target as HTMLElement).closest('.collapsible-header');
-    if (e.target && header) {
-      const collapsible = header.closest('.collapsible');
-      if (collapsible !== this.el) return;
-
-      const li = header.closest('li');
-      const isActive = li.classList.contains('active');
-      const index = [...li.parentNode.children].indexOf(li);
-
-      if (isActive)
-        this.close(index);
-      else
-        this.open(index);
-    }
-  }
-
-  _handleCollapsibleKeydown = (e: KeyboardEvent) => {
-    if (Utils.keys.ENTER.includes(e.key)) {
-      this._handleCollapsibleClick(e);
-    }
-  }
-
-  _animateIn(index: number) {
-    const li = this.el.children[index];
-    if (!li) return;
-    const body: HTMLElement = li.querySelector('.collapsible-body');
-    anim.remove(body);
-    body.style.display = 'block';
-    body.style.overflow = 'hidden';
-    body.style.height = '0';
-    body.style.paddingTop = '';
-    body.style.paddingBottom = '';
-    const pTop = getComputedStyle(body).paddingTop; //  . css('padding-top');
-    const pBottom = getComputedStyle(body).paddingBottom; //body.css('padding-bottom');
-    const finalHeight = body.scrollHeight;
-    body.style.paddingTop = '0';
-    body.style.paddingBottom = '0';
-    anim({
-      targets: body,
-      height: finalHeight,
-      paddingTop: pTop,
-      paddingBottom: pBottom,
-      duration: this.options.inDuration,
-      easing: 'easeInOutCubic',
-      complete: (anim) => {
-        body.style.overflow = '';
-        body.style.height = '';
-        body.style.paddingTop = '';
-        body.style.paddingBottom = '';
-        // onOpenEnd callback
-        if (typeof this.options.onOpenEnd === 'function') {
-          this.options.onOpenEnd.call(this, li);
-        }
-      }
-    });
-  }
-
-  _animateOut(index: number) {
-    const li = this.el.children[index];
-    if (!li) return;
-    const body: HTMLElement = li.querySelector('.collapsible-body');
-    anim.remove(body);
-    body.style.overflow = 'hidden';
-    anim({
-      targets: body,
-      height: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-      duration: this.options.outDuration,
-      easing: 'easeInOutCubic',
-      complete: () => {
-        body.style.overflow = '';
-        body.style.height = '';
-        body.style.padding = '';
-        body.style.display = '';
-        // onCloseEnd callback
-        if (typeof this.options.onCloseEnd === 'function') {
-          this.options.onCloseEnd.call(this, li);
-        }
-      }
-    });
-  }
-
-  /**
-   * Open collapsible section.
-   * @param n Nth section to open.
-   */
-  open = (index: number) => {
-    const listItems = Array.from(this.el.children).filter(c => c.tagName === 'LI');
-    const li = listItems[index];
-    if (li && !li.classList.contains('active')) {
-      // onOpenStart callback
-      if (typeof this.options.onOpenStart === 'function') {
-        this.options.onOpenStart.call(this, li);
-      }
-      // Handle accordion behavior
-      if (this.options.accordion) {
-        const activeLis = listItems.filter(li => li.classList.contains('active'));
-        activeLis.forEach(activeLi => {
-          const index = listItems.indexOf(activeLi);
-          this.close(index);
-        });
-      }
-      // Animate in
-      li.classList.add('active');
-      this._animateIn(index);
-    }
-  }
-
-  /**
-   * Close collapsible section.
-   * @param n Nth section to close.
-   */
-  close = (index: number) => {
-    const li = Array.from(this.el.children).filter(c => c.tagName === 'LI')[index];
-    if (li && li.classList.contains('active')) {
-      // onCloseStart callback
-      if (typeof this.options.onCloseStart === 'function') {
-        this.options.onCloseStart.call(this, li);
-      }
-      // Animate out
-      li.classList.remove('active');
-      this._animateOut(index);
-    }
-  }
-}

package/src/component.ts

@@ -1,120 +0,0 @@
-/**
- * Base options for component initialization.
- */
-export interface BaseOptions {};
-
-export type MElement = HTMLElement | Element;
-export type InitElements<T extends MElement> = NodeListOf<T> | HTMLCollectionOf<T>;
-type ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {
-  new (el: HTMLElement, options: Partial<O>): T
-};
-type ComponentType<C extends Component<O>, O extends BaseOptions> = ComponentConstructor<C, O> & typeof Component<O>;
-
-export interface I18nOptions {
-  cancel: string;
-  clear: string;
-  done: string;
-}
-
-export interface Openable {
-  isOpen: boolean;
-  open(): void;
-  close(): void;
-};
-
-/**
- * Base class implementation for Materialize components.
- */
-export class Component<O extends BaseOptions>{
-  /**
-   * The DOM element the plugin was initialized with.
-   */
-  el: HTMLElement;
-  /**
-   * The options the instance was initialized with.
-   */
-  options: O;
-
-  /**
-   * Constructs component instance and set everything up.
-   */
-  constructor(el: HTMLElement, options: Partial<O>, classDef: ComponentType<Component<O>, O>){
-    // Display error if el is not a valid HTML Element
-    if (!(el instanceof HTMLElement)) {
-      console.error(Error(el + ' is not an HTML Element'));
-    }
-    // If exists, destroy and reinitialize in child
-    let ins = classDef.getInstance(el);
-    if (!!ins) {
-      ins.destroy();
-    }
-    this.el = el;
-  }
-
-  /**
-   * Initializes component instance.
-   * @param el HTML element.
-   * @param options Component options.
-   * @param classDef Class definition.
-   */
-  protected static init<
-    I extends HTMLElement, O extends BaseOptions, C extends Component<O>
-  >(el: I, options: O, classDef: ComponentType<C, O>): C;
-  /**
-   * Initializes component instances.
-   * @param els HTML elements.
-   * @param options Component options.
-   * @param classDef Class definition.
-   */
-  protected static init<
-    I extends MElement, O extends BaseOptions, C extends Component<O>
-  >(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
-  /**
-   * Initializes component instances.
-   * @param els HTML elements.
-   * @param options Component options.
-   * @param classDef Class definition.
-   */
-  protected static init<
-    I extends MElement, O extends BaseOptions, C extends Component<O>
-  >(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
-  /**
-   * Initializes component instances.
-   * @param els HTML elements.
-   * @param options Component options.
-   * @param classDef Class definition.
-   */
-  protected static init<
-    I extends MElement, O extends BaseOptions, C extends Component<O>
-  >(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[] {
-    let instances = null;
-    if (els instanceof Element) {
-      instances = new classDef(<HTMLElement>els, options);
-    }
-    else if (!!els && els.length) {
-      instances = [];
-      for (let i = 0; i < els.length; i++) {
-        instances.push(new classDef(<HTMLElement>els[i], options));
-      }
-    }
-    return instances;
-  }
-
-  /**
-   * @returns default options for component instance.
-   */
-  static get defaults(): BaseOptions{ return {}; }
-
-  /**
-   * Retrieves component instance for the given element.
-   * @param el Associated HTML Element.
-   */
-  static getInstance(el: HTMLElement): Component<BaseOptions> {
-    throw new Error("This method must be implemented.");
-  }
-
-  /**
-   * Destroy plugin instance and teardown.
-   */
-  destroy(): void { throw new Error("This method must be implemented."); }
-}