@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/tab/index.js

@@ -1,241 +1,257 @@
-import { Ripple } from '../ripple/index';
-import { findElementParentByClassName, isRtl, nextTick } from '../common/dom';
+import {
+  dispatchDomEvent,
+} from '../../core/dom.js';
 
-class TabItem {
-  /**
-   * @param {Element} tabItemElement
-   * @return {void}
-   */
-  static attach(tabItemElement) {
-    Ripple.attach(tabItemElement);
-  }
-
-  /**
-   * @param {Element} tabItemElement
-   * @return {void}
-   */
-  static detach(tabItemElement) {
-    Ripple.detach(tabItemElement);
-  }
-}
-
-class Tab {
-  /**
-   * @param {Element} tabElement
-   * @return {void}
-   */
-  static attach(tabElement) {
-    const tabItemsElement = tabElement.getElementsByClassName('mdw-tab__items')[0];
-    let indicatorElement = tabItemsElement.getElementsByClassName('mdw-tab__indicator')[0];
-    if (!indicatorElement) {
-      indicatorElement = document.createElement('div');
-      indicatorElement.classList.add('mdw-tab__indicator');
-      tabItemsElement.appendChild(indicatorElement);
-    }
+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 tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
-    if (tabContentElement) {
-      tabContentElement.addEventListener('scroll', Tab.onTabContentScroll);
-    }
+const RESIZE_WAIT_FRAMES = 5;
 
-    const inputs = tabElement.getElementsByClassName('mdw-tab__input');
-    const items = tabElement.getElementsByClassName('mdw-tab__item');
+export const SELECTED_INDEX_CHANGE_EVENT = 'mdw:tab-selectedindexchange';
 
-    let foundChecked = false;
-    for (let i = 0; i < inputs.length; i += 1) {
-      const inputElement = inputs[i];
-      if (inputElement.checked) {
-        foundChecked = true;
-        Tab.onInputChanged({ currentTarget: inputElement });
-      }
-      inputElement.addEventListener('change', Tab.onInputChanged);
+/**
+ * @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;
     }
-    if (!foundChecked && inputs.length) {
-      inputs[0].checked = true;
-      Tab.onInputChanged({ currentTarget: inputs[0] });
+    const attrStage = tabElement.getAttribute('mdw-resize-stage');
+    if (attrStage !== stage.toString()) {
+      // Off-sync due to another resize event
+      return;
     }
-
-    let foundSelected = false;
-    for (let i = 0; i < items.length; i += 1) {
-      const itemElement = items[i];
-      TabItem.attach(itemElement);
-      if (itemElement.hasAttribute('mdw-selected')) {
-        foundSelected = true;
-        Tab.selectItem(itemElement);
+    stage += 1;
+    tabElement.setAttribute('mdw-resize-stage', stage.toString());
+    if (stage === RESIZE_WAIT_FRAMES) {
+      const tabContentElement = /** @type {HTMLElement} */ (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);
+        }
       }
-      itemElement.addEventListener('click', Tab.onItemClicked);
-    }
-    if (!foundSelected && items.length) {
-      Tab.selectItem(items[0]);
-    }
-  }
-
-  /**
-   * @param {Element} tabElement
-   * @return {void}
-   */
-  static detach(tabElement) {
-    const inputs = tabElement.getElementsByClassName('mdw-tab__input');
-    const items = tabElement.getElementsByClassName('mdw-tab__item');
-    const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
-    const tabContentItems = tabElement.getElementsByClassName('mdw-tab__content-item');
-
-    for (let i = 0; i < inputs.length; i += 1) {
-      const inputElement = inputs[i];
-      inputElement.removeEventListener('change', Tab.onInputChanged);
+    } else if (stage === RESIZE_WAIT_FRAMES * 2) {
+      const tabListElement = /** @type {HTMLElement} */ (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;
     }
 
-    for (let i = 0; i < items.length; i += 1) {
-      const itemElement = items[i];
-      TabItem.detach(itemElement);
-      itemElement.removeEventListener('click', Tab.onItemClicked);
-      itemElement.removeAttribute('mdw-selected');
-    }
+    requestAnimationFrame(performResize);
+  }
+  requestAnimationFrame(performResize);
+}
 
