@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/snackbar/_spec.scss

@@ -1,12 +1,13 @@
 // https://material.io/design/components/snackbars.html#spec
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
 
-$mdw-snackbar__scale-initial: 0.85 !default;
+$scale-initial: 0.85 !default;
 
 .mdw-snackbar__wrapper {
   position: relative;
@@ -35,7 +36,7 @@ $mdw-snackbar__scale-initial: 0.85 !default;
 } 
 
 .mdw-snackbar {
-  @include type-rules('body-2');
+  @include type.addRules('body-2');
 
   display: flex;
   position: absolute;
@@ -49,8 +50,8 @@ $mdw-snackbar__scale-initial: 0.85 !default;
   padding-left: dp(8);
 
   animation-name: none;
-  animation-duration: $mdw-motion__fade-in-duration;
-  animation-timing-function: $mdw-motion__decelerate-easing;
+  animation-duration: motion.$fadeInDuration;
+  animation-timing-function: motion.$decelerateEasing;
   animation-direction: normal;
   animation-fill-mode: forwards;
   will-change: opacity, transform, visibility;
@@ -59,12 +60,12 @@ $mdw-snackbar__scale-initial: 0.85 !default;
 
   // Default state is hidden
   pointer-events: auto;
-  transform: scale($mdw-snackbar__scale-initial);
+  transform: scale($scale-initial);
   visibility: hidden;
 
   border-radius: dp(4);
   
-  box-shadow: mdwElevation(6);
+  box-shadow: elevation.boxShadow(6);
 
   &[aria-hidden="false"] {
     animation-name: showSnackbar;
@@ -77,8 +78,8 @@ $mdw-snackbar__scale-initial: 0.85 !default;
 
   &[aria-hidden="true"] {
     animation-name: hideSnackbar;
-    animation-duration: $mdw-motion__fade-out-duration;
-    animation-timing-function: $mdw-motion__accelerate-easing;
+    animation-duration: motion.$fadeOutDuration;
+    animation-timing-function: motion.$accelerateEasing;
   }
 
   &:focus {
@@ -95,7 +96,7 @@ $mdw-snackbar__scale-initial: 0.85 !default;
 
   to {
     opacity: 0;
-    transform: scale($mdw-snackbar__scale-initial);
+    transform: scale($scale-initial);
     visibility: hidden;
   }
 }
@@ -103,7 +104,7 @@ $mdw-snackbar__scale-initial: 0.85 !default;
 @keyframes showSnackbar {
   from {
     opacity: 0;
-    transform: scale($mdw-snackbar__scale-initial);
+    transform: scale($scale-initial);
     visibility: hidden;
   }
 
@@ -122,15 +123,15 @@ $mdw-snackbar__scale-initial: 0.85 !default;
 }
 
 .mdw-snackbar > span {
-  @include texttop-to-top(16);
-  @include baseline-bottom(48 - 30);
+  @include type.textTopToTop(16);
+  @include type.baselineToBottom(48 - 30);
   box-sizing: border-box;
   padding: 0 dp(8);
 
   white-space: pre-line;
 }
 
-@include mdw-breakpoint__xsmall-window {
+@include breakpoint.isXSmallWindow() {
   .mdw-snackbar {
     right: 0;
     left: 0;
@@ -152,7 +153,7 @@ $mdw-snackbar__scale-initial: 0.85 !default;
   }
 }
 
-@include mdw-platform__ie() {
+@include platform.ifIE() {
   // Fix IE flexbug
   .mdw-snackbar {
     &::after {
@@ -170,12 +171,12 @@ $mdw-snackbar__scale-initial: 0.85 !default;
         transform: translateX(50%);
 
         &[mdw-hide] {
-          transform: translateX(50%) scale($mdw-snackbar__scale-initial);
+          transform: translateX(50%) scale($scale-initial);
         }
       }
 
       &[mdw-hide] {
-        transform: translateX(-50%) scale($mdw-snackbar__scale-initial);
+        transform: translateX(-50%) scale($scale-initial);
       }
     }
   }

package/components/snackbar/index.js

@@ -6,27 +6,26 @@ import {
   findElementParentByClassName,
   nextTick,
   setTextNode,
-} from '../../core/dom';
-
-import * as Button from '../button/index';
+} from '../../core/dom.js';
+import * as Button from '../button/index.js';
 
 /**
  * @typedef SnackbarCreateOptions
- * @property {!string} text
- * @property {!string=} buttonText
- * @property {string=} [buttonInk='primary']
- * @property {boolean} [stacked=false]
- * @property {number|boolean} [autoHide=4] Auto hide time in seconds
- * @property {boolean} [autoDestroy=true] Destroy element after hide
- * @property {Element=} parent Parent element to which to append
- * @property {boolean=} [show=true] Show element after creation
- * @property {boolean=} [skipQueue=false] Skip queue
+ * @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
+   * @param {SnackbarCreateOptions} [options]
    */
   constructor(element, options) {
     this.element = element;
@@ -49,22 +48,6 @@ const SNACKBAR_QUEUE = [];
 export const HIDE_EVENT = 'mdw:snackbar-hide';
 export const SHOW_EVENT = 'mdw:snackbar-show';
 
-/**
- * @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}
@@ -77,67 +60,6 @@ export function setupARIA(snackbarElement) {
   snackbarElement.setAttribute('tabindex', '-1');
 }
 
-/**
- * @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 {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 {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);
-}
-
-/** @return {SnackbarQueueItem} */
-export function getNextSnackbarQueueItem() {
-  const nextSnackbar = SnackbarQueueItem[0];
-  if (nextSnackbar && (!nextSnackbar.element || !nextSnackbar.element.parentElement)) {
-    // Item was removed from DOM externally
-    SNACKBAR_QUEUE.splice(0, 1);
-    return getNextSnackbarQueueItem();
-  }
-  return nextSnackbar;
-}
-
 /**
  * @param {Element} element
  * @return {SnackbarQueueItem}
@@ -154,14 +76,6 @@ export function findNextQueueItem(element) {
   return queue;
 }
 
-/**
- * @param {AnimationEvent} event
- * @return {void}
- */
-export function onAnimationEnd(event) {
-  handleAnimationChange(/** @type {Element} */ (event.currentTarget));
-}
-
 /**
  * @param {Element} snackbarElement
  * @return {void}
@@ -182,6 +96,7 @@ export function handleAnimationChange(snackbarElement) {
       return;
     }
     const timeout = setTimeout(() => {
+      // eslint-disable-next-line no-use-before-define
       hide(snackbarElement);
     }, timeInSeconds * 1000);
     if (currentQueueItem) {
@@ -192,7 +107,9 @@ export function handleAnimationChange(snackbarElement) {
 
   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;
   }
@@ -203,6 +120,14 @@ export function handleAnimationChange(snackbarElement) {
   }
 }
 
+/**
+ * @param {AnimationEvent} event
+ * @return {void}
+ */
+export function onAnimationEnd(event) {
+  handleAnimationChange(/** @type {Element} */ (event.currentTarget));
+}
+
 /**
  * @param {Element} snackbarElement
  * @return {boolean} changed
@@ -226,22 +151,32 @@ export function hide(snackbarElement) {
 }
 
 /**
- * @param {?Element} snackbarElement
- * @return {boolean} changed
+ * @param {KeyboardEvent} event
+ * @return {void}
  */
-export function show(snackbarElement) {
-  if (snackbarElement.getAttribute('aria-hidden') === 'false') {
-    return false;
-  }
-  if (!dispatchDomEvent(snackbarElement, SHOW_EVENT)) {
-    return false;
+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);
   }
-  snackbarElement.setAttribute('aria-hidden', 'false');
-  attach(snackbarElement);
-  if (window.getComputedStyle(snackbarElement).animationName === 'none') {
-    nextTick(() => handleAnimationChange(snackbarElement));
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onButtonClick(event) {
+  /** @type {HTMLElement} */
+  const buttonElement = (event.currentTarget);
+  if (buttonElement instanceof HTMLAnchorElement) {
+    event.preventDefault();
   }
-  return true;
+  const snackbarElement = findElementParentByClassName(buttonElement, 'mdw-snackbar');
+  hide(snackbarElement);
 }
 
 /**
@@ -313,6 +248,62 @@ export function update(element, options) {
   }
 }
 
+/**
+ * @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

package/components/snackbar/index.scss

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

package/components/tab/_spec.scss

@@ -1,14 +1,14 @@
 // https://material.io/design/components/tabs.html#spec
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
 
-$mdw-tab__icon-size: 24 !default;
-$mdw-tab__icon-margin-top: 12 !default;
-$mdw-tab__icon-to-label-baseline: 20 !default;
-$mdw-tab__icon-with-label-height: 72 !default;
+$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;
@@ -63,8 +63,8 @@ $mdw-tab__icon-with-label-height: 72 !default;
 .mdw-tab__icon,
 .mdw-tab__label,
 .mdw-tab__indicator {
-  transition-duration: $mdw-motion__simple-duration;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
 }
 
 .mdw-tab__indicator {
@@ -120,9 +120,9 @@ $mdw-tab__icon-with-label-height: 72 !default;
 }
 
 .mdw-tab__icon {
-  @include baseline-bottom($mdw-tab__icon-to-label-baseline);
-  margin-top: dp($mdw-tab__icon-margin-top);
-  margin-bottom: dp(-$mdw-tab__icon-to-label-baseline);
+  @include type.baselineToBottom($icon-to-label-baseline);
+  margin-top: dp($icon-margin-top);
+  margin-bottom: dp(-$icon-to-label-baseline);
 
   transition-property: color;
 
@@ -130,7 +130,7 @@ $mdw-tab__icon-with-label-height: 72 !default;
 }
 
 .mdw-tab__label {
-  @include type-rules('button');
+  @include type.addRules('button');
 
   box-sizing: border-box;
   margin-top: auto;
@@ -144,11 +144,11 @@ $mdw-tab__icon-with-label-height: 72 !default;
   text-align: center;
 
   .mdw-tab__icon ~ & {
-    @include baseline-top($mdw-tab__icon-to-label-baseline);
-    @include baseline-bottom($mdw-tab__icon-with-label-height
-    - $mdw-tab__icon-margin-top
-    - $mdw-tab__icon-size
-    - $mdw-tab__icon-to-label-baseline);
+    @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;
 
@@ -167,6 +167,7 @@ $mdw-tab__icon-with-label-height: 72 !default;
   -ms-overflow-style: none;
   overflow-x: hidden;
   overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
   
   // W3C standard

package/components/tab/content.js

@@ -1,36 +1,15 @@
 import {
-  iterateArrayLike,
-  nextTick,
-  scrollToElement,
   dispatchDomEvent,
   getPassiveEventListenerOption,
   isRtl,
+  iterateArrayLike,
   iterateSomeOfArrayLike,
-} from '../../core/dom';
-import * as TabPanel from './panel';
-
-export const SCROLL_EVENT = 'mdw:tabcontent-scroll';
+  scrollToElement,
+} from '../../core/dom.js';
 
-/**
- * @param {Element} tabContentElement
- * @return {void}
- */
-export function attach(tabContentElement) {
-  tabContentElement.addEventListener('scroll', onTabContentScroll, getPassiveEventListenerOption());
-  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.attach);
-  tabContentElement.addEventListener('keydown', onKeyDown);
-}
+import * as TabPanel from './panel.js';
 
-/**
- * @param {Element} tabContentElement
- * @return {void}
- */
-export function detach(tabContentElement) {
-  tabContentElement.removeEventListener('keydown', onKeyDown);
-  tabContentElement.removeAttribute('mdw-selected-index');
-  tabContentElement.removeEventListener('scroll', onTabContentScroll);
-  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.detach);
-}
+export const SCROLL_EVENT = 'mdw:tabcontent-scroll';
 
 /**
  * Prevent scrolling with keyboard
@@ -52,7 +31,6 @@ function onKeyDown(event) {
   }
 }
 
-
 /**
  * @param {Event} event
  * @return {void}
@@ -60,18 +38,15 @@ function onKeyDown(event) {
 export function onTabContentScroll(event) {
   /** @type {HTMLElement} */
   const tabContentElement = (event.currentTarget);
-  if (tabContentElement.hasAttribute('mdw-no-scroll')) {
-    return;
-  }
   const isPageRtl = isRtl();
   const scrollPoint = tabContentElement.scrollLeft / tabContentElement.clientWidth;
   let visibleIndex = Math.floor(scrollPoint);
   let visibilityPercentage = scrollPoint - visibleIndex;
 
   // Percentage may be incorrect due to floating point rounding errors
-  // Compare of integer values provided by browser
-  iterateSomeOfArrayLike(tabContentElement.children, ((panel, index) => {
-    if (tabContentElement.scrollLeft === panel.offsetLeft) {
+  // Compare integer values provided by browser to check if within 1px
+  iterateSomeOfArrayLike(tabContentElement.children, ((/** @type {HTMLElement} */ panel, index) => {
+    if (Math.abs(tabContentElement.scrollLeft - panel.offsetLeft) <= 1) {
       visibleIndex = index;
       visibilityPercentage = 0;
       return true;
@@ -120,18 +95,22 @@ export function onTabContentScroll(event) {
   const currentTargetIndex = currentTargetIndexString == null
     ? null : parseInt(currentTargetIndexString, 10);
 
-  let newSelectedIndex = null;
+  let updateSelected = false;
+  let forceSelection = false;
   if (currentTargetIndex == null) {
     TabPanel.setExpanded(leftPanel, leftSelected);
     if (rightPanel) {
       TabPanel.setExpanded(rightPanel, rightSelected);
     }
-    newSelectedIndex = selectedIndex;
+    updateSelected = visibilityPercentage === 0;
   } else if (currentTargetIndex === selectedIndex) {
-    tabContentElement.removeAttribute('mdw-target-index');
+    if (visibilityPercentage === 0) {
+      updateSelected = true;
+      forceSelection = true;
+      tabContentElement.removeAttribute('mdw-target-index');
+    }
   }
 
-
   TabPanel.setHidden(leftPanel, false);
   if (leftPeekPanel) {
     TabPanel.setHidden(leftPeekPanel, isResting || !leftSelected);
@@ -144,9 +123,10 @@ export function onTabContentScroll(event) {
   }
 
   dispatchDomEvent(tabContentElement, SCROLL_EVENT, {
-    newSelectedIndex,
     leftPanelIndex,
     visibilityPercentage,
+    updateSelected,
+    forceSelection,
   });
 }
 
@@ -163,6 +143,7 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
   let currentSelectedIndex = null;
   /** @type {number} */
   let panelIndex = null;
+  /** @type {Element[]} */
   const otherPanels = [];
   iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), (el, index) => {
     if (currentSelectedIndex == null && TabPanel.isExpanded(el)) {
@@ -182,7 +163,7 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
     // Invalid index or panel not in tabcontent
     return;
   }
-  otherPanels.forEach(sibling => TabPanel.setExpanded(sibling, false));
+  otherPanels.forEach((sibling) => TabPanel.setExpanded(sibling, false));
 
   const isPageRtl = isRtl();
   const targetScrollLeft = isPageRtl
@@ -190,7 +171,7 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
     : panelElement.offsetLeft;
   if (!scrollToPanel || panelElement.parentElement.scrollLeft === targetScrollLeft) {
     // No scrolling, hide others
-    otherPanels.forEach(sibling => TabPanel.setHidden(sibling, true));
+    otherPanels.forEach((sibling) => TabPanel.setHidden(sibling, true));
     return;
   }
   if (scrollToPanel && panelElement) {
@@ -202,3 +183,23 @@ export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth')
     scrollToElement(panelElement, scrollToPanel === 'smooth', isPageRtl);
   }
 }
+
+/**
+ * @param {Element} tabContentElement
+ * @return {void}
+ */
+export function attach(tabContentElement) {
+  tabContentElement.addEventListener('scroll', onTabContentScroll, getPassiveEventListenerOption());
+  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.attach);
+  tabContentElement.addEventListener('keydown', onKeyDown);
+}
+
+/**
+ * @param {Element} tabContentElement
+ * @return {void}
+ */
+export function detach(tabContentElement) {
+  tabContentElement.removeEventListener('keydown', onKeyDown);
+  tabContentElement.removeEventListener('scroll', onTabContentScroll);
+  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.detach);
+}