@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/core/dom.js

@@ -1,40 +1,3 @@
-/** @type {?boolean} */
-let passiveEventListenerSupported = null;
-
-/** @return {void} */
-function testPassiveEventListenerOptionSupport() {
-  try {
-    passiveEventListenerSupported = false;
-    const options = {
-      get passive() {
-        passiveEventListenerSupported = true;
-        return true;
-      },
-    };
-    // @ts-ignore: Custom test event
-    window.addEventListener('test', options, options);
-    // @ts-ignore: Custom test event
-    window.removeEventListener('test', options, options);
-  } catch (err) {
-    passiveEventListenerSupported = false;
-  }
-}
-
-/** @return {Object|boolean} */
-export function getPassiveEventListenerOption() {
-  if (passiveEventListenerSupported == null) {
-    testPassiveEventListenerOptionSupport();
-  }
-  if (passiveEventListenerSupported) {
-    return { passive: true };
-  }
-  return false;
-}
-
-export const nextTick = window.requestAnimationFrame || ((cb) => window.setTimeout(cb, 17));
-
-export const cancelTick = window.cancelAnimationFrame || window.clearTimeout;
-
 /**
  * @param {Element} element
  * @param {string} className
@@ -48,26 +11,6 @@ export function getChildElementByClass(element, className) {
   return child;
 }
 
-/**
- * @param {Element} element
- * @param {string} className
- * @param {boolean} [includeSelf=true]
- * @return {HTMLElement}
- */
-export function findElementParentByClassName(element, className, includeSelf) {
-  let el;
-  if (includeSelf === false) {
-    el = element.parentElement;
-  } else {
-    /** @type {HTMLElement} */
-    el = (element);
-  }
-  while (el != null && !el.classList.contains(className)) {
-    el = el.parentElement;
-  }
-  return el;
-}
-
 /** @return {boolean} */
 export function isRtl() {
   return document.documentElement.dir === 'rtl';
@@ -104,26 +47,6 @@ export function dispatchDomEvent(eventTarget, type, detail) {
   return eventTarget.dispatchEvent(event);
 }
 
-/**
- * @param {ArrayLike<T>} arrayLike
- * @param {function(T, number, ArrayLike<T>):any} fn
- * @return {void}
- * @template {any} T
- */
-export function iterateArrayLike(arrayLike, fn) {
-  Array.prototype.forEach.call(arrayLike, fn);
-}
-
-/**
- * @param {ArrayLike<T>} arrayLike
- * @param {function(T, number, ArrayLike<T>):boolean|void} fn
- * @return {boolean}
- * @template {any} T
- */
-export function iterateSomeOfArrayLike(arrayLike, fn) {
-  return Array.prototype.some.call(arrayLike, fn);
-}
-
 /**
  * @param {Element} element
  * @param {function(Element, number):boolean|void} fn
@@ -177,50 +100,36 @@ export function iterateSomeOfElementSiblings(element, fn) {
 /**
  * @param {Node} node
  * @param {boolean} [create]
- * @return {Text}
+ * @return {?Text}
  */
 export function getTextNode(node, create) {
-  let textNode;
-  iterateSomeOfArrayLike(node.childNodes, (childNode) => {
-    if (childNode.nodeType !== Node.TEXT_NODE) {
-      return false;
+  for (const childNode of node.childNodes) {
+    if (childNode.nodeType === Node.TEXT_NODE) {
+      return /** @type {Text} */ (childNode);
     }
-    textNode = childNode;
-    return true;
-  });
-  if (create && !textNode) {
-    textNode = document.createTextNode('');
-    node.appendChild(textNode);
   }
-  return textNode;
+  if (!create) return null;
+  return node.appendChild(document.createTextNode(''));
 }
 
 /**
  * @param {Node} node
  * @param {string} value
- * @return {Node}
+ * @return {?Text}
  */
 export function setTextNode(node, value) {
-  /** @type {ChildNode} */
-  let textNode;
-  iterateSomeOfArrayLike(node.childNodes, (childNode) => {
-    if (childNode.nodeType !== Node.TEXT_NODE) {
-      return false;
-    }
-    textNode = childNode;
-    return true;
-  });
-  if (value) {
-    if (!textNode) {
-      textNode = document.createTextNode(value);
-      node.appendChild(textNode);
-    } else {
-      textNode.nodeValue = value;
+  for (const childNode of node.childNodes) {
+    if (childNode.nodeType === Node.TEXT_NODE) {
+      if (value) {
+        childNode.nodeValue = value;
+      } else {
+        node.removeChild(childNode);
+      }
+      return /** @type {Text} */ (childNode);
     }
-  } else if (textNode) {
-    node.removeChild(textNode);
   }
-  return textNode;
+  if (!value) return null;
+  return node.appendChild(document.createTextNode(value));
 }
 
 /**
@@ -265,7 +174,7 @@ export function scrollToElement(element, smooth, rtl) {
   }
   parent.style.setProperty('scroll-behavior', 'auto');
   parent.scrollLeft = targetScrollLeft;
-  nextTick(() => {
+  requestAnimationFrame(() => {
     parent.style.removeProperty('scroll-behavior');
   });
 }

package/core/overlay/_spec.scss

@@ -8,22 +8,19 @@
     border: 0;
   }
 
-  
   &::before {
     content: '';
 
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    
+    inset: 0;
+
+    pointer-events: none;
+
     transition-delay: 1ms;
     transition-duration: 0ms;
     transition-property: opacity, color, background-color;
 
-    opacity: 0;
-    pointer-events: none;
+    /* opacity handled by theme engine */
 
     background-color: currentColor;
     border-radius: inherit;

package/core/overlay/_theme.scss

@@ -1,171 +1,147 @@
 // https://material.io/design/interaction/states.html
 
-@use '../theme/_mixins.scss' as theme;
-
-$themeValues: (
-  overlay-color:                 theme.$foreground,
-
-  high-opacity:                  theme.$high-opacity,
-  medium-opacity:                theme.$medium-opacity,
-  inactive-opacity:              theme.$inactive-opacity,
-  divider-opacity:               theme.$divider-opacity,
-  
-  disabled-opacity:              (0.38, 0.50),
-  
-  // states   
-
-  hover-opacity:                 (0.04, 0.08),
-  focus-opacity:                 (0.12, 0.24),
-  selected-opacity:              (0.08, 0.16),
-  activated-opacity:             (0.12, 0.24),
-  
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
-
-  selected-hover-opacity:        (0.08 + 0.04, 0.16 + 0.08),
-  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
-
-  activated-hover-opacity:       (0.12 + 0.04, 0.24 + 0.08),
-  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.24),
-  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('overlay', $themeValues, $key, $type);
+.mdw-theme {
+  --mdw-overlay__overlay-rgb: var(--mdw-ink-default);
+  --mdw-overlay__high-opacity: var(--mdw-high-opacity);
+  --mdw-overlay__medium-opacity: var(--mdw-medium-opacity);
+  --mdw-overlay__inactive-opacity: var(--mdw-inactive-opacity);
+  --mdw-overlay__divider-opacity: var(--mdw-divider-opacity);
+  --mdw-overlay__base-opacity: var(--mdw-overlay__base-opacity-value);
+  --mdw-overlay__disabled-opacity: var(--mdw-overlay__disabled-opacity-value);
+  --mdw-overlay__hover-opacity: var(--mdw-overlay__hover-opacity-value);
+  --mdw-overlay__focus-opacity: var(--mdw-overlay__focus-opacity-value);
+  --mdw-overlay__selected-opacity: var(--mdw-overlay__selected-opacity-value);
+  --mdw-overlay__activated-opacity: var(--mdw-overlay__activated-opacity-value);
+
 }
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-overlay {
-    &,
-    &[aria-pressed="false"]:active,
-    &[aria-selected="true"],
-    &[aria-pressed="true"],
-    &[aria-current] {
-      &::before {
-        @if ($type == 'var') {
-          color: RGB(var(--mdw-ink));
-        } @else {
-          // Handled by mdw-color
-        }
-      }
-    }
+.mdw-theme[mdw-light] {
+  --mdw-overlay__base-opacity-value: 0;
+  --mdw-overlay__base-opacity-elevation_1: 0;
+  --mdw-overlay__base-opacity-elevation_2: 0;
+  --mdw-overlay__base-opacity-elevation_3: 0;
+  --mdw-overlay__base-opacity-elevation_4: 0;
+  --mdw-overlay__base-opacity-elevation_6: 0;
+  --mdw-overlay__base-opacity-elevation_8: 0;
+  --mdw-overlay__base-opacity-elevation_9: 0;
+  --mdw-overlay__base-opacity-elevation_12: 0;
+  --mdw-overlay__base-opacity-elevation_16: 0;
+  --mdw-overlay__base-opacity-elevation_24: 0;
+  --mdw-overlay__disabled-opacity-value: 0.38;
+  --mdw-overlay__hover-opacity-value: 0.04;
+  --mdw-overlay__focus-opacity-value: 0.12;
+  --mdw-overlay__selected-opacity-value: 0.08;
+  --mdw-overlay__activated-opacity-value: 0.12;
+}
 
-    &[aria-selected="false"],
-    &[aria-pressed="false"],
-    &[aria-disabled="true"],
-    &[aria-disabled="true"]:active {
-      &::before {
-        @if ($type == 'var') {
-          color: RGB(getThemeValue("overlay-color", $type));
-        } @else {
-          background-color: RGB(getThemeValue("overlay-color", $type));
-        }
-      }
-    }
+.mdw-theme[mdw-dark] {
+  --mdw-overlay__base-opacity-value: 0;
+  --mdw-overlay__base-opacity-elevation_1: 0.05;
+  --mdw-overlay__base-opacity-elevation_2: 0.07;
+  --mdw-overlay__base-opacity-elevation_3: 0.08;
+  --mdw-overlay__base-opacity-elevation_4: 0.09;
+  --mdw-overlay__base-opacity-elevation_6: 0.11;
+  --mdw-overlay__base-opacity-elevation_8: 0.12;
+  --mdw-overlay__base-opacity-elevation_9: 0.13;
+  --mdw-overlay__base-opacity-elevation_12: 0.14;
+  --mdw-overlay__base-opacity-elevation_16: 0.15;
+  --mdw-overlay__base-opacity-elevation_24: 0.16;
+  --mdw-overlay__disabled-opacity-value: 0.50;
+  --mdw-overlay__hover-opacity-value: 0.08;
+  --mdw-overlay__focus-opacity-value: 0.24;
+  --mdw-overlay__selected-opacity-value: 0.16;
+  --mdw-overlay__activated-opacity-value: 0.24;
+}
+
+.mdw-overlay {
+  // Disable Hover State
+  &[aria-disabled="true"],
+  &[mdw-overlay-touch="true"],
+  &[mdw-overlay-off~="hover"],
+  &:not(:hover) {
+    --mdw-overlay__hover-opacity: 0;
+  }
+
+  // Disable Focus State
+  &[aria-disabled="true"],
+  &[mdw-overlay-touch="true"],
+  &[mdw-overlay-off~="focus"],
+  &:not(:focus) {
+    --mdw-overlay__focus-opacity: 0;
+  }
+
+  // Disable Selected State
+  // Activated overrides Selected
+  &[mdw-overlay-off~="selected"],
+  &:not([aria-selected="true"]),
+  &[aria-current],
+  &[aria-pressed="true"] {
+    --mdw-overlay__selected-opacity: 0;
+  }
+
+  &[mdw-overlay-off~="activated"],
+  &:not([aria-current]):not([aria-pressed="true"]) {
+    --mdw-overlay__activated-opacity: 0;
+  }
+
+  &::before {
+    opacity: calc(var(--mdw-overlay__base-opacity) + var(--mdw-overlay__hover-opacity) + var(--mdw-overlay__focus-opacity) + var(--mdw-overlay__selected-opacity) + var(--mdw-overlay__activated-opacity));
 
-    // Off color
-    &[aria-selected="false"],
-    &[aria-pressed="false"],
-    &[aria-selected="true"]:not([aria-current]) {
-      #{if($type == 'var', '&', '&,&.mdw-theme')} {
-        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("high-opacity", $type));
-        &[mdw-border-ink] {
-          border-color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
-        }
-        &[mdw-overlay-default="medium"] {
-          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("medium-opacity", $type));
-        }
-        &[mdw-overlay-default="inactive"] {
-          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
-        }
-        &[mdw-overlay-default="divider"] {
-          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
-        }
-      }
+    color: RGB(var(--mdw-overlay__overlay-rgb));
+  }
+
+  &:hover,
+  &:focus,
+  &[aria-pressed="false"]:active,
+  &[aria-selected="true"],
+  &[aria-pressed="true"],
+  &[aria-current] {
+    &::before {
+      color: RGB(var(--mdw-ink));
     }
+  }
 
-    &[aria-disabled="true"] {
-      &[mdw-overlay-disabled="ink"] {
-        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
-      }
-      &:not([mdw-overlay-disabled]) {
-        opacity: getThemeValue("disabled-opacity", $type);
-      }
+  &[aria-selected="false"],
+  &[aria-pressed="false"],
+  &[aria-disabled="true"],
+  &[aria-disabled="true"]:active {
+    &::before {
+      color: RGB(var(--mdw-overlay__overlay-rgb));
     }
+  }
 
-    &:not([mdw-overlay-touch="true"]) {
-      &:focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
-        opacity: getThemeValue("focus-opacity", $type);
-      }
+  // Off color
+  &[aria-selected="false"],
+  &[aria-pressed="false"],
+  &[aria-selected="true"]:not([aria-current]) {
+    --mdw-overlay__text-opacity: var(--mdw-overlay__high-opacity);
 
-      &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
-        &:hover:not([mdw-overlay-off~="hover"])::before {
-          opacity: getThemeValue("hover-opacity", $type);
-        }
+    color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__text-opacity));
 
-        &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-          opacity: getThemeValue("hover-focus-opacity", $type);
-        }
-      }
+    &[mdw-overlay-default="medium"] {
+      --mdw-overlay__text-opacity: var(--mdw-overlay__medium-opacity);
     }
 
-    // Selected
-    &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
-      &::before {
-        opacity: getThemeValue("selected-opacity", $type);
-      }
-
-      &:not([mdw-overlay-touch="true"]) {
-        &:focus:not([mdw-overlay-off~="focus"])::before {
-          opacity: getThemeValue("selected-focus-opacity", $type);
-        }
-
-        &:not([aria-disabled="true"]) {
-          &:hover:not([mdw-overlay-off~="hover"])::before {
-            opacity: getThemeValue("selected-hover-opacity", $type);
-          }
-
-          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("selected-hover-focus-opacity", $type);
-          }
-        }
-      }
+    &[mdw-overlay-default="inactive"] {
+      --mdw-overlay__text-opacity: var(--mdw-overlay__inactive-opacity);
     }
 
-    // Activated
-    &[aria-current]:not([mdw-overlay-off~="activated"]),
-    &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
-      &::before {
-        opacity: getThemeValue("activated-opacity", $type);
-      }
-
-      &:not([mdw-overlay-touch="true"]) {
-        &:focus:not([mdw-overlay-off~="focus"])::before {
-          opacity: getThemeValue("activated-focus-opacity", $type);
-        }
-
-        &:not([aria-disabled="true"]) {
-          &:hover:not([mdw-overlay-off~="hover"])::before {
-            opacity: getThemeValue("activated-hover-opacity", $type);
-          }
-
-          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("activated-hover-focus-opacity", $type);
-          }
-        }
-      }
+    &[mdw-overlay-default="divider"] {
+      --mdw-overlay__text-opacity: var(--mdw-overlay__divider-opacity);
     }
-  }
-}
 
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
+    &[mdw-border-ink] {
+      border-color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__divider-opacity));
+    }
+  }
 