-    if (tabContentElement) {
-      tabContentElement.removeAttribute('mdw-selected-index');
-      tabContentElement.removeEventListener('scroll', Tab.onTabContentScroll);
-    }
-    for (let i = 0; i < tabContentItems.length; i += 1) {
-      const itemElement = tabContentItems[i];
-      itemElement.removeAttribute('mdw-selected');
-    }
+/**
+ * @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 {Event} event
-   * @return {void}
-   */
-  static onTabContentScroll(event) {
-    /** @type {HTMLElement} */
-    const tabContentElement = (event.currentTarget);
-    event.preventDefault();
-    event.stopPropagation();
-    tabContentElement.scrollLeft = 0;
-    nextTick(() => {
-      tabContentElement.scrollLeft = 0;
-    });
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onTabItemSelectedChange(event) {
+  if (event.detail.value !== 'true') {
+    return;
+  }
+  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const tabItemElement = /** @type {HTMLElement} */ (event.target);
+  const tabListElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__list')[0]);
+  if (!tabListElement) {
+    return;
   }
 
-  /**
-   * @param {Event} event
-   * @return {void}
-   */
-  static onItemClicked(event) {
-    /** @type {HTMLElement} */
-    const itemElement = (event.currentTarget);
-    if (!itemElement) {
+  const tabContentElement = /** @type {HTMLElement} */ (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;
     }
-    if (itemElement instanceof HTMLLabelElement) {
-      // Fixes ripple animation
-      const inputElement = document.getElementById(itemElement.getAttribute('for'));
-      if (inputElement && inputElement instanceof HTMLInputElement) {
-        inputElement.checked = true;
-      }
-    }
+    TabContent.selectPanel(tabContentElement, tabItemIndex, true);
+  }
+  TabList.setIndicatorPosition(tabListElement, tabItemElement, 0, true);
+  if (!tabContentElement) {
+    updateSelectedIndex(tabElement, tabItemIndex);
+  }
+}
 
-    Tab.selectItem(itemElement);
-    const tabItemsElement = findElementParentByClassName(itemElement, 'mdw-tab__items', false);
-    if (tabItemsElement && tabItemsElement.hasAttribute('mdw-scrollable')) {
-      itemElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
-    }
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onTabContentScroll(event) {
+  const tabElement = /** @type {HTMLElement} */ (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;
+  }
+  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
+  if (tabElement.hasAttribute('mdw-resize-stage')) {
+    return;
+  }
+  let index = 0;
+  const tabPanelElement = /** @type {HTMLElement} */ (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);
   }
+}
 
-  static onInputChanged(event) {
-    const inputElement = event.currentTarget;
-    if (!inputElement.id) {
-      return;
-    }
-    const itemElement = document.querySelector(`label.mdw-tab__item[for="${inputElement.id}"]`);
-    if (itemElement) {
-      Tab.selectItem(itemElement);
-    }
+/**
+ * @param {Element} tabElement
+ * @return {void}
+ */
+export function attach(tabElement) {
+  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
+  if (tabListElement) {
+    TabList.attach(tabListElement);
   }
 
-  /**
-   * @param {Element} itemElement
-   * @return {void}
-   */
-  static selectItem(itemElement) {
-    const tabElement = findElementParentByClassName(itemElement, 'mdw-tab');
-    if (!tabElement) {
-      return;
-    }
-    const tabItemsElement = findElementParentByClassName(itemElement, 'mdw-tab__items');
-    if (!tabItemsElement) {
-      return;
-    }
-    const tabItems = tabItemsElement.getElementsByClassName('mdw-tab__item');
-    const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
-    let foundPreviousSelection = false;
-    let foundTarget = false;
-    let left = 0;
-    let contentItems = null;
-    if (tabContentElement) {
-      contentItems = tabContentElement.getElementsByClassName('mdw-tab__content-item');
-    }
-    const isRtlValue = isRtl();
-    for (let i = 0; i < tabItems.length; i += 1) {
-      const index = isRtlValue ? tabItems.length - 1 - i : i;
-      const tabItem = tabItems.item(index);
-      const contentItem = contentItems && contentItems.item(index);
-      if (tabItem === itemElement) {
-        foundTarget = true;
-        itemElement.setAttribute('mdw-selected', '');
-        if (tabContentElement) {
-          tabContentElement.setAttribute('mdw-selected-index', index.toString());
-        }
-        if (contentItem) {
-          contentItem.setAttribute('mdw-selected', '');
-        }
-      } else {
-        if (tabItem.hasAttribute('mdw-selected')) {
-          foundPreviousSelection = true;
-          tabItem.removeAttribute('mdw-selected');
-        }
-        if (contentItem && contentItem.hasAttribute('mdw-selected')) {
-          contentItem.removeAttribute('mdw-selected');
-        }
-      }
+  const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
+  if (tabContentElement) {
+    TabContent.attach(tabContentElement);
+  }
 
-      if (!foundTarget) {
-        left += tabItem.clientWidth;
-      }
-      if (foundTarget && foundPreviousSelection) {
-        break;
-      }
-    }
+  tabElement.addEventListener(
+    TabContent.SCROLL_EVENT,
+    onTabContentScroll,
+    { passive: true },
+  );
+  tabElement.addEventListener(
+    TabItem.SELECTED_CHANGE_EVENT,
+    onTabItemSelectedChange,
+    { passive: true },
+  );
+  tabElement.addEventListener(
+    TabPanel.EXPANDED_CHANGE_EVENT,
+    onTabPanelExpandedChange,
+    { passive: true },
+  );
 
-    if (tabContentElement) {
-      tabContentElement.scrollLeft = 0;
-      nextTick(() => {
-        tabContentElement.scrollLeft = 0;
-      });
-    }
+  /** @type {HTMLCollectionOf<Element>|Element[]} */
+  const items = (tabListElement && tabListElement.getElementsByClassName('mdw-tab__item')) || [];
+  /** @type {HTMLCollectionOf<Element>|Element[]} */
+  const panels = (tabContentElement && tabContentElement.getElementsByClassName('mdw-tab__panel')) || [];
 
-    /** @type {HTMLElement} */
-    const indicatorElement = (tabItemsElement.getElementsByClassName('mdw-tab__indicator')[0]);
-    // Animate selection
-    // Only use explicity positioning on scrollable tabs
-    const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
-    if (!isIE11
-      && (!tabItemsElement.hasAttribute('mdw-scrollable') || !tabItemsElement.clientWidth)) {
-      // use CSS styling fallback
-      indicatorElement.style.removeProperty('transform');
-      indicatorElement.removeAttribute('mdw-js-indicator');
-      // this.onItemSelected(itemElement);
-      return;
-    }
-    const width = itemElement.clientWidth;
-    if (!indicatorElement.hasAttribute('mdw-js-indicator')) {
-      indicatorElement.setAttribute('mdw-js-indicator', '');
+  let selectedItem;
+  let selectedPanel;
+  let selectedIndex;
+  [...items].some((itemElement, index) => {
+    if (itemElement.getAttribute('aria-selected') === 'true') {
+      selectedItem = itemElement;
+      selectedPanel = panels[index];
+      selectedIndex = index;
+      return true;
     }
-    indicatorElement.style.setProperty('transform', `translateX(${left}px) scaleX(${width})`);
+    return false;
+  });
+  if (selectedIndex == null) {
+    [...panels].some((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);
 }
 
-export {
-  Tab,
-  TabItem,
-};
+/**
+ * @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,88 @@
+// https://www.w3.org/TR/wai-aria-1.1/#tab
+
+import * as AriaTab from '../../core/aria/tab.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) {
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  setSelected(element, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachAria(element) {
+  AriaTab.attach(element);
+  for (const el of element.getElementsByClassName('mdw-tab__icon')) {
+    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);
+}