@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/color.js

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

@@ -1,121 +0,0 @@
-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')