+  &[aria-disabled="true"] {
+    &[mdw-overlay-disabled="ink"] {
+      color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__inactive-opacity));
+    }
 
-@include theme.addComponentCSSVariableRules('overlay', $themeValues) {
-  @include addThemeRules();
+    &:not([mdw-overlay-disabled]) {
+      opacity: var(--mdw-overlay__disabled-opacity);
+    }
+  }
 }

package/core/overlay/index.js

@@ -1,5 +1,3 @@
-import { getPassiveEventListenerOption, iterateArrayLike } from '../dom.js';
-
 let lastInteractionWasTouch = false;
 
 if (window && window.matchMedia) {
@@ -11,8 +9,7 @@ if (window && window.matchMedia) {
  * @return {void}
  */
 export function onMouseDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (element.hasAttribute('mdw-overlay-touch')) {
     return;
   }
@@ -24,8 +21,7 @@ export function onMouseDown(event) {
  * @return {void}
  */
 export function onTouchStart(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   element.setAttribute('mdw-overlay-touch', 'true');
 }
 
@@ -34,8 +30,7 @@ export function onTouchStart(event) {
  * @return {void}
  */
 export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   element.setAttribute('mdw-overlay-touch', 'false');
 }
 
@@ -44,17 +39,12 @@ export function onKeyDown(event) {
  * @return {void}
  */
 export function onBlur(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   const value = element.getAttribute('mdw-overlay-touch');
   if (value == null) {
     return;
   }
-  if (value === 'true') {
-    lastInteractionWasTouch = true;
-  } else {
-    lastInteractionWasTouch = false;
-  }
+  lastInteractionWasTouch = value === 'true';
   element.removeAttribute('mdw-overlay-touch');
 }
 
@@ -63,13 +53,10 @@ export function onBlur(event) {
  * @return {void}
  */
 export function onFocus(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  if (!element.hasAttribute('mdw-overlay-touch')) {
-    // Element was focused without a mouse or touch event (keyboard or programmatic)
-    if (lastInteractionWasTouch) {
-      element.setAttribute('mdw-overlay-touch', 'true');
-    }
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  // Element was focused without a mouse or touch event (keyboard or programmatic)
+  if (!element.hasAttribute('mdw-overlay-touch') && lastInteractionWasTouch) {
+    element.setAttribute('mdw-overlay-touch', 'true');
   }
 }
 
@@ -79,11 +66,11 @@ export function onFocus(event) {
  */
 export function attach(element) {
   element.setAttribute('mdw-overlay-js', '');
-  element.addEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.addEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.addEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  element.addEventListener('blur', onBlur, getPassiveEventListenerOption());
-  element.addEventListener('focus', onFocus, getPassiveEventListenerOption());
+  element.addEventListener('mousedown', onMouseDown, { passive: true });
+  element.addEventListener('touchstart', onTouchStart, { passive: true });
+  element.addEventListener('keydown', onKeyDown, { passive: true });
+  element.addEventListener('blur', onBlur, { passive: true });
+  element.addEventListener('focus', onFocus, { passive: true });
 }
 
 /**
@@ -91,7 +78,7 @@ export function attach(element) {
  * @return {void}
  */
 export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-overlay'), attach);
+  for (const el of root.getElementsByClassName('mdw-overlay')) attach(el);
 }
 
 /**
@@ -101,8 +88,8 @@ export function attachAll(root = document) {
 export function detach(element) {
   element.removeAttribute('mdw-overlay-js');
   element.removeAttribute('mdw-overlay-touch');
-  element.removeEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.removeEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.removeEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  element.removeEventListener('blur', onBlur, getPassiveEventListenerOption());
+  element.removeEventListener('mousedown', onMouseDown);
+  element.removeEventListener('touchstart', onTouchStart);
+  element.removeEventListener('keydown', onKeyDown);
+  element.removeEventListener('blur', onBlur);
 }