@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/core/color/_theme.scss

@@ -0,0 +1,390 @@
+// https://material.io/design/interaction/states.html
+
+@use '../theme/_mixins.scss' as theme;
+@use "../_platform.scss" as platform;
+
+@function _resortColors($list) {
+  $newList: ();
+  @each $color in $list {
+    @if (index($newList, $color) == null) {
+      $newList: append($newList, $color);
+      $palette: theme.getThemeParamValue($color);
+      @each $color2 in $list {
+        @if (index($newList, $color2) == null) {
+          $palette2: theme.getThemeParamValue($color2);
+          @if ($palette == $palette2) {
+            $newList: append($newList, $color2);
+          }
+        }
+      }
+    }
+  }
+  @return $newList;
+}
+
+// Resort colors with aliases for CSS rule merging
+$sortedInks: _resortColors(theme.$inks);
+$sortedSurfaces: _resortColors(theme.$surfaces);
+
+$themeValues: (
+  default-ink:                theme.$foreground,
+
+  high-ink-opacity:           theme.$high-opacity,
+  medium-ink-opacity:         theme.$medium-opacity,
+  inactive-ink-opacity:       theme.$inactive-opacity,
+  divider-ink-opacity:        theme.$divider-opacity,
+
+  card-surface:           ((#fff, null),               (#121212, null)),
+  binary-surface:         ((#fff, null),               (#000, null)),
+) !default;
+
+@each $color in $sortedInks {
+  $newInkMap: (
+    #{$color}-default-ink: (($color, nth(theme.$default-color-ink, 1),null), ($color, nth(theme.$default-color-ink, 2), null)),
+    #{$color}-contrast-ink: (($color, nth(theme.$contrast-color-ink, 1),null), ($color, nth(theme.$contrast-color-ink, 2), null)),
+    #{$color}-light-ink: (($color, nth(theme.$light-color-ink, 1),null), ($color, nth(theme.$light-color-ink, 2), null)),
+  );
+  $themeValues: map-merge($themeValues, $newInkMap);
+}
+
+@each $color in $sortedSurfaces {
+  $newSurfaceMap: (
+    #{$color}-default-surface: (($color, nth(theme.$default-color-surface, 1),null), ($color, nth(theme.$default-color-surface, 2), null)),
+    #{$color}-alt-surface: (($color, nth(theme.$alt-color-surface, 1),null), ($color, nth(theme.$alt-color-surface, 2), null)),
+  );
+  $themeValues: map-merge($themeValues, $newSurfaceMap);
+}
+
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('color', $themeValues, $key, $type);
+}
+
+@mixin addThemeRules($type: 'var') {
+  @if ($type == 'var') {
+    .mdw-theme {
+      /** Surface Colors **/
+
+      &[mdw-surface] {
+        background-color: RGB(var(--mdw-surface));
+      }
+    }
+
+    svg.mdw-theme[mdw-surface] {
+      background-color: transparent;
+
+      fill: RGB(var(--mdw-surface));
+    }
+
+    .mdw-theme {
+      &[mdw-surface]:not([mdw-ink]) {
+        --mdw-ink: #{getThemeValue("default-ink", $type)};
+        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
+        color: RGBA(var(--mdw-ink),var(--mdw-ink-opacity));
+      }
+
+      &[mdw-surface="white"] {
+        --mdw-surface: 255,255,255;
+      }
+
+      &[mdw-surface="black"] {
+        --mdw-surface: 0,0,0;
+      }
+
+      &[mdw-surface="binary"] {
+        --mdw-surface: #{getThemeValue("binary-surface", $type)};
+      }
+    
+      &[mdw-surface="card"] {
+        --mdw-surface: #{getThemeValue("card-surface", $type)};
+      }
+
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface~="#{$surface}"] {
+          --mdw-surface: #{getThemeValue("#{$surface}-default-surface", $type)};
+        }
+      }
+      
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface~="#{$surface}"] {
+          $palette: theme.getThemeParamValue($surface);
+          @each $tone in theme.$surface-tones {
+            $value: map-get($palette, $tone);
+            --#{$tone}-surface: #{red($value),green($value),blue($value)};
+          }
+        }
+      }
+
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface="#{$surface} alt"] {
+          --mdw-surface: #{getThemeValue("#{$surface}-alt-surface", $type)};
+        }
+      }
+
+      @each $tone in theme.$surface-tones {
+        &[mdw-surface~="#{$tone}"] {
+          --mdw-surface: var(--#{$tone}-surface);
+        }
+      }
+
+      /** Ink Color **/
+
+      &[mdw-ink] {
+        --mdw-ink: #{getThemeValue("default-ink", $type)};
+        --mdw-ink-opacity: 1;
+        color: RGBA(var(--mdw-ink),var(--mdw-ink-opacity));
+      }
+
+      &[mdw-ink=""],
+      &[mdw-ink~="default"] {
+        --mdw-ink: #{getThemeValue("default-ink", $type)};
+        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
+      }
+
+      &[mdw-ink~="white"] {
+        --mdw-ink: 255,255,255;
+      }
+
+      &[mdw-ink~="black"] {
+        --mdw-ink: 0,0,0;
+      }
+
+      @each $ink in $sortedInks {
+        &[mdw-ink~="#{$ink}"] {
+          --mdw-ink: #{getThemeValue("#{$ink}-default-ink", $type)};
+        }
+      }
+
+      @each $ink in $sortedInks {
+        &[mdw-ink~="#{$ink}"] {
+          $palette: theme.getThemeParamValue($ink);
+          @each $tone in theme.$ink-tones {
+            $value: map-get($palette, $tone);
+            --mdw-ink-#{$tone}: #{red($value),green($value),blue($value)};
+          }
+        }
+      }
+
+      @each $ink in $sortedInks {
+        &[mdw-ink^="#{$ink} contrast"] {
+          --mdw-ink: #{getThemeValue("#{$ink}-contrast-ink", $type)};
+        }
+      }
+
+      @each $ink in $sortedInks {
+        @if ($ink != 'background') {
+          &[mdw-ink^="#{$ink} light"] {
+            --mdw-ink: #{getThemeValue("#{$ink}-light-ink", $type)};
+          }
+        }
+      }
+
+      @each $tone in theme.$ink-tones {
+        &[mdw-ink~="#{$tone}"] {
+          --mdw-ink: var(--mdw-ink-#{$tone});
+        }
+      }
+
+      /** Ink Opacity **/
+
+      &[mdw-ink~="solid"] {
+        --mdw-ink-opacity: 1;
+      }
+
+      &[mdw-ink~="high"] {
+        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
+      }
+    
+      &[mdw-ink~="medium"] {
+        --mdw-ink-opacity: #{getThemeValue("medium-ink-opacity", $type)};
+      }
+    
+      &[mdw-ink~="inactive"] {
+        --mdw-ink-opacity: #{getThemeValue("inactive-ink-opacity", $type)};
+      }
+    
+      &[mdw-ink~="divider"] {
+        --mdw-ink-opacity: #{getThemeValue("divider-ink-opacity", $type)};
+      }
+
+      /** Border Ink **/
+
+      &[mdw-border-ink] {
+        border-color: #{RGBA(var(--mdw-ink), getThemeValue("divider-ink-opacity", $type))};
+      }
+
+      &[mdw-border-ink="default"] {
+        border-color: #{RGBA(getThemeValue("default-ink", $type), getThemeValue("divider-ink-opacity", $type))};
+      }
+
+      &[mdw-border-ink="none"] {
+        border-color: transparent;
+      }
+    }
+  } @else {
+    & {
+      &[mdw-ink="default"],
+      &[mdw-surface]:not([mdw-ink]) {
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("high-ink-opacity", $type));
+      }
+      
+      &[mdw-surface="binary"] {
+        background-color: RGB(getThemeValue("binary-surface", $type));
+      }
+    
+      &[mdw-surface="card"] {
+        background-color: RGB(getThemeValue("card-surface", $type));
+      }
+
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface="#{$surface}"] {
+          background-color: RGB(getThemeValue("#{$surface}-default-surface", $type));
+        }
+      }
+
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface="#{$surface} alt"] {
+          background-color: RGB(getThemeValue("#{$surface}-alt-surface", $type));
+        }
+      }
+
+      &[mdw-ink~="solid"] {
+        color: RGB(getThemeValue("default-ink", $type));
+      }
+
+      &[mdw-ink~="high"] {
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("high-ink-opacity", $type));
+      }
+    
+      &[mdw-ink~="medium"] {
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("medium-ink-opacity", $type));
+      }
+    
+      &[mdw-ink~="inactive"] {
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("inactive-ink-opacity", $type));
+      }
+    
+      &[mdw-ink~="divider"] {
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("divider-ink-opacity", $type));
+      }
+
+      @each $ink in $sortedInks {
+        &[mdw-ink="#{$ink}"] {
+          &,
+          &.mdw-overlay::before {
+            color: RGB(getThemeValue("#{$ink}-default-ink", $type));
+          }
+        }
+      }
+
+      @each $ink in $sortedInks {
+        &[mdw-ink="#{$ink} contrast"] {
+          &,
+          &.mdw-overlay::before {
+            color: RGB(getThemeValue("#{$ink}-contrast-ink", $type));
+          }
+        }
+      }
+
+      @each $ink in $sortedInks {
+        &[mdw-ink="#{$ink} light"] {
+          &,
+          &.mdw-overlay::before {
+            color: RGB(getThemeValue("#{$ink}-light-ink", $type));
+          }
+        }
+      }
+
+      &[mdw-border-ink],
+      &[mdw-border-ink="default"] {
+        border-color: RGBA(getThemeValue("default-ink", $type), getThemeValue("divider-ink-opacity", $type));
+      }
+
+      &[mdw-border-ink="none"] {
+        border-color: transparent;
+      }
+    }
+  }
+}
+
+@mixin addThemeFallbackRules() {
+  .mdw-theme[mdw-surface="white"] {
+    background-color: #fff;
+  }
+
+  .mdw-theme[mdw-surface="black"] {
+    background-color: #000;
+  }
+
+  @each $surface in $sortedSurfaces {
+    $palette: theme.getThemeParamValue($surface);
+    @each $tone in theme.$surface-tones {
+      $value: map-get($palette, $tone);
+
+      .mdw-theme[mdw-surface="#{$surface} #{$tone}"] {
+        background-color: #{$value};
+      }
+    }
+  }
+
+  /** Ink Fallback Colors **/
+
+  .mdw-theme[mdw-ink~="white"] {
+    &,
+    &.mdw-overlay::before {
+      color: #fff;
+    }
+  }
+
+  .mdw-theme[mdw-ink~="black"] {
+    &,
+    &.mdw-overlay::before {
+      color: #000;
+    }
+  }
+
+  @each $tone in theme.$surface-tones {
+    @each $surface in $sortedSurfaces {
+      $palette: theme.getThemeParamValue($surface);
+      $value: map-get($palette, $tone);
+
+      .mdw-theme[mdw-surface^="#{$surface} #{$tone}"] {
+        background-color: #{$value};
+      }
+    }
+  }
+
+  @each $tone in theme.$ink-tones {
+    @each $ink in $sortedInks {
+      $palette: theme.getThemeParamValue($ink);
+      $value: map-get($palette, $tone);
+      .mdw-theme[mdw-ink^="#{$ink} #{$tone}"] {
+        &,
+        &.mdw-overlay::before {
+          color: #{$value};
+        }
+      }
+    }
+  }
+
+  .mdw-theme[mdw-light],
+  .mdw-theme[mdw-light] .mdw-theme:not([mdw-dark]) {
+    @include addThemeRules('light');
+  }
+
+  .mdw-theme[mdw-dark],
+  .mdw-theme[mdw-dark] .mdw-theme:not([mdw-light]) {
+    @include addThemeRules('dark');
+  }
+}
+
+@if (theme.$fallbacks == 'ieonly') {
+  @include platform.ifIE() {
+    @include addThemeFallbackRules();
+  }
+} @else if (theme.$fallbacks != false) {
+  @include addThemeFallbackRules();
+}
+
+@include theme.addComponentCSSVariableRules('color', $themeValues) {
+  @include addThemeRules();
+}

