@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/menu/index.js

@@ -1,12 +1,8 @@
 // https://www.w3.org/TR/wai-aria-practices/#menu
 
 import {
-  cancelTick,
   dispatchDomEvent,
   isRtl,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
-  nextTick,
 } from '../../core/dom.js';
 
 import * as MenuItem from './item.js';
@@ -57,11 +53,9 @@ export function hide(menuElement) {
       menuStack.previousFocus.focus();
     }
     OPEN_MENUS.splice(stackIndex, 1);
-    if (menuStack.state && window.history && window.history.state) {
-      // IE11 returns a cloned state object, not the original
-      if (menuStack.state.hash === window.history.state.hash) {
-        window.history.back();
-      }
+    if (menuStack.state && window.history && window.history.state // IE11 returns a cloned state object, not the original
+      && menuStack.state.hash === window.history.state.hash) {
+      window.history.back();
     }
   }
   if (!OPEN_MENUS.length) {
@@ -85,8 +79,9 @@ export function setupARIA(menuElement) {
   if (!menuElement.hasAttribute('aria-hidden')) {
     menuElement.setAttribute('aria-hidden', 'true');
   }
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-divider'),
-    (el) => el.setAttribute('role', 'separator'));
+  for (const el of menuElement.getElementsByClassName('mdw-divider')) {
+    el.setAttribute('role', 'separator');
+  }
   menuElement.setAttribute('role', 'menu');
   const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
   if (popupElement) {
@@ -107,8 +102,7 @@ export function onMenuScroll(event) {
   if (event.type !== 'scroll') {
     return;
   }
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (element.scrollTop !== 0) {
     element.scrollTop = 0;
   }
@@ -143,27 +137,26 @@ export function updateMenuPosition(menuElement, popupElement, event, alignTarget
   const margin = useAlignTarget ? '0' : '';
   const mdwPosition = menuElement.getAttribute('mdw-position') || '';
   const mdwDirection = menuElement.getAttribute('mdw-direction') || '';
-  let alignTop = mdwPosition.indexOf('top') !== -1;
-  let alignBottom = mdwPosition.indexOf('bottom') !== -1;
-  let alignVCenter = mdwPosition.indexOf('vcenter') !== -1;
+  let alignTop = mdwPosition.includes('top');
+  let alignBottom = mdwPosition.includes('bottom');
+  let alignVCenter = mdwPosition.includes('vcenter');
 
-  const alignStart = mdwPosition.indexOf('start') !== -1;
-  const alignEnd = mdwPosition.indexOf('end') !== -1;
-  let alignLeft = mdwPosition.indexOf('left') !== -1;
-  let alignRight = mdwPosition.indexOf('right') !== -1;
-  let alignHCenter = mdwPosition.indexOf('hcenter') !== -1;
+  const alignStart = mdwPosition.includes('start');
+  const alignEnd = mdwPosition.includes('end');
+  let alignLeft = mdwPosition.includes('left');
+  let alignRight = mdwPosition.includes('right');
+  let alignHCenter = mdwPosition.includes('hcenter');
 
-  let openUp = mdwDirection.indexOf('up') !== -1;
-  let openDown = mdwDirection.indexOf('down') !== -1;
-  const openNormal = mdwDirection.indexOf('normal') !== -1;
-  const openReverse = mdwDirection.indexOf('reverse') !== -1;
-  let openVCenter = mdwDirection.indexOf('vcenter') !== -1;
-  let openHCenter = mdwDirection.indexOf('hcenter') !== -1;
-  let openLtr = mdwDirection.indexOf('ltr') !== -1;
-  let openRtl = mdwDirection.indexOf('rtl') !== -1;
+  let openUp = mdwDirection.includes('up');
+  let openDown = mdwDirection.includes('down');
+  const openNormal = mdwDirection.includes('normal');
+  const openReverse = mdwDirection.includes('reverse');
+  let openVCenter = mdwDirection.includes('vcenter');
+  let openHCenter = mdwDirection.includes('hcenter');
+  let openLtr = mdwDirection.includes('ltr');
+  let openRtl = mdwDirection.includes('rtl');
 
-  /** @type {HTMLElement} */
-  const target = (event.currentTarget || event.target);
+  const target = /** @type {HTMLElement} */ (event.currentTarget || event.target);
 
   let isPageRTL = null;
   if (alignStart || alignEnd || openNormal || openReverse) {
@@ -320,10 +313,10 @@ export function updateMenuPosition(menuElement, popupElement, event, alignTarget
     }
     if (isPageRTL) {
       candidateNumber = [2, 1, 4, 3, 6, 5, 8, 7, 10, 9, 12, 11, 14, 13, 15]
-        .filter((number) => candidates.indexOf(number) !== -1)[0];
+        .find((number) => candidates.includes(number));
     } else {
       candidateNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
-        .filter((number) => candidates.indexOf(number) !== -1)[0];
+        .find((number) => candidates.includes(number));
     }
     if (candidateNumber == null) {
       candidateNumber = isPageRTL ? 2 : 1;
@@ -470,9 +463,9 @@ export function onWindowResize() {
     return;
   }
   if (lastOpenMenu.pendingResizeOperation) {
-    cancelTick(lastOpenMenu.pendingResizeOperation);
+    cancelAnimationFrame(lastOpenMenu.pendingResizeOperation);
   }
-  lastOpenMenu.pendingResizeOperation = nextTick(() => {
+  lastOpenMenu.pendingResizeOperation = requestAnimationFrame(() => {
     updateMenuPosition(
       lastOpenMenu.element,
       /** @type {HTMLElement} */ (lastOpenMenu.element.getElementsByClassName('mdw-menu__popup')[0]),
@@ -506,8 +499,7 @@ export function onPopState(event) {
  * @return {void}
  */
 export function selectNextMenuItem(menu, backwards) {
-  /** @type {HTMLCollectionOf<HTMLElement>} */
-  const menuItems = (menu.getElementsByClassName('mdw-menu__item'));
+  const menuItems = /** @type {HTMLCollectionOf<HTMLElement>} */ (menu.getElementsByClassName('mdw-menu__item'));
   let foundTarget = false;
   /** @type {HTMLElement} */
   let candidate = null;
@@ -519,7 +511,7 @@ export function selectNextMenuItem(menu, backwards) {
   // Hidden elements cannot be focused
   // Disabled elements cannot be focused on IE11
   // Skip elements that fail to receive focus
-  iterateSomeOfArrayLike(menuItems, (el) => {
+  for (const el of menuItems) {
     el.focus();
     const focusable = (document.activeElement === el);
     if (focusable) {
@@ -531,31 +523,26 @@ export function selectNextMenuItem(menu, backwards) {
     if (el === target) {
       foundTarget = true;
       if (backwards && candidate) {
-        return true;
+        break;
       }
-      return false;
+      continue;
     }
     if (backwards) {
       if (focusable) {
         candidate = el;
       }
-      return false;
+      continue;
     }
     if (foundTarget) {
       if (focusable) {
         candidate = el;
-        return true;
+        break;
       }
-      return false;
+      continue;
     }
-    return false;
-  });
+  }
   if (!candidate) {
-    if (backwards) {
-      candidate = lastFocusableElement;
-    } else {
-      candidate = firstFocusableItem;
-    }
+    candidate = backwards ? lastFocusableElement : firstFocusableItem;
   }
   if (candidate && document.activeElement !== candidate) {
     candidate.focus();
@@ -567,8 +554,7 @@ export function selectNextMenuItem(menu, backwards) {
  * @return {void}
  */
 export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const menuElement = (event.currentTarget);
+  const menuElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (!menuElement || menuElement.getAttribute('aria-hidden') === 'true') {
     return;
   }
@@ -607,10 +593,10 @@ export function onKeyDown(event) {
  * @return {void}
  */
 export function refreshMenuItems(menuElement) {
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-menu__item'), (menuItem) => {
+  for (const menuItem of menuElement.getElementsByClassName('mdw-menu__item')) {
     menuItem.setAttribute('tabindex', '-1');
     MenuItem.attach(menuItem);
-  });
+  }
   const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
   popupElement.setAttribute('tabindex', '-1');
 }
@@ -640,8 +626,7 @@ export function show(menuElement, event, alignTarget) {
     // Prevent anchor link
     event.preventDefault();
   }
-  /** @type {HTMLElement} */
-  const popupElement = (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
+  const popupElement = /** @type {HTMLElement} */ (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
   let changed = false;
   if (event) {
     updateMenuPosition(menuElement, popupElement, event, alignTarget);
@@ -664,13 +649,13 @@ export function show(menuElement, event, alignTarget) {
   if (changed) {
     attach(menuElement);
     const previousFocus = document.activeElement;
-    const newState = { hash: Math.random().toString(36).substr(2, 16) };
+    const newState = { hash: Math.random().toString(36).slice(2, 18) };
     let previousState = null;
     if (window.history && window.history.pushState) {
       if (!window.history.state) {
         // Create new previous state
         window.history.replaceState({
-          hash: Math.random().toString(36).substr(2, 16),
+          hash: Math.random().toString(36).slice(2, 18),
         }, document.title);
       }
       previousState = window.history.state;
@@ -703,8 +688,7 @@ export function detach(menuElement) {
   menuElement.removeEventListener('wheel', onMenuScroll);
   menuElement.addEventListener('keydown', onKeyDown);
   menuElement.removeAttribute('mdw-menu-js');
-  /** @type {HTMLElement} */
-  const popupElement = (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
+  const popupElement = /** @type {HTMLElement} */ (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
   if (popupElement) {
     popupElement.style.removeProperty('top');
     popupElement.style.removeProperty('left');
@@ -717,5 +701,5 @@ export function detach(menuElement) {
       popupElement.removeAttribute('style');
     }
   }
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-menu__item'), MenuItem.detach);
+  for (const element of menuElement.getElementsByClassName('mdw-menu__item')) { MenuItem.detach(element); }
 }

package/components/menu/item.js

@@ -3,7 +3,6 @@
 import * as Attributes from '../../core/aria/attributes.js';
 import {
   dispatchDomEvent,
-  iterateArrayLike,
   iterateElementSiblings,
 } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
@@ -39,14 +38,10 @@ export function setupARIA(element) {
   if (useAriaChecked && !element.hasAttribute('aria-checked')) {
     element.setAttribute('aria-checked', 'false');
   }
-  iterateArrayLike(element.getElementsByClassName('mdw-menu__icon'),
-    (el) => el.setAttribute('aria-hidden', 'true'));
-  iterateArrayLike(element.getElementsByClassName('mdw-menu__text'),
-    (el) => el.setAttribute('role', 'text'));
-  iterateArrayLike(element.getElementsByClassName('mdw-menu__check'),
-    (el) => el.setAttribute('aria-hidden', 'true'));
-  iterateArrayLike(element.getElementsByClassName('mdw-menu__info'),
-    (el) => el.setAttribute('role', 'note'));
+  for (const el of element.getElementsByClassName('mdw-menu__icon')) el.setAttribute('aria-hidden', 'true');
+  for (const el of element.getElementsByClassName('mdw-menu__text')) el.setAttribute('role', 'text');
+  for (const el of element.getElementsByClassName('mdw-menu__check')) el.setAttribute('aria-hidden', 'true');
+  for (const el of element.getElementsByClassName('mdw-menu__info')) el.setAttribute('role', 'note');
 }
 
 /**
@@ -54,8 +49,7 @@ export function setupARIA(element) {
  * @return {void}
  */
 export function onMouseMove(event) {
-  /** @type {HTMLElement} */
-  const el = (event.currentTarget);
+  const el = /** @type {HTMLElement} */ (event.currentTarget);
   if (!el) {
     return;
   }
@@ -68,10 +62,10 @@ export function onMouseMove(event) {
     return;
   }
   el.focus();
-  if (document.activeElement !== el) {
-    if (document.activeElement !== previousFocus && previousFocus instanceof HTMLElement) {
-      previousFocus.focus();
-    }
+  if (document.activeElement !== el
+    && document.activeElement !== previousFocus
+    && previousFocus instanceof HTMLElement) {
+    previousFocus.focus();
   }
 }
 
@@ -139,8 +133,7 @@ export function openSubMenu(element) {
 export function onClick(event) {
   event.stopPropagation();
 
-  /** @type {HTMLElement} */
-  const menuItemElement = (event.currentTarget);
+  const menuItemElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (Attributes.isDisabled(menuItemElement)) {
     return;
   }
@@ -158,8 +151,7 @@ export function onClick(event) {
  * @return {void}
  */
 export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const menuItemElement = (event.currentTarget);
+  const menuItemElement = /** @type {HTMLElement} */ (event.currentTarget);
 
   if (event.key === 'Enter') {
     event.stopPropagation();

package/components/progress/_spec.scss

@@ -8,11 +8,13 @@
 
 @use '../../core/_motion.scss' as motion;
 @use '../../core/_platform.scss' as platform;
+@use '../../core/_length.scss' as *;
 
-$duration: 1333ms;
-
+:root {
+  --mdw-progress__circle-duration: 1333ms;
+}
 
-/* 
+/*
  * SVG Animated Material Spin Animation
  * radius = 8.75
  * pi = 3.14159
@@ -20,9 +22,9 @@ $duration: 1333ms;
  * dash-length = circumference * (100-x)/100
  *
  * Every cycle rotates entire shape an additional -90deg (CCW)
- * 
+ *
  * Entire animation rotates 4x speed (CW)
- * 
+ *
  * 1. Start head at: 0.5%
  * 2. Ease in head: to 75%
  * 3. Ease out tail: to 74.5%
@@ -42,6 +44,7 @@ $duration: 1333ms;
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -51,8 +54,9 @@ $duration: 1333ms;
   0% {
     transform: rotate(0deg);
   }
+
   100% {
-    transform: rotate(-360deg)
+    transform: rotate(-360deg);
   }
 }
 
@@ -61,36 +65,44 @@ $duration: 1333ms;
     stroke-dashoffset: circlePercentage(0.5, 75);
   }
   #{motion.$standardPeakVelocity * 100%} {
-    stroke-dashoffset: circlePercentage(75,75);
+    stroke-dashoffset: circlePercentage(75, 75);
   }
+
   100% {
-    stroke-dashoffset: circlePercentage(149.5,75);
+    stroke-dashoffset: circlePercentage(149.5, 75);
   }
 }
 
-.mdw-progress-circle {
-  width: 48px;
-  height: 48px;
-  stroke-width: 2.5;
+.mdw-progress__circle {
+  block-size: 48px;
+  inline-size: 48px;
   margin: 8px;
+
+  stroke-width: 2.5;
+
   svg {
-    width:100%;
-    height:100%;
-    transform: rotate(0deg);
-    will-change: transform;
+    block-size: 100%;
+    inline-size: 100%;
+
     animation-name: rotate-clockwise;
-    animation-duration: $duration;
+    animation-duration: var(--mdw-progress__circle-duration);
     animation-timing-function: linear;
     animation-iteration-count: infinite;
+    will-change: transform;
+
+    transform: rotate(0deg);
+
     & > path {
+      transform-origin: center center;
+
       fill: none;
-      stroke-width: inherit;
       stroke: currentColor;
-      transform-origin: center center;
+      stroke-width: inherit;
+
       &:nth-child(1) {
         animation-name: mdw-progress-dash, rotate-counterclockwise;
-        animation-duration: $duration, $duration * 4;
-        animation-timing-function: motion.$standardEasing, steps(4,end);
+        animation-duration: var(--mdw-progress__circle-duration), calc(var(--mdw-progress__circle-duration) * 4);
+        animation-timing-function: motion.$standardEasing, steps(4, end);
         animation-iteration-count: infinite;
 
         stroke-dasharray: circlePercentage(25, 100);
@@ -98,39 +110,36 @@ $duration: 1333ms;
         stroke-linecap: round;
 
       }
+
       &:nth-child(2) {
         display: none;
 
-        transition-property: stroke-dashoffset;
         transition-duration: motion.$shapeChangeDuration;
+
+        transition-property: stroke-dashoffset;
         transition-timing-function: motion.$standardEasing;
 
         stroke-dasharray: circlePercentage(0, 100);
         stroke-dashoffset: circlePercentage(0, 100);
         stroke-linecap: square;
       }
-      
-    }
-  }
-  
-  // IE does not support animated SVG
-  // Double rotation speed
-  @include platform.ifIE() {
-    &:not([mdw-determinate]) svg {
-      animation-duration: $duration * 0.5;
+
     }
   }
 }
 
-.mdw-progress-circle[mdw-determinate] {
+.mdw-progress__circle[mdw-determinate] {
   svg {
     animation: none;
     will-change: none;
+
     & > path {
       &:nth-child(1) {
         display: none;
+
         animation: none;
       }
+
       &:nth-child(2) {
         display: inline;
       }
@@ -138,10 +147,10 @@ $duration: 1333ms;
   }
 }
 
-.mdw-progress-circle[value='100'] {
+.mdw-progress__circle[value='100'] {
   svg {
     & > path:nth-child(2) {
       stroke-dashoffset: circlePercentage(100);
     }
   }
-}
+}