@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/core/overlay/index.js

@@ -1,108 +0,0 @@
-import { getPassiveEventListenerOption, iterateArrayLike } from '../dom.js';
-
-let lastInteractionWasTouch = false;
-
-if (window && window.matchMedia) {
-  lastInteractionWasTouch = window.matchMedia('(any-pointer: coarse)').matches;
-}
-
-/**
- * @param {PointerEvent|MouseEvent} event
- * @return {void}
- */
-export function onMouseDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  if (element.hasAttribute('mdw-overlay-touch')) {
-    return;
-  }
-  element.setAttribute('mdw-overlay-touch', 'false');
-}
-
-/**
- * @param {TouchEvent} event
- * @return {void}
- */
-export function onTouchStart(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  element.setAttribute('mdw-overlay-touch', 'true');
-}
-
-/**
- * @param {TouchEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  element.setAttribute('mdw-overlay-touch', 'false');
-}
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onBlur(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  const value = element.getAttribute('mdw-overlay-touch');
-  if (value == null) {
-    return;
-  }
-  if (value === 'true') {
-    lastInteractionWasTouch = true;
-  } else {
-    lastInteractionWasTouch = false;
-  }
-  element.removeAttribute('mdw-overlay-touch');
-}
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onFocus(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  if (!element.hasAttribute('mdw-overlay-touch')) {
-    // Element was focused without a mouse or touch event (keyboard or programmatic)
-    if (lastInteractionWasTouch) {
-      element.setAttribute('mdw-overlay-touch', 'true');
-    }
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.setAttribute('mdw-overlay-js', '');
-  element.addEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.addEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.addEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  element.addEventListener('blur', onBlur, getPassiveEventListenerOption());
-  element.addEventListener('focus', onFocus, getPassiveEventListenerOption());
-}
-
-/**
- * @param {Element|Document} [root=document]
- * @return {void}
- */
-export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-overlay'), attach);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeAttribute('mdw-overlay-js');
-  element.removeAttribute('mdw-overlay-touch');
-  element.removeEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.removeEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.removeEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  element.removeEventListener('blur', onBlur, getPassiveEventListenerOption());
-}

package/core/overlay/index.scss

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

package/core/ripple/_spec.scss

