@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/core/overlay/_spec.scss

@@ -0,0 +1,31 @@
+.mdw-overlay {
+  position: relative;
+
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  // Remove Firefox inner
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    
+    transition-delay: 1ms;
+    transition-duration: 0ms;
+    transition-property: opacity, color, background-color;
+
+    opacity: 0;
+    pointer-events: none;
+
+    background-color: currentColor;
+    border-radius: inherit;
+  }
+}

package/core/overlay/_theme.scss

@@ -0,0 +1,171 @@
+// https://material.io/design/interaction/states.html
+
+@use '../theme/_mixins.scss' as theme;
+
+$themeValues: (
+  overlay-color:                 theme.$foreground,
+
+  high-opacity:                  theme.$high-opacity,
+  medium-opacity:                theme.$medium-opacity,
+  inactive-opacity:              theme.$inactive-opacity,
+  divider-opacity:               theme.$divider-opacity,
+  
+  disabled-opacity:              (0.38, 0.50),
+  
+  // states   
+
+  hover-opacity:                 (0.04, 0.08),
+  focus-opacity:                 (0.12, 0.24),
+  selected-opacity:              (0.08, 0.16),
+  activated-opacity:             (0.12, 0.24),
+  
+  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
+
+  selected-hover-opacity:        (0.08 + 0.04, 0.16 + 0.08),
+  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
+  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
+
+  activated-hover-opacity:       (0.12 + 0.04, 0.24 + 0.08),
+  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.24),
+  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
+) !default;
+
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('overlay', $themeValues, $key, $type);
+}
+
+@mixin addThemeRules($type: 'var') {
+  .mdw-overlay {
+    &,
+    &[aria-pressed="false"]:active,
+    &[aria-selected="true"],
+    &[aria-pressed="true"],
+    &[aria-current] {
+      &::before {
+        @if ($type == 'var') {
+          color: RGB(var(--mdw-ink));
+        } @else {
+          // Handled by mdw-color
+        }
+      }
+    }
+
+    &[aria-selected="false"],
+    &[aria-pressed="false"],
+    &[aria-disabled="true"],
+    &[aria-disabled="true"]:active {
+      &::before {
+        @if ($type == 'var') {
+          color: RGB(getThemeValue("overlay-color", $type));
+        } @else {
+          background-color: RGB(getThemeValue("overlay-color", $type));
+        }
+      }
+    }
+
+    // Off color
+    &[aria-selected="false"],
+    &[aria-pressed="false"],
+    &[aria-selected="true"]:not([aria-current]) {
+      #{if($type == 'var', '&', '&,&.mdw-theme')} {
+        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("high-opacity", $type));
+        &[mdw-border-ink] {
+          border-color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
+        }
+        &[mdw-overlay-default="medium"] {
+          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("medium-opacity", $type));
+        }
+        &[mdw-overlay-default="inactive"] {
+          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
+        }
+        &[mdw-overlay-default="divider"] {
+          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
+        }
+      }
+    }
+
+    &[aria-disabled="true"] {
+      &[mdw-overlay-disabled="ink"] {
+        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
+      }
+      &:not([mdw-overlay-disabled]) {
+        opacity: getThemeValue("disabled-opacity", $type);
+      }
+    }
+
+    &:not([mdw-overlay-touch="true"]) {
+      &:focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
+        opacity: getThemeValue("focus-opacity", $type);
+      }
+
+      &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
+        &:hover:not([mdw-overlay-off~="hover"])::before {
+          opacity: getThemeValue("hover-opacity", $type);
+        }
+
+        &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+          opacity: getThemeValue("hover-focus-opacity", $type);
+        }
+      }
+    }
+
+    // Selected
+    &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
+      &::before {
+        opacity: getThemeValue("selected-opacity", $type);
+      }
+
+      &:not([mdw-overlay-touch="true"]) {
+        &:focus:not([mdw-overlay-off~="focus"])::before {
+          opacity: getThemeValue("selected-focus-opacity", $type);
+        }
+
+        &:not([aria-disabled="true"]) {
+          &:hover:not([mdw-overlay-off~="hover"])::before {
+            opacity: getThemeValue("selected-hover-opacity", $type);
+          }
+
+          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+            opacity: getThemeValue("selected-hover-focus-opacity", $type);
+          }
+        }
+      }
+    }
+
+    // Activated
+    &[aria-current]:not([mdw-overlay-off~="activated"]),
+    &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
+      &::before {
+        opacity: getThemeValue("activated-opacity", $type);
+      }
+
+      &:not([mdw-overlay-touch="true"]) {
+        &:focus:not([mdw-overlay-off~="focus"])::before {
+          opacity: getThemeValue("activated-focus-opacity", $type);
+        }
+
+        &:not([aria-disabled="true"]) {
+          &:hover:not([mdw-overlay-off~="hover"])::before {
+            opacity: getThemeValue("activated-hover-opacity", $type);
+          }
+
+          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+            opacity: getThemeValue("activated-hover-focus-opacity", $type);
+          }
+        }
+      }
+    }
+  }
+}
+
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
+}
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
+}
+
+
+@include theme.addComponentCSSVariableRules('overlay', $themeValues) {
+  @include addThemeRules();
+}

package/core/overlay/index.js

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

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

package/core/ripple/_spec.scss

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

@@ -0,0 +1,40 @@
+// 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();
+}