@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/snackbar/index.js

@@ -1,344 +0,0 @@
-// 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

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

package/components/tab/_spec.scss

@@ -1,235 +0,0 @@
-// 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;
-}