@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/core/document/index.js

@@ -0,0 +1,39 @@
+/** @return {void} */
+export function detectStandalone() {
+  // @ts-ignore: Safari uses navigator.standalone
+  if (navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches) {
+    document.documentElement.setAttribute('mdw-standalone', '');
+  }
+}
+
+/** @return {void} */
+export function detectUserAgent() {
+  const ua = navigator.userAgent.toLowerCase();
+  if (/iphone/i.test(ua) || /ipad/i.test(ua) || /macintosh/i.test(ua)) {
+    document.documentElement.setAttribute('mdw-ios', '');
+  }
+}
+
+/** @return {void} */
+export function detectColorScheme() {
+  // Auto lightness and fill
+  if (!document.documentElement.hasAttribute('mdw-surface')
+    && !document.documentElement.hasAttribute('mdw-light')
+    && !document.documentElement.hasAttribute('mdw-dark')) {
+    if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
+      document.documentElement.setAttribute('mdw-dark', '');
+    } else {
+      document.documentElement.setAttribute('mdw-light', '');
+    }
+  }
+}
+
+/**
+ * Run before document has loaded
+ * @return {void}
+ */
+export function onPrerender() {
+  detectStandalone();
+  detectUserAgent();
+  detectColorScheme();
+}

package/core/dom.js