@@ -1,197 +0,0 @@
-// https://android.googlesource.com/platform/frameworks/base/+/dbcbca4/graphics/java/android/graphics/drawable/Ripple.java
-
-@use "sass:math";
-
-@use "../_breakpoint.scss" as breakpoint;
-@use "../_platform.scss" as platform;
-@use "../_motion.scss" as motion;
-
-$enterDelay: 80ms !default;
-
-$fadeOutDuration: math.div(1000ms, 3.0) !default;
-$touchDownAcceleration: 1024 !default;
-$touchUpAcceleration: 3400 !default;
-
-// Ripple starts at 100% opacity
-// Ripple fills linearly
-// Ripple fills on touch down with duration: 1000ms * √(radius / 1024)
-// Ripple fills on touch up with duration: 1000ms * √(Δradius / (1024 + 3400)
-// Ripple opacity down to 0 on touch-up event with deceleration and duration: 1000ms / 3.0
-
-// Use motion.$expandDuration temporarily
-
-// TODO: Use variable ripple scale durations
-// TODO: Use enter-delay with JS Ripple
-
-/**
- * --Issues rendering a circle inside an element--
- * See: https://codepen.io/shortfuse/pen/VxYxYj
- *
- * When using block display:
- * - Firefox incorrectly stretches ripple when inside flexbox
- * - Safari incorrectly inherit parent's padding
- *
- * Using using table display:
- * - Firefox renders correctly
- * - Safari renders correctly
- * - IE and Edge don't animate opacity correctly
- * - Ripples don't show if inside actual table
- *
- * When using JS (wrapped with block element):
- * - Firefox renders correctly
- * - Safari renders correctly
- * - IE and Edge renders correctly but still has forced 0.26 opacity
- *
- * Chrome works fine under all conditions
- *
- */
-
-.mdw-ripple {
-  position: relative;
-
-  -webkit-tap-highlight-color: transparent;
-}
-
-.mdw-ripple:not([mdw-ripple-js]) {
-  overflow: hidden;
-  // Do not override any declarations
-}
-
-.mdw-ripple__container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  
-  box-sizing: border-box;
-
-  pointer-events: none;
-  z-index: 1;
-
-  border-radius: inherit;
-}
-
-.mdw-ripple__inner {
-  display: block;
-  position: absolute;
-
-  animation-name: none;
-  animation-duration: motion.$expandDuration;
-  animation-timing-function: linear;
-  animation-direction: normal;
-  animation-fill-mode: forwards;
-  transition-delay: 0s;
-  transition-duration: motion.$simpleDuration;
-  transition-property: background-color, color;
-  transition-timing-function: motion.$standardEasing;
-
-  opacity: 0.16;
-  pointer-events: none;
-  transform: scale(0);
-  
-  background-color: currentColor;
-  
-  border-radius: 50%;
-}
-
-.mdw-ripple__inner[mdw-fade-in] {
-  animation-name: ripple-fade-in;
-}
-
-.mdw-ripple__inner[mdw-fade-in-repeat] {
-  animation-name: ripple-fade-in-repeat;
-}
-
-.mdw-ripple:not(:active) > .mdw-ripple__container > .mdw-ripple__inner[mdw-fade-in-complete][mdw-fade-in],
-.mdw-ripple__inner[mdw-fade-out] {
-  animation-name: ripple-fade-out;
-  animation-duration: $fadeOutDuration;
-  animation-timing-function: motion.$decelerateEasing;
-}
-
-
-@keyframes ripple-fade-in {
-  from {
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(2);
-  }
-}
-
-@keyframes ripple-fade-in-repeat {
-  from {
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(2);
-  }
-}
-
-@keyframes ripple-fade-out {
-  from {
-    transform: scale(2);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(2);
-  }
-}
-
-.mdw-ripple::after {
-  display: table; // See above
-  position: absolute;
-  top: 50%;
-  left: 50%;
-
-  height: 0;
-  width: 0;
-  padding: 50%;
-  // z-index: -1; // Safari has a negative z-index scrolling bug (hides elements)
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  transition: 
-    transform #{motion.$expandDuration + $fadeOutDuration} linear $enterDelay,
-    background-color $fadeOutDuration motion.$decelerateEasing #{$enterDelay + motion.$expandDuration};
-  will-change: transform, background-color;
-
-  opacity: 0.16;
-  pointer-events: none;
-  transform: translateX(-50%) translateY(-50%) scale(2);
-
-  background-color: transparent;
-  border-radius: 50%;
-  color: inherit;
-  content: '';
-}
-
-// On active, pop up initial state
-.mdw-ripple:active::after {
-  transition-delay: 0s;
-  transition-duration: 0s;
-
-  transform: translateX(-50%) translateY(-50%) scale(0);
-
-  background-color: currentColor;
-}
-
-.mdw-ripple[mdw-ripple-js]::after {
-  display: none;
-}
-
-.mdw-ripple[disabled],
-.mdw-ripple[aria-disabled="true"] {
-  & > .mdw-ripple__container,
-  &::after {
-    visibility: hidden;
-  }
-}
-

package/core/ripple/_theme.scss

