@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/tab/_spec.scss

@@ -0,0 +1,220 @@
+// https://material.io/design/components/tabs.html#spec
+
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
+
+$icon-size: 24 !default;
+$icon-margin-top: 12 !default;
+$icon-to-label-baseline: 20 !default;
+$icon-with-label-height: 72 !default;
+
+.mdw-tab {
+  display: flex;
+  flex-direction: column;
+}
+
+.mdw-tab__list {
+  display: grid;
+  position: relative;
+  flex-direction: row;
+
+  grid-auto-columns: 1fr;
+
+  justify-content: flex-start;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+
+  flex: none;
+  overscroll-behavior-x: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[mdw-scrollable] {
+    display: flex;
+    overflow-x: auto;
+
+    box-sizing: border-box;
+
+    &::before,
+    &::after {
+      // Ensures 52dp blank space at end
+      content: '';
+
+      min-inline-size: 52px;
+    }
+  }
+}
+
+.mdw-tab__icon,
+.mdw-tab__label,
+.mdw-tab__indicator {
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
+}
+
+.mdw-tab__indicator {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0 auto;
+
+  block-size: 2px;
+  inline-size: 0;
+  inline-size: 1000px;
+
+  transition-property: none;
+
+  transform: translateX(0) scaleX(0);
+  transform-origin: 0 0 0;
+
+  background-color: currentColor;
+
+  &[mdw-animate] {
+    transition-property: transform;
+  }
+
+}
+
+.mdw-tab__item {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+
+  grid-row: 1;
+  overflow: hidden;
+
+  box-sizing: content-box;
+
+  min-block-size: 48px;
+  flex: auto;
+
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  z-index: 0;
+
+  border-radius: 0;
+
+  box-shadow: none;
+
+  .mdw-tab__list[mdw-scrollable] > & {
+    min-inline-size: 90px;
+    max-inline-size: 100%;
+    flex: none;
+  }
+}
+
+.mdw-tab__icon {
+  @include type.baselineToBottom($icon-to-label-baseline);
+  margin-block: dp($icon-margin-top) dp(-$icon-to-label-baseline);
+
+  pointer-events: none;
+
+  transition-property: color;
+}
+
+.mdw-tab__label {
+  @include type.addRules('button');
+
+  box-sizing: border-box;
+  margin-block: auto;
+  padding: 0 16px;
+
+  pointer-events: none;
+
+  transition-property: color;
+
+  text-align: center;
+
+  .mdw-tab__icon ~ & {
+    @include type.baselineToTop($icon-to-label-baseline);
+    @include type.baselineToBottom($icon-with-label-height - $icon-margin-top - $icon-size - $icon-to-label-baseline);
+
+    display: block;
+
+    min-block-size: 0;
+    margin: 0;
+  }
+}
+
+.mdw-tab__content {
+  display: flex;
+  position: relative;
+  align-items: stretch;
+  flex-direction: row;
+
+  // Hide scrollbar
+  -ms-overflow-style: none;
+  overflow-x: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+
+  scroll-behavior: smooth;
+
+  // W3C standard
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+  flex-grow: 1;
+
+  // Snap
+
+  // Firefox
+  -webkit-scroll-snap-type-x: mandatory;
+  scroll-snap-type-x: mandatory;
+  -webkit-scroll-snap-points-x: repeat(100%);
+  scroll-snap-points-x: repeat(100%);
+
+  overscroll-behavior-x: none;
+
+  .mdw-tab[mdw-resize-stage] & {
+    scroll-behavior: auto;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.mdw-tab__panel {
+  scroll-snap-align: center;
+
+  min-inline-size: 100%;
+  max-inline-size: 100%;
+  flex-shrink: 0;
+  flex-basis: 100%;
+
+  will-change: visibility;
+
+  visibility: visible;
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+  }
+
+  &[aria-expanded="false"] .mdw-tab__panel__inactive-hide,
+  &[aria-expanded="true"] .mdw-tab__panel__active-hide {
+    visibility: hidden;
+  }
+
+  &[aria-expanded="false"] .mdw-tab__panel__inactive-remove,
+  &[aria-expanded="true"] .mdw-tab__panel__active-remove {
+    display: none;
+  }
+
+}
+
+.mdw-tab__content[mdw-no-scroll] {
+  overflow-x: hidden;
+  scroll-behavior: auto;
+}

package/components/tab/content.js

@@ -0,0 +1,210 @@
+import {
+  dispatchDomEvent,
+  isRtl,
+  scrollToElement,
+} from '../../core/dom.js';
+
+import * as TabPanel from './panel.js';
+
+export const SCROLL_EVENT = 'mdw:tabcontent-scroll';
+
+/**
+ * Prevent scrolling with keyboard
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+function onKeyDown(event) {
+  if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+    return;
+  }
+  switch (event.key) {
+    case 'ArrowLeft':
+    case 'ArrowRight':
+    case 'Left':
+    case 'Right':
+      if (event.target instanceof HTMLInputElement
+        || event.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      break;
+    default:
+  }
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onTabContentScroll(event) {
+  const tabContentElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const isPageRtl = isRtl();
+  const scrollPoint = tabContentElement.scrollLeft / tabContentElement.clientWidth;
+  let visibleIndex = Math.floor(scrollPoint);
+  let visibilityPercentage = scrollPoint - visibleIndex;
+
+  // Percentage may be incorrect due to floating point rounding errors
+  // Compare integer values provided by browser to check if within 1px
+  for (let i = 0; i < tabContentElement.children.length; i++) {
+    const panel = tabContentElement.children.item(i);
+    if (!(panel instanceof HTMLElement)) continue;
+    if (Math.abs(tabContentElement.scrollLeft - panel.offsetLeft) <= 1) {
+      visibleIndex = i;
+      visibilityPercentage = 0;
+      break;
+    }
+  }
+
+  const isResting = visibilityPercentage === 0;
+  let rightPanel;
+  let leftPeekPanel;
+  let rightPeekPanel;
+  let leftSelected = false;
+  let rightSelected = false;
+  let selectedIndex;
+  let leftPanelIndex;
+  if (isPageRtl) {
+    const lastIndex = tabContentElement.children.length - 1;
+    leftPanelIndex = lastIndex - visibleIndex;
+    leftPeekPanel = tabContentElement.children.item(lastIndex - (visibleIndex - 1));
+    rightPanel = tabContentElement.children.item(lastIndex - (visibleIndex + 1));
+    rightPeekPanel = tabContentElement.children.item(lastIndex - (visibleIndex + 2));
+    if (visibilityPercentage < 0.5) {
+      leftSelected = true;
+      selectedIndex = lastIndex - visibleIndex;
+    } else {
+      rightSelected = true;
+      selectedIndex = lastIndex - (visibleIndex + 1);
+    }
+  } else {
+    leftPanelIndex = visibleIndex;
+    rightPanel = tabContentElement.children.item(visibleIndex + 1);
+    leftPeekPanel = tabContentElement.children.item(visibleIndex - 1);
+    rightPeekPanel = tabContentElement.children.item(visibleIndex + 2);
+    if (visibilityPercentage < 0.5) {
+      leftSelected = true;
+      selectedIndex = visibleIndex;
+    } else {
+      rightSelected = true;
+      selectedIndex = visibleIndex + 1;
+    }
+  }
+
+  const leftPanel = /** @type {HTMLElement} */ (tabContentElement.children.item(leftPanelIndex));
+
+  const currentTargetIndexString = tabContentElement.getAttribute('mdw-target-index');
+  const currentTargetIndex = (currentTargetIndexString == null)
+    ? null
+    : Number.parseInt(currentTargetIndexString, 10);
+
+  let updateSelected = false;
+  let forceSelection = false;
+  if (currentTargetIndex == null) {
+    TabPanel.setExpanded(leftPanel, leftSelected);
+    if (rightPanel) {
+      TabPanel.setExpanded(rightPanel, rightSelected);
+    }
+    updateSelected = visibilityPercentage === 0;
+  } else if (currentTargetIndex === selectedIndex && visibilityPercentage === 0) {
+    updateSelected = true;
+    forceSelection = true;
+    tabContentElement.removeAttribute('mdw-target-index');
+  }
+
+  TabPanel.setHidden(leftPanel, false);
+  if (leftPeekPanel) {
+    TabPanel.setHidden(leftPeekPanel, isResting || !leftSelected);
+  }
+  if (rightPanel) {
+    TabPanel.setHidden(rightPanel, isResting);
+  }
+  if (rightPeekPanel) {
+    TabPanel.setHidden(rightPeekPanel, isResting || !rightSelected);
+  }
+
+  dispatchDomEvent(tabContentElement, SCROLL_EVENT, {
+    leftPanelIndex,
+    visibilityPercentage,
+    updateSelected,
+    forceSelection,
+  });
+}
+
+/**
+ * @param {HTMLElement} tabContentElement
+ * @param {HTMLElement|number} panel element or index
+ * @param {true|false|'smooth'} [scrollToPanel='smooth']
+ * @return {void}
+ */
+export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth') {
+  /** @type {HTMLElement} */
+  let panelElement;
+  /** @type {number} */
+  let currentSelectedIndex = null;
+  /** @type {number} */
+  let panelIndex = null;
+  /** @type {Element[]} */
+  const otherPanels = [];
+  // eslint-disable-next-line github/array-foreach
+  [...tabContentElement.getElementsByClassName('mdw-tab__panel')].forEach((el, index) => {
+    if (currentSelectedIndex == null && TabPanel.isExpanded(el)) {
+      currentSelectedIndex = index;
+    }
+    if (panel === el || panel === index) {
+      TabPanel.setExpanded(el, true);
+      TabPanel.setHidden(el, false);
+      panelElement = /** @type {HTMLElement} */ (el);
+      panelIndex = index;
+    } else {
+      otherPanels.push(el);
+    }
+  });
+  if (!panelElement) {
+    // Invalid index or panel not in tabcontent
+    return;
+  }
+  for (const sibling of otherPanels) TabPanel.setExpanded(sibling, false);
+
+  const isPageRtl = isRtl();
+  const targetScrollLeft = isPageRtl
+    ? panelElement.parentElement.scrollWidth + panelElement.offsetLeft - panelElement.offsetWidth
+    : panelElement.offsetLeft;
+  if (!scrollToPanel || panelElement.parentElement.scrollLeft === targetScrollLeft) {
+    // No scrolling, hide others
+    for (const sibling of otherPanels) TabPanel.setHidden(sibling, true);
+    return;
+  }
+  if (scrollToPanel && panelElement) {
+    if (panelIndex == null) {
+      tabContentElement.removeAttribute('mdw-target-index');
+    } else {
+      tabContentElement.setAttribute('mdw-target-index', panelIndex.toString(10));
+    }
+    scrollToElement(panelElement, scrollToPanel === 'smooth', isPageRtl);
+  }
+}
+
+/**
+ * @param {Element} tabContentElement
+ * @return {void}
+ */
+export function attach(tabContentElement) {
+  tabContentElement.addEventListener('scroll', onTabContentScroll, { passive: true });
+  for (const element of tabContentElement.getElementsByClassName('mdw-tab__panel')) {
+    TabPanel.attach(element);
+  }
+  tabContentElement.addEventListener('keydown', onKeyDown);
+}
+
+/**
+ * @param {Element} tabContentElement
+ * @return {void}
+ */
+export function detach(tabContentElement) {
+  tabContentElement.removeEventListener('keydown', onKeyDown);
+  tabContentElement.removeEventListener('scroll', onTabContentScroll);
+  for (const element of tabContentElement.getElementsByClassName('mdw-tab__panel')) {
+    TabPanel.detach(element);
+  }
+}