@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/core/ripple/index.js

@@ -1,130 +1,6 @@
-import { getChildElementByClass, nextTick, getPassiveEventListenerOption, iterateArrayLike } from '../dom';
-
-/**
- * @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 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);
-  }
-  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 {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
-  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 {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');
-    }
-  });
-}
+import {
+  getChildElementByClass, getPassiveEventListenerOption, iterateArrayLike, nextTick,
+} from '../dom.js';
 
 /**
  * @param {Element} element
@@ -134,9 +10,8 @@ export function isActive(element) {
   if (element.matches) {
     return element.matches(':active');
   }
-  // @ts-ignore
-  if (element.msMatchesSelector) {
-    // @ts-ignore
+  if ('msMatchesSelector' in element) {
+    // @ts-ignore: Compatibility
     element.msMatchesSelector(':active');
   }
   return false;
@@ -144,8 +19,8 @@ export function isActive(element) {
 
 /**
  * @param {HTMLElement} rippleInner
- * @param {number=} x
- * @param {number=} y
+ * @param {number} [x]
+ * @param {number} [y]
  * @return {void}
  */
 export function updateRipplePosition(rippleInner, x, y) {
@@ -200,7 +75,6 @@ export function drawRipple(rippleInner, initiator) {
       rippleInner.setAttribute('mdw-fade-in-repeat', '');
     }
   }
-  rippleInner.removeAttribute('mdw-fade-in-out');
 }
 
 /**
@@ -242,6 +116,62 @@ export function clearRipple(rippleInner) {
   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}
@@ -259,7 +189,7 @@ export function onClick(event) {
   if (!rippleInner) {
     return;
   }
-  // @ts-ignore
+  // @ts-ignore: Optimization
   if (event.pointerType || event.detail) {
     return;
   }
@@ -274,6 +204,79 @@ export function onClick(event) {
   });
 }
 
+/**
+ * @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}

package/core/ripple/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@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;
+    }
+  }
+}