@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/menu/index.scss

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

package/components/menu/item.js

@@ -1,239 +0,0 @@
-// 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/progress/_spec.scss

@@ -1,147 +0,0 @@
-// 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;
-
-$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 {
-  width: 48px;
-  height: 48px;
-  stroke-width: 2.5;
-  margin: 8px;
-  svg {
-    width:100%;
-    height:100%;
-    transform: rotate(0deg);
-    will-change: transform;
-    animation-name: rotate-clockwise;
-    animation-duration: $duration;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    & > path {
-      fill: none;
-      stroke-width: inherit;
-      stroke: currentColor;
-      transform-origin: center center;
-      &:nth-child(1) {
-        animation-name: mdw-progress-dash, rotate-counterclockwise;
-        animation-duration: $duration, $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-property: stroke-dashoffset;
-        transition-duration: motion.$shapeChangeDuration;
-        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] {
-  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

@@ -1,36 +0,0 @@
-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

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