@@ -0,0 +1,180 @@
+/**
+ * @param {Element} element
+ * @param {string} className
+ * @return {Element}
+ */
+export function getChildElementByClass(element, className) {
+  const child = element.getElementsByClassName(className)[0];
+  if (child && child.parentElement !== element) {
+    return null;
+  }
+  return child;
+}
+
+/** @return {boolean} */
+export function isRtl() {
+  return document.documentElement.dir === 'rtl';
+}
+
+/**
+ * @param {EventTarget} eventTarget
+ * @param {string} type
+ * @param {Object} [detail]
+ * @return {boolean}
+ */
+export function dispatchDomEvent(eventTarget, type, detail) {
+  let event;
+  if (typeof CustomEvent === 'function') {
+    event = new CustomEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      detail,
+    });
+  } else if (detail == null) {
+    if (typeof Event === 'function') {
+      event = new Event(type, {
+        bubbles: true,
+        cancelable: true,
+      });
+    } else {
+      event = document.createEvent('Event');
+      event.initEvent(type, true, true);
+    }
+  } else {
+    event = document.createEvent('CustomEvent');
+    event.initCustomEvent(type, true, true, detail);
+  }
+  return eventTarget.dispatchEvent(event);
+}
+
+/**
+ * @param {Element} element
+ * @param {function(Element, number):boolean|void} fn
+ * @return {boolean}
+ */
+export function iterateElementSiblings(element, fn) {
+  let distance = -1;
+  let sibling = element.previousElementSibling;
+  while (sibling) {
+    fn(sibling, distance);
+    sibling = sibling.previousElementSibling;
+    distance -= 1;
+  }
+  sibling = element.nextElementSibling;
+  distance = 1;
+  while (sibling) {
+    fn(sibling, distance);
+    sibling = sibling.nextElementSibling;
+    distance += 1;
+  }
+  return false;
+}
+
+/**
+ * @param {Element} element
+ * @param {function(Element, number):boolean|void} fn
+ * @return {boolean}
+ */
+export function iterateSomeOfElementSiblings(element, fn) {
+  let distance = -1;
+  let sibling = element.previousElementSibling;
+  while (sibling) {
+    if (fn(sibling, distance)) {
+      return true;
+    }
+    sibling = sibling.previousElementSibling;
+    distance -= 1;
+  }
+  sibling = element.nextElementSibling;
+  distance = 1;
+  while (sibling) {
+    if (fn(sibling, distance)) {
+      return true;
+    }
+    sibling = sibling.previousElementSibling;
+    distance += 1;
+  }
+  return false;
+}
+
+/**
+ * @param {Node} node
+ * @param {boolean} [create]
+ * @return {?Text}
+ */
+export function getTextNode(node, create) {
+  for (const childNode of node.childNodes) {
+    if (childNode.nodeType === Node.TEXT_NODE) {
+      return /** @type {Text} */ (childNode);
+    }
+  }
+  if (!create) return null;
+  return node.appendChild(document.createTextNode(''));
+}
+
+/**
+ * @param {Node} node
+ * @param {string} value
+ * @return {?Text}
+ */
+export function setTextNode(node, value) {
+  for (const childNode of node.childNodes) {
+    if (childNode.nodeType === Node.TEXT_NODE) {
+      if (value) {
+        childNode.nodeValue = value;
+      } else {
+        node.removeChild(childNode);
+      }
+      return /** @type {Text} */ (childNode);
+    }
+  }
+  if (!value) return null;
+  return node.appendChild(document.createTextNode(value));
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {boolean} [smooth=false]
+ * @param {boolean} [rtl=false]
+ * @return {void}
+ */
+export function scrollToElement(element, smooth, rtl) {
+  if (!element) {
+    return;
+  }
+  const parent = element.parentElement;
+  if (!parent) {
+    return;
+  }
+
+  let targetScrollLeft = rtl
+    ? parent.scrollWidth + element.offsetLeft - element.offsetWidth
+    : element.offsetLeft;
+
+  const elementRect = element.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+  let subPixelScrollPosition = elementRect.left - parentRect.left;
+  if (subPixelScrollPosition < 0) {
+    subPixelScrollPosition = 0;
+  }
+  if (Math.abs(subPixelScrollPosition - targetScrollLeft) < 2) {
+    targetScrollLeft = subPixelScrollPosition;
+  }
+  if (parent.scrollLeft === targetScrollLeft) {
+    return;
+  }
+
+  if (parent.scrollTo) {
+    parent.scrollTo({
+      top: 0,
+      left: targetScrollLeft,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+    return;
+  }
+  parent.style.setProperty('scroll-behavior', 'auto');
+  parent.scrollLeft = targetScrollLeft;
+  requestAnimationFrame(() => {
+    parent.style.removeProperty('scroll-behavior');
+  });
+}

package/core/overlay/_spec.scss

@@ -0,0 +1,28 @@
+.mdw-overlay {
+  position: relative;
+
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  // Remove Firefox inner
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    inset: 0;
+
+    pointer-events: none;
+
+    transition-delay: 1ms;
+    transition-duration: 0ms;
+    transition-property: opacity, color, background-color;
+
+    /* opacity handled by theme engine */
+
+    background-color: currentColor;
+    border-radius: inherit;
+  }
+}

package/core/overlay/_theme.scss

@@ -0,0 +1,147 @@
+// https://material.io/design/interaction/states.html
+
+.mdw-theme {
+  --mdw-overlay__overlay-rgb: var(--mdw-ink-default);
+  --mdw-overlay__high-opacity: var(--mdw-high-opacity);
+  --mdw-overlay__medium-opacity: var(--mdw-medium-opacity);
+  --mdw-overlay__inactive-opacity: var(--mdw-inactive-opacity);
+  --mdw-overlay__divider-opacity: var(--mdw-divider-opacity);
+  --mdw-overlay__base-opacity: var(--mdw-overlay__base-opacity-value);
+  --mdw-overlay__disabled-opacity: var(--mdw-overlay__disabled-opacity-value);
+  --mdw-overlay__hover-opacity: var(--mdw-overlay__hover-opacity-value);
+  --mdw-overlay__focus-opacity: var(--mdw-overlay__focus-opacity-value);
+  --mdw-overlay__selected-opacity: var(--mdw-overlay__selected-opacity-value);
+  --mdw-overlay__activated-opacity: var(--mdw-overlay__activated-opacity-value);
+
+}
+
+.mdw-theme[mdw-light] {
+  --mdw-overlay__base-opacity-value: 0;
+  --mdw-overlay__base-opacity-elevation_1: 0;
+  --mdw-overlay__base-opacity-elevation_2: 0;
+  --mdw-overlay__base-opacity-elevation_3: 0;
+  --mdw-overlay__base-opacity-elevation_4: 0;
+  --mdw-overlay__base-opacity-elevation_6: 0;
+  --mdw-overlay__base-opacity-elevation_8: 0;
+  --mdw-overlay__base-opacity-elevation_9: 0;
+  --mdw-overlay__base-opacity-elevation_12: 0;
+  --mdw-overlay__base-opacity-elevation_16: 0;
+  --mdw-overlay__base-opacity-elevation_24: 0;
+  --mdw-overlay__disabled-opacity-value: 0.38;
+  --mdw-overlay__hover-opacity-value: 0.04;
+  --mdw-overlay__focus-opacity-value: 0.12;
+  --mdw-overlay__selected-opacity-value: 0.08;
+  --mdw-overlay__activated-opacity-value: 0.12;
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-overlay__base-opacity-value: 0;
+  --mdw-overlay__base-opacity-elevation_1: 0.05;
+  --mdw-overlay__base-opacity-elevation_2: 0.07;
+  --mdw-overlay__base-opacity-elevation_3: 0.08;
+  --mdw-overlay__base-opacity-elevation_4: 0.09;
+  --mdw-overlay__base-opacity-elevation_6: 0.11;
+  --mdw-overlay__base-opacity-elevation_8: 0.12;
+  --mdw-overlay__base-opacity-elevation_9: 0.13;
+  --mdw-overlay__base-opacity-elevation_12: 0.14;
+  --mdw-overlay__base-opacity-elevation_16: 0.15;
+  --mdw-overlay__base-opacity-elevation_24: 0.16;
+  --mdw-overlay__disabled-opacity-value: 0.50;
+  --mdw-overlay__hover-opacity-value: 0.08;
+  --mdw-overlay__focus-opacity-value: 0.24;
+  --mdw-overlay__selected-opacity-value: 0.16;
+  --mdw-overlay__activated-opacity-value: 0.24;
+}
+
+.mdw-overlay {
+  // Disable Hover State
+  &[aria-disabled="true"],
+  &[mdw-overlay-touch="true"],
+  &[mdw-overlay-off~="hover"],
+  &:not(:hover) {
+    --mdw-overlay__hover-opacity: 0;
+  }
+
+  // Disable Focus State
+  &[aria-disabled="true"],
+  &[mdw-overlay-touch="true"],
+  &[mdw-overlay-off~="focus"],
+  &:not(:focus) {
+    --mdw-overlay__focus-opacity: 0;
+  }
+
+  // Disable Selected State
+  // Activated overrides Selected
+  &[mdw-overlay-off~="selected"],
+  &:not([aria-selected="true"]),
+  &[aria-current],
+  &[aria-pressed="true"] {
+    --mdw-overlay__selected-opacity: 0;
+  }
+
+  &[mdw-overlay-off~="activated"],
+  &:not([aria-current]):not([aria-pressed="true"]) {
+    --mdw-overlay__activated-opacity: 0;
+  }
+
+  &::before {
+    opacity: calc(var(--mdw-overlay__base-opacity) + var(--mdw-overlay__hover-opacity) + var(--mdw-overlay__focus-opacity) + var(--mdw-overlay__selected-opacity) + var(--mdw-overlay__activated-opacity));
+
+    color: RGB(var(--mdw-overlay__overlay-rgb));
+  }
+
+  &:hover,
+  &:focus,
+  &[aria-pressed="false"]:active,
+  &[aria-selected="true"],
+  &[aria-pressed="true"],
+  &[aria-current] {
+    &::before {
+      color: RGB(var(--mdw-ink));
+    }
+  }
+
+  &[aria-selected="false"],
+  &[aria-pressed="false"],
+  &[aria-disabled="true"],
+  &[aria-disabled="true"]:active {
+    &::before {
+      color: RGB(var(--mdw-overlay__overlay-rgb));
+    }
+  }
+
+  // Off color
+  &[aria-selected="false"],
+  &[aria-pressed="false"],
+  &[aria-selected="true"]:not([aria-current]) {
+    --mdw-overlay__text-opacity: var(--mdw-overlay__high-opacity);
+
+    color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__text-opacity));
+
+    &[mdw-overlay-default="medium"] {
+      --mdw-overlay__text-opacity: var(--mdw-overlay__medium-opacity);
+    }
+
+    &[mdw-overlay-default="inactive"] {
+      --mdw-overlay__text-opacity: var(--mdw-overlay__inactive-opacity);
+    }
+
+    &[mdw-overlay-default="divider"] {
+      --mdw-overlay__text-opacity: var(--mdw-overlay__divider-opacity);
+    }
+
+    &[mdw-border-ink] {
+      border-color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__divider-opacity));
+    }
+  }
+
+  &[aria-disabled="true"] {
+    &[mdw-overlay-disabled="ink"] {
+      color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__inactive-opacity));
+    }
+
+    &:not([mdw-overlay-disabled]) {
+      opacity: var(--mdw-overlay__disabled-opacity);
+    }
+  }
+}

