@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/menu/item.js

@@ -1,47 +1,18 @@
 // https://www.w3.org/TR/wai-aria-practices/#menu
 
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-
+import * as Attributes from '../../core/aria/attributes.js';
 import {
   dispatchDomEvent,
   iterateArrayLike,
   iterateElementSiblings,
-} from '../../core/dom';
+} from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
 
 export const ACTIVATE_EVENT = 'mdw:menuitem-activate';
 export const CHECK_EVENT = 'mdw:menuitem-check';
 export const UNCHECK_EVENT = 'mdw:menuitem-uncheck';
 
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  Overlay.attach(element);
-
-  element.classList.add('mdw-ripple');
-  Ripple.attach(element);
-
-  attachCore(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachCore(element) {
-  // If mouseover is used, an item can still lose focus via keyboard navigation.
-  // An extra event listener would need to be created to catch blur but the cursor
-  // would still remain over the element, thus needing another mousemove event.
-  // Prioritization is given to less event listeners rather than operations per second.
-  element.addEventListener('mousemove', onMouseMove);
-  element.addEventListener('click', onClick);
-  element.addEventListener('keydown', onKeyDown);
-  setupARIA(element);
-}
-
 /**
  * @param {Element} element
  * @return {void}
@@ -69,34 +40,13 @@ export function setupARIA(element) {
     element.setAttribute('aria-checked', 'false');
   }
   iterateArrayLike(element.getElementsByClassName('mdw-menu__icon'),
-    el => el.setAttribute('aria-hidden', 'true'));
+    (el) => el.setAttribute('aria-hidden', 'true'));
   iterateArrayLike(element.getElementsByClassName('mdw-menu__text'),
-    el => el.setAttribute('role', 'text'));
+    (el) => el.setAttribute('role', 'text'));
   iterateArrayLike(element.getElementsByClassName('mdw-menu__check'),
-    el => el.setAttribute('aria-hidden', 'true'));
+    (el) => el.setAttribute('aria-hidden', 'true'));
   iterateArrayLike(element.getElementsByClassName('mdw-menu__info'),
-    el => el.setAttribute('role', 'note'));
-}
-
-/**
- * @param {MouseEvent|KeyboardEvent|PointerEvent} event
- * @return {void}
- */
-export function onClick(event) {
-  event.stopPropagation();
-
-  /** @type {HTMLElement} */
-  const menuItemElement = (event.currentTarget);
-  if (isDisabled(menuItemElement)) {
-    return;
-  }
-  const role = menuItemElement.getAttribute('role');
-  if (role === 'menuitemcheckbox') {
-    toggleChecked(menuItemElement);
-  } else if (role === 'menuitemradio') {
-    setChecked(menuItemElement, true);
-  }
-  dispatchDomEvent(menuItemElement, ACTIVATE_EVENT);
+    (el) => el.setAttribute('role', 'note'));
 }
 
 /**
@@ -119,62 +69,12 @@ export function onMouseMove(event) {
   }
   el.focus();
   if (document.activeElement !== el) {
-    if (previousFocus && document.activeElement !== previousFocus) {
+    if (document.activeElement !== previousFocus && previousFocus instanceof HTMLElement) {
       previousFocus.focus();
     }
   }
 }
 
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const menuItemElement = (event.currentTarget);
-
-  if (event.key === 'Enter') {
-    event.stopPropagation();
-    if (isDisabled(menuItemElement)) {
-      return;
-    }
-    onClick(event);
-    return;
-  }
-
-  if (event.key === 'Spacebar' || (event.key === ' ')) {
-    event.stopPropagation();
-    event.preventDefault();
-    if (isDisabled(menuItemElement)) {
-      return;
-    }
-    const role = menuItemElement.getAttribute('role');
-    if (role === 'menuitemcheckbox') {
-      toggleChecked(menuItemElement);
-    } else if (role === 'menuitemradio') {
-      setChecked(menuItemElement, true);
-    } else {
-      dispatchDomEvent(menuItemElement, ACTIVATE_EVENT);
-    }
-  }
-}
-
-/**
- * @param {Element} element
- * @return {boolean}
- */
-export function isChecked(element) {
-  return (element.getAttribute('aria-checked') === 'true');
-}
-
-/**
- * @param {Element} element
- * @return {boolean}
- */
-export function isDisabled(element) {
-  return (element.getAttribute('aria-disabled') === 'true');
-}
-
 /**
  * @param {Element} element
  * @param {boolean} checked
@@ -214,7 +114,7 @@ export function setChecked(element, checked) {
  * @return {boolean}
  */
 export function toggleChecked(element) {
-  const checked = !isChecked(element);
+  const checked = !Attributes.isChecked(element);
   return setChecked(element, checked);
 }
 
