@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/tab/content.js

@@ -0,0 +1,205 @@
+import {
+  dispatchDomEvent,
+  getPassiveEventListenerOption,
+  isRtl,
+  iterateArrayLike,
+  iterateSomeOfArrayLike,
+  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':
+      event.preventDefault();
+      break;
+    default:
+  }
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onTabContentScroll(event) {
+  /** @type {HTMLElement} */
+  const tabContentElement = (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
+  iterateSomeOfArrayLike(tabContentElement.children, ((/** @type {HTMLElement} */ panel, index) => {
+    if (Math.abs(tabContentElement.scrollLeft - panel.offsetLeft) <= 1) {
+      visibleIndex = index;
+      visibilityPercentage = 0;
+      return true;
+    }
+    return false;
+  }));
+
+  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;
+    }
+  }
+  /** @type {HTMLElement} */
+  const leftPanel = (tabContentElement.children.item(leftPanelIndex));
+
+  const currentTargetIndexString = tabContentElement.getAttribute('mdw-target-index');
+  const currentTargetIndex = currentTargetIndexString == null
+    ? null : 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) {
+    if (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 = [];
+  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), (el, index) => {
+    if (currentSelectedIndex == null && TabPanel.isExpanded(el)) {
+      currentSelectedIndex = index;
+    }
+    if (panel === el || panel === index) {
+      TabPanel.setExpanded(el, true);
+      TabPanel.setHidden(el, false);
+      /** @type {HTMLElement} */
+      panelElement = (el);
+      panelIndex = index;
+    } else {
+      otherPanels.push(el);
+    }
+  });
+  if (!panelElement) {
+    // Invalid index or panel not in tabcontent
+    return;
+  }
+  otherPanels.forEach((sibling) => 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
+    otherPanels.forEach((sibling) => 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, getPassiveEventListenerOption());
+  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.attach);
+  tabContentElement.addEventListener('keydown', onKeyDown);
+}
+
+/**
+ * @param {Element} tabContentElement
+ * @return {void}
+ */
+export function detach(tabContentElement) {
+  tabContentElement.removeEventListener('keydown', onKeyDown);
+  tabContentElement.removeEventListener('scroll', onTabContentScroll);
+  iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.detach);
+}

package/components/tab/index.js

