@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/snackbar/index.js

@@ -0,0 +1,344 @@
+// https://www.w3.org/TR/wai-aria-1.1/#alert
+// https://www.w3.org/TR/wai-aria-practices/#alert
+
+import {
+  dispatchDomEvent,
+  findElementParentByClassName,
+  nextTick,
+  setTextNode,
+} from '../../core/dom.js';
+import * as Button from '../button/index.js';
+
+/**
+ * @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 SnackbarQueueItem {
+  /**
+   * @param {Element} element
+   * @param {SnackbarCreateOptions} [options]
+   */
+  constructor(element, options) {
+    this.element = element;
+    this.options = options;
+    this.hideTimeout = null;
+  }
+
+  /** @return {void} */
+  clearHideTimeout() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+}
+
+/** @type {SnackbarQueueItem[]} */
+const SNACKBAR_QUEUE = [];
+
+export const HIDE_EVENT = 'mdw:snackbar-hide';
+export const SHOW_EVENT = 'mdw:snackbar-show';
+
+/**
+ * @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} element
+ * @return {SnackbarQueueItem}
+ */
+export function findNextQueueItem(element) {
+  let queue = null;
+  SNACKBAR_QUEUE.some((q) => {
+    if (q.element === element) {
+      queue = q;
+      return true;
+    }
+    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;
+    }
+    const autoHideString = snackbarElement.getAttribute('mdw-autohide');
+    if (autoHideString == null) {
+      return;
+    }
+    const timeInSeconds = parseFloat(autoHideString) || 4;
+    if (timeInSeconds < 0) {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      // eslint-disable-next-line no-use-before-define
+      hide(snackbarElement);
+    }, timeInSeconds * 1000);
+    if (currentQueueItem) {
+      currentQueueItem.hideTimeout = timeout;
+    }
+    return;
+  }
+
+  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')) {
+    if (snackbarElement.parentElement) {
+      snackbarElement.parentElement.removeChild(snackbarElement);
+    }
+  }
+}
+
+/**
+ * @param {AnimationEvent} event
+ * @return {void}
+ */
+export function onAnimationEnd(event) {
+  handleAnimationChange(/** @type {Element} */ (event.currentTarget));
+}
+
+/**
+ * @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') {
+    nextTick(() => handleAnimationChange(snackbarElement));
+  }
+  return true;
+}
+
+/**
+ * @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();
+    /** @type {Element} */
+    const snackbarElement = (event.currentTarget);
+    hide(snackbarElement);
+  }
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onButtonClick(event) {
+  /** @type {HTMLElement} */
+  const buttonElement = (event.currentTarget);
+  if (buttonElement instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
+  const snackbarElement = findElementParentByClassName(buttonElement, '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.parentElement.removeChild(span);
+  }
+  span = document.createElement('span');
+  if (element.firstChild) {
+    element.insertBefore(span, element.firstChild);
+  } 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);
+    }
+    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
+    }
+  } else if (button && button.parentElement) {
+    button.parentElement.removeChild(button);
+  }
+  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 (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
+  SNACKBAR_QUEUE.slice().reverse().forEach((queue, reverseIndex, array) => {
+    if (queue.element === snackbarElement) {
+      queue.clearHideTimeout();
+      const index = array.length - reverseIndex - 1;
+      SNACKBAR_QUEUE.splice(index, 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') {
+    nextTick(() => 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);
+    }
+    newlyCreated = true;
+  }
+  const queue = new SnackbarQueueItem(element, options);
+  if (options.skipQueue) {
+    SNACKBAR_QUEUE.splice(0, 0, queue);
+  } else {
+    SNACKBAR_QUEUE.push(queue);
+  }
+
+  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';

package/components/tab/_spec.scss

@@ -0,0 +1,235 @@
+// https://material.io/design/components/tabs.html#spec
+
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
+
+$icon-size: 24 !default;
+$icon-margin-top: 12 !default;
+$icon-to-label-baseline: 20 !default;
+$icon-with-label-height: 72 !default;
+
+.mdw-tab {
+  display: flex;
+  flex-direction: column;
+}
+
+.mdw-tab__list {
+  display: flex; // IE11 doesn't support grid-auto-columns
+  display: grid;
+  position: relative;
+  flex-direction: row;
+
+  grid-auto-columns: 1fr;
+
+  justify-content: flex-start;
+
+  -ms-overflow-style: none;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+
+  flex: none;
+  overscroll-behavior-x: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[mdw-scrollable] {
+    display: flex;
+    overflow-x: auto;
+    
+    box-sizing: border-box;
+    
+    &::before,
+    &::after {
+
+      min-width: dp(52);
+      // Ensures 52dp blank space at end
+      content: '';
+    }
+
+    & > .mdw-tab__item {
+      min-width: dp(90);
+      max-width: 100%;
+      flex: none;
+    }
+  }
+}
+
+.mdw-tab__icon,
+.mdw-tab__label,
+.mdw-tab__indicator {
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
+}
+
+.mdw-tab__indicator {
+  position: absolute;
+  right: auto;
+  bottom: 0;
+  left: 0;
+
+  height: dp(2);
+  width: 0;
+  width: dp(1000);
+
+  transition-property: none;
+
+  transform: translateX(0) scaleX(0);
+  transform-origin: 0 0 0;
+
+  background-color: currentColor;
+
+  &[mdw-animate] {
+    transition-property: transform;
+  }
+  
+}
+
+.mdw-tab__item {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+
+  grid-row: 1;
+  overflow: hidden;
+
+  box-sizing: content-box;
+  min-height: dp(48); // Redundant but needed for IE11
+  flex: auto;
+
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  z-index: 0;
+
+  border-radius: 0;
+
+  box-shadow: none;
+
+  
+}
+
+.mdw-tab__icon {
+  @include type.baselineToBottom($icon-to-label-baseline);
+  margin-top: dp($icon-margin-top);
+  margin-bottom: dp(-$icon-to-label-baseline);
+
+  transition-property: color;
+
+  pointer-events: none;
+}
+
+.mdw-tab__label {
+  @include type.addRules('button');
+
+  box-sizing: border-box;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding: 0 dp(16);
+
+  transition-property: color;
+
+  pointer-events: none;
+
+  text-align: center;
+
+  .mdw-tab__icon ~ & {
+    @include type.baselineToTop($icon-to-label-baseline);
+    @include type.baselineToBottom($icon-with-label-height
+    - $icon-margin-top
+    - $icon-size
+    - $icon-to-label-baseline);
+
+    display: block;
+
+    min-height: 0;
+    margin: 0;
+  }
+}
+
+.mdw-tab__content {
+  display: flex;
+  position: relative;
+  align-items: stretch;
+  flex-direction: row;
+
+  // Hide scrollbar
+  -ms-overflow-style: none;
+  overflow-x: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  
+  // W3C standard
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+  flex-grow: 1;
+
+  // Snap
+
+  // Firefox
+  -webkit-scroll-snap-type-x: mandatory;
+  scroll-snap-type-x: mandatory;
+  -webkit-scroll-snap-points-x: repeat(100%);
+  scroll-snap-points-x: repeat(100%);
+  
+  // Safari 9
+  
+  // IE + Edge
+  -ms-scroll-snap-x: mandatory snapInterval(0%, 100%);
+  
+  overscroll-behavior-x: none;
+
+  .mdw-tab[mdw-resize-stage] & {
+    scroll-behavior: auto;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.mdw-tab__panel {
+  scroll-snap-align: center;
+
+  min-width: 100%;
+  max-width: 100%;
+  flex-shrink: 0;
+  flex-basis: 100%;
+
+  will-change: visibility;
+
+  visibility: visible;
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+  }
+
+
+  &[aria-expanded="false"] .mdw-tabs__panel__inactive-hide,
+  &[aria-expanded="true"] .mdw-tabs__panel__active-hide {
+    visibility: hidden;
+  }
+
+  &[aria-expanded="false"] .mdw-tabs__panel__inactive-remove,
+  &[aria-expanded="true"] .mdw-tabs__panel__active-remove {
+    display: none;
+  }
+  
+}
+
+.mdw-tab__content[mdw-no-scroll] {
+  overflow-x: hidden;
+  scroll-behavior: auto;
+}