@@ -232,6 +132,91 @@ export function openSubMenu(element) {
   return false;
 }
 
+/**
+ * @param {MouseEvent|KeyboardEvent|PointerEvent} event
+ * @return {void}
+ */
+export function onClick(event) {
+  event.stopPropagation();
+
+  /** @type {HTMLElement} */
+  const menuItemElement = (event.currentTarget);
+  if (Attributes.isDisabled(menuItemElement)) {
+    return;
+  }
+  const role = menuItemElement.getAttribute('role');
+  if (role === 'menuitemcheckbox') {
+    toggleChecked(menuItemElement);
+  } else if (role === 'menuitemradio') {
+    setChecked(menuItemElement, true);
+  }
+  dispatchDomEvent(menuItemElement, ACTIVATE_EVENT);
+}
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onKeyDown(event) {
+  /** @type {HTMLElement} */
+  const menuItemElement = (event.currentTarget);
+
+  if (event.key === 'Enter') {
+    event.stopPropagation();
+    event.preventDefault();
+    if (Attributes.isDisabled(menuItemElement)) {
+      return;
+    }
+    onClick(event);
+    return;
+  }
+
+  if (event.key === 'Spacebar' || (event.key === ' ')) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (Attributes.isDisabled(menuItemElement)) {
+      return;
+    }
+    const role = menuItemElement.getAttribute('role');
+    if (role === 'menuitemcheckbox') {
+      toggleChecked(menuItemElement);
+    } else if (role === 'menuitemradio') {
+      setChecked(menuItemElement, true);
+    } else {
+      dispatchDomEvent(menuItemElement, ACTIVATE_EVENT);
+    }
+  }
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachCore(element) {
+  // If mouseover is used, an item can still lose focus via keyboard navigation.
+  // An extra event listener would need to be created to catch blur but the cursor
+  // would still remain over the element, thus needing another mousemove event.
+  // Prioritization is given to less event listeners rather than operations per second.
+  element.addEventListener('mousemove', onMouseMove);
+  element.addEventListener('click', onClick);
+  element.addEventListener('keydown', onKeyDown);
+  setupARIA(element);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.classList.add('mdw-overlay');
+  Overlay.attach(element);
+
+  element.classList.add('mdw-ripple');
+  Ripple.attach(element);
+
+  attachCore(element);
+}
+
 /**
  * @param {Element} element
  * @return {void}

package/components/progress/_spec.scss

@@ -1,35 +1,41 @@
 // https://material.io/guidelines/components/progress-activity.html#
 
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
+// https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/progress_indeterminate_rotation_material.xml
+// https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/progress_indeterminate_material.xml
+// https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/drawable/vector_drawable_progress_bar_medium.xml
+
+@use "sass:math";
+
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+
+$duration: 1333ms;
 
-$radius: 8.75;
-$pi: 3.14159265359;
-$circumference: 2 * $pi * $radius;
-$duration: 1500ms;
 
 /* 
  * SVG Animated Material Spin Animation
  * radius = 8.75
  * pi = 3.14159
  * circumference = 2 * pi * r = (54.977825)
- * dash-length = circumference * (100-x)/100 
+ * dash-length = circumference * (100-x)/100
  *
  * Every cycle rotates entire shape an additional -90deg (CCW)
  * 
  * Entire animation rotates 4x speed (CW)
  * 
- * 1. Start 0.072% from head
- * 2. Increase to 75% from head
- * 3. Reduce tail to 0.521% from tail 
+ * 1. Start head at: 0.5%
+ * 2. Ease in head: to 75%
+ * 3. Ease out tail: to 74.5%
  * 4. Rotate -90 deg
  *
  * Animate with ease-in-out
  */
 
