@materializecss/materialize 1.2.2 → 2.0.1-alpha

package/src/characterCounter.ts

@@ -0,0 +1,88 @@
+import { Component } from "./component";
+
+let _defaults = {};
+
+export class CharacterCounter extends Component {
+  isInvalid: boolean;
+  isValidLength: boolean;
+  private _handleUpdateCounterBound: any;
+  counterEl: HTMLSpanElement;
+
+  constructor(el: Element, options: Object) {
+    super(CharacterCounter, el, options);
+    (this.el as any).M_CharacterCounter = this;
+    this.options = {...CharacterCounter.defaults, ...options};
+    this.isInvalid = false;
+    this.isValidLength = false;
+    this._setupCounter();
+    this._setupEventHandlers();
+  }
+
+  static get defaults() {
+    return _defaults;
+  }
+
+  static init(els, options) {
+    return super.init(this, els, options);
+  }
+
+  static getInstance(el) {
+    let domElem = !!el.jquery ? el[0] : el;
+    return domElem.M_CharacterCounter;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).CharacterCounter = undefined;
+    this._removeCounter();
+  }
+
+  _setupEventHandlers() {
+    this._handleUpdateCounterBound = this.updateCounter.bind(this);
+    this.el.addEventListener('focus', this._handleUpdateCounterBound, true);
+    this.el.addEventListener('input', this._handleUpdateCounterBound, true);
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('focus', this._handleUpdateCounterBound, true);
+    this.el.removeEventListener('input', this._handleUpdateCounterBound, true);
+  }
+
+  _setupCounter() {
+    this.counterEl = document.createElement('span');
+    this.counterEl.classList.add('character-counter');
+    this.counterEl.style.float = 'right';
+    this.counterEl.style.fontSize = '12px';
+    this.counterEl.style.height = '1';
+    this.el.parentElement.appendChild(this.counterEl);
+  }
+
+  _removeCounter() {
+    this.counterEl.remove();
+  }
+
+  updateCounter() {
+    let maxLength = parseInt(this.el.getAttribute('data-length')),
+      actualLength = (this.el as HTMLInputElement).value.length;
+
+    this.isValidLength = actualLength <= maxLength;
+    let counterString = actualLength.toString();
+    if (maxLength) {
+      counterString += '/' + maxLength;
+      this._validateInput();
+    }
+    this.counterEl.innerHTML = counterString;
+  }
+
+  _validateInput() {
+    if (this.isValidLength && this.isInvalid) {
+      this.isInvalid = false;
+      this.el.classList.remove('invalid');
+    }
+    else if (!this.isValidLength && !this.isInvalid) {
+      this.isInvalid = true;
+      this.el.classList.remove('valid');
+      this.el.classList.add('invalid');
+    }
+  }
+}

package/src/chips.ts