@@ -0,0 +1,260 @@
+import {
+  dispatchDomEvent,
+  getPassiveEventListenerOption,
+  iterateSomeOfArrayLike,
+  nextTick,
+} from '../../core/dom.js';
+
+import * as TabContent from './content.js';
+import * as TabItem from './item.js';
+import * as TabList from './list.js';
+import * as TabPanel from './panel.js';
+
+const RESIZE_WAIT_FRAMES = 5;
+
+export const SELECTED_INDEX_CHANGE_EVENT = 'mdw:tab-selectedindexchange';
+
+/**
+ * @param {Element} tabElement
+ * @return {void}
+ */
+export function onResize(tabElement) {
+  let stage = 0;
+  tabElement.setAttribute('mdw-resize-stage', stage.toString());
+  /** @return {void} */
+  function performResize() {
+    if (!tabElement.hasAttribute('mdw-resize-stage')) {
+      // Skip resize
+      return;
+    }
+    const attrStage = tabElement.getAttribute('mdw-resize-stage');
+    if (attrStage !== stage.toString()) {
+      // Off-sync due to another resize event
+      return;
+    }
+    stage += 1;
+    tabElement.setAttribute('mdw-resize-stage', stage.toString());
+    if (stage === RESIZE_WAIT_FRAMES) {
+      /** @type {HTMLElement} */
+      const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);
+      if (tabContentElement) {
+        /** @type {HTMLElement} */
+        const relatedPanel = (tabContentElement.querySelector('.mdw-tab__panel[aria-expanded="true"]'));
+        if (relatedPanel) {
+          TabContent.selectPanel(tabContentElement, relatedPanel, true);
+        }
+      }
+    } else if (stage === RESIZE_WAIT_FRAMES * 2) {
+      /** @type {HTMLElement} */
+      const tabListElement = (tabElement.getElementsByClassName('mdw-tab__list')[0]);
+      if (tabListElement) {
+        /** @type {HTMLElement} */
+        const relatedItem = (tabListElement.querySelector('.mdw-tab__item[aria-selected="true"]'));
+        if (relatedItem) {
+          TabList.setIndicatorPosition(tabListElement, relatedItem, 0);
+        }
+      }
+      tabElement.removeAttribute('mdw-resize-stage');
+      return;
+    }
+
+    nextTick(performResize);
+  }
+  nextTick(performResize);
+}
+
+/**
+ * @param {HTMLElement} tabElement
+ * @param {number} index
+ * @return {void}
+ */
+function updateSelectedIndex(tabElement, index) {
+  const currentIndex = tabElement.getAttribute('mdw-selected-index');
+  if (currentIndex == null || currentIndex === index.toString()) {
+    return;
+  }
+  tabElement.setAttribute('mdw-selected-index', index.toString());
+  dispatchDomEvent(tabElement, SELECTED_INDEX_CHANGE_EVENT, { value: index });
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onTabItemSelectedChange(event) {
+  if (event.detail.value !== 'true') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const tabElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const tabItemElement = (event.target);
+  /** @type {HTMLElement} */
+  const tabListElement = (tabElement.getElementsByClassName('mdw-tab__list')[0]);
+  if (!tabListElement) {
+    return;
+  }
+
+  /** @type {HTMLElement} */
+  const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);
+  const tabItemIndex = TabList.getTabItemIndex(tabListElement, tabItemElement);
+  if (tabItemIndex === -1) {
+    return;
+  }
+  if (tabContentElement) {
+    const hasNoScroll = tabContentElement.hasAttribute('mdw-no-scroll');
+    if (!hasNoScroll) {
+      TabContent.selectPanel(tabContentElement, tabItemIndex, 'smooth');
+      return;
+    }
+    TabContent.selectPanel(tabContentElement, tabItemIndex, true);
+  }
+  TabList.setIndicatorPosition(tabListElement, tabItemElement, 0, true);
+  if (!tabContentElement) {
+    updateSelectedIndex(tabElement, tabItemIndex);
+  }
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onTabContentScroll(event) {
+  /** @type {HTMLElement} */
+  const tabElement = (event.currentTarget);
+  const { detail } = event;
+  if (!detail.forceSelection && tabElement.hasAttribute('mdw-resize-stage')) {
+    return;
+  }
+  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
+  if (tabListElement) {
+    TabList.setIndicatorPosition(
+      tabListElement,
+      detail.leftPanelIndex,
+      detail.visibilityPercentage,
+    );
+  }
+  if (detail.updateSelected) {
+    updateSelectedIndex(tabElement, detail.leftPanelIndex);
+  }
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onTabPanelExpandedChange(event) {
+  if (event.detail.value !== 'true') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const tabElement = (event.currentTarget);
+  if (tabElement.hasAttribute('mdw-resize-stage')) {
+    return;
+  }
+  let index = 0;
+  /** @type {HTMLElement} */
+  const tabPanelElement = (event.target);
+  let sibling = tabPanelElement.previousElementSibling;
+  while (sibling) {
+    index += 1;
+    sibling = sibling.previousElementSibling;
+  }
+  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
+  if (tabListElement) {
+    TabList.selectItemAtIndex(tabListElement, index, false);
+  }
+}
+
+/**
+ * @param {Element} tabElement
+ * @return {void}
+ */
+export function attach(tabElement) {
+  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
+  if (tabListElement) {
+    TabList.attach(tabListElement);
+  }
+
+  const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
+  if (tabContentElement) {
+    TabContent.attach(tabContentElement);
+  }
+
+  tabElement.addEventListener(TabContent.SCROLL_EVENT, onTabContentScroll,
+    getPassiveEventListenerOption());
+  tabElement.addEventListener(TabItem.SELECTED_CHANGE_EVENT, onTabItemSelectedChange,
+    getPassiveEventListenerOption());
+  tabElement.addEventListener(TabPanel.EXPANDED_CHANGE_EVENT, onTabPanelExpandedChange,
+    getPassiveEventListenerOption());
+
+  /** @type {ArrayLike<Element>} */
+  const items = (tabListElement && tabListElement.getElementsByClassName('mdw-tab__item')) || [];
+  /** @type {ArrayLike<Element>} */
+  const panels = (tabContentElement && tabContentElement.getElementsByClassName('mdw-tab__panel')) || [];
+
+  let selectedItem;
+  let selectedPanel;
+  let selectedIndex;
+  iterateSomeOfArrayLike(items, (itemElement, index) => {
+    if (itemElement.getAttribute('aria-selected') === 'true') {
+      selectedItem = itemElement;
+      selectedPanel = panels[index];
+      selectedIndex = index;
+      return true;
+    }
+    return false;
+  });
+  if (selectedIndex == null) {
+    iterateSomeOfArrayLike(panels, (panelElement, index) => {
+      if (panelElement.getAttribute('aria-expanded') === 'true') {
+        selectedPanel = panelElement;
+        selectedItem = items[index];
+        selectedIndex = index;
+        return true;
+      }
+      return false;
+    });
+  }
+  if (!selectedItem && items.length) {
+    selectedItem = items[0];
+    selectedIndex = 0;
+  }
+  if (!selectedPanel && panels.length) {
+    selectedPanel = panels[0];
+    selectedIndex = 0;
+  }
+  if (selectedItem) {
+    TabItem.setSelected(selectedItem, true);
+  }
+  if (selectedPanel) {
+    TabPanel.setHidden(selectedPanel, false);
+    TabPanel.setExpanded(selectedPanel, true);
+  }
+  if (selectedIndex != null) {
+    tabElement.setAttribute('mdw-selected-index', selectedIndex.toString());
+  }
+  onResize(tabElement);
+}
+
+/**
+ * @param {Element} tabElement
+ * @return {void}
+ */
+export function detach(tabElement) {
+  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
+  if (tabListElement) {
+    TabList.detach(tabListElement);
+  }
+
+  const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
+  if (tabContentElement) {
+    TabContent.detach(tabContentElement);
+  }
+
+  tabElement.removeEventListener(TabPanel.EXPANDED_CHANGE_EVENT, onTabPanelExpandedChange);
+  tabElement.removeEventListener(TabContent.SCROLL_EVENT, onTabContentScroll);
+  tabElement.removeEventListener(TabItem.SELECTED_CHANGE_EVENT, onTabItemSelectedChange);
+  tabElement.removeAttribute('mdw-resize-stage');
+  tabElement.removeAttribute('mdw-selected-index');
+}

package/components/tab/index.scss

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

package/components/tab/item.js

@@ -0,0 +1,89 @@
+// https://www.w3.org/TR/wai-aria-1.1/#tab
+
+import * as AriaTab from '../../core/aria/tab.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+export const SELECTED_CHANGE_EVENT = 'mdw:tabitem-selectedchange';
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
+ */
+export function setSelected(element, value, dispatchEvent = true) {
+  return AriaTab.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onClick(event) {
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  setSelected(element, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachAria(element) {
+  AriaTab.attach(element);
+  iterateArrayLike(element.getElementsByClassName('mdw-tab__icon'),
+    (el) => el.setAttribute('aria-hidden', 'true'));
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachCore(element) {
+  attachAria(element);
+  element.addEventListener('click', onClick);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.classList.add('mdw-overlay');
+  if (!element.hasAttribute('mdw-overlay-off')) {
+    element.setAttribute('mdw-overlay-off', 'selected activated');
+  }
+  if (!element.hasAttribute('mdw-overlay-default')) {
+    element.setAttribute('mdw-overlay-default', 'medium');
+  }
+  Overlay.attach(element);
+
+  element.classList.add('mdw-ripple');
+  Ripple.attach(element);
+
+  attachCore(element);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detachCore(element) {
+  AriaTab.detach(element);
+  element.removeEventListener('click', onClick);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  detachCore(element);
+  Ripple.detach(element);
+  Overlay.detach(element);
+}