-
 @function circlePercentage($percent, $limit: 100) {
-  @return $circumference * ((3 * ($limit/100)) - $percent/100);
+  $radius: 8.75;
+  $pi: 3.14159265359;
+  $circumference: 2 * $pi * $radius;
+  @return $circumference * (math.div($limit,100) - math.div($percent,100));
 }
 
 @keyframes rotate-clockwise {
@@ -54,7 +60,7 @@ $duration: 1500ms;
   0% {
     stroke-dashoffset: circlePercentage(0.5, 75);
   }
-  50% {
+  #{motion.$standardPeakVelocity * 100%} {
     stroke-dashoffset: circlePercentage(75,75);
   }
   100% {
@@ -82,31 +88,36 @@ $duration: 1500ms;
       stroke: currentColor;
       transform-origin: center center;
       &:nth-child(1) {
-        stroke-linecap: square;
-        stroke-dasharray: $circumference * 0.75;
-        stroke-dashoffset: circlePercentage(33.33, 75);
-        transform: rotate(0deg);
-        will-change: stroke-dashoffset, transform;
         animation-name: mdw-progress-dash, rotate-counterclockwise;
         animation-duration: $duration, $duration * 4;
-        animation-timing-function: $mdw-motion__standard-easing, steps(4,end);
+        animation-timing-function: motion.$standardEasing, steps(4,end);
         animation-iteration-count: infinite;
+
+        stroke-dasharray: circlePercentage(25, 100);
+        stroke-dashoffset: circlePercentage(math.div(100, 3), 75); // Fallback 33% length for IE
+        stroke-linecap: round;
+
       }
       &:nth-child(2) {
         display: none;
+
         transition-property: stroke-dashoffset;
-        transition-duration: $duration;
+        transition-duration: motion.$shapeChangeDuration;
+        transition-timing-function: motion.$standardEasing;
+
+        stroke-dasharray: circlePercentage(0, 100);
         stroke-dashoffset: circlePercentage(0, 100);
-        stroke-dasharray: $circumference;
+        stroke-linecap: square;
       }
       
     }
   }
   
-  // IE and Edge do not support animated SVG
-  @include mdw-platform__ms {
+  // IE does not support animated SVG
+  // Double rotation speed
+  @include platform.ifIE() {
     &:not([mdw-determinate]) svg {
-      animation-duration: $duration / 2;
+      animation-duration: $duration * 0.5;
     }
   }
 }
@@ -115,13 +126,10 @@ $duration: 1500ms;
   svg {
     animation: none;
     will-change: none;
-    transform: none;
     & > path {
       &:nth-child(1) {
         display: none;
         animation: none;
-        will-change: none;
-        transform: none;
       }
       &:nth-child(2) {
         display: inline;

package/components/progress/index.js

@@ -3,6 +3,27 @@ const circumference = 2 * Math.PI * radius;
 
 // TODO: Upgrade IE/Edge browsers to animate with rAF
 
+/**
+ * @param {Element} progressCircleElement
+ * @return {void}
+ */
+export function attach(progressCircleElement) {
+  /** @type {Element} */
+  let svg = (progressCircleElement.getElementsByTagName('svg')[0]);
+  if (!svg) {
+    svg = (document.createElement('svg'));
+    svg.setAttribute('viewbox', '0 0 24 24');
+    progressCircleElement.appendChild(svg);
+  }
+  const paths = svg.getElementsByTagName('path');
+  if (paths.length !== 2) {
+    svg.innerHTML = /* html */ `
+      <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"/>
+      <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"/>
+    `;
+  }
+}
+
 /**
  * @param {Element} progressCircleElement
  * @param {number} value Percentage value (0-100);

package/components/progress/index.scss

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