@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/list/index.js

@@ -1,256 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#Listbox
-// https://www.w3.org/TR/wai-aria-practices/#TreeView
-// https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html
-
-import * as Attributes from '../../core/aria/attributes.js';
-import * as Keyboard from '../../core/aria/keyboard.js';
-import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
-
-import * as ListContent from './content.js';
-import * as ListItem from './item.js';
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onContentFocusEvent(event) {
-  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const onFocusInteraction = listElement.getAttribute('mdw-on-focus');
-  if (!onFocusInteraction) {
-    return;
-  }
-  const listContentElement = /** @type {HTMLElement} */ (event.target);
-  if (Attributes.isDisabled(listContentElement)) {
-    return;
-  }
-  for (const interaction of onFocusInteraction.split(' ')) {
-    switch (interaction) {
-      case 'select':
-        ListContent.setSelected(listContentElement, true);
-        break;
-      default:
-    }
-  }
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onSelectedChangeEvent(event) {
-  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
-  // List is readonly
-  if (listElement.getAttribute('aria-readonly') === 'true') {
-    event.stopPropagation();
-    event.preventDefault();
-    return;
-  }
-  const listElementRole = listElement.getAttribute('role');
-  if (listElementRole !== 'listbox' && listElementRole !== 'tree') {
-    // Bubble up
-    return;
-  }
-  if (event.detail.value === 'false') {
-    // Item is radio-like and cannot be unselected
-    if (listElement.getAttribute('aria-required') === 'true'
-      && listElement.getAttribute('aria-multiselectable') !== 'true') {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    return;
-  }
-  const itemElement = /** @type {HTMLElement} */ (event.target);
-  if (listElement.getAttribute('aria-multiselectable') !== 'true') {
-    // Item is radio-like and must uncheck others
-    setTimeout(() => {
-      // Wait to see if event is cancelled
-      if (event.defaultPrevented) {
-        return;
-      }
-      const role = itemElement.getAttribute('role');
-      for (const item of listElement.querySelectorAll(`[role="${role}"][aria-selected="true"]`)) {
-        if (item !== itemElement) {
-          item.setAttribute('aria-selected', 'false');
-        }
-      }
-    });
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onTabIndexZeroed(event) {
-  event.stopPropagation();
-  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const currentItem = /** @type {HTMLElement} */ (event.target);
-  switch (listElement.getAttribute('role')) {
-    case 'tree':
-      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="treeitem"]'), [currentItem]);
-      break;
-    case 'listbox':
-      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="option"]'), [currentItem]);
-      break;
-    case 'radiogroup':
-      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="radio"]'), [currentItem]);
-      break;
-    default:
-  }
-}
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onDownArrowKey(event) {
-  if (event.detail.ctrlKey || event.detail.altKey
-    || event.detail.shiftKey || event.detail.metaKey) {
-    return;
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
-  switch (listElement.getAttribute('role')) {
-    case 'tree':
-      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="treeitem"]'));
-      break;
-    case 'listbox':
-      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="option"]'));
-      break;
-    case 'radiogroup':
-      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="radio"]'));
-      break;
-    default:
-  }
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onUpArrowKey(event) {
-  if (event.detail.ctrlKey || event.detail.altKey
-    || event.detail.shiftKey || event.detail.metaKey) {
-    return;
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
-  switch (listElement.getAttribute('role')) {
-    case 'tree':
-      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="treeitem"]'));
-      break;
-    case 'listbox':
-      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="option"]'));
-      break;
-    case 'radiogroup':
-      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="radio"]'));
-      break;
-    default:
-  }
-}
-
-/**
- * @param {Element} listElement
- * @param {string} role
- * @return {void}
- */
-export function setupAria(listElement, role = 'tree') {
-  if (!listElement.hasAttribute('role')) {
-    listElement.setAttribute('role', role);
-  }
-  listElement.setAttribute('aria-orientation', 'vertical');
-  if (!listElement.hasAttribute('aria-multiselectable')) {
-    listElement.setAttribute('aria-multiselectable', 'false');
-  }
-}
-
-/**
- * @param {Element} listElement
- * @return {void}
- */
-export function attach(listElement) {
-  let role = listElement.getAttribute('role');
-  if (!role) {
-    let newRole = 'listbox';
-    const parentRole = listElement.parentElement && listElement.parentElement.getAttribute('role');
-    if (parentRole === 'treeitem') {
-      newRole = 'group';
-    } else {
-      for (const child of listElement.children) {
-        if (child.hasAttribute('aria-expanded') && child.classList.contains('mdw-list__item')) {
-          newRole = 'tree';
-          break;
-        }
-      }
-    }
-    listElement.setAttribute('role', newRole);
-    role = newRole;
-  }
-
-  setupAria(listElement, role);
-  for (const child of listElement.children) {
-    if (child.classList.contains('mdw-list__item')) {
-      ListItem.attach(child);
-    }
-  }
-  for (const el of listElement.getElementsByClassName('mdw-list')) {
-    attach(el);
-  }
-  if (listElement.hasAttribute('mdw-list-js')) {
-    return;
-  }
-  if (role !== 'listbox' && role !== 'tree' && role !== 'radiogroup') {
-    return;
-  }
-
-  switch (role) {
-    case 'tree':
-      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="treeitem"]'));
-      break;
-    case 'listbox':
-      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="option"]'));
-      break;
-    case 'radiogroup':
-      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="radio"]'));
-      break;
-    default:
-      return;
-  }
-
-  listElement.addEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
-  listElement.addEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);
-  listElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-  listElement.addEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
-  listElement.addEventListener(ListContent.FOCUS_EVENT, onContentFocusEvent);
-  listElement.setAttribute('mdw-list-js', '');
-}
-
-/**
- * @param {Element|Document} [root=document]
- * @return {void}
- */
-export function attachAll(root = document) {
-  for (const el of root.getElementsByClassName('mdw-list')) attach(el);
-}
-
-/**
- * @param {Element} listElement
- * @return {void}
- */
-export function detach(listElement) {
-  for (const child of listElement.children) {
-    if (child.classList.contains('mdw-list__item')) {
-      ListItem.detach(child);
-    }
-  }
-  const elements = listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`);
-  for (const element of elements) {
-    RovingTabIndex.detach(element);
-  }
-  listElement.removeEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
-  listElement.removeEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
-  listElement.removeEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);
-  listElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-  listElement.removeAttribute('mdw-list-js');
-}

package/components/list/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';

package/components/list/item.js

@@ -1,167 +0,0 @@
-import * as Keyboard from '../../core/aria/keyboard.js';
-import { getChildElementByClass } from '../../core/dom.js';
-
-import * as ListContent from './content.js';
-
-/**
- * @param {Element} listItemElement
- * @return {boolean}
- */
-export function isExpanded(listItemElement) {
-  return (listItemElement.getAttribute('aria-expanded') === 'true');
-}
-
-/**
- * @param {Element} listItemElement
- * @param {boolean} value
- * @return {void}
- */
-export function setExpanded(listItemElement, value) {
-  listItemElement.setAttribute('aria-expanded', value ? 'true' : 'false');
-  for (const treeitem of listItemElement.querySelectorAll('[role="treeitem"]')) {
-    treeitem.setAttribute('mdw-skip-tab', value ? 'false' : 'true');
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-export function onChildContentActivate(event) {
-  const activatedElement = /** @type {HTMLElement} */ (event.target);
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  if (!activatedElement || activatedElement.parentElement !== element) {
-    return;
-  }
-  if (element.hasAttribute('aria-expanded')) {
-    event.stopPropagation();
-    setExpanded(element, !isExpanded(element));
-  }
-}
-
-/**
- * @param {Element} listItemElement
- * @return {void}
- */
-export function setupAria(listItemElement) {
-  let isTreeItem = null;
-  let roleIsNone = false;
-  if (!listItemElement.hasAttribute('role')) {
-    if (listItemElement.hasAttribute('aria-expanded')) {
-      listItemElement.setAttribute('role', 'treeitem');
-      isTreeItem = true;
-      roleIsNone = false;
-    } else {
-      listItemElement.setAttribute('role', 'none');
-      isTreeItem = false;
-      roleIsNone = true;
-    }
-  }
-  if (isTreeItem !== false || listItemElement.getAttribute('role') === 'treeitem') {
-    const activatorContent = getChildElementByClass(listItemElement, 'mdw-list__content');
-    if (activatorContent && !activatorContent.hasAttribute('role')) {
-      activatorContent.setAttribute('role', 'none');
-    }
-  }
-  if (!roleIsNone) {
-    return;
-  }
-  const parentRole = listItemElement.parentElement && listItemElement.parentElement.getAttribute('role');
-  if (!parentRole) {
-    return;
-  }
-  const contentChild = getChildElementByClass(listItemElement, 'mdw-list__content');
-  if (!contentChild) {
-    return;
-  }
-  if (contentChild.hasAttribute('role')) {
-    return;
-  }
-  switch (parentRole) {
-    case 'listbox':
-      contentChild.setAttribute('role', 'option');
-      break;
-    case 'radiogroup':
-      contentChild.setAttribute('role', 'radio');
-      break;
-    case 'group':
-    case 'tree':
-    case 'treeitem':
-      contentChild.setAttribute('role', 'treeitem');
-      break;
-    default:
-    case 'list':
-  }
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-function onKeyDown(event) {
-  if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
-    return;
-  }
-  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
-    return;
-  }
-  if (document.activeElement !== event.currentTarget) {
-    return;
-  }
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  if (!element) {
-    return;
-  }
-  if (!element.hasAttribute('aria-expanded')) {
-    return;
-  }
-  const activatorContent = getChildElementByClass(element, 'mdw-list__content');
-  if (!activatorContent) {
-    return;
-  }
-  event.stopPropagation();
-  event.preventDefault();
-  const newEvent = document.createEvent('Event');
-  newEvent.initEvent('click', true, true);
-  activatorContent.dispatchEvent(newEvent);
-}
-
-/**
- * @param {Element} listItemElement
- * @return {void}
- */
-export function attachCore(listItemElement) {
-  setupAria(listItemElement);
-}
-/**
- * @param {Element} listItemElement
- * @return {void}
- */
-export function attach(listItemElement) {
-  attachCore(listItemElement);
-  for (const element of listItemElement.getElementsByClassName('mdw-list__content')) { ListContent.attach(element); }
-  if (listItemElement.hasAttribute('aria-expanded')) {
-    if (!listItemElement.hasAttribute('mdw-expander-js')) {
-      listItemElement.setAttribute('mdw-pre-expander-js', '');
-      setTimeout(() => {
-        if (listItemElement.hasAttribute('mdw-pre-expander-js')) {
-          listItemElement.removeAttribute('mdw-pre-expander-js');
-          listItemElement.setAttribute('mdw-expander-js', '');
-        }
-      }, 500);
-    }
-    setExpanded(listItemElement, isExpanded(listItemElement));
-  }
-  listItemElement.addEventListener(ListContent.ACTIVATE_EVENT, onChildContentActivate);
-  listItemElement.addEventListener('keydown', onKeyDown);
-  Keyboard.attach(listItemElement);
-}
-
-/**
- * @param {Element} listItemElement
- * @return {void}
- */
-export function detach(listItemElement) {
-  Keyboard.detach(listItemElement);
-  for (const element of listItemElement.getElementsByClassName('mdw-list__content')) { ListContent.detach(element); }
-}

package/components/list/secondary.js

@@ -1,45 +0,0 @@
-import { dispatchDomEvent } from '../../core/dom.js';
-
-export const SECONDARY_ACTION_EVENT = 'mdw:listsecondary-action';
-
-/**
- * @param {Event} event
- * @return {void}
- */
-export function onInteraction(event) {
-  event.stopPropagation();
-}
-
-/**
- * @param {MouseEvent|KeyboardEvent|PointerEvent} event
- * @return {void}
- */
-export function onClick(event) {
-  event.stopPropagation();
-  const listSecondaryElement = /** @type {HTMLElement} */ (event.currentTarget);
-  dispatchDomEvent(listSecondaryElement, SECONDARY_ACTION_EVENT);
-}
-
-/**
- * @param {Element} listSecondaryElement
- * @return {void}
- */
-export function attach(listSecondaryElement) {
-  if (!listSecondaryElement.hasAttribute('mdw-action')) {
-    return;
-  }
-  listSecondaryElement.addEventListener('click', onClick);
-  listSecondaryElement.addEventListener('mousedown', onInteraction, { passive: true });
-  listSecondaryElement.addEventListener('touchstart', onInteraction, { passive: true });
-  listSecondaryElement.addEventListener('keydown', onInteraction, { passive: true });
-}
-/**
- * @param {Element} listSecondaryElement
- * @return {void}
- */
-export function detach(listSecondaryElement) {
-  listSecondaryElement.removeEventListener('click', onClick);
-  listSecondaryElement.removeEventListener('mousedown', onInteraction);
-  listSecondaryElement.removeEventListener('touchstart', onInteraction);
-  listSecondaryElement.removeEventListener('keydown', onInteraction);
-}