@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/color.js

@@ -0,0 +1,262 @@
+import { iterateArrayLike, nextTick } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+iterateArrayLike(document.getElementsByClassName('mdw-overlay'), Overlay.attach);
+iterateArrayLike(document.getElementsByClassName('mdw-ripple'), Ripple.attach);
+
+const sampleSurface = document.getElementById('sample-surface');
+const sampleInk = document.getElementById('sample-ink');
+
+const sampleButton = document.getElementById('sample-button');
+const sampleButtonSelected = document.getElementById('sample-button__selected');
+const sampleButtonActivated = document.getElementById('sample-button__activated');
+
+const sampleContrastText = document.getElementById('sample-contrast__text');
+const sampleContrastSelected = document.getElementById('sample-contrast__selected');
+const sampleContrastActivated = document.getElementById('sample-contrast__activated');
+
+/** @typedef {{r:number,g:number,b:number,a:number}} Color */
+
+/**
+ * @param {Color} color
+ * @return {string}
+ */
+function colorToString(color) {
+  return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+}
+
+/**
+ * @param {string} colorString
+ * @return {Color}
+ */
+function parseColor(colorString) {
+  if (colorString === 'transparent') {
+    return {
+      r: 0, g: 0, b: 0, a: 0,
+    };
+  }
+  return colorString
+    .match(/\(([^)]+)\)/)[1]
+    .split(',')
+    .map((value) => (value == null ? 1.0 : parseFloat(value)))
+    .reduce((prev, curr, index) => {
+      if (index > 3) {
+        throw new Error('Unexpected 5th value');
+      }
+      return {
+        r: index === 0 ? curr : prev.r,
+        g: index === 1 ? curr : prev.g,
+        b: index === 2 ? curr : prev.b,
+        a: index === 3 ? curr : prev.a,
+      };
+    }, {
+      r: 255, g: 255, b: 255, a: 1.0,
+    });
+}
+
+/**
+ * @param {Color} color
+ * @param {Color} overlay
+ * @return {Color}
+ */
+function overlayColor(color, overlay) {
+  return {
+    r: (1.0 - overlay.a) * color.r + overlay.a * overlay.r,
+    g: (1.0 - overlay.a) * color.g + overlay.a * overlay.g,
+    b: (1.0 - overlay.a) * color.b + overlay.a * overlay.b,
+    a: 1.0,
+  };
+}
+
+/**
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * @param {Color} color
+ * @return {number}
+ */
+function getLuminance(color) {
+  /**
+   * @param {number} colorValue
+   * @return {number}
+   */
+  function sRGBMapping(colorValue) {
+    if (colorValue <= (0.03928 * 255)) {
+      return colorValue / 255 / 12.92;
+    }
+    return ((colorValue / 255 + 0.055) / 1.055) ** 2.4;
+  }
+  const R = 0.2126 * sRGBMapping(color.r);
+  const G = 0.7152 * sRGBMapping(color.g);
+  const B = 0.0722 * sRGBMapping(color.b);
+  return (R + G + B);
+}
+
+/**
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+ * @param {Color} a
+ * @param {Color} b
+ * @return {number} X:1 ratio
+ */
+function getContrastRatio(a, b) {
+  const lumA = getLuminance(a);
+  const lumB = getLuminance(b);
+  if (lumA === 0 && lumB === 0) {
+    return 0;
+  }
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+}
+
+/**
+ * @param {string} name
+ * @return {void}
+ */
+function updateSurfaces(name) {
+  sampleButton.setAttribute('mdw-surface', name);
+  sampleButtonSelected.setAttribute('mdw-surface', name);
+  sampleButtonActivated.setAttribute('mdw-surface', name);
+}
+
+/**
+ * @param {string} name
+ * @return {void}
+ */
+function updateInks(name) {
+  sampleButton.setAttribute('mdw-ink', name);
+  sampleButtonSelected.setAttribute('mdw-ink', name);
+  sampleButtonActivated.setAttribute('mdw-ink', name);
+}
+
+/** @return {void} */
+function calculateContrast() {
+  nextTick(() => {
+    const style = window.getComputedStyle(sampleButton);
+    const surfaceColor = parseColor(style.backgroundColor);
+    const inkColor = parseColor(style.color);
+    sampleSurface.textContent = colorToString(surfaceColor);
+    sampleInk.textContent = colorToString(inkColor);
+    const flattenedInk = overlayColor(surfaceColor, inkColor);
+    sampleContrastText.textContent = getContrastRatio(surfaceColor, flattenedInk).toFixed(2);
+
+    let selectedOpacity = 0.08;
+    let activatedOpacity = 0.12;
+    let overlayInkColor = inkColor;
+
+    if (document.documentElement.hasAttribute('mdw-dark')) {
+      selectedOpacity = 0.12;
+      activatedOpacity = 0.24;
+      overlayInkColor = inkColor;
+    }
+
+    const selectedInkColor = parseColor(window.getComputedStyle(sampleButtonSelected).color);
+    const selectedFlattenedInk = overlayColor(surfaceColor, selectedInkColor);
+    const selectedOverlay = parseColor(`rgba(${overlayInkColor.r},${overlayInkColor.g},${overlayInkColor.b},${selectedOpacity})`);
+    const selectedBackground = overlayColor(surfaceColor, selectedOverlay);
+    const selectedColor = overlayColor(selectedFlattenedInk, selectedOverlay);
+    sampleContrastSelected.textContent = getContrastRatio(selectedBackground, selectedColor).toFixed(2);
+
+    const activatedOverlay = parseColor(`rgba(${overlayInkColor.r},${overlayInkColor.g},${overlayInkColor.b},${activatedOpacity})`);
+    const activatedBackground = overlayColor(surfaceColor, activatedOverlay);
+    const activatedColor = overlayColor(flattenedInk, activatedOverlay);
+    sampleContrastActivated.textContent = getContrastRatio(activatedBackground, activatedColor).toFixed(2);
+  });
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onItemClick(event) {
+  /** @type {HTMLElement} */
+  const item = (event.currentTarget);
+  if (item.id) {
+    return;
+  }
+  const ink = item.getAttribute('mdw-ink');
+  if (ink == null) {
+    updateSurfaces(item.getAttribute('mdw-surface'));
+  } else {
+    updateInks(item.getAttribute('mdw-ink'));
+  }
+  calculateContrast();
+}
+
+const currentInkOptions = {
+  color: 'secondary',
+  tone: 'contrast',
+  opacity: '',
+};
+
+const currentSurfaceOptions = {
+  color: 'binary',
+  tone: '',
+};
+
+/** @return {void} */
+function refresh() {
+  const inkProperties = [
+    currentInkOptions.color,
+    currentInkOptions.tone,
+    currentInkOptions.opacity,
+  ].filter((v) => v).join(' ');
+  const surfaceProperties = [
+    currentSurfaceOptions.color,
+    currentSurfaceOptions.tone,
+  ].filter((v) => v).join(' ');
+  iterateArrayLike(document.querySelectorAll('#color-sample-area .demo-core-item'), (el) => {
+    el.setAttribute('mdw-ink', inkProperties);
+    el.setAttribute('mdw-surface', surfaceProperties);
+  });
+  calculateContrast();
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  /** @type {HTMLSelectElement} */
+  const selectElement = (event.target);
+  const { name, value } = selectElement;
+  switch (name) {
+    case 'ink-color':
+      currentInkOptions.color = value;
+      break;
+    case 'ink-tone':
+      currentInkOptions.tone = value;
+      break;
+    case 'ink-opacity':
+      currentInkOptions.opacity = value;
+      break;
+    case 'surface-color':
+      currentSurfaceOptions.color = value;
+      break;
+    case 'surface-tone':
+      currentSurfaceOptions.tone = value;
+      break;
+    default:
+      return;
+  }
+  refresh();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  // sampleComponent = document.querySelector('.component-sample .mdw-button');
+  // Button.attach(sampleComponent);
+  iterateArrayLike(document.querySelectorAll('#color-page-options [name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+iterateArrayLike(
+  document.getElementsByClassName('demo-core-item'),
+  (item) => item.addEventListener('click', onItemClick),
+);
+
+[
+  document.getElementById('darkModeButton'),
+  document.getElementById('altThemeButton'),
+].forEach((button) => button.addEventListener('click', calculateContrast));
+
+setupComponentOptions();
+refresh();

package/docs/pages/color.pug

@@ -0,0 +1,121 @@
+include ../_mixins.pug
+
++header("color")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-columns="4")#color-page-options
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content.mdw-theme(mdw-elevation="8")
+        #color-sample-area
+          a#sample-button.demo-core-item.mdw-overlay.mdw-elevation.mdw-ripple.mdw-theme(tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast") Enabled
+          a#sample-button__selected.demo-core-item.mdw-overlay.mdw-elevation.mdw-ripple.mdw-theme(tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-selected="true") Selected
+          a#sample-button__activated.demo-core-item.mdw-overlay.mdw-elevation.mdw-ripple.mdw-theme(tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-pressed="true") Activated
+          div(style="margin:8px")
+            p.mdw-type Surface:
+              span#sample-surface.mdw-theme(mdw-ink="medium")   test
+            p.mdw-type Ink:
+              span#sample-ink.mdw-theme(mdw-ink="medium")   test
+          div(style="margin:8px")
+            p.mdw-type Text Contrast:
+              span#sample-contrast__text.mdw-theme(mdw-ink="medium")   test
+              span  / 4.5
+            p.mdw-type Selected Contrast:
+              span#sample-contrast__selected.mdw-theme(mdw-ink="medium")   test
+              span  / 4.5
+            p.mdw-type Activated Contrast:
+              span#sample-contrast__activated.mdw-theme(mdw-ink="medium")   test
+              span  / 4.5
+    .mdw-grid__item(mdw-colspan="2")
+      .mdw-grid__content
+        .mdw-type(mdw-style="subtitle") Ink
+        div
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="ink-color")
+              option.mdw-theme(mdw-surface="card" value="default") Default
+              option.mdw-theme(mdw-surface="card" value="black") Black
+              option.mdw-theme(mdw-surface="card" value="white") White
+              option.mdw-theme(mdw-surface="card" value="primary") Primary
+              option.mdw-theme(mdw-surface="card" value="secondary" selected) Secondary
+              option.mdw-theme(mdw-surface="card" value="warn") Warn
+              option.mdw-theme(mdw-surface="card" value="amber") Amber
+              option.mdw-theme(mdw-surface="card" value="blue") Blue
+              option.mdw-theme(mdw-surface="card" value="cyan") Cyan
+              option.mdw-theme(mdw-surface="card" value="red") Red
+              option.mdw-theme(mdw-surface="card" value="green") Green
+              option.mdw-theme(mdw-surface="card" value="deeppurple") Deeppurple
+              option.mdw-theme(mdw-surface="card" value="purple") Purple
+              option.mdw-theme(mdw-surface="card" value="yellow") Yellow
+              option.mdw-theme(mdw-surface="card" value="teal") Teal
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Color
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="ink-tone")
+              option.mdw-theme(mdw-surface="card" value="" selected) Auto
+              option.mdw-theme(mdw-surface="card" value="light") Light
+              option.mdw-theme(mdw-surface="card" value="contrast" selected) Contrast
+              option.mdw-theme(mdw-surface="card" value="A100") A100
+              option.mdw-theme(mdw-surface="card" value="A200") A200
+              option.mdw-theme(mdw-surface="card" value="A400") A400
+              option.mdw-theme(mdw-surface="card" value="A700") A700
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Tone
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="ink-opacity")
+              option.mdw-theme(mdw-surface="card" value="" selected) Auto
+              option.mdw-theme(mdw-surface="card" value="solid") Solid
+              option.mdw-theme(mdw-surface="card" value="high") High
+              option.mdw-theme(mdw-surface="card" value="medium") Medium
+              option.mdw-theme(mdw-surface="card" value="inactive") Inactive
+              option.mdw-theme(mdw-surface="card" value="divider") Divider
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Opacity
+    .mdw-grid__item(mdw-colspan="2")
+      .mdw-grid__content
+        .mdw-type(mdw-style="subtitle") Surface
+        #color-page-options
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="surface-color")
+              option.mdw-theme(mdw-surface="card" value="card") Card
+              option.mdw-theme(mdw-surface="card" value="binary" selected) Binary
+              option.mdw-theme(mdw-surface="card" value="black") Black
+              option.mdw-theme(mdw-surface="card" value="white") White
+              option.mdw-theme(mdw-surface="card" value="background") Background
+              option.mdw-theme(mdw-surface="card" value="primary") Primary
+              option.mdw-theme(mdw-surface="card" value="secondary") Secondary
+              option.mdw-theme(mdw-surface="card" value="warn") Warn
+              option.mdw-theme(mdw-surface="card" value="amber") Amber
+              option.mdw-theme(mdw-surface="card" value="blue") Blue
+              option.mdw-theme(mdw-surface="card" value="cyan") Cyan
+              option.mdw-theme(mdw-surface="card" value="red") Red
+              option.mdw-theme(mdw-surface="card" value="green") Green
+              option.mdw-theme(mdw-surface="card" value="deeppurple") Deeppurple
+              option.mdw-theme(mdw-surface="card" value="purple") Purple
+              option.mdw-theme(mdw-surface="card" value="yellow") Yellow
+              option.mdw-theme(mdw-surface="card" value="teal") Teal
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Color
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="surface-tone")
+              option.mdw-theme(mdw-surface="card" value="" selected) Default
+              option.mdw-theme(mdw-surface="card" value="alt") Alternate
+              option.mdw-theme(mdw-surface="card" value="50") 50
+              option.mdw-theme(mdw-surface="card" value="100") 100
+              option.mdw-theme(mdw-surface="card" value="200") 200
+              option.mdw-theme(mdw-surface="card" value="300") 300
+              option.mdw-theme(mdw-surface="card" value="400") 400
+              option.mdw-theme(mdw-surface="card" value="500") 500
+              option.mdw-theme(mdw-surface="card" value="600") 600
+              option.mdw-theme(mdw-surface="card" value="700") 700
+              option.mdw-theme(mdw-surface="card" value="800") 800
+              option.mdw-theme(mdw-surface="card" value="900") 900
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Tone
+  script(src='color.min.js')