@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/menu/index.scss

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

package/components/menu/item.js

@@ -0,0 +1,231 @@
+// https://www.w3.org/TR/wai-aria-practices/#menu
+
+import * as Attributes from '../../core/aria/attributes.js';
+import {
+  dispatchDomEvent,
+  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');
+  }
+  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');
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onMouseMove(event) {
+  const el = /** @type {HTMLElement} */ (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
+    && 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();
+
+  const menuItemElement = /** @type {HTMLElement} */ (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) {
+  const menuItemElement = /** @type {HTMLElement} */ (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/progress/_spec.scss

@@ -0,0 +1,156 @@
+// https://material.io/guidelines/components/progress-activity.html#
+
+// 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;
+@use '../../core/_length.scss' as *;
+
+:root {
+  --mdw-progress__circle-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
+ *
+ * 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%
+ * 4. Rotate -90 deg
+ *
+ * Animate with ease-in-out
+ */
+
+@function circlePercentage($percent, $limit: 100) {
+  $radius: 8.75;
+  $pi: 3.14159265359;
+  $circumference: 2 * $pi * $radius;
+  @return $circumference * (math.div($limit,100) - math.div($percent,100));
+}
+
+@keyframes rotate-clockwise {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate-counterclockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+@keyframes mdw-progress-dash {
+  0% {
+    stroke-dashoffset: circlePercentage(0.5, 75);
+  }
+  #{motion.$standardPeakVelocity * 100%} {
+    stroke-dashoffset: circlePercentage(75, 75);
+  }
+
+  100% {
+    stroke-dashoffset: circlePercentage(149.5, 75);
+  }
+}
+
+.mdw-progress__circle {
+  block-size: 48px;
+  inline-size: 48px;
+  margin: 8px;
+
+  stroke-width: 2.5;
+
+  svg {
+    block-size: 100%;
+    inline-size: 100%;
+
+    animation-name: rotate-clockwise;
+    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: currentColor;
+      stroke-width: inherit;
+
+      &:nth-child(1) {
+        animation-name: mdw-progress-dash, rotate-counterclockwise;
+        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);
+        stroke-dashoffset: circlePercentage(math.div(100, 3), 75); // Fallback 33% length for IE
+        stroke-linecap: round;
+
+      }
+
+      &:nth-child(2) {
+        display: none;
+
+        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;
+      }
+
+    }
+  }
+}
+
+.mdw-progress__circle[mdw-determinate] {
+  svg {
+    animation: none;
+    will-change: none;
+
+    & > path {
+      &:nth-child(1) {
+        display: none;
+
+        animation: none;
+      }
+
+      &:nth-child(2) {
+        display: inline;
+      }
+    }
+  }
+}
+
+.mdw-progress__circle[value='100'] {
+  svg {
+    & > path:nth-child(2) {
+      stroke-dashoffset: circlePercentage(100);
+    }
+  }
+}

package/components/progress/index.js

@@ -2,19 +2,35 @@ const radius = 8.75;
 const circumference = 2 * Math.PI * radius;
 
 // TODO: Upgrade IE/Edge browsers to animate with rAF
-class ProgressCircle {
-  /**
-   * @param {Element} progressCircleElement
-   * @param {number} value Percentage value (0-100);
-   * @return {void}
-   */
-  static setValue(progressCircleElement, value) {
-    const dashOffset = circumference * (3 - (value / 100));
-    const pathElements = progressCircleElement.getElementsByTagName('path');
-    pathElements[pathElements.length - 1].style.setProperty('stroke-dashoffset', dashOffset.toString());
+
+/**
+ * @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"/>
+    `;
   }
 }
 
-export {
-  ProgressCircle,
-};
+/**
+ * @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';