@@ -0,0 +1,350 @@
+import { Component } from "./component";
+import { M } from "./global";
+import { Autocomplete } from "./autocomplete";
+
+let _defaults = {
+  data: [],
+  placeholder: '',
+  secondaryPlaceholder: '',
+  autocompleteOptions: {},
+  autocompleteOnly: false,
+  limit: Infinity,
+  onChipAdd: null,
+  onChipSelect: null,
+  onChipDelete: null
+};
+
+interface DataBit {
+  id: string, // required
+  text?: string,
+  image?: string,
+  description?: string,
+}
+
+function gGetIndex(el: HTMLElement): number {
+  return [...el.parentNode.children].indexOf(el);
+}
+
+export class Chips extends Component {
+  chipsData: DataBit[];
+  hasAutocomplete: boolean;
+  autocomplete: Autocomplete;
+  _input: HTMLInputElement;
+  _label: any;
+  _chips: HTMLElement[];
+  private _handleChipClickBound: any;
+  private _handleInputKeydownBound: any;
+  private _handleInputFocusBound: any;
+  private _handleInputBlurBound: any;
+  static _keydown: boolean;
+  private _selectedChip: any;
+
+  constructor(el, options) {
+    super(Chips, el, options);
+    (this.el as any).M_Chips = this;
+    this.options = {...Chips.defaults, ...options};
+
+    this.el.classList.add('chips', 'input-field');
+    this.chipsData = [];
+    this._chips = [];
+    this._setupInput();
+    this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+
+    // Set input id
+    if (!this._input.getAttribute('id'))
+      this._input.setAttribute('id', M.guid());
+
+    // Render initial chips
+    if (this.options.data.length) {
+      this.chipsData = this.options.data;
+      this._renderChips();
+    }
+    // Setup autocomplete if needed
+    if (this.hasAutocomplete) this._setupAutocomplete();
+    this._setPlaceholder();
+    this._setupLabel();
+    this._setupEventHandlers();
+  }
+
+  static get defaults() {
+    return _defaults;
+  }
+
+  static init(els, options) {
+    return super.init(this, els, options);
+  }
+
+  static getInstance(el) {
+    const domElem = !!el.jquery ? el[0] : el;
+    return domElem.M_Chips;
+  }
+
+  getData() {
+    return this.chipsData;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    this._chips.forEach(c => c.remove());
+    this._chips = [];
+    (this.el as any).M_Chips = undefined;
+  }
+
+  _setupEventHandlers() {
+    this._handleChipClickBound = this._handleChipClick.bind(this);
+    this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
+    this._handleInputFocusBound = this._handleInputFocus.bind(this);
+    this._handleInputBlurBound = this._handleInputBlur.bind(this);
+    this.el.addEventListener('click', this._handleChipClickBound);
+    document.addEventListener('keydown', Chips._handleChipsKeydown);
+    document.addEventListener('keyup', Chips._handleChipsKeyup);
+    this.el.addEventListener('blur', Chips._handleChipsBlur, true);
+    this._input.addEventListener('focus', this._handleInputFocusBound);
+    this._input.addEventListener('blur', this._handleInputBlurBound);
+    this._input.addEventListener('keydown', this._handleInputKeydownBound);
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleChipClickBound);
+    document.removeEventListener('keydown', Chips._handleChipsKeydown);
+    document.removeEventListener('keyup', Chips._handleChipsKeyup);
+    this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
+    this._input.removeEventListener('focus', this._handleInputFocusBound);
+    this._input.removeEventListener('blur', this._handleInputBlurBound);
+    this._input.removeEventListener('keydown', this._handleInputKeydownBound);
+  }
+
+  _handleChipClick(e) {
+    const _chip = (<HTMLElement>e.target).closest('.chip');
+    const clickedClose = (<HTMLElement>e.target).classList.contains('close');
+    if (_chip) {
+      const index = [..._chip.parentNode.children].indexOf(_chip);
+      if (clickedClose) {
+        this.deleteChip(index);
+        this._input.focus();
+      }
+      else {
+        this.selectChip(index);
+      }
+      // Default handle click to focus on input
+    }
+    else {
+      this._input.focus();
+    }
+  }
+
+  static _handleChipsKeydown(e) {
+    Chips._keydown = true;
+    const chips = (<HTMLElement>e.target).closest('.chips');
+    const chipsKeydown = e.target && chips;
+
+    // Don't handle keydown inputs on input and textarea
+    const tag = (<HTMLElement>e.target).tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown) return;
+    
+    const currChips: Chips = (chips as any).M_Chips;
+    // backspace and delete
+    if (e.keyCode === 8 || e.keyCode === 46) {
+      e.preventDefault();
+      let selectIndex = currChips.chipsData.length;
+      if (currChips._selectedChip) {
+        const index = gGetIndex(currChips._selectedChip);
+        currChips.deleteChip(index);
+        currChips._selectedChip = null;
+        // Make sure selectIndex doesn't go negative
+        selectIndex = Math.max(index - 1, 0);
+      }
+      if (currChips.chipsData.length)
+        currChips.selectChip(selectIndex);
+      else
+        currChips._input.focus();
+    }
+    // left arrow key
+    else if (e.keyCode === 37) {
+      if (currChips._selectedChip) {
+        const selectIndex = gGetIndex(currChips._selectedChip) - 1;
+        if (selectIndex < 0) return;
+        currChips.selectChip(selectIndex);
+      }
+    }
+    // right arrow key
+    else if (e.keyCode === 39) {
+      if (currChips._selectedChip) {
+        const selectIndex = gGetIndex(currChips._selectedChip) + 1;
+        if (selectIndex >= currChips.chipsData.length)
+          currChips._input.focus();
+        else
+          currChips.selectChip(selectIndex);
+      }
+    }
+  }
+
+  static _handleChipsKeyup(e) {
+    Chips._keydown = false;
+  }
+
+  static _handleChipsBlur(e) {
+    if (!Chips._keydown && document.hidden) {
+      const chips = (<HTMLElement>e.target).closest('.chips');
+      const currChips: Chips = (chips as any).M_Chips;
+      currChips._selectedChip = null;
+    }
+  }
+
+  _handleInputFocus() {
+    this.el.classList.add('focus');
+  }
+
+  _handleInputBlur() {
+    this.el.classList.remove('focus');
+  }
+
+  _handleInputKeydown(e) {
+    Chips._keydown = true;
+    // enter
+    if (e.keyCode === 13) {
+      // Override enter if autocompleting.
+      if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+        return;
+      }
+      e.preventDefault();
+      if (!this.hasAutocomplete || (this.hasAutocomplete && !this.options.autocompleteOnly)) {
+        this.addChip({id: this._input.value});
+      }
+      this._input.value = '';
+      // delete or left
+    }
+    else if (
+      (e.keyCode === 8 || e.keyCode === 37) &&
+      this._input.value === '' &&
+      this.chipsData.length
+    ) {
+      e.preventDefault();
+      this.selectChip(this.chipsData.length - 1);
+    }
+  }
+
+  _renderChip(chip: DataBit): HTMLDivElement {
+    if (!chip.id) return;
+    const renderedChip = document.createElement('div');
+    renderedChip.classList.add('chip');
+    renderedChip.innerText = chip.text || chip.id;
+    renderedChip.setAttribute('tabindex', "0");
+    const closeIcon = document.createElement('i');
+    closeIcon.classList.add('material-icons', 'close');
+    closeIcon.innerText = 'close';
+    // attach image if needed
+    if (chip.image) {
+      const img = document.createElement('img');
+      img.setAttribute('src', chip.image);
+      renderedChip.insertBefore(img, renderedChip.firstChild);
+    }
+    renderedChip.appendChild(closeIcon);
+    return renderedChip;
+  }
+
+  _renderChips() {
+    this._chips = []; //.remove();
+    for (let i = 0; i < this.chipsData.length; i++) {
+      const chipElem = this._renderChip(this.chipsData[i]);
+      this.el.appendChild(chipElem);
+      this._chips.push(chipElem);
+    }
+    // move input to end
+    this.el.append(this._input);
+  }
+
+  _setupAutocomplete() {
+    this.options.autocompleteOptions.onAutocomplete = (items) => {
+      if (items.length > 0) this.addChip(items[0]);
+      this._input.value = '';
+      this._input.focus();
+    };
+    this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
+  }
+
+  _setupInput() {
+    this._input = this.el.querySelector('input');
+    if (!this._input) {
+      this._input = document.createElement('input');
+      this.el.append(this._input);
+    }
+    this._input.classList.add('input');
+  }
+
+  _setupLabel() {
+    this._label = this.el.querySelector('label');
+    if (this._label) this._label.setAttribute('for', this._input.getAttribute('id'));
+  }
+
+  _setPlaceholder() {
+    if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
+      this._input.placeholder = this.options.placeholder;
+    }
+    else if (
+      (this.chipsData === undefined || !!this.chipsData.length) &&
+      this.options.secondaryPlaceholder
+    ) {
+      this._input.placeholder = this.options.secondaryPlaceholder;
+    }
+  }
+
+  _isValidAndNotExist(chip: DataBit) {
+    const isValid = !!chip.id;
+    const doesNotExist = !this.chipsData.some(item => item.id == chip.id);
+    return isValid && doesNotExist;
+  }
+
+  addChip(chip: DataBit) {
+    if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit) return;
+    const renderedChip = this._renderChip(chip);
+    this._chips.push(renderedChip);
+    this.chipsData.push(chip);
+    //$(this._input).before(renderedChip);
+    this._input.before(renderedChip);
+    this._setPlaceholder();
+    // fire chipAdd callback
+    if (typeof this.options.onChipAdd === 'function') {
+      this.options.onChipAdd(this.el, renderedChip);
+    }
+  }
+
+  deleteChip(chipIndex: number) {
+    const chip = this._chips[chipIndex];
+    this._chips[chipIndex].remove();
+    this._chips.splice(chipIndex, 1);
+    this.chipsData.splice(chipIndex, 1);
+    this._setPlaceholder();
+    // fire chipDelete callback
+    if (typeof this.options.onChipDelete === 'function') {
+      this.options.onChipDelete(this.el, chip);
+    }
+  }
+
+  selectChip(chipIndex: number) {
+    const chip = this._chips[chipIndex];
+    this._selectedChip = chip;
+    chip.focus();
+    // fire chipSelect callback
+    if (typeof this.options.onChipSelect === 'function') {
+      this.options.onChipSelect(this.el, chip);
+    }
+  }
+
+  static Init(){
+    document.addEventListener("DOMContentLoaded", () => {
+      // Handle removal of static chips.
+      document.body.addEventListener('click', e => {
+        if ((<HTMLElement>e.target).closest('.chip .close')) {
+          const chips = (<HTMLElement>e.target).closest('.chips');
+          if (chips && (chips as any).M_Chips == undefined) return;
+          (<HTMLElement>e.target).closest('.chip').remove();
+        }
+      });
+    });
+  }
+
+  static {
+    Chips._keydown = false;
+  }
+}

package/src/collapsible.ts

@@ -0,0 +1,184 @@
+import { Component } from "./component";
+import anim from "animejs";
+
+const _defaults = {
+  accordion: true,
+  onOpenStart: undefined,
+  onOpenEnd: undefined,
+  onCloseStart: undefined,
+  onCloseEnd: undefined,
+  inDuration: 300,
+  outDuration: 300
+};
+
+export class Collapsible extends Component {
+  private _headers: HTMLElement[];
+  private _handleCollapsibleClickBound: any;
+  private _handleCollapsibleKeydownBound: any;
+
+  constructor(el, options) {
+    super(Collapsible, el, options);
+    (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() {
+    return _defaults;
+  }
+
+  static init(els, options) {
+    return super.init(this, els, options);
+  }
+
+  static getInstance(el) {
+    const domElem = !!el.jquery ? el[0] : el;
+    return domElem.M_Collapsible;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).M_Collapsible = undefined;
+  }
+
+  _setupEventHandlers() {
+    this._handleCollapsibleClickBound = this._handleCollapsibleClick.bind(this);
+    this._handleCollapsibleKeydownBound = this._handleCollapsibleKeydown.bind(this);
+    this.el.addEventListener('click', this._handleCollapsibleClickBound);
+    this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydownBound));
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleCollapsibleClickBound);
+    this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydownBound));
+  }
+
+  _handleCollapsibleClick(e) {
+    const header = e.target.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) {
+    if (e.keyCode === 13) {
+      this._handleCollapsibleClickBound(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(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(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/{js/component.js → src/component.ts}

@@ -1,44 +1,31 @@
-class Component {
-  /**
-   * Generic constructor for all components
-   * @constructor
-   * @param {Element} el
-   * @param {Object} options
-   */
-  constructor(classDef, el, options) {
+
+export class Component {
+
+  constructor(classDef, protected el: Element, protected options) {
     // Display error if el is valid HTML Element
     if (!(el instanceof Element)) {
       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;
-    this.$el = cash(el);
   }
 
-  /**
-   * Initializes components
-   * @param {class} classDef
-   * @param {Element | NodeList | jQuery} els
-   * @param {Object} options
-   */
   static init(classDef, els, options) {
     let instances = null;
     if (els instanceof Element) {
       instances = new classDef(els, options);
-    } else if (!!els && (els.jquery || els.cash || els instanceof NodeList)) {
+    }
+    else if (!!els && (els.jquery || els.cash || els instanceof NodeList || els instanceof HTMLCollection)) {
       let instancesArr = [];
       for (let i = 0; i < els.length; i++) {
         instancesArr.push(new classDef(els[i], options));
       }
       instances = instancesArr;
     }
-
     return instances;
   }
 }