@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/datatable/index.js

@@ -0,0 +1,388 @@
+// https://www.w3.org/TR/wai-aria-practices/#grid
+
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+import { iterateArrayLike } from '../../core/dom.js';
+
+import * as DataTableCell from './cell.js';
+import * as DataTableColumnHeader from './columnheader.js';
+import * as DataTableRow from './row.js';
+import * as DataTableRowHeader from './rowheader.js';
+
+export const CELL_TABINDEX_QUERIES = [
+  'td:not([mdw-autofocus-widget])',
+  'th:not([mdw-autofocus-widget])',
+  'td[mdw-autofocus-widget] .mdw-datatable__widget',
+  'th[mdw-autofocus-widget] .mdw-datatable__widget',
+];
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onSelectedChange(event) {
+  const selected = event.detail.value === 'true';
+  /** @type {HTMLElement} */
+  const dataTableElement = (event.currentTarget);
+  const hasSelection = selected || dataTableElement.querySelector('td[aria-selected="true"],tr[aria-selected="true"]');
+  if (hasSelection) {
+    dataTableElement.setAttribute('mdw-has-selection', '');
+  } else {
+    dataTableElement.removeAttribute('mdw-has-selection');
+  }
+}
+
+/**
+ * @param {Element} datatableElement
+ * @return {HTMLElement}
+ */
+export function getScroller(datatableElement) {
+  /** @type {HTMLElement} */
+  let scroller = (datatableElement.getElementsByClassName('mdw-datatable__scroller')[0]);
+  if (!scroller) {
+    scroller = document.createElement('div');
+    scroller.classList.add('mdw-datatable__scroller');
+    const footer = datatableElement.getElementsByClassName('mdw-datatable__footer')[0];
+    if (footer) {
+      datatableElement.insertBefore(scroller, footer);
+    } else {
+      datatableElement.appendChild(scroller);
+    }
+    // Move table into scroller if it exists
+    const table = datatableElement.getElementsByTagName('table')[0];
+    if (table) {
+      table.parentElement.removeChild(table);
+      scroller.appendChild(table);
+    }
+  }
+  return scroller;
+}
+
+/**
+ * @param {Element} datatableElement
+ * @return {HTMLTableElement}
+ */
+export function getTable(datatableElement) {
+  if (datatableElement instanceof HTMLTableElement) {
+    return datatableElement;
+  }
+  let table = datatableElement.getElementsByTagName('table')[0];
+  if (!table) {
+    const scroller = getScroller(datatableElement);
+    table = document.createElement('table');
+    scroller.appendChild(table);
+  }
+  return table;
+}
+
+/**
+ * @param {Element} datatableElement
+ * @return {HTMLTableSectionElement}
+ */
+export function getTableBody(datatableElement) {
+  let tbody = datatableElement.getElementsByTagName('tbody')[0];
+  if (!tbody) {
+    const table = getTable(datatableElement);
+    tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+  }
+  return tbody;
+}
+
+/**
+ * @param {Element} datatableElement
+ * @param {number} columnIndex
+ * @param {boolean} ascending
+ * @return {void}
+ */
+export function sortColumn(datatableElement, columnIndex, ascending = true) {
+  if (datatableElement.hasAttribute('mdw-datatable-adapter')) {
+    return;
+  }
+  iterateArrayLike(datatableElement.getElementsByTagName('th'), (th) => {
+    if (th.cellIndex === columnIndex) {
+      th.setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
+    } else if (th.hasAttribute('aria-sort')) {
+      th.setAttribute('aria-sort', 'none');
+    }
+  });
+
+  /** @type {HTMLTableSectionElement} */
+  const tbody = getTableBody(datatableElement);
+  const rows = [];
+  for (let i = tbody.rows.length - 1; i >= 0; i -= 1) {
+    rows.push(tbody.rows.item(i));
+    tbody.deleteRow(i);
+  }
+  rows.sort((a, b) => {
+    const aCell = a.cells.item(columnIndex);
+    const bCell = b.cells.item(columnIndex);
+    const aText = aCell.textContent;
+    const bText = bCell.textContent;
+    if (aCell.dataset.type === 'number') {
+      return parseFloat(bText) - parseFloat(aText);
+    }
+    return bText.localeCompare(aText);
+  });
+  if (ascending) {
+    rows.reverse();
+  }
+  const fragment = document.createDocumentFragment();
+  rows.forEach((row) => {
+    fragment.appendChild(row);
+  });
+  tbody.appendChild(fragment);
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onItemFocus(event) {
+  /** @type {HTMLElement} */
+  const datatableElement = (event.currentTarget);
+  const onFocusInteraction = datatableElement.getAttribute('mdw-on-focus');
+  if (!onFocusInteraction) {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const itemElement = (event.target);
+  if (itemElement.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  onFocusInteraction.split(' ').forEach((interaction) => {
+    switch (interaction) {
+      case 'select':
+        if (itemElement instanceof HTMLTableRowElement) {
+          DataTableRow.setSelected(itemElement, true);
+        } else {
+          DataTableCell.setSelected(itemElement, true);
+        }
+        break;
+      default:
+    }
+  });
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onSort(event) {
+  /** @type {HTMLElement} */
+  const datatableElement = (event.currentTarget);
+  /** @type {HTMLTableHeaderCellElement} */
+  const cell = (event.target);
+  sortColumn(datatableElement, cell.cellIndex, event.detail.sort === 'ascending');
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onRowHeaderCheckedChange(event) {
+  /** @type {HTMLTableHeaderCellElement} */
+  const cell = (event.target);
+  const row = cell.parentElement;
+  DataTableRow.setSelected(row, event.detail.value);
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  /** @type {HTMLElement} */
+  const dataTableElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const emitter = (event.target);
+
+  const row = (emitter instanceof HTMLTableRowElement && emitter);
+  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
+  if (!row && !cell) {
+    return;
+  }
+  event.stopPropagation();
+  RovingTabIndex.removeTabIndex(dataTableElement.querySelectorAll(row ? 'tr' : CELL_TABINDEX_QUERIES.join(',')), [emitter]);
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onKeyboard(event) {
+  /** @type {HTMLElement} */
+  const dataTableElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const emitter = (event.target);
+  let current = document.activeElement;
+
+  let row = (emitter instanceof HTMLTableRowElement && emitter);
+  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
+  if (!row && !cell) {
+    return;
+  }
+  if (!row) {
+    /** @type {HTMLTableRowElement} */
+    row = (cell.parentElement);
+  }
+
+  let checkNavKeys = false;
+  switch (event.type) {
+    case Keyboard.SPACEBAR_KEY:
+      if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
+        return;
+      }
+      if (!event.detail.shiftKey) {
+        return;
+      }
+      if (!row.hasAttribute('aria-selected')) {
+        return;
+      }
+      DataTableRow.setSelected(row, row.getAttribute('aria-selected') !== 'true', true);
+      break;
+    default:
+      checkNavKeys = true;
+  }
+
+  if (checkNavKeys) {
+    // Keyboard Navigation
+    /** @type {ArrayLike<HTMLElement>} */
+    let searchElements;
+    let reverse = false;
+    let loop = false;
+    switch (event.type) {
+      case Keyboard.UP_ARROW_KEY:
+        reverse = true;
+        // eslint-disable-next-line no-fallthrough
+      case Keyboard.DOWN_ARROW_KEY:
+        if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (cell) {
+          searchElements = getTableBody(dataTableElement).querySelectorAll(
+            CELL_TABINDEX_QUERIES.map((q) => `${q}:nth-child(${cell.cellIndex + 1})`).join(','),
+          );
+        } else {
+          searchElements = getTableBody(dataTableElement).getElementsByTagName('tr');
+        }
+        break;
+      case Keyboard.BACK_ARROW_KEY:
+        reverse = true;
+        // eslint-disable-next-line no-fallthrough
+      case Keyboard.FORWARD_ARROW_KEY:
+        if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (!cell) {
+          return;
+        }
+        searchElements = cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        break;
+      case Keyboard.END_KEY:
+        reverse = true;
+        // eslint-disable-next-line no-fallthrough
+      case Keyboard.HOME_KEY:
+        if (event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (!cell) {
+          return;
+        }
+        if (event.detail.ctrlKey) {
+          searchElements = getTableBody(dataTableElement).querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        } else {
+          searchElements = cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        }
+        cell.setAttribute('tabindex', '-1');
+        current = null;
+        loop = true;
+        break;
+      default:
+        return;
+    }
+    RovingTabIndex.selectNext(searchElements, current, loop, reverse);
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeAttribute('mdw-datatable-js');
+  element.removeEventListener(DataTableRow.FOCUS_EVENT, onItemFocus);
+  element.removeEventListener(DataTableCell.FOCUS_EVENT, onItemFocus);
+  element.removeEventListener(DataTableColumnHeader.SORT_EVENT, onSort);
+  element.removeEventListener(Keyboard.UP_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.DOWN_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.BACK_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.HOME_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.END_KEY, onKeyboard);
+  element.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+}
+
+/**
+ * @param {Element} tableElement
+ * @return {HTMLTableRowElement}
+ */
+export function getHeaderRow(tableElement) {
+  let thead = tableElement.getElementsByTagName('thead')[0];
+  if (!thead) {
+    const table = getTable(tableElement);
+    thead = document.createElement('thead');
+    table.appendChild(thead);
+  }
+  let headerRow = thead.getElementsByTagName('tr')[0];
+  if (!headerRow) {
+    headerRow = document.createElement('tr');
+    thead.appendChild(headerRow);
+  }
+  return headerRow;
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('mdw-datatable-js', '');
+
+  const table = getTable(element);
+  table.setAttribute('role', 'grid');
+  const headerRow = getHeaderRow(element);
+  const tbody = getTableBody(element);
+
+  iterateArrayLike(headerRow.getElementsByTagName('th'), DataTableColumnHeader.attach);
+  iterateArrayLike(tbody.getElementsByTagName('th'), DataTableRowHeader.attach);
+
+  const tableRows = tbody.getElementsByTagName('tr');
+  iterateArrayLike(tableRows, DataTableRow.attach);
+
+  const rowFocusable = element.hasAttribute('mdw-row-focusable');
+  if (rowFocusable) {
+    RovingTabIndex.setupTabIndexes(tableRows);
+  }
+  const cellFocusable = element.hasAttribute('mdw-cell-focusable');
+  if (cellFocusable) {
+    RovingTabIndex.setupTabIndexes(tbody.querySelectorAll(CELL_TABINDEX_QUERIES.join(',')));
+  }
+
+  element.addEventListener(DataTableRow.FOCUS_EVENT, onItemFocus);
+  element.addEventListener(DataTableRow.SELECTED_CHANGE_EVENT, onSelectedChange);
+  element.addEventListener(DataTableCell.FOCUS_EVENT, onItemFocus);
+  element.addEventListener(DataTableCell.SELECTED_CHANGE_EVENT, onSelectedChange);
+  element.addEventListener(DataTableColumnHeader.SORT_EVENT, onSort);
+  element.addEventListener(Keyboard.SPACEBAR_KEY, onKeyboard);
+  element.addEventListener(Keyboard.UP_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.DOWN_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.FORWARD_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.BACK_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.HOME_KEY, onKeyboard);
+  element.addEventListener(Keyboard.END_KEY, onKeyboard);
+  element.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+}

package/components/datatable/index.scss

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

package/components/datatable/row.js

@@ -0,0 +1,49 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { dispatchDomEvent, iterateArrayLike } from '../../core/dom.js';
+
+import * as DataTableCell from './cell.js';
+
+export const FOCUS_EVENT = 'mdw:datatablerow-focus';
+export const SELECTED_CHANGE_EVENT = 'mdw:datatablerow-selectedchange';
+
+/**
+ * @param {FocusEvent} event
+ * @return {void}
+ */
+export function onFocus(event) {
+  /** @type {HTMLTableRowElement} */
+  const rowElement = (event.currentTarget);
+  dispatchDomEvent(rowElement, FOCUS_EVENT);
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
+ */
+export function setSelected(element, value, dispatchEvent = true) {
+  return Attributes.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
+}
+
+/**
+ * @param {HTMLTableRowElement} element
+ * @return {void}
+ */
+export function attach(element) {
+  Keyboard.attach(element);
+  element.setAttribute('role', 'row');
+  element.addEventListener('focus', onFocus);
+  iterateArrayLike(element.cells, DataTableCell.attach);
+}
+
+/**
+ * @param {HTMLTableRowElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('focus', onFocus);
+  Keyboard.detach(element);
+  iterateArrayLike(element.cells, DataTableCell.detach);
+}

package/components/datatable/rowheader.js

@@ -0,0 +1,18 @@
+import * as Keyboard from '../../core/aria/keyboard.js';
+
+/**
+ * @param {HTMLTableHeaderCellElement} element
+ * @return {void}
+ */
+export function attach(element) {
+  Keyboard.attach(element);
+  element.setAttribute('role', 'rowheader');
+}
+
+/**
+ * @param {HTMLTableHeaderCellElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  Keyboard.detach(element);
+}

package/components/dialog/_spec.scss

@@ -0,0 +1,213 @@
+// https://material.io/guidelines/components/dialogs.html
+// https://material.io/guidelines/motion/choreography.html#choreography-creation
+
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
+
+$unitWidth: dp(56) !default;
+
+.mdw-dialog__close {
+  position: absolute;
+  top: 0;
+  left: 0;
+  // Scroll mask
+  -ms-overflow-style: none;
+  overflow-y: scroll;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  -ms-scroll-chaining: none;
+  scrollbar-width: none;
+  
+  
+  height: 100%;
+  width: 100%;
+  
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  
+  pointer-events: inherit;
+  visibility: hidden;
+  z-index: 8;
+
+  // Hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    display: block;
+    content: '';
+
+    height: 200%;
+    width: 200%;
+  }
+}
+
+.mdw-dialog {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  padding: dp(84) dp(40);
+  
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$accelerateEasing;
+  will-change: opacity;
+  
+  opacity: 0;
+  pointer-events: none;
+
+  z-index: 24;
+
+  background-color: rgba(0, 0, 0, 0.50);
+
+  &:not([aria-hidden]) {
+    // Initial state
+    transition: none;
+  }
+
+  @for $i from 3 to 8 {
+    &[mdw-width-units="#{$i}"] {
+      .mdw-dialog__popup {
+        min-width: #{$unitWidth * $i};
+      }
+    }
+  }
+}
+
+.mdw-dialog__popup {
+  display: none;
+  position: relative;
+  flex-direction: column;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  -ms-scroll-chaining: none;
+  
+  max-height: 100%;
+  min-width: dp(224);
+  max-width: 100%;
+  flex-shrink: 1;
+
+  will-change: display, transform;
+  
+  transform: scale(1);
+  transform-origin: bottom center;
+  z-index: 24;
+
+  border-radius: dp(4);
+  box-shadow: elevation.boxShadow(24);
+}
+
+.mdw-dialog[aria-hidden="false"],
+.mdw-dialog[id]:target {
+  transition-duration: motion.$fadeInDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$decelerateEasing;
+
+  opacity: 1;
+  pointer-events: auto;
+
+  .mdw-dialog__close {
+    visibility: visible;
+  }
+
+  .mdw-dialog__popup {
+    animation-name: scaleUpAnimation;
+    animation-duration: motion.$fadeInDuration;
+    animation-direction: forwards;
+  }
+
+  &:not([mdw-dialog-js]) .mdw-dialog__popup {
+    display: flex;
+  }
+}
+
+@keyframes scaleUpAnimation {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.mdw-dialog__title {
+  @include type.textTopToTop(20);
+  @include type.addRules('h6');
+  @include type.baselineToBottom(36);
+
+  margin-bottom: dp(-36);
+  padding: 0 dp(24);
+}
+
+.mdw-dialog__body {
+  @include type.textTopToTop(20);
+  @include type.addRules('body');
+  @include type.baselineToBottom(28);
+
+  padding: 0 dp(24);
+}
+
+.mdw-dialog__header {
+  min-height: dp(64);
+}
+
+.mdw-dialog__scrolling {
+  overflow-y: auto;
+}
+
+.mdw-dialog__button-area {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  
+  flex: none;
+  margin-top: dp(8);
+  margin-bottom: dp(8);
+
+  &[mdw-stacked] {
+    margin-top: 0;
+
+    .mdw-button {
+      justify-content: flex-end;
+      
+      min-height: dp(48);
+      flex-basis: 100%;
+      margin-right: 0;
+      padding-right: dp(16);
+      padding-left: dp(16);
+      
+      &,
+      :root[dir="rtl"] & {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .mdw-button {
+    margin-right: dp(8);
+    margin-left: 0;
+
+    text-align: end;
+
+    :root[dir="rtl"] & {
+      margin-right: 0;
+      margin-left: dp(8);
+    }
+  }
+}