@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pages/chip.js

@@ -0,0 +1,80 @@
+import * as Chip from '../../components/chip/index.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @type {Iterable<HTMLElement>} */
+let sampleComponents;
+
+/** @return {void} */
+function updateSampleCode() {
+  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
+  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  const useJS = jsRequired || jsOptional;
+
+  // Strip JS related elements and attributes
+  for (const element of sampleComponents) { Chip.detach(element); }
+
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  const sampleContainer = document.querySelector('.component-sample__container').firstElementChild;
+  htmlCodeElement.textContent = convertElementToCode(sampleContainer);
+
+  // Reattach JS if requested
+  if (useJS) {
+    for (const element of sampleComponents) { Chip.attach(element); }
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = 'mdw.Chip.attach(chipElement);';
+}
+
+/** @return {void} */
+function initializeSampleComponents() {
+  for (const element of document.querySelectorAll('.js .mdw-tab')) { Chip.attach(element); }
+  for (const formElement of document.getElementsByTagName('form')) {
+    formElement.reset();
+  }
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const inputElement = /** @type {HTMLInputElement} */ (event.currentTarget);
+  const { name, value, checked } = inputElement;
+
+  switch (name) {
+    case 'framework':
+      switch (value) {
+        case 'javascript':
+          break;
+        case 'css':
+          break;
+        default:
+      }
+      break;
+    case 'outlined': {
+      for (const el of sampleComponents) {
+        if (checked) {
+          el.setAttribute('mdw-outlined', '');
+        } else {
+          el.removeAttribute('mdw-outlined');
+        }
+      }
+      break;
+    }
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponents = document.querySelectorAll('.component-sample .mdw-chip');
+  for (const el of document.querySelectorAll('.demo-options input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+updateSampleCode();

package/docs/pages/color.eta

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

package/docs/pages/color.js

@@ -0,0 +1,261 @@
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+for (const el of document.getElementsByClassName('mdw-overlay')) Overlay.attach(el);
+for (const el of document.getElementsByClassName('mdw-ripple')) Ripple.attach(el);
+
+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 : Number.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,
+    });
+}
+
+/**
+ * @param {Color} color
+ * @param {Color} overlay
+ * @return {Color}
+ */
+function overlayColor(color, overlay) {
+  return {
+    r: (1 - overlay.a) * color.r + overlay.a * overlay.r,
+    g: (1 - overlay.a) * color.g + overlay.a * overlay.g,
+    b: (1 - overlay.a) * color.b + overlay.a * overlay.b,
+    a: 1,
+  };
+}
+
+/**
+ * @param {number} colorValue
+ * @return {number}
+ */
+function sRGBMapping(colorValue) {
+  if (colorValue <= (0.039_28 * 255)) {
+    return colorValue / 255 / 12.92;
+  }
+  return ((colorValue / 255 + 0.055) / 1.055) ** 2.4;
+}
+
+/**
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * @param {Color} color
+ * @return {number}
+ */
+function getLuminance(color) {
+  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() {
+  requestAnimationFrame(() => {
+    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) {
+  const item = /** @type {HTMLElement} */ (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(Boolean).join(' ');
+  const surfaceProperties = [
+    currentSurfaceOptions.color,
+    currentSurfaceOptions.tone,
+  ].filter(Boolean).join(' ');
+  for (const el of document.querySelectorAll('#color-sample-area .demo-core-item')) {
+    el.setAttribute('mdw-ink', inkProperties);
+    el.setAttribute('mdw-surface', surfaceProperties);
+  }
+  calculateContrast();
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const selectElement = /** @type {HTMLSelectElement} */ (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);
+  for (const el of document.querySelectorAll('#color-page-options [name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
+}
+
+for (const item of document.getElementsByClassName('demo-core-item')) {
+  item.addEventListener('click', onItemClick);
+}
+
+for (const button of [
+  document.getElementById('darkModeButton'),
+  document.getElementById('altThemeButton'),
+]) {
+  button?.addEventListener('click', calculateContrast);
+}
+
+setupComponentOptions();
+refresh();