package/core/color/index.scss

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

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,271 @@
+/** @type {?boolean} */
+let passiveEventListenerSupported = null;
+
+/** @return {void} */
+function testPassiveEventListenerOptionSupport() {
+  try {
+    passiveEventListenerSupported = false;
+    const options = {
+      get passive() {
+        passiveEventListenerSupported = true;
+        return true;
+      },
+    };
+    // @ts-ignore: Custom test event
+    window.addEventListener('test', options, options);
+    // @ts-ignore: Custom test event
+    window.removeEventListener('test', options, options);
+  } catch (err) {
+    passiveEventListenerSupported = false;
+  }
+}
+
+/** @return {Object|boolean} */
+export function getPassiveEventListenerOption() {
+  if (passiveEventListenerSupported == null) {
+    testPassiveEventListenerOptionSupport();
+  }
+  if (passiveEventListenerSupported) {
+    return { passive: true };
+  }
+  return false;
+}
+
+export const nextTick = window.requestAnimationFrame || ((cb) => window.setTimeout(cb, 17));
+
+export const cancelTick = window.cancelAnimationFrame || window.clearTimeout;
+
+/**
+ * @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;
+}
+
+/**
+ * @param {Element} element
+ * @param {string} className
+ * @param {boolean} [includeSelf=true]
+ * @return {HTMLElement}
+ */
+export function findElementParentByClassName(element, className, includeSelf) {
+  let el;
+  if (includeSelf === false) {
+    el = element.parentElement;
+  } else {
+    /** @type {HTMLElement} */
+    el = (element);
+  }
+  while (el != null && !el.classList.contains(className)) {
+    el = el.parentElement;
+  }
+  return el;
+}
+
+/** @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 {ArrayLike<T>} arrayLike
+ * @param {function(T, number, ArrayLike<T>):any} fn
+ * @return {void}
+ * @template {any} T
+ */
+export function iterateArrayLike(arrayLike, fn) {
+  Array.prototype.forEach.call(arrayLike, fn);
+}
+
+/**
+ * @param {ArrayLike<T>} arrayLike
+ * @param {function(T, number, ArrayLike<T>):boolean|void} fn
+ * @return {boolean}
+ * @template {any} T
+ */
+export function iterateSomeOfArrayLike(arrayLike, fn) {
+  return Array.prototype.some.call(arrayLike, fn);
+}
+
+/**
+ * @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) {
+  let textNode;
+  iterateSomeOfArrayLike(node.childNodes, (childNode) => {
+    if (childNode.nodeType !== Node.TEXT_NODE) {
+      return false;
+    }
+    textNode = childNode;
+    return true;
+  });
+  if (create && !textNode) {
+    textNode = document.createTextNode('');
+    node.appendChild(textNode);
+  }
+  return textNode;
+}
+
+/**
+ * @param {Node} node
+ * @param {string} value
+ * @return {Node}
+ */
+export function setTextNode(node, value) {
+  /** @type {ChildNode} */
+  let textNode;
+  iterateSomeOfArrayLike(node.childNodes, (childNode) => {
+    if (childNode.nodeType !== Node.TEXT_NODE) {
+      return false;
+    }
+    textNode = childNode;
+    return true;
+  });
+  if (value) {
+    if (!textNode) {
+      textNode = document.createTextNode(value);
+      node.appendChild(textNode);
+    } else {
+      textNode.nodeValue = value;
+    }
+  } else if (textNode) {
+    node.removeChild(textNode);
+  }
+  return textNode;
+}
+
+/**
+ * @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;
+  nextTick(() => {
+    parent.style.removeProperty('scroll-behavior');
+  });
+}