package/core/overlay/index.js

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

package/core/overlay/index.scss

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

package/core/ripple/_spec.scss

@@ -0,0 +1,196 @@
+// 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;
+  inset: 0;
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  pointer-events: none;
+
+  z-index: 1;
+
+  border-radius: inherit;
+}
+
+.mdw-ripple__inner {
+  display: block;
+  position: absolute;
+
+  pointer-events: none;
+
+  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;
+  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 {
+  content: '';
+
+  display: table; // See above
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+
+  block-size: 0;
+  inline-size: 0;
+  padding: 50%;
+
+  pointer-events: none;
+  // 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;
+  transform: translateX(-50%) translateY(-50%) scale(2);
+
+  background-color: transparent;
+  border-radius: 50%;
+  color: inherit;
+}
+
+// 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,20 @@
+/* https://material.io/design/interaction/states.html */
+/* https://material.io/design/components/buttons.html */
+/* https://material.io/design/iconography/system-icons.html#color */
+
+.mdw-theme[mdw-light] {
+  --mdw-ripple__pressed-opacity: 0.16;
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-ripple__pressed-opacity: 0.32;
+}
+
+.mdw-ripple {
+  & > .mdw-ripple__container > .mdw-ripple__inner,
+  &::after {
+    opacity: var(--mdw-ripple__pressed-opacity);
+
+    color: RGB(var(--mdw-ink));
+  }
+}