@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/core/ripple/index.js

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

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

package/core/theme/_config.scss

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

package/core/theme/_mixins.scss

@@ -0,0 +1,172 @@
+@forward './_variables.scss';
+@forward './_palettes.scss';
+
+@use '../_platform.scss' as platform;
+@use './_variables.scss' as variables;
+@use './_palettes.scss' as palettes;
+
+@mixin _addCSSVariables($component, $map, $lightness) {
+  @each $key in map-keys($map) {
+    $item: _getThemeMapItem($map, $key, $lightness);
+    $value: null;
+    $length: length($item);
+    @if ($length == 1) {
+      @if (type_of($item) == color) {
+        $value: red($item),green($item),blue($item);
+      } @else {
+        $value: $item;
+      }
+    } @else if ($length == 2) {
+      $color: nth($item, 1);
+      $opacity: nth($item, 2);
+      @if (type_of($color) == string) {
+        $color: _getThemeParamColor($color);
+      }
+      $value: red($color),green($color),blue($color),$opacity;
+    } @else {
+      $color: nth($item, 1);
+      $tone: nth($item, 2);
+      $opacity: nth($item, 3);
+      @if ($tone == null) {
+        @error '$tone cannot be null';
+      }
+      @if ($color == null) {
+        $value: var(--#{$tone}-color);
+      } @else {
+        @if (type_of($color) == string) {
+          $color: _getThemeParamColor($color, $tone);
+        }
+        @if ($opacity == null) {
+          $value: red($color),green($color),blue($color);
+        } @else {
+          $value: red($color),green($color),blue($color),$opacity;
+        }
+      }
+    }
+    --mdw-#{$component}__#{$key}: #{$value};
+  }
+}
+
+@mixin _addComponentCSSVariableRules($component, $values) {
+  :root,
+  .mdw-theme[mdw-light] {
+    @include _addCSSVariables($component, $values, 'light');
+  }
+
+  .mdw-theme[mdw-dark] {
+    @include _addCSSVariables($component, $values, 'dark');
+  }
+}
+
+@mixin addComponentCSSVariableRules($component, $values) {
+  @if (variables.$cssvars == 'supports') {
+    @supports(--v:v) {
+      @content;
+      @include _addComponentCSSVariableRules($component, $values);
+    }
+  } @else if (variables.$cssvars != false) {
+    @content;
+    @include _addComponentCSSVariableRules($component, $values);
+  }
+}
+
+@mixin addComponentFallbackRules($lightness) {
+  @if (variables.$fallbacks == 'ieonly') {
+    @include platform.ifIE() {
+      @include fallbackWrapper($lightness) {
+        @content;
+      }
+    }
+  } @else if (variables.$fallbacks != false) {
+    @include fallbackWrapper($lightness) {
+      @content;
+    }
+  }
+}
+
+@function getThemeParamValue($param) {
+  @if ($param == 'primary') {
+    @return map-get(palettes.$palettes, variables.$primary);
+  } @else if ($param == 'secondary') {
+    @return map-get(palettes.$palettes, variables.$secondary);
+  } @else if ($param == 'warn') {
+    @return map-get(palettes.$palettes, variables.$warn);
+  } @else if ($param == 'background') {
+    @return map-get(palettes.$palettes, variables.$background);
+  } @else if ($param == 'foreground-light') {
+    @return nth(variables.$foreground, 1);
+  } @else if ($param == 'foreground-dark') {
+    @return nth(variables.$foreground, length(variables.$foreground));
+  } @else {
+    @return map-get(palettes.$palettes, $param);
+  }
+}
+
+@function _getThemeParamColor($param, $tone: null) {
+  $paramValue: getThemeParamValue($param);
+  @if (($param == 'foreground-light') or ($param == 'foreground-dark')) {
+    @return $paramValue;
+  }
+  @return map-get($paramValue, $tone);
+}
+
+@function _getThemeMapItem($colorMap, $key, $lightness) {
+  $list: map-get($colorMap, $key);
+  $length: length($list);
+
+  @if ($lightness == 'dark') {
+    @if ($length > 1) {
+      @return nth($list, 2);
+    } @else {
+      @error 'Variable not found' $key;
+    }
+  }
+  @return nth($list, 1);
+}
+
+@function getThemeValue($component, $colorMap, $key, $type) {
+  @if ($type == 'var') {
+    @return var(--mdw-#{$component}__#{$key});
+  }
+  $item: _getThemeMapItem($colorMap, $key, $type);
+  $length: length($item);
+  @if ($length == 1) {
+    @if (type_of($item) == color) {
+      @return red($item),green($item),blue($item);
+    }
+    @return $item;
+  } @else if ($length == 2) {
+    $color: nth($item, 1);
+    $opacity: nth($item, 2);
+    @if (type_of($color) == string) {
+      $color: _getThemeParamColor($color);
+    }
+    @return red($color),green($color),blue($color),$opacity;
+  } @else {
+    $color: nth($item, 1);
+    $tone: nth($item, 2);
+    $opacity: nth($item, 3);
+    $value: _getThemeParamColor($color, $tone);
+    @if ($opacity == null) {
+      @return red($value),green($value),blue($value);
+    }
+    @return red($value),green($value),blue($value),$opacity;
+  }
+  @return null;
+}
+
+@mixin fallbackWrapper($scope) {
+  @if ($scope == 'global') {
+    @content;
+  } @else if ($scope == 'light') {
+    .mdw-theme[mdw-light],
+    .mdw-theme[mdw-dark] .mdw-theme[mdw-light] {
+      @content;
+    }
+  } @else if ($scope == 'dark') {
+    .mdw-theme[mdw-dark],
+    .mdw-theme[mdw-light] .mdw-theme[mdw-dark] {
+      @content;
+    }
+  }
+}