@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/menu/index.scss

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

package/components/menu/item.js

@@ -0,0 +1,239 @@
+// https://www.w3.org/TR/wai-aria-practices/#menu
+
+import * as Attributes from '../../core/aria/attributes.js';
+import {
+  dispatchDomEvent,
+  iterateArrayLike,
+  iterateElementSiblings,
+} 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 setupARIA(element) {
+  if (element.hasAttribute('mdw-no-aria')) {
+    return;
+  }
+  const role = element.getAttribute('role');
+  let useAriaChecked = false;
+  if (role === 'menuitemcheckbox' || role === 'menuitemradio') {
+    useAriaChecked = true;
+  } else if (role !== 'menuitem') {
+    if (element.getElementsByClassName('mdw-menu__check').length) {
+      useAriaChecked = true;
+      element.setAttribute('role', 'menuitemcheckbox');
+    } else if (element.getElementsByClassName('mdw-menu__radio').length) {
+      useAriaChecked = true;
+      element.setAttribute('role', 'menuitemradio');
+    } else {
+      element.setAttribute('role', 'menuitem');
+    }
+  }
+  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'));
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onMouseMove(event) {
+  /** @type {HTMLElement} */
+  const el = (event.currentTarget);
+  if (!el) {
+    return;
+  }
+  const previousFocus = document.activeElement;
+  if (previousFocus === el) {
+    // Already focused
+    return;
+  }
+  if (el.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  el.focus();
+  if (document.activeElement !== el) {
+    if (document.activeElement !== previousFocus && previousFocus instanceof HTMLElement) {
+      previousFocus.focus();
+    }
+  }
+}
+
+/**
+ * @param {Element} element
+ * @param {boolean} checked
+ * @return {boolean} uiChanged
+ */
+export function setChecked(element, checked) {
+  const role = element.getAttribute('role');
+  let isCheckable = false;
+  if (role === 'menuitemcheckbox') {
+    isCheckable = true;
+    if (!dispatchDomEvent(element, checked ? CHECK_EVENT : UNCHECK_EVENT)) {
+      return false;
+    }
+  }
+  if (role === 'menuitemradio') {
+    isCheckable = true;
+    if (checked) {
+      if (!dispatchDomEvent(element, CHECK_EVENT)) {
+        return false;
+      }
+      iterateElementSiblings(element, (sibling) => {
+        if (sibling.getAttribute('role') === 'menuitemradio') {
+          sibling.setAttribute('aria-checked', 'false');
+        }
+      });
+    }
+  }
+  if (!isCheckable) {
+    return false;
+  }
+  element.setAttribute('aria-checked', checked ? 'true' : 'false');
+  return true;
+}
+
+/**
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function toggleChecked(element) {
+  const checked = !Attributes.isChecked(element);
+  return setChecked(element, checked);
+}
+
+/**
+ * @param {Element} element
+ * @return {boolean} handled
+ */
+export function openSubMenu(element) {
+  const hasPopup = element.getAttribute('aria-haspopup');
+  if (hasPopup !== 'menu' && hasPopup !== 'true') {
+    return false;
+  }
+
+  // TODO: Open new menu
+  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}
+ */
+export function detachCore(element) {
+  element.removeEventListener('click', onClick);
+  element.removeEventListener('mousemove', onMouseMove);
+  element.removeEventListener('keydown', onKeyDown);
+  element.removeAttribute('mdw-js');
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  detachCore(element);
+  Ripple.detach(element);
+  Overlay.detach(element);
+}

package/components/{core/progress/style.scss → progress/_spec.scss}

@@ -1,32 +1,41 @@
 // https://material.io/guidelines/components/progress-activity.html#
 
-$radius: 8.75;
-$pi: 3.14159265359;
-$circumference: 2 * $pi * $radius;
-$duration: 1500ms;
+// 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;
+
 
 /* 
  * 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 {
@@ -51,7 +60,7 @@ $duration: 1500ms;
   0% {
     stroke-dashoffset: circlePercentage(0.5, 75);
   }
-  50% {
+  #{motion.$standardPeakVelocity * 100%} {
     stroke-dashoffset: circlePercentage(75,75);
   }
   100% {
@@ -79,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: $motion-easing-standard, 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 MSOnly {
+  // 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;
     }
   }
 }
@@ -112,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

@@ -0,0 +1,36 @@
+const radius = 8.75;
+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);
+ * @return {void}
+ */
+export function setValue(progressCircleElement, value) {
+  const dashOffset = circumference * (3 - (value / 100));
+  const pathElements = progressCircleElement.getElementsByTagName('path');
+  pathElements[pathElements.length - 1].style.setProperty('stroke-dashoffset', dashOffset.toString());
+}

package/components/progress/index.scss

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