@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/menu/index.js

@@ -1,23 +1,23 @@
 // https://www.w3.org/TR/wai-aria-practices/#menu
 
 import {
+  cancelTick,
   dispatchDomEvent,
   isRtl,
   iterateArrayLike,
   iterateSomeOfArrayLike,
   nextTick,
-  cancelTick,
-} from '../../core/dom';
+} from '../../core/dom.js';
 
-import * as MenuItem from './item';
+import * as MenuItem from './item.js';
 
 class MenuStack {
   /**
    * @param {Element} element
    * @param {Element} previousFocus
-   * @param {Object=} state
-   * @param {Object=} previousState
-   * @param {MouseEvent=} originalEvent
+   * @param {Object} [state]
+   * @param {Object} [previousState]
+   * @param {MouseEvent|PointerEvent} [originalEvent]
    */
   constructor(element, previousFocus, state, previousState, originalEvent) {
     this.element = element;
@@ -36,16 +36,42 @@ export const HIDE_EVENT = 'mdw:menu-hide';
 
 /**
  * @param {Element} menuElement
- * @return {void}
+ * @return {boolean} handled
  */
-export function attach(menuElement) {
-  menuElement.setAttribute('mdw-menu-js', '');
-  menuElement.addEventListener('click', onMenuClick);
-  menuElement.addEventListener('scroll', onMenuScroll);
-  menuElement.addEventListener('touchmove', onMenuScroll);
-  menuElement.addEventListener('wheel', onMenuScroll);
-  menuElement.addEventListener('keydown', onKeyDown);
-  setupARIA(menuElement);
+export function hide(menuElement) {
+  if (menuElement.getAttribute('aria-hidden') === 'true') {
+    return false;
+  }
+  menuElement.setAttribute('aria-hidden', 'true');
+  let stackIndex = -1;
+  OPEN_MENUS.some((stack, index) => {
+    if (stack.element === menuElement) {
+      stackIndex = index;
+      return true;
+    }
+    return false;
+  });
+  if (stackIndex !== -1) {
+    const menuStack = OPEN_MENUS[stackIndex];
+    if (menuStack.previousFocus && menuStack.previousFocus instanceof HTMLElement) {
+      menuStack.previousFocus.focus();
+    }
+    OPEN_MENUS.splice(stackIndex, 1);
+    if (menuStack.state && window.history && window.history.state) {
+      // IE11 returns a cloned state object, not the original
+      if (menuStack.state.hash === window.history.state.hash) {
+        window.history.back();
+      }
+    }
+  }
+  if (!OPEN_MENUS.length) {
+    // eslint-disable-next-line no-use-before-define
+    window.removeEventListener('popstate', onPopState);
+    // eslint-disable-next-line no-use-before-define
+    window.removeEventListener('resize', onWindowResize);
+  }
+  dispatchDomEvent(menuElement, HIDE_EVENT);
+  return true;
 }
 
 /**
@@ -60,7 +86,7 @@ export function setupARIA(menuElement) {
     menuElement.setAttribute('aria-hidden', 'true');
   }
   iterateArrayLike(menuElement.getElementsByClassName('mdw-divider'),
-    el => el.setAttribute('role', 'separator'));
+    (el) => el.setAttribute('role', 'separator'));
   menuElement.setAttribute('role', 'menu');
   const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
   if (popupElement) {
@@ -74,199 +100,39 @@ export function setupARIA(menuElement) {
  */
 export function onMenuScroll(event) {
   // JS needed for Safari
-  event.preventDefault();
-  event.stopPropagation();
+  if (event.target === event.currentTarget) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
   if (event.type !== 'scroll') {
     return;
   }
   /** @type {HTMLElement} */
   const element = (event.currentTarget);
-  if (element.scrollTop !== element.scrollHeight / 4) {
-    element.scrollTop = element.scrollHeight / 4;
+  if (element.scrollTop !== 0) {
+    element.scrollTop = 0;
   }
-  if (element.scrollLeft !== element.scrollWidth / 4) {
-    element.scrollLeft = element.scrollWidth / 4;
-  }
-}
-
-export function onMenuClick(event) {
-  if (event.currentTarget === event.target) {
-    event.stopPropagation();
-    hide(event.currentTarget);
+  if (element.scrollLeft !== 0) {
+    element.scrollLeft = 0;
   }
 }
 
 /**
+ * @param {MouseEvent|PointerEvent} event
  * @return {void}
  */
-export function onWindowResize() {
-  const lastOpenMenu = OPEN_MENUS[OPEN_MENUS.length - 1];
-  if (!lastOpenMenu || !lastOpenMenu.originalEvent) {
-    return;
-  }
-  if (lastOpenMenu.pendingResizeOperation) {
-    cancelTick(lastOpenMenu.pendingResizeOperation);
-  }
-  lastOpenMenu.pendingResizeOperation = nextTick(() => {
-    updateMenuPosition(
-      lastOpenMenu.element,
-      lastOpenMenu.element.getElementsByClassName('mdw-menu__popup')[0],
-      lastOpenMenu.originalEvent
-    );
-    lastOpenMenu.pendingResizeOperation = null;
-  });
-}
-
-/**
- * @param {PopStateEvent} event
- * @return {void}
- */
-export function onPopState(event) {
-  if (!event.state) {
-    return;
-  }
-  const lastOpenMenu = OPEN_MENUS[OPEN_MENUS.length - 1];
-  if (!lastOpenMenu || !lastOpenMenu.previousState) {
-    return;
-  }
-  if ((lastOpenMenu.previousState === event.state) || Object.keys(event.state)
-    .every(key => event.state[key] === lastOpenMenu.previousState[key])) {
-    hide(lastOpenMenu.element);
-  }
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const menuElement = (event.currentTarget);
-  if (!menuElement || menuElement.getAttribute('aria-hidden') === 'true') {
-    return;
-  }
-
-  if (event.key === 'ArrowDown' || (event.key === 'Down')) {
-    event.stopPropagation();
-    event.preventDefault();
-    selectNextMenuItem(menuElement, false);
-    return;
-  }
-  if (event.key === 'ArrowUp' || (event.key === 'Up')) {
-    event.stopPropagation();
-    event.preventDefault();
-    selectNextMenuItem(menuElement, true);
-    return;
-  }
-  if (event.key === 'Tab') {
-    // Hide menu allowing focus to revert to calling element
-    // To then allow browser default Tab interaction
-    // Unless menu hiding is cancelled
-    if (!hide(menuElement)) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    return;
-  }
-  if (event.key === 'Escape' || event.key === 'Esc') {
+export function onMenuClick(event) {
+  if (event.currentTarget === event.target && event.target instanceof HTMLElement) {
     event.stopPropagation();
-    event.preventDefault();
-    hide(menuElement);
-  }
-}
-
-/**
- * @param {Element} menuElement
- * @return {void}
- */
-export function detach(menuElement) {
-  hide(menuElement);
-  menuElement.removeEventListener('click', onMenuClick);
-  menuElement.removeEventListener('scroll', onMenuScroll);
-  menuElement.removeEventListener('touchmove', onMenuScroll);
-  menuElement.removeEventListener('wheel', onMenuScroll);
-  menuElement.addEventListener('keydown', onKeyDown);
-  menuElement.removeAttribute('mdw-menu-js');
-  const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
-  if (popupElement) {
-    popupElement.style.removeProperty('top');
-    popupElement.style.removeProperty('left');
-    popupElement.style.removeProperty('right');
-    popupElement.style.removeProperty('bottom');
-    popupElement.style.removeProperty('margin');
-    popupElement.style.removeProperty('transform-origin');
-    popupElement.style.removeProperty('position');
-    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
-      popupElement.removeAttribute('style');
-    }
-  }
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-menu__item'), MenuItem.detach);
-}
-
-/**
- * @param {Element} menu
- * @param {boolean} [backwards=false]
- * @return {void}
- */
-export function selectNextMenuItem(menu, backwards) {
-  const menuItems = menu.getElementsByClassName('mdw-menu__item');
-  let foundTarget = false;
-  let candidate = null;
-  let firstFocusableItem = null;
-  let lastFocusableElement = null;
-  const target = document.activeElement;
-
-  // Hidden elements cannot be focused
-  // Disabled elements cannot be focused on IE11
-  // Skip elements that fail to receive focus
-  iterateSomeOfArrayLike(menuItems, (el) => {
-    el.focus();
-    const focusable = (document.activeElement === el);
-    if (focusable) {
-      if (!firstFocusableItem) {
-        firstFocusableItem = el;
-      }
-      lastFocusableElement = el;
-    }
-    if (el === target) {
-      foundTarget = true;
-      if (backwards && candidate) {
-        return true;
-      }
-      return false;
-    }
-    if (backwards) {
-      if (focusable) {
-        candidate = el;
-      }
-      return false;
-    }
-    if (foundTarget) {
-      if (focusable) {
-        candidate = el;
-        return true;
-      }
-      return false;
-    }
-    return false;
-  });
-  if (!candidate) {
-    if (backwards) {
-      candidate = lastFocusableElement;
-    } else {
-      candidate = firstFocusableItem;
-    }
-  }
-  if (candidate && document.activeElement !== candidate) {
-    candidate.focus();
+    hide(event.target);
   }
 }
 
 /**
  * @param {Element} menuElement
- * @param {Element} popupElement
- * @param {MouseEvent=} event
- * @param {boolean=} [alignTarget=true]
+ * @param {HTMLElement} popupElement
+ * @param {MouseEvent|PointerEvent} [event]
+ * @param {boolean} [alignTarget=true]
  * @return {void}
  */
 export function updateMenuPosition(menuElement, popupElement, event, alignTarget) {
@@ -446,7 +312,7 @@ export function updateMenuPosition(menuElement, popupElement, event, alignTarget
       return index + 1;
     }
     return 0;
-  }).filter(value => value !== 0);
+  }).filter((value) => value !== 0);
   if (candidates.length) {
     let candidateNumber;
     if (isPageRTL === null) {
@@ -454,10 +320,10 @@ export function updateMenuPosition(menuElement, popupElement, event, alignTarget
     }
     if (isPageRTL) {
       candidateNumber = [2, 1, 4, 3, 6, 5, 8, 7, 10, 9, 12, 11, 14, 13, 15]
-        .filter(number => candidates.indexOf(number) !== -1)[0];
+        .filter((number) => candidates.indexOf(number) !== -1)[0];
     } else {
       candidateNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
-        .filter(number => candidates.indexOf(number) !== -1)[0];
+        .filter((number) => candidates.indexOf(number) !== -1)[0];
     }
     if (candidateNumber == null) {
       candidateNumber = isPageRTL ? 2 : 1;
@@ -595,6 +461,147 @@ export function updateMenuPosition(menuElement, popupElement, event, alignTarget
   popupElement.style.setProperty('transform-origin', transformOrigin);
 }
 
+/**
+ * @return {void}
+ */
+export function onWindowResize() {
+  const lastOpenMenu = OPEN_MENUS[OPEN_MENUS.length - 1];
+  if (!lastOpenMenu || !lastOpenMenu.originalEvent) {
+    return;
+  }
+  if (lastOpenMenu.pendingResizeOperation) {
+    cancelTick(lastOpenMenu.pendingResizeOperation);
+  }
+  lastOpenMenu.pendingResizeOperation = nextTick(() => {
+    updateMenuPosition(
+      lastOpenMenu.element,
+      /** @type {HTMLElement} */ (lastOpenMenu.element.getElementsByClassName('mdw-menu__popup')[0]),
+      lastOpenMenu.originalEvent,
+    );
+    lastOpenMenu.pendingResizeOperation = null;
+  });
+}
+
+/**
+ * @param {PopStateEvent} event
+ * @return {void}
+ */
+export function onPopState(event) {
+  if (!event.state) {
+    return;
+  }
+  const lastOpenMenu = OPEN_MENUS[OPEN_MENUS.length - 1];
+  if (!lastOpenMenu || !lastOpenMenu.previousState) {
+    return;
+  }
+  if ((lastOpenMenu.previousState === event.state) || Object.keys(event.state)
+    .every((key) => event.state[key] === lastOpenMenu.previousState[key])) {
+    hide(lastOpenMenu.element);
+  }
+}
+
+/**
+ * @param {Element} menu
+ * @param {boolean} [backwards=false]
+ * @return {void}
+ */
+export function selectNextMenuItem(menu, backwards) {
+  /** @type {HTMLCollectionOf<HTMLElement>} */
+  const menuItems = (menu.getElementsByClassName('mdw-menu__item'));
+  let foundTarget = false;
+  /** @type {HTMLElement} */
+  let candidate = null;
+  /** @type {HTMLElement} */
+  let firstFocusableItem = null;
+  let lastFocusableElement = null;
+  const target = document.activeElement;
+
+  // Hidden elements cannot be focused
+  // Disabled elements cannot be focused on IE11
+  // Skip elements that fail to receive focus
+  iterateSomeOfArrayLike(menuItems, (el) => {
+    el.focus();
+    const focusable = (document.activeElement === el);
+    if (focusable) {
+      if (!firstFocusableItem) {
+        firstFocusableItem = el;
+      }
+      lastFocusableElement = el;
+    }
+    if (el === target) {
+      foundTarget = true;
+      if (backwards && candidate) {
+        return true;
+      }
+      return false;
+    }
+    if (backwards) {
+      if (focusable) {
+        candidate = el;
+      }
+      return false;
+    }
+    if (foundTarget) {
+      if (focusable) {
+        candidate = el;
+        return true;
+      }
+      return false;
+    }
+    return false;
+  });
+  if (!candidate) {
+    if (backwards) {
+      candidate = lastFocusableElement;
+    } else {
+      candidate = firstFocusableItem;
+    }
+  }
+  if (candidate && document.activeElement !== candidate) {
+    candidate.focus();
+  }
+}
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onKeyDown(event) {
+  /** @type {HTMLElement} */
+  const menuElement = (event.currentTarget);
+  if (!menuElement || menuElement.getAttribute('aria-hidden') === 'true') {
+    return;
+  }
+
+  if (event.key === 'ArrowDown' || (event.key === 'Down')) {
+    event.stopPropagation();
+    event.preventDefault();
+    selectNextMenuItem(menuElement, false);
+    return;
+  }
+  if (event.key === 'ArrowUp' || (event.key === 'Up')) {
+    event.stopPropagation();
+    event.preventDefault();
+    selectNextMenuItem(menuElement, true);
+    return;
+  }
+  if (event.key === 'Tab') {
+    // Hide menu allowing focus to revert to calling element
+    // To then allow browser default Tab interaction
+    // Unless menu hiding is cancelled
+    if (!hide(menuElement)) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    return;
+  }
+  if (event.key === 'Escape' || event.key === 'Esc') {
+    event.stopPropagation();
+    event.preventDefault();
+    hide(menuElement);
+  }
+}
+
 /**
  * @param {Element} menuElement
  * @return {void}
@@ -610,8 +617,22 @@ export function refreshMenuItems(menuElement) {
 
 /**
  * @param {Element} menuElement
- * @param {MouseEvent=} event
- * @param {boolean=} [alignTarget=true]
+ * @return {void}
+ */
+export function attach(menuElement) {
+  menuElement.setAttribute('mdw-menu-js', '');
+  menuElement.addEventListener('click', onMenuClick);
+  menuElement.addEventListener('scroll', onMenuScroll);
+  menuElement.addEventListener('touchmove', onMenuScroll);
+  menuElement.addEventListener('wheel', onMenuScroll);
+  menuElement.addEventListener('keydown', onKeyDown);
+  setupARIA(menuElement);
+}
+
+/**
+ * @param {Element} menuElement
+ * @param {MouseEvent|PointerEvent} [event]
+ * @param {boolean} [alignTarget=true]
  * @return {boolean} handled
  */
 export function show(menuElement, event, alignTarget) {
@@ -619,7 +640,8 @@ export function show(menuElement, event, alignTarget) {
     // Prevent anchor link
     event.preventDefault();
   }
-  const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
+  /** @type {HTMLElement} */
+  const popupElement = (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
   let changed = false;
   if (event) {
     updateMenuPosition(menuElement, popupElement, event, alignTarget);
@@ -659,7 +681,7 @@ export function show(menuElement, event, alignTarget) {
     const menuStack = new MenuStack(menuElement, previousFocus, newState, previousState, event);
     OPEN_MENUS.push(menuStack);
     refreshMenuItems(menuElement);
-    if (event && !event.pointerType && !event.detail) {
+    if (event && !event.detail && ('pointerType' in event) && !event.pointerType) {
       // Triggered with keyboard event
       selectNextMenuItem(menuElement);
     } else {
@@ -671,38 +693,29 @@ export function show(menuElement, event, alignTarget) {
 
 /**
  * @param {Element} menuElement
- * @return {boolean} handled
+ * @return {void}
  */
-export function hide(menuElement) {
-  if (menuElement.getAttribute('aria-hidden') === 'true') {
-    return false;
-  }
-  menuElement.setAttribute('aria-hidden', 'true');
-  let stackIndex = -1;
-  OPEN_MENUS.some((stack, index) => {
-    if (stack.element === menuElement) {
-      stackIndex = index;
-      return true;
-    }
-    return false;
-  });
-  if (stackIndex !== -1) {
-    const menuStack = OPEN_MENUS[stackIndex];
-    if (menuStack.previousFocus) {
-      menuStack.previousFocus.focus();
-    }
-    OPEN_MENUS.splice(stackIndex, 1);
-    if (menuStack.state && window.history && window.history.state) {
-      // IE11 returns a cloned state object, not the original
-      if (menuStack.state.hash === window.history.state.hash) {
-        window.history.back();
-      }
+export function detach(menuElement) {
+  hide(menuElement);
+  menuElement.removeEventListener('click', onMenuClick);
+  menuElement.removeEventListener('scroll', onMenuScroll);
+  menuElement.removeEventListener('touchmove', onMenuScroll);
+  menuElement.removeEventListener('wheel', onMenuScroll);
+  menuElement.addEventListener('keydown', onKeyDown);
+  menuElement.removeAttribute('mdw-menu-js');
+  /** @type {HTMLElement} */
+  const popupElement = (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
+  if (popupElement) {
+    popupElement.style.removeProperty('top');
+    popupElement.style.removeProperty('left');
+    popupElement.style.removeProperty('right');
+    popupElement.style.removeProperty('bottom');
+    popupElement.style.removeProperty('margin');
+    popupElement.style.removeProperty('transform-origin');
+    popupElement.style.removeProperty('position');
+    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
+      popupElement.removeAttribute('style');
     }
   }
-  if (!OPEN_MENUS.length) {
-    window.removeEventListener('popstate', onPopState);
-    window.removeEventListener('resize', onWindowResize);
-  }
-  dispatchDomEvent(menuElement, HIDE_EVENT);
-  return true;
+  iterateArrayLike(menuElement.getElementsByClassName('mdw-menu__item'), MenuItem.detach);
 }

package/components/menu/index.scss

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