@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/adapters/list/index.js

@@ -1,16 +1,29 @@
-import { ListItem } from '../../components/list/index';
+import * as ListItem from '../../components/list/item.js';
+import DomAdapter from '../dom/index.js';
+
+/**
+ * @template T1
+ * @template T2
+ * @typedef {import('../dom/index').DomAdapterCreateOptions<T1,T2>} DomAdapterCreateOptions<T1,T2>
+ */
 
 /**
  * @param {HTMLLIElement} element
  * @param {any} data
  * @return {void}
  */
-function AnyListAdapterRendererFn(element, data) {
+function AnyListAdapterRenderer(element, data) {
   let primaryText = element.getElementsByClassName('mdw-list__text')[0];
   if (!primaryText) {
+    let contentElement = element.getElementsByClassName('mdw-list__content')[0];
+    if (!contentElement) {
+      contentElement = document.createElement('div');
+      contentElement.className = 'mdw-list__content';
+      element.appendChild(contentElement);
+    }
     primaryText = document.createElement('div');
-    primaryText.classList.add('mdw-list__text');
-    element.appendChild(primaryText);
+    primaryText.className = 'mdw-list__text';
+    contentElement.appendChild(primaryText);
     ListItem.attach(element);
   }
   let s = '';
@@ -28,119 +41,29 @@ function AnyListAdapterRendererFn(element, data) {
 
 /**
  * @template T
+ * @typedef {Object} ListAdapterCreateOptions
+ * @prop {HTMLElement} element
+ * @prop {Array<T>} datasource
+ * @prop {function(HTMLLIElement, T):void} [render={function(HTMLIElement,T):void}]
  */
-class ListAdapter {
-  /**
-   * @param {HTMLElement} element
-   * @param {Array<T>} datasource
-   * @param {function(HTMLLIElement, T)=} renderFn
-   */
-  constructor(element, datasource, renderFn) {
-    this.element = element;
-    this.datasource = datasource;
-    /** @type {Map<T, HTMLLIElement>} */
-    this.map = new Map();
-    this.render = renderFn || AnyListAdapterRendererFn;
-  }
-
-  /** @return {void} */
-  refresh() {
-    const unlinkedDataItems = [];
-    this.map.forEach((element, data) => {
-      if (this.datasource.indexOf(data) === -1) {
-        unlinkedDataItems.push(data);
-      }
-    });
-    unlinkedDataItems.forEach(data => () => {
-      this.removeItem(data);
-    });
-    this.datasource.forEach((data) => {
-      this.refreshItem(data);
-    });
-  }
-
-  /** @return {void} */
-  clear() {
-    this.map.clear();
-    while (this.element.lastChild) {
-      this.element.removeChild(this.element.lastChild);
-    }
-  }
 
-  /**
-   * @param {T} data
-   * @param {boolean} [checkPosition=true]
-   * @return {void}
-   */
-  refreshItem(data, checkPosition = true) {
-    const index = this.datasource.indexOf(data);
-    if (index === -1) {
-      this.removeItem(data);
-      return;
-    }
-    let elementIndex = -1;
-    let element = this.map.get(data);
-    if (!element) {
-      element = document.createElement('li');
-      element.classList.add('mdw-list__item');
-      this.map.set(data, element);
-    } else if (checkPosition) {
-      elementIndex = index;
-    } else {
-      let sibling = this.element.firstChild;
-      let siblingIndex = -1;
-      while (sibling) {
-        siblingIndex += 1;
-        if (sibling === element) {
-          elementIndex = siblingIndex;
-          break;
-        }
-        sibling = sibling.nextSibling;
-      }
-    }
-    this.render(element, data);
-    if (elementIndex === index) {
-      return;
-    }
-    if (elementIndex !== -1 && element.parentElement) {
-      element.parentElement.removeChild(element);
-    }
-    let idx = index;
-    let nextDataObject = this.datasource[idx + 1];
-    while (nextDataObject) {
-      const nextElement = this.map.get(nextDataObject);
-      if (nextElement) {
-        this.element.insertBefore(element, nextElement);
-        return;
-      }
-      idx += 1;
-      nextDataObject = this.datasource[idx + 1];
-    }
-    this.element.appendChild(element);
-  }
-
-  /**
-   * @param {T} data
-   * @return {void}
-   */
-  removeItem(data) {
-    const element = this.map.get(data);
-    if (!element) {
-      return;
-    }
-    if (element.parentElement) {
-      element.parentElement.removeChild(element);
+/**
+ * @template T
+ * @extends {DomAdapter<T, HTMLLIElement>}
+ */
+export default class ListAdapter extends DomAdapter {
+  /** @param {ListAdapterCreateOptions<T>} options */
+  constructor(options) {
+    super(options);
+    if (!options.render) {
+      this.render = AnyListAdapterRenderer;
     }
-    this.map.delete(data);
+    this.create = ListAdapter.create;
   }
 
-  detach() {
-    this.element.removeAttribute('mdw-adapter');
-    this.element = null;
-    this.datasource = null;
+  static create() {
+    const element = document.createElement('li');
+    element.classList.add('mdw-list__item');
+    return element;
   }
 }
-
-export {
-  ListAdapter,
-};

package/adapters/search/index.js

@@ -1,4 +1,9 @@
-import { TextField } from '../../components/textfield/index';
+// https://www.w3.org/TR/wai-aria-practices/#combobox
+
+import * as ListContent from '../../components/list/content.js';
+import * as List from '../../components/list/index.js';
+import * as TextField from '../../components/textfield/index.js';
+import { getTextNode } from '../../core/dom.js';
 
 /**
  * @param {string} input
@@ -7,7 +12,7 @@ import { TextField } from '../../components/textfield/index';
  */
 function containsTextFilter(input, content) {
   return content.trim().toLocaleLowerCase()
-    .indexOf(input.trim().toLocaleLowerCase()) !== -1;
+    .includes(input.trim().toLocaleLowerCase());
 }
 
 /**
@@ -25,54 +30,40 @@ function startsWithTextFilter(input, content) {
  * @return {string}
  */
 function defaultItemTextParser(item) {
-  /**
-   * @param {Node} node
-   * @return {string}
-   */
-  function getTextNodeOnly(node) {
-    let text = '';
-    for (let i = 0; i < node.childNodes.length; i += 1) {
-      const childNode = node.childNodes[i];
-      if (childNode.nodeType === Node.TEXT_NODE) {
-        text += childNode.textContent;
-      }
-    }
-    return text;
-  }
   if (item.hasAttribute('data-mdw-search-text')) {
     return item.getAttribute('data-mdw-search-text');
   }
-  let textElement = item.querySelector('.mdw-list__text .mdw-list__text-line');
-  if (!textElement) {
-    textElement = item.querySelector('.mdw-list__text');
-  }
-  if (!textElement) {
-    textElement = item.querySelector('.mdw-list__text');
-  }
-  if (textElement) {
-    return getTextNodeOnly(textElement);
+  let textElement;
+  [
+    'mdw-list__text-line',
+    'mdw-list__text',
+    'mdw-list__content',
+  ].some((className) => {
+    textElement = item.getElementsByClassName(className)[0];
+    return textElement != null;
+  });
+
+  const textNode = textElement ? getTextNode(textElement) : getTextNode(item);
+  if (textNode) {
+    return textNode.textContent || '';
   }
-  return getTextNodeOnly(item);
+  return '';
 }
 
 /**
  * @param {Element} list
- * @param {boolean=} backwards
+ * @param {boolean} [backwards=false]
  * @return {Element} sibling
  */
 function selectSibling(list, backwards) {
-  const current = list.querySelector('.mdw-list__item[mdw-selected]');
-  const items = list.querySelectorAll('.mdw-list__item:not([hidden]):not([disabled])');
+  const current = list.querySelector('[role="option"][aria-selected="true"]');
+  const items = list.querySelectorAll('[role="option"]:not([aria-hidden="true"]):not([disabled])');
   let sibling;
-  if (current && !current.hasAttribute('hidden')) {
-    for (let i = 0; i < items.length; i += 1) {
-      const item = items[i];
+  if (current && current.getAttribute('aria-hidden') !== 'true') {
+    for (let i = 0; i < items.length; i++) {
+      const item = items.item(i);
       if (item === current) {
-        if (backwards) {
-          sibling = items[i - 1];
-        } else {
-          sibling = items[i + 1];
-        }
+        sibling = backwards ? items[i - 1] : items[i + 1];
         break;
       }
     }
@@ -83,46 +74,50 @@ function selectSibling(list, backwards) {
   }
   if (sibling && sibling !== current) {
     if (current) {
-      current.removeAttribute('mdw-selected');
+      current.setAttribute('aria-selected', 'false');
     }
-    sibling.setAttribute('mdw-selected', '');
+    sibling.setAttribute('aria-selected', 'true');
     return sibling;
   }
   return null;
 }
 
 /**
- * @param {Element} listItem
- * @return {void}
+ * @param {Element} el
+ * @return {number}
  */
-function scrollItemIntoView(listItem) {
-  /**
-   * @param {Element} el
-   * @return {number}
-   */
-  function getElementVisibility(el) {
-    let rect = el.getBoundingClientRect();
-    const { top, height } = rect;
-    let next = el.parentElement;
-    do {
-      rect = next.getBoundingClientRect();
-      if ((top + height) > rect.bottom) {
-        // bottom clipped
-        return 1;
-      }
-      if (top < rect.top) {
-        // top clipped
-        return -1;
-      }
-      next = next.parentElement;
-    } while (next !== document.body);
-    if (top < 0) {
-      return -1;
-    } else if ((top + height) > document.documentElement.clientHeight) {
+function getElementVisibility(el) {
+  let rect = el.getBoundingClientRect();
+  const { top, height } = rect;
+  let next = el.parentElement;
+  do {
+    rect = next.getBoundingClientRect();
+    // eslint-disable-next-line unicorn/consistent-destructuring
+    if ((top + height) > rect.bottom) {
+      // bottom clipped
       return 1;
     }
-    return 0;
+    // eslint-disable-next-line unicorn/consistent-destructuring
+    if (top < rect.top) {
+      // top clipped
+      return -1;
+    }
+    next = next.parentElement;
+  } while (next !== document.body);
+  if (top < 0) {
+    return -1;
+  }
+  if ((top + height) > document.documentElement.clientHeight) {
+    return 1;
   }
+  return 0;
+}
+
+/**
+ * @param {Element} listItem
+ * @return {void}
+ */
+function scrollItemIntoView(listItem) {
   const visibility = getElementVisibility(listItem);
   if (visibility < 0) {
     listItem.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
@@ -136,28 +131,32 @@ function scrollItemIntoView(listItem) {
  * @param {string} input
  * @param {string} content
  * @return {boolean} passes
-*/
+ */
 
 /**
+ * @template T
  * @typedef SearchAdapterOptions
  * @prop {Element} textfield
  * @prop {Element} list
- * @prop {('contains'|'startsWith'|SearchAdapterTextFilter)=} [textFilter='contains']
- * @prop {(function(Element):string)=} itemTextParser
- * @prop {boolean=} [dropdown=false]
- * @prop {boolean=} [filterItems=true]
+ * @prop {('contains'|'startsWith'|SearchAdapterTextFilter)} [textFilter='contains']
+ * @prop {function(Element):string} [itemTextParser]
+ * @prop {boolean} [dropdown=false]
+ * @prop {boolean} [filterItems=true]
  * @prop {('replace'|'append'|'none')} [suggestionMethod='replace']
- * @prop {(function(string, Function, Function=))=} performSearch
- * @prop {(function(Function, Function))=} updateList
- * @prop {boolean=} [searchOnFocus=true]
- * @prop {number=} debounce Debounce time in milliseconds
+ * @prop {function(string):(Promise<T[]>)|T[]} [performSearch]
+ * @prop {function(T[]):(Promise<void>|void)} [updateList]
+ * @prop {boolean} [searchOnFocus=true]
+ * @prop {number} [debounce=null] Debounce time in milliseconds
  */
 
-class SearchAdapter {
-  /** @param {SearchAdapterOptions} options */
+/** @template T */
+export default class SearchAdapter {
+  /** @param {SearchAdapterOptions<T>} options */
   constructor(options) {
     this.textfield = options.textfield;
     this.list = options.list;
+    this.list.setAttribute('role', 'listbox');
+    List.attach(this.list);
     if (typeof options.textFilter === 'function') {
       this.filter = options.textFilter;
     } else if (options.textFilter === 'startsWith') {
@@ -166,12 +165,10 @@ class SearchAdapter {
       this.filter = containsTextFilter;
     }
     this.itemTextParser = defaultItemTextParser || options.itemTextParser;
-    /** @type {HTMLInputElement} */
-    const input = (this.textfield.getElementsByClassName('mdw-textfield__input')[0]);
+    const input = /** @type {HTMLInputElement} */ (this.textfield.getElementsByClassName('mdw-textfield__input')[0]);
     this.input = input;
-    this.list.addEventListener('mdw:itemactivated', (event) => {
-      /** @type {HTMLElement} */
-      const item = (event.target);
+    this.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+      const item = /** @type {HTMLElement} */(event.target);
       this.onItemSelected(item);
       const inputValue = this.input.value || '';
       this.suggestedInput = inputValue;
@@ -208,20 +205,38 @@ class SearchAdapter {
     this.debounce = options.debounce;
     this.suggestionMethod = options.suggestionMethod || 'replace';
     this.currentSearchTerm = this.input.value || '';
-    /** @type {string} */
+    /** @type {?string} */
     this.suggestedInput = null;
-    /** @type {string} */
+    /** @type {?string} */
     this.previousValue = null;
-    this.performSearch = options.performSearch || ((value, resolve = () => {}) => resolve());
-    this.updateList = options.updateList || ((results, resolve = () => {}) => resolve());
+    this.performSearch = options.performSearch || this.performSearch.bind(this);
+    this.updateList = options.updateList || this.updateList.bind(this);
+  }
+
+  /**
+   * @param {string} value
+   * @return {Promise<T[]>|T[]}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  performSearch(value) {
+    return [];
+  }
+
+  /**
+   * @param {T[]} results
+   * @return {Promise<void>|void}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  updateList(results) {
+    return undefined;
   }
 
   /**
    * Default input handler
-   * @param {Event=} event
+   * @param {Event} [event]
    * @return {void}
    */
-  handleInputEvent(event) { // eslint-disable-line no-unused-vars
+  handleInputEvent(event) { // eslint-disable-line @typescript-eslint/no-unused-vars
     if (document.activeElement !== this.input) {
       return;
     }
@@ -236,89 +251,54 @@ class SearchAdapter {
     this.previousValue = inputValue;
     this.currentSearchTerm = inputValue;
 
-    /**
-     * @param {Error} error
-     * @return {void}
-     */
-    function onErrorCallback(error) {
-      if (error.message === 'debounced') {
-        return;
-      }
-      if (error.message === 'expired') {
-        return;
+    void (async () => {
+      try {
+        await this.performDebounce(inputValue);
+        await this.checkExpired(inputValue);
+        const searchResults = await this.performSearch(inputValue);
+        await this.checkExpired(inputValue);
+        await this.updateList(searchResults);
+        await this.filterListItems();
+      } catch (error) {
+        if (error.message === 'debounced') {
+          return;
+        }
+        if (error.message === 'expired') {
+          return;
+        }
+        throw error;
       }
-      throw error;
-    }
-    // IE does not support ES6 Promises
-    // Using resolve/reject callbacks instead.
-    // Syntactically ugly, but removes need for a polyfill.
-    this.performDebounce(inputValue, () => {
-      this.checkExpired(inputValue, () => {
-        this.performSearch(inputValue, (searchResults) => {
-          this.checkExpired(inputValue, () => {
-            this.updateList(searchResults, () => {
-              this.filterListItems();
-            });
-          }, onErrorCallback);
-        }, onErrorCallback);
-      }, onErrorCallback);
-    }, onErrorCallback);
-
-    /**
-     * Promise.resolve()
-     *   .then(() => this.performDebounce(inputValue))
-     *   .then(() => this.checkExpired(inputValue))
-     *   .then(() => this.performSearch(inputValue))
-     *   .then((searchResults) => {
-     *     results = searchResults;
-     *   })
-     *   .then(() => this.checkExpired(inputValue))
-     *   .then(() => this.updateList(results))
-     *   .then(() => this.filterListItems())
-     *   .catch((error) => {
-     *     if (error.message === 'debounced') {
-     *       return;
-     *     }
-     *     if (error.message === 'expired') {
-     *       return;
-     *     }
-     *     throw error;
-     *   });
-     */
+    })();
   }
 
   /**
    * @param {string} inputValue
-   * @param {function} resolve
-   * @param {function(Error)} reject
-   * @return {void}
+   * @return {Promise<void>}
    */
-  checkExpired(inputValue, resolve, reject) {
+  checkExpired(inputValue) {
     if (inputValue === this.currentSearchTerm) {
-      resolve();
-    } else {
-      reject(new Error('expired'));
+      return Promise.resolve();
     }
+    return Promise.reject(new Error('expired'));
   }
 
   /**
    * @param {string} searchTerm
-   * @param {function} resolve
-   * @param {function(Error)} reject
-   * @return {void}
+   * @return {Promise<void>}
    */
-  performDebounce(searchTerm, resolve, reject) {
+  performDebounce(searchTerm) {
     if (!this.debounce) {
-      resolve();
-      return;
+      return Promise.resolve();
     }
-    setTimeout(() => {
-      if (searchTerm !== this.currentSearchTerm) {
-        reject(new Error('debounced'));
-        return;
-      }
-      resolve();
-    }, this.debounce);
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (searchTerm !== this.currentSearchTerm) {
+          reject(new Error('debounced'));
+          return;
+        }
+        resolve();
+      }, this.debounce);
+    });
   }
 
   /** @return {boolean} handled */
@@ -374,7 +354,7 @@ class SearchAdapter {
    * @param {Event|FocusEvent} event
    * @return {void}
    */
-  handleBlurEvent(event) { // eslint-disable-line no-unused-vars
+  handleBlurEvent(event) { // eslint-disable-line @typescript-eslint/no-unused-vars
     if (this.dropdown) {
       const dropDownElement = this.textfield.querySelector('.mdw-textfield__dropdown');
       if (dropDownElement.hasAttribute('mdw-show')) {
@@ -410,7 +390,7 @@ class SearchAdapter {
   }
 
   /**
-   * @param {SearchAdapterTextFilter=} fnFilter
+   * @param {SearchAdapterTextFilter} [fnFilter]
    * @return {void}
    */
   filterListItems(fnFilter) {
@@ -418,21 +398,20 @@ class SearchAdapter {
       return;
     }
     const input = this.input.value;
-    const current = this.list.querySelector('.mdw-list__item[mdw-selected]');
-    const items = this.list.querySelectorAll('.mdw-list__item');
+    const current = this.list.querySelector('[role="option"][aria-selected="true"]');
+    const items = this.list.querySelectorAll('[role="option"]');
     let hasItem = false;
-    for (let i = 0; i < items.length; i += 1) {
-      const item = items[i];
+    for (const item of items) {
       const content = this.itemTextParser(item);
       const fn = fnFilter || this.filter;
       if (fn(input, content)) {
         hasItem = true;
-        item.removeAttribute('hidden');
+        item.setAttribute('aria-hidden', 'false');
       } else {
-        item.setAttribute('hidden', '');
+        item.setAttribute('aria-hidden', 'true');
       }
     }
-    if (current && current.hasAttribute('hidden')) {
+    if (current && current.getAttribute('aria-hidden') === 'true') {
       const newSelection = selectSibling(this.list);
       if (newSelection) {
         this.onItemSelected(newSelection);
@@ -493,24 +472,20 @@ class SearchAdapter {
       }
       case 'Enter': {
         /** @type {HTMLElement} */
-        const current = this.list.querySelector('.mdw-list__item[mdw-selected]');
-        if (current) {
-          if (this.hideDropDown()) {
-            current.click();
-            event.stopPropagation();
-            event.preventDefault();
-          }
+        const current = this.list.querySelector('[role="option"][aria-selected="true"]');
+        if (current && this.hideDropDown()) {
+          current.click();
+          event.stopPropagation();
+          event.preventDefault();
         }
         break;
       }
       case 'Tab': {
         /** @type {HTMLElement} */
-        const current = this.list.querySelector('.mdw-list__item[mdw-selected]');
-        if (current) {
-          if (this.hideDropDown()) {
-            current.click();
-            event.stopPropagation();
-          }
+        const current = this.list.querySelector('[role="option"][aria-selected="true"]');
+        if (current && this.hideDropDown()) {
+          current.click();
+          event.stopPropagation();
         }
         break;
       }
@@ -518,5 +493,3 @@ class SearchAdapter {
     }
   }
 }
-
-export { SearchAdapter }; // eslint-disable-line import/prefer-default-export