@@ -1,40 +0,0 @@
-// https://material.io/design/interaction/states.html
-// https://material.io/design/components/buttons.html
-// https://material.io/design/iconography/system-icons.html#color
-
-@use '../theme/_mixins.scss' as theme;
-
-$themeValues: (
-  overlay-color:                 (('foreground-light', 1.00), ('foreground-dark', 1.00)),
-  pressed-opacity:               (0.16, 0.32),
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('ripple', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($type: 'var') {
-  .mdw-ripple {
-    & > .mdw-ripple__container > .mdw-ripple__inner,
-    &::after {
-      opacity: getThemeValue("pressed-opacity", $type);
-      color: inherit;
-      @if ($type == 'var') {
-        // Fallback handed by previous inherit rule
-        color: RGB(var(--mdw-ink));
-      }
-    }
-  }
-}
-
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('ripple', $themeValues) {
-  @include addThemeRules();
-}

package/core/ripple/index.js

@@ -1,294 +0,0 @@
-import {
-  getChildElementByClass, getPassiveEventListenerOption, iterateArrayLike, nextTick,
-} from '../dom.js';
-
-/**
- * @param {Element} element
- * @return {boolean}
- */
-export function isActive(element) {
-  if (element.matches) {
-    return element.matches(':active');
-  }
-  if ('msMatchesSelector' in element) {
-    // @ts-ignore: Compatibility
-    element.msMatchesSelector(':active');
-  }
-  return false;
-}
-
-/**
- * @param {HTMLElement} rippleInner
- * @param {number} [x]
- * @param {number} [y]
- * @return {void}
- */
-export function updateRipplePosition(rippleInner, x, y) {
-  let width;
-  let height;
-  let xPos = x;
-  let yPos = y;
-  if (x == null) {
-    xPos = rippleInner.parentElement.clientWidth / 2;
-    width = xPos;
-  } else if (x >= rippleInner.parentElement.clientWidth / 2) {
-    width = x;
-    // furthest horizontal side is left
-  } else {
-    width = rippleInner.parentElement.clientWidth - x;
-    // furthest horizontal side is right
-  }
-  if (y == null) {
-    yPos = rippleInner.parentElement.clientHeight / 2;
-    height = yPos;
-  } else if (y >= rippleInner.parentElement.clientHeight / 2) {
-    height = y;
-    // furthest vertical side is bottom
-  } else {
-    height = rippleInner.parentElement.clientHeight - y;
-    // furthest vertical side is top
-  }
-  const hypotenuse = Math.sqrt((width * width) + (height * height));
-  rippleInner.style.setProperty('height', `${hypotenuse}px`);
-  rippleInner.style.setProperty('width', `${hypotenuse}px`);
-  rippleInner.style.setProperty('left', `${xPos - (hypotenuse / 2)}px`);
-  rippleInner.style.setProperty('top', `${yPos - (hypotenuse / 2)}px`);
-}
-
-/**
- * @param {Element} rippleInner
- * @param {string} initiator
- * @return {void}
- */
-export function drawRipple(rippleInner, initiator) {
-  const currentInitiator = rippleInner.getAttribute('mdw-fade-in');
-  if (currentInitiator && currentInitiator !== initiator) {
-    // Only allow repeat interactions from same initiator
-    return;
-  }
-  rippleInner.setAttribute('mdw-fade-in', initiator);
-  if (currentInitiator === initiator) {
-    // Repeat the animation
-    if (rippleInner.hasAttribute('mdw-fade-in-repeat')) {
-      rippleInner.removeAttribute('mdw-fade-in-repeat');
-    } else {
-      rippleInner.setAttribute('mdw-fade-in-repeat', '');
-    }
-  }
-}
-
-/**
- * @param {AnimationEvent} event
- * @return {void}
- */
-export function onAnimationEnd(event) {
-  /** @type {HTMLElement} */
-  const rippleInner = (event.currentTarget);
-  if (event.animationName === 'ripple-fade-in' || event.animationName === 'ripple-fade-in-repeat') {
-    rippleInner.setAttribute('mdw-fade-in-complete', '');
-    return;
-  }
-  if (event.animationName === 'ripple-fade-out') {
-    rippleInner.removeAttribute('mdw-fade-in');
-    rippleInner.removeAttribute('mdw-fade-in-repeat');
-    rippleInner.removeAttribute('mdw-fade-in-complete');
-    rippleInner.removeAttribute('mdw-fade-out');
-  }
-}
-
-/**
- * @param {Element} rippleInner
- * @return {void}
- */
-export function clearRipple(rippleInner) {
-  if (!rippleInner.hasAttribute('mdw-fade-in')) {
-    return;
-  }
-  if (rippleInner.hasAttribute('mdw-keydown') && !rippleInner.hasAttribute('mdw-keyup')) {
-    return;
-  }
-  if (!rippleInner.hasAttribute('mdw-fade-in-complete')) {
-    return;
-  }
-  rippleInner.removeAttribute('mdw-fade-in');
-  rippleInner.removeAttribute('mdw-fade-in-repeat');
-  rippleInner.removeAttribute('mdw-fade-in-complete');
-  rippleInner.setAttribute('mdw-fade-out', '');
-}
-
-/**
- * @param {PointerEvent|MouseEvent} event
- * @return {void}
- */
-export function onMouseDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
-  if (!rippleContainer) {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
-  if (!rippleInner) {
-    return;
-  }
-  // @ts-ignore: Optimization
-  if (!event.pointerType && !event.detail) {
-    return;
-  }
-  const rect = rippleContainer.getBoundingClientRect();
-  const x = event.pageX - rect.left - window.pageXOffset;
-  const y = event.pageY - rect.top - window.pageYOffset;
-  updateRipplePosition(rippleInner, x, y);
-  drawRipple(rippleInner, 'mouse');
-}
-
-/**
- * @param {TouchEvent} event
- * @return {void}
- */
-export function onTouchStart(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
-  if (!rippleContainer) {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
-  if (!rippleInner) {
-    return;
-  }
-  const touch = event.changedTouches[0];
-  if (!touch) {
-    return;
-  }
-  const rect = rippleContainer.getBoundingClientRect();
-  const x = touch.pageX - rect.left - window.pageXOffset;
-  const y = touch.pageY - rect.top - window.pageYOffset;
-  updateRipplePosition(rippleInner, x, y);
-  drawRipple(rippleInner, 'touch');
-}
-
-/**
- * @param {PointerEvent|MouseEvent} event
- * @return {void}
- */
-export function onClick(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
-  if (!rippleContainer) {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
-  if (!rippleInner) {
-    return;
-  }
-  // @ts-ignore: Optimization
-  if (event.pointerType || event.detail) {
-    return;
-  }
-  if (rippleInner.getAttribute('mdw-fade-in') === 'key') {
-    // Already handled by keydown
-    return;
-  }
-  updateRipplePosition(rippleInner);
-  drawRipple(rippleInner, 'key');
-  nextTick(() => {
-    clearRipple(rippleInner);
-  });
-}
-
-/**
- * @param {TouchEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
-  if (!rippleContainer) {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
-  if (!rippleInner) {
-    return;
-  }
-
-  nextTick(() => {
-    if (isActive(rippleContainer.parentElement)) {
-      if (rippleInner.getAttribute('mdw-fade-in') === 'key') {
-        return;
-      }
-      updateRipplePosition(rippleInner);
-      drawRipple(rippleInner, 'key');
-    }
-  });
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  let rippleContainer = getChildElementByClass(element, 'mdw-ripple__container');
-  if (!rippleContainer) {
-    rippleContainer = document.createElement('div');
-    rippleContainer.classList.add('mdw-ripple__container');
-    rippleContainer.setAttribute('role', 'presentation');
-    if (element.firstChild) {
-      element.insertBefore(rippleContainer, element.firstChild);
-    } else {
-      element.appendChild(rippleContainer);
-    }
-  }
-
-  let rippleInner = getChildElementByClass(rippleContainer, 'mdw-ripple__inner');
-  if (!rippleInner) {
-    rippleInner = document.createElement('div');
-    rippleInner.classList.add('mdw-ripple__inner');
-    rippleInner.setAttribute('role', 'presentation');
-    rippleContainer.appendChild(rippleInner);
-  }
-  rippleInner.removeAttribute('mdw-fade-in');
-  rippleInner.removeAttribute('mdw-fade-in-repeat');
-  rippleInner.removeAttribute('mdw-fade-in-complete');
-  rippleInner.removeAttribute('mdw-fade-out');
-  element.setAttribute('mdw-ripple-js', '');
-  element.addEventListener('click', onClick, getPassiveEventListenerOption());
-  element.addEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.addEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.addEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  rippleInner.addEventListener('animationend', onAnimationEnd, getPassiveEventListenerOption());
-}
-
-/**
- * @param {Element|Document} [root=document]
- * @return {void}
- */
-export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-ripple'), attach);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  const rippleContainer = getChildElementByClass(element, 'mdw-ripple__container');
-  if (rippleContainer) {
-    element.removeChild(rippleContainer);
-  }
-  element.removeAttribute('mdw-ripple-js');
-  element.removeEventListener('click', onClick);
-  element.removeEventListener('mousedown', onMouseDown);
-  element.removeEventListener('touchstart', onTouchStart);
-  element.removeEventListener('keydown', onKeyDown);
-}

package/core/ripple/index.scss

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

package/core/theme/_config.scss

@@ -1,2 +0,0 @@
-@forward './_variables.scss';
-@forward './_palettes.scss';