@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/snackbar/index.js

@@ -1,17 +1,33 @@
+// https://www.w3.org/TR/wai-aria-1.1/#alert
 // https://www.w3.org/TR/wai-aria-practices/#alert
 
-import { Button } from '../button/index';
-import { findElementParentByClassName, dispatchDomEvent } from '../common/dom';
+import {
+  dispatchDomEvent,
+  setTextNode,
+} from '../../core/dom.js';
+import * as Button from '../button/index.js';
 
-// Time to wait until hide animation finishes before destroying element
-const SNACKBAR_DESTROY_TIMEOUT_MS = 1000;
+/**
+ * @typedef SnackbarCreateOptions
+ * @prop {!string} text
+ * @prop {!string} [buttonText]
+ * @prop {string} [buttonInk='primary']
+ * @prop {boolean} [stacked=false]
+ * @prop {number|boolean} [autoHide=4] Auto hide time in seconds
+ * @prop {boolean} [autoDestroy=true] Destroy element after hide
+ * @prop {Element} [parent] Parent element to which to append
+ * @prop {boolean} [show=true] Show element after creation
+ * @prop {boolean} [skipQueue=false] Skip queue
+ */
 
-class SnackbarStack {
+class SnackbarQueueItem {
   /**
    * @param {Element} element
+   * @param {SnackbarCreateOptions} [options]
    */
-  constructor(element) {
+  constructor(element, options) {
     this.element = element;
+    this.options = options;
     this.hideTimeout = null;
   }
 
@@ -24,228 +40,299 @@ class SnackbarStack {
   }
 }
 
-/** @type {SnackbarStack[]} */
-const OPEN_SNACKBARS = [];
-class Snackbar {
-  /**
-   * @param {Element} snackbarElement
-   * @return {void}
-   */
-  static attach(snackbarElement) {
-    const button = snackbarElement.getElementsByClassName('mdw-button')[0];
-    if (button) {
-      Button.attach(button);
-      button.addEventListener('click', Snackbar.onButtonClick);
-    }
-    snackbarElement.setAttribute('mdw-js', '');
-  }
+/** @type {SnackbarQueueItem[]} */
+const SNACKBAR_QUEUE = [];
 
-  static detach(snackbarElement) {
-    const button = snackbarElement.getElementsByClassName('mdw-button')[0];
-    if (button) {
-      Button.detach(button);
-      button.removeEventListener('click', Snackbar.onButtonClick);
-    }
-    // Remove timeouts and stacks
-    OPEN_SNACKBARS.slice().reverse().forEach((stack, reverseIndex, array) => {
-      if (stack.element === snackbarElement) {
-        stack.clearHideTimeout();
-        const index = array.length - reverseIndex - 1;
-        OPEN_SNACKBARS.splice(index, 1);
-      }
-    });
-    snackbarElement.removeAttribute('mdw-js');
-  }
-
-  static onButtonClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    const snackbarElement = findElementParentByClassName(event.currentTarget, 'mdw-snackbar');
-    Snackbar.hide(snackbarElement);
-  }
+export const HIDE_EVENT = 'mdw:snackbar-hide';
+export const SHOW_EVENT = 'mdw:snackbar-show';
 
-  /** @return {SnackbarStack} */
-  static getNextSnackbarStack() {
-    const nextSnackbar = OPEN_SNACKBARS[0];
-    if (nextSnackbar && (!nextSnackbar.element || !nextSnackbar.element.parentElement)) {
-      // Item was removed from DOM externally
-      OPEN_SNACKBARS.splice(0, 1);
-      return this.getNextSnackbarStack();
-    }
-    return nextSnackbar;
+/**
+ * @param {Element} snackbarElement
+ * @return {void}
+ */
+export function setupARIA(snackbarElement) {
+  if (snackbarElement.hasAttribute('mdw-no-aria')) {
+    return;
   }
+  snackbarElement.setAttribute('role', 'alert');
+  snackbarElement.setAttribute('tabindex', '-1');
+}
 
-  /**
-   * @param {Element} snackbarElement
-   * @return {boolean} handled
-   */
-  static hide(snackbarElement) {
-    if (snackbarElement.hasAttribute('mdw-hide')) {
-      return false;
+/**
+ * @param {Element} element
+ * @return {SnackbarQueueItem}
+ */
+export function findNextQueueItem(element) {
+  let queue = null;
+  SNACKBAR_QUEUE.some((q) => {
+    if (q.element === element) {
+      queue = q;
+      return true;
     }
-    if (!dispatchDomEvent(snackbarElement, 'mdw:hide')) {
-      return false;
+    return false;
+  });
+  return queue;
+}
+
+/**
+ * @param {Element} snackbarElement
+ * @return {void}
+ */
+export function handleAnimationChange(snackbarElement) {
+  const showing = snackbarElement.getAttribute('aria-hidden') === 'false';
+  if (showing) {
+    const currentQueueItem = findNextQueueItem(snackbarElement);
+    if (currentQueueItem && currentQueueItem.hideTimeout) {
+      return;
     }
-    snackbarElement.setAttribute('mdw-hide', '');
-    let stackIndex = -1;
-    OPEN_SNACKBARS.some((stack, index) => {
-      if (stack.element === snackbarElement) {
-        stackIndex = index;
-        stack.clearHideTimeout();
-        return true;
-      }
-      return false;
-    });
-    if (stackIndex !== -1) {
-      OPEN_SNACKBARS.splice(stackIndex, 1);
+    const autoHideString = snackbarElement.getAttribute('mdw-autohide');
+    if (autoHideString == null) {
+      return;
     }
-    if (snackbarElement.hasAttribute('mdw-autodestroy')) {
-      setTimeout(() => {
-        if (!snackbarElement.parentElement) {
-          return;
-        }
-        if (!dispatchDomEvent(snackbarElement, 'mdw:destroy')) {
-          return;
-        }
-        snackbarElement.parentElement.removeChild(snackbarElement);
-      }, SNACKBAR_DESTROY_TIMEOUT_MS);
+    const timeInSeconds = Number.parseFloat(autoHideString) || 4;
+    if (timeInSeconds < 0) {
+      return;
     }
-    const nextSnackbar = Snackbar.getNextSnackbarStack();
-    if (nextSnackbar) {
-      nextSnackbar.element.setAttribute('mdw-consecutive', '');
-      Snackbar.show(nextSnackbar.element);
+    const timeout = setTimeout(() => {
+      // eslint-disable-next-line no-use-before-define
+      hide(snackbarElement);
+    }, timeInSeconds * 1000);
+    if (currentQueueItem) {
+      currentQueueItem.hideTimeout = timeout;
     }
-    return true;
+    return;
   }
 
-  /**
-   * @param {Element} snackbarElement
-   * @return {boolean} handled
-   */
-  static show(snackbarElement) {
-    if (!snackbarElement.hasAttribute('mdw-hide') && snackbarElement.hasAttribute('mdw-show')) {
-      // Already shown
-      return false;
-    }
-    if (!dispatchDomEvent(snackbarElement, 'mdw:show')) {
-      // Event was canceled
-      return false;
-    }
-    let snackbarStackIndex = -1;
-    let snackbarStack;
-    OPEN_SNACKBARS.some((stack, index) => {
-      if (stack.element === snackbarElement) {
-        snackbarStack = stack;
-        snackbarStackIndex = index;
-        return true;
-      }
-      return false;
-    });
-    if (snackbarStackIndex > 0) {
-      // Stacked for later
-      return true;
-    }
-    if (!snackbarStack) {
-      snackbarStack = new SnackbarStack(snackbarElement);
-      OPEN_SNACKBARS.push(snackbarStack);
-      if (OPEN_SNACKBARS.length !== 1) {
-        // Not first, show later
-        return true;
-      }
-    }
-    snackbarElement.removeAttribute('mdw-hide');
-    snackbarElement.setAttribute('mdw-show', '');
-    Snackbar.attach(snackbarElement);
-    snackbarStack.clearHideTimeout();
-    if (snackbarElement.hasAttribute('mdw-autohide')) {
-      const timeInSeconds = parseInt(snackbarElement.getAttribute('mdw-autohide'), 10) || 4;
-      if (timeInSeconds > 0) {
-        snackbarStack.hideTimeout = setTimeout(() => {
-          Snackbar.hide(snackbarElement);
-        }, timeInSeconds * 1000);
-      }
-    }
-    return true;
+  const nextQueueItem = findNextQueueItem(snackbarElement);
+  if (nextQueueItem) {
+    // eslint-disable-next-line no-use-before-define
+    update(snackbarElement, nextQueueItem.options);
+    // eslint-disable-next-line no-use-before-define
+    show(snackbarElement);
+    return;
+  }
+  if (snackbarElement.hasAttribute('mdw-autodestroy') && snackbarElement.parentElement) {
+    snackbarElement.remove();
   }
+}
 
-  /**
-   * @typedef SnackbarCreateOptions
-   * @property {!string} text
-   * @property {!string=} buttonText
-   * @property {string=} [buttonThemeColor='primary']
-   * @property {boolean} [stacked=false]
-   * @property {number|boolean} [autoHide=4] Auto hide time in seconds
-   * @property {boolean} [autoDestroy=true] Destroy element after hide
-   * @property {HTMLElement=} parent Parent element to which to append
-   * @property {boolean=} show Show element after creation
-   */
+/**
+ * @param {AnimationEvent} event
+ * @return {void}
+ */
+export function onAnimationEnd(event) {
+  handleAnimationChange(/** @type {Element} */ (event.currentTarget));
+}
 
-  /**
-   * @param {SnackbarCreateOptions} options
-   * @return {HTMLElement}
-   */
-  static create(options) {
-    const element = document.createElement('div');
-    element.classList.add('mdw-snackbar');
-    element.setAttribute('role', 'alert');
-    element.setAttribute('mdw-hide', '');
-
-    const span = document.createElement('span');
-    span.textContent = options.text;
-    element.appendChild(span);
+/**
+ * @param {Element} snackbarElement
+ * @return {boolean} changed
+ */
+export function hide(snackbarElement) {
+  if (snackbarElement.getAttribute('aria-hidden') === 'true') {
+    return false;
+  }
+  if (!dispatchDomEvent(snackbarElement, HIDE_EVENT)) {
+    return false;
+  }
+  snackbarElement.setAttribute('aria-hidden', 'true');
+  const currentQueueItem = findNextQueueItem(snackbarElement);
+  if (currentQueueItem) {
+    SNACKBAR_QUEUE.splice(SNACKBAR_QUEUE.indexOf(currentQueueItem), 1);
+  }
+  if (window.getComputedStyle(snackbarElement).animationName === 'none') {
+    requestAnimationFrame(() => handleAnimationChange(snackbarElement));
+  }
+  return true;
+}
 
-    if (options.buttonText) {
-      const button = document.createElement('button');
-      button.classList.add('mdw-button');
-      if (typeof options.buttonThemeColor === 'undefined') {
-        button.setAttribute('mdw-theme-color', 'primary');
-      } else if (typeof options.buttonThemeColor === 'string') {
-        button.setAttribute('mdw-theme-color', options.buttonThemeColor);
-      } else {
-        // Don't set attribute if null is passed
-      }
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onKeyDown(event) {
+  if (event.key === 'Escape' || event.key === 'Esc') {
+    // Allow users to close snackbar with escape, for accessibilty reasons
+    event.stopPropagation();
+    event.preventDefault();
+    const snackbarElement = /** @type {Element} */ (event.currentTarget);
+    hide(snackbarElement);
+  }
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onButtonClick(event) {
+  const buttonElement = /** @type {HTMLElement} */ (event.currentTarget);
+  if (buttonElement instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
+  const snackbarElement = buttonElement.closest('.mdw-snackbar');
+  hide(snackbarElement);
+}
+
+/**
+ * @param {Element} element
+ * @param {SnackbarCreateOptions} options
+ * @return {void}
+ */
+export function update(element, options) {
+  element.classList.add('mdw-snackbar');
+  if (!element.classList.contains('mdw-theme')) {
+    // Guidelines conflict stating a background should be fully opaque
+    // But says spec says to use #000000 with 87% opacity
+    // Calculated against white, opaque value is #212121 (Gray-900)
+    element.classList.add('mdw-theme');
+    element.setAttribute('mdw-surface', 'background 900');
+    element.setAttribute('mdw-dark', '');
+  }
+  let span = element.getElementsByTagName('span')[0];
+  if (span) {
+    // To trigger screen readers, we destroy and create a new span and textnode
+    span.remove();
+  }
+  span = document.createElement('span');
+  if (element.firstChild) {
+    element.prepend(span);
+  } else {
+    element.appendChild(span);
+  }
+  const textNode = document.createTextNode(options.text);
+  span.appendChild(textNode);
+  let button = element.getElementsByClassName('mdw-button')[0];
+  if (options.buttonText) {
+    if (!button) {
+      button = document.createElement('a');
       element.appendChild(button);
     }
-    if (options.stacked) {
-      element.setAttribute('mdw-stacked', '');
+    setTextNode(button, options.buttonText);
+    button.classList.add('mdw-button');
+    if (typeof options.buttonInk === 'undefined') {
+      button.classList.add('mdw-theme');
+      button.setAttribute('mdw-ink', 'secondary');
+    } else if (typeof options.buttonInk === 'string') {
+      button.classList.add('mdw-theme');
+      button.setAttribute('mdw-ink', options.buttonInk);
+    } else {
+      // Don't set attribute if null is passed
     }
-    if (options.autoHide !== false) {
-      let timeInSeconds;
-      if (options.autoHide === true) {
-        timeInSeconds = 4;
-      } else if (options.autoHide == null) {
-        timeInSeconds = 4;
-      } else {
-        timeInSeconds = options.autoHide;
-      }
-      if (timeInSeconds > 0) {
-        element.setAttribute('mdw-autohide', timeInSeconds.toString());
-      }
+  } else if (button && button.parentElement) {
+    button.remove();
+  }
+  if (options.stacked) {
+    element.setAttribute('mdw-stacked', '');
+  }
+  if (options.autoHide !== false) {
+    let timeInSeconds;
+    if (options.autoHide === true) {
+      timeInSeconds = 4;
+    } else if (options.autoHide == null) {
+      timeInSeconds = 4;
+    } else {
+      timeInSeconds = options.autoHide;
     }
-    if (options.autoDestroy !== false) {
-      element.setAttribute('mdw-autodestroy', '');
+    if (timeInSeconds > 0) {
+      element.setAttribute('mdw-autohide', timeInSeconds.toString());
     }
+  }
+  if (options.autoDestroy !== false) {
+    element.setAttribute('mdw-autodestroy', '');
+  }
+}
+
+/**
+ * @param {Element} snackbarElement
+ * @return {void}
+ */
+export function attach(snackbarElement) {
+  const button = snackbarElement.getElementsByClassName('mdw-button')[0];
+  if (button) {
+    Button.attach(button);
+    button.addEventListener('click', onButtonClick);
+  }
+  snackbarElement.setAttribute('mdw-js', '');
+  snackbarElement.addEventListener('animationend', onAnimationEnd);
+  snackbarElement.addEventListener('keydown', onKeyDown);
+  setupARIA(snackbarElement);
+}
+
+/**
+ * @param {Element} snackbarElement
+ * @return {void}
+ */
+export function detach(snackbarElement) {
+  const button = snackbarElement.getElementsByClassName('mdw-button')[0];
+  if (button) {
+    Button.detach(button);
+    button.removeEventListener('click', onButtonClick);
+  }
+  // Remove timeouts and stacks
+  for (let i = SNACKBAR_QUEUE.length - 1; i >= 0; i--) {
+    const queue = SNACKBAR_QUEUE[i];
+    if (queue.element === snackbarElement) {
+      queue.clearHideTimeout();
+      SNACKBAR_QUEUE.splice(i, 1);
+    }
+  }
+  snackbarElement.removeAttribute('mdw-js');
+}
+
+/**
+ * @param {?Element} snackbarElement
+ * @return {boolean} changed
+ */
+export function show(snackbarElement) {
+  if (snackbarElement.getAttribute('aria-hidden') === 'false') {
+    return false;
+  }
+  if (!dispatchDomEvent(snackbarElement, SHOW_EVENT)) {
+    return false;
+  }
+  snackbarElement.setAttribute('aria-hidden', 'false');
+  attach(snackbarElement);
+  if (window.getComputedStyle(snackbarElement).animationName === 'none') {
+    requestAnimationFrame(() => handleAnimationChange(snackbarElement));
+  }
+  return true;
+}
+
+/**
+ * Creates a Snackbar element if required and adds to show queue
+ * @param {SnackbarCreateOptions} options
+ * @return {HTMLElement}
+ */
+export function create(options) {
+  let element;
+  let newlyCreated = false;
+  if (options.parent) {
+    /** @type {HTMLElement} */
+    element = (options.parent.getElementsByClassName('mdw-snackbar')[0]);
+  }
+  if (!element) {
+    element = document.createElement('div');
     if (options.parent) {
       options.parent.appendChild(element);
-      if (options.show) {
-        // Wait two frames before calling for, allowing animation to occur
-        const onDrawCallback = () => {
-          Snackbar.show(element);
-        };
-        if (window.requestAnimationFrame) {
-          window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(onDrawCallback);
-          });
-        } else {
-          setTimeout(onDrawCallback, 2 / 60);
-        }
-      }
     }
-    return element;
+    newlyCreated = true;
+  }
+  const queue = new SnackbarQueueItem(element, options);
+  if (options.skipQueue) {
+    SNACKBAR_QUEUE.splice(0, 0, queue);
+  } else {
+    SNACKBAR_QUEUE.push(queue);
   }
-}
 
-export {
-  Snackbar,
-};
+  if (options.show !== false) {
+    if (newlyCreated) {
+      // Update after show to trigger a text change
+      update(element, options);
+      show(element);
+      update(element, options);
+    } else {
+      show(element);
+    }
+  }
+  return element;
+}

package/components/snackbar/index.scss

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