kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/chip/chips.ts

@@ -0,0 +1,440 @@
+import { Utils } from '../../src/utils';
+import { Autocomplete, AutocompleteOptions } from '../search/autocomplete';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+interface ChipData {
+  /** Unique identifier. */
+  id: number | string;
+  /** Chip text. If not specified, "id" will be used. */
+  text?: string;
+  /** Chip image (URL). */
+  image?: string;
+}
+
+interface ChipsOptions extends BaseOptions {
+  /**
+   * Set the chip data.
+   * @default []
+   */
+  data: ChipData[];
+  /**
+   * Set first placeholder when there are no tags.
+   * @default ""
+   */
+  placeholder: string;
+  /**
+   * Set second placeholder when adding additional tags.
+   * @default ""
+   */
+  secondaryPlaceholder: string;
+  /**
+   * Set autocomplete options.
+   * @default {}
+   */
+  autocompleteOptions: Partial<AutocompleteOptions>;
+  /**
+   * Toggles abililty to add custom value not in autocomplete list.
+   * @default false
+   */
+  autocompleteOnly: boolean;
+  /**
+   * Set chips limit.
+   * @default Infinity
+   */
+  limit: number;
+  /**
+   * Specifies class to be used in "close" button (useful when working with Material Symbols icon set).
+   * @default 'material-icons'
+   */
+  closeIconClass: string;
+  /**
+   *  Specifies option to render user input field
+   *  @default false;
+   */
+  allowUserInput: boolean;
+  /**
+   * Callback for chip add.
+   * @default null
+   */
+  onChipAdd: (element: HTMLElement, chip: HTMLElement) => void;
+  /**
+   * Callback for chip select.
+   * @default null
+   */
+  onChipSelect: (element: HTMLElement, chip: HTMLElement) => void;
+  /**
+   * Callback for chip delete.
+   * @default null
+   */
+  onChipDelete: (element: HTMLElement, chip: HTMLElement) => void;
+}
+
+const _defaults: ChipsOptions = {
+  data: [],
+  placeholder: '',
+  secondaryPlaceholder: '',
+  closeIconClass: 'material-icons',
+  autocompleteOptions: {},
+  autocompleteOnly: false,
+  limit: Infinity,
+  allowUserInput: false,
+  onChipAdd: null,
+  onChipSelect: null,
+  onChipDelete: null
+};
+
+function gGetIndex(el: HTMLElement): number {
+  return [...el.parentNode.children].indexOf(el);
+}
+
+class Chips extends Component<ChipsOptions> {
+  /** Array of the current chips data. */
+  chipsData: ChipData[];
+  /** If the chips has autocomplete enabled. */
+  hasAutocomplete: boolean;
+  /** Autocomplete instance, if any. */
+  autocomplete: Autocomplete;
+  #input: HTMLInputElement;
+  #label: HTMLLabelElement;
+  #chips: HTMLElement[];
+  static #keydown: boolean;
+  #selectedChip: HTMLElement;
+
+  constructor(el: HTMLElement, options: Partial<ChipsOptions>) {
+    super(el, options, Chips);
+    this.el['M_Chips'] = this;
+    this.options = {
+      ...Chips.defaults,
+      ...options
+    };
+    this.el.classList.add('chips');
+    this.chipsData = [];
+    this.#chips = [];
+    // Render initial chips
+    if (this.options.data.length) {
+      this.chipsData = this.options.data;
+      this.#renderChips();
+    }
+    // Render input element, setup event handlers
+    if (this.options.allowUserInput) {
+      this.#setupLabel();
+      this.el.classList.add('input-field');
+      this.#setupInput();
+      this.#setupEventHandlers();
+      // move input to end
+      this.el.append(this.#input);
+    }
+  }
+
+  static get defaults() {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Chips.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<ChipsOptions>): Chips;
+  /**
+   * Initializes instances of Chips.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<ChipsOptions>): Chips[];
+  /**
+   * Initializes instances of Chips.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<ChipsOptions> = {}
+  ): Chips | Chips[] {
+    return super.init(els, options, Chips);
+  }
+
+  static getInstance(el: HTMLElement): Chips {
+    return el['M_Chips'];
+  }
+
+  getData() {
+    return this.chipsData;
+  }
+
+  destroy() {
+    if (this.options.allowUserInput) this.#removeEventHandlers();
+    this.#chips.forEach((c) => c.remove());
+    this.#chips = [];
+    this.el['M_Chips'] = undefined;
+  }
+
+  #setupEventHandlers() {
+    this.el.addEventListener('click', this.#handleChipClick);
+    // @todo why do we need this as document event listener, shouldn't we apply it to the element wrapper itself?
+    document.addEventListener('keydown', Chips.#handleChipsKeydown);
+    document.addEventListener('keyup', Chips.#handleChipsKeyup);
+    this.el.addEventListener('blur', Chips.#handleChipsBlur, true);
+    this.#input.addEventListener('focus', this.#handleInputFocus);
+    this.#input.addEventListener('blur', this.#handleInputBlur);
+    this.#input.addEventListener('keydown', this.#handleInputKeydown);
+  }
+
+  #removeEventHandlers() {
+    this.el.removeEventListener('click', this.#handleChipClick);
+    document.removeEventListener('keydown', Chips.#handleChipsKeydown);
+    document.removeEventListener('keyup', Chips.#handleChipsKeyup);
+    this.el.removeEventListener('blur', Chips.#handleChipsBlur, true);
+    this.#input.removeEventListener('focus', this.#handleInputFocus);
+    this.#input.removeEventListener('blur', this.#handleInputBlur);
+    this.#input.removeEventListener('keydown', this.#handleInputKeydown);
+  }
+
+  #handleChipClick = (e: MouseEvent) => {
+    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: KeyboardEvent) {
+    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['M_Chips'];
+
+    if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
+      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();
+    } else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+      if (currChips.#selectedChip) {
+        const selectIndex = gGetIndex(currChips.#selectedChip) - 1;
+        if (selectIndex < 0) return;
+        currChips.selectChip(selectIndex);
+      }
+    } else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+      if (currChips.#selectedChip) {
+        const selectIndex = gGetIndex(currChips.#selectedChip) + 1;
+        if (selectIndex >= currChips.chipsData.length) currChips.#input.focus();
+        else currChips.selectChip(selectIndex);
+      }
+    }
+  }
+
+  static #handleChipsKeyup() {
+    Chips.#keydown = false;
+  }
+
+  static #handleChipsBlur(e: Event) {
+    if (!Chips.#keydown && document.hidden) {
+      const chips = (<HTMLElement>e.target).closest('.chips');
+      const currChips: Chips = chips['M_Chips'];
+      currChips.#selectedChip = null;
+    }
+  }
+
+  #handleInputFocus = () => {
+    this.el.classList.add('focus');
+  };
+
+  #handleInputBlur = () => {
+    this.el.classList.remove('focus');
+  };
+
+  #handleInputKeydown = (e: KeyboardEvent) => {
+    Chips.#keydown = true;
+    if (Utils.keys.ENTER.includes(e.key)) {
+      // 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 = '';
+    } else if (
+      (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
+      this.#input.value === '' &&
+      this.chipsData.length
+    ) {
+      e.preventDefault();
+      this.selectChip(this.chipsData.length - 1);
+    }
+  };
+
+  #renderChip(chip: ChipData): HTMLLIElement {
+    if (!chip.id) return;
+    const renderedChip = document.createElement('li');
+    renderedChip.classList.add('chip');
+    renderedChip.innerText = chip.text || <string>chip.id;
+    // attach image if needed
+    if (chip.image) {
+      const img = document.createElement('img');
+      img.setAttribute('src', chip.image);
+      renderedChip.insertBefore(img, renderedChip.firstChild);
+    }
+    if (this.options.allowUserInput) {
+      const closeButton = document.createElement('button');
+      closeButton.classList.add(this.options.closeIconClass, 'close');
+      closeButton.innerText = 'close';
+      renderedChip.appendChild(closeButton);
+    }
+    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);
+    }
+  }
+
+  #setupAutocomplete() {
+    this.options.autocompleteOptions.onAutocomplete = (items) => {
+      if (items.length > 0)
+        this.addChip({
+          id: items[0].id,
+          text: items[0].text,
+          image: items[0].image
+        });
+      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');
+    this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+    // Setup autocomplete if needed
+    if (this.hasAutocomplete) this.#setupAutocomplete();
+    this.#setPlaceholder();
+    // Set input id
+    if (!this.#input.getAttribute('id')) this.#input.setAttribute('id', Utils.guid());
+  }
+
+  #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: ChipData) {
+    const isValid = !!chip.id;
+    const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
+    return isValid && doesNotExist;
+  }
+
+  /**
+   * Add chip to input.
+   * @param chip Chip data object
+   */
+  addChip(chip: ChipData) {
+    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);
+    }
+  }
+
+  /**
+   * Delete nth chip.
+   * @param chipIndex  Index of chip
+   */
+  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);
+    }
+  }
+
+  /**
+   * Select nth chip.
+   * @param chipIndex Index of 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() {
+    if (typeof document !== 'undefined')
+      // Handle removal of static chips.
+      document.addEventListener('DOMContentLoaded', () => {
+        const chips = document.querySelectorAll('.chips');
+        chips.forEach((el) => {
+          // if (el && (el['M_Chips == undefined) return;
+          el.addEventListener('click', (e) => {
+            if ((<HTMLElement>e.target).classList.contains('close')) {
+              const chip = (<HTMLElement>e.target).closest('.chip');
+              if (chip) chip.remove();
+            }
+          });
+        });
+      });
+  }
+
+  static {
+    this.#keydown = false;
+  }
+}
+
+export { Chips, ChipData, ChipsOptions };

package/components/chip/chipsSpec.js

@@ -0,0 +1,165 @@
+describe('Chips', () => {
+  const fixture = `<div class="chips"></div>
+<div class="chips chips-initial"></div>
+<div class="chips input-field"><input></div>
+<div class="chips chips-initial input-field"><input></div>
+<div class="chips chips-placeholder input-field"><input></div>
+<div class="chips chips-autocomplete input-field"><input></div>`;
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    M.Chips.init(document.querySelector('.chips'));
+    M.Chips.init(document.querySelector('.chips-initial'), {
+      data: [
+        { id: 12, text: 'Apple' },
+        { id: 13, text: 'Microsoft' },
+        {
+          id: 42,
+          text: 'Google',
+          image:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
+        }
+      ]
+    });
+    M.Chips.init(document.querySelector('.chips.input-field'), {
+      allowUserInput: true
+    });
+    M.Chips.init(document.querySelector('.chips-initial.input-field'), {
+      allowUserInput: true,
+      data: [
+        { id: 12, text: 'Apple' },
+        { id: 13, text: 'Microsoft' },
+        {
+          id: 42,
+          text: 'Google',
+          image:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
+        }
+      ]
+    });
+    M.Chips.init(document.querySelector('.chips-placeholder.input-field'), {
+      allowUserInput: true,
+      placeholder: 'Enter a tag',
+      secondaryPlaceholder: '+Tag'
+    });
+    M.Chips.init(document.querySelector('.chips-autocomplete.input-field'), {
+      allowUserInput: true,
+      autocompleteOptions: {
+        data: [
+          { id: 12, text: 'Apple' },
+          { id: 13, text: 'Microsoft' },
+          { id: 42, text: 'Google' }
+        ]
+      }
+    });
+  });
+  afterEach(() => XunloadFixtures());
+
+  describe('chips plugin', () => {
+    let chips, chipsUserInput, input;
+
+    it('should work with multiple initializations', () => {
+      chips = document.querySelector('.chips');
+      M.Chips.init(chips);
+      M.Chips.init(chips);
+      M.Chips.init(chips);
+      chipsUserInput = document.querySelector('.chips.input-field');
+      M.Chips.init(chips, { allowUserInput: true });
+      input = chipsUserInput.querySelectorAll('input');
+      expect(input.length).toEqual(1, 'Should dynamically generate chips structure.');
+    });
+
+    it('should be able to add chip', (done) => {
+      chips = document.querySelector('.chips.input-field');
+      input = chips.querySelector('input');
+      input.value = 'one';
+      keydown(input, 13);
+      setTimeout(() => {
+        const numChips = chips.querySelectorAll('.chip').length;
+        const oneChip = chips.querySelector('.chip');
+        expect(numChips).toEqual(1, 'one chip should have been added');
+        for (let i = oneChip.children.length - 1; i >= 0; i--) {
+          oneChip.children[i].remove();
+        }
+        expect(oneChip.innerText).toEqual('one', 'the chip should have value "one"');
+        done();
+      }, 100); // 400
+    });
+
+    it('should be able to delete chip', (done) => {
+      chips = document.querySelector('.chips.chips-initial.input-field');
+      let numChips = chips.querySelectorAll('.chip').length;
+      expect(numChips).toEqual(3, '3 initial chips should have been added');
+      const chipCloseButton = chips.querySelectorAll('.chip .close');
+      expect(chipCloseButton.length).toEqual(3, 'expected all chips to have close button');
+      click(chipCloseButton[0]);
+      setTimeout(() => {
+        numChips = chips.querySelectorAll('.chip').length;
+        expect(numChips).toEqual(2, 'one chip should have been deleted');
+        done();
+      }, 100); // 400
+    });
+
+    it('should have working callbacks', (done) => {
+      chips = document.querySelector('.chips.input-field');
+      let chipWasAdded = false;
+      let chipAddedElem = null;
+      let chipSelect = false;
+      let chipSelected = null;
+      let chipDelete = false;
+      let chipDeleted = null;
+
+      M.Chips.init(chips, {
+        allowUserInput: true,
+        data: [{ id: 'One' }, { id: 'Two' }, { id: 'Three' }],
+        onChipAdd: (chipsEl, chipEl) => {
+          chipAddedElem = chipEl;
+          chipWasAdded = true;
+        },
+        onChipSelect: (chipsEl, chipEl) => {
+          chipSelected = chipEl;
+          chipSelect = true;
+        },
+        onChipDelete: (chipsEl, chipEl) => {
+          chipDeleted = chipEl;
+          chipDelete = true;
+        }
+      });
+
+      input = chips.querySelector('input');
+      input.value = 'Four';
+      expect(chipWasAdded).toEqual(false, 'callback not yet fired');
+      expect(chipSelect).toEqual(false, 'callback not yet fired');
+      expect(chipDelete).toEqual(false, 'callback not yet fired');
+      keydown(input, 13);
+
+      setTimeout(() => {
+        expect(chipWasAdded).toEqual(true, 'add callback fired');
+        expect(chipAddedElem.childNodes[0].nodeValue).toEqual(
+          'Four',
+          'add callback provides correct chip element'
+        );
+        click(chips.querySelectorAll('.chip')[1]);
+        setTimeout(() => {
+          expect(chipSelect).toEqual(true, 'select callback fired');
+          expect(chipSelected.childNodes[0].nodeValue).toEqual(
+            'Two',
+            'select callback provides correct chip element'
+          );
+          click(chips.querySelectorAll('.close')[2]);
+          setTimeout(() => {
+            expect(chipDelete).toEqual(true, 'delete callback fired');
+            expect(chipDeleted.childNodes[0].nodeValue).toEqual(
+              'Three',
+              'add callback provides correct chip element'
+            );
+            done();
+          }, 100);
+        }, 100);
+      }, 100);
+    });
+  });
+
+  // describe("Chips autocomplete", () => {
+  // });
+});