@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/tab/index.js

@@ -1,100 +1,18 @@
 import {
-  iterateArrayLike,
-  nextTick,
+  dispatchDomEvent,
   getPassiveEventListenerOption,
-} from '../../core/dom';
+  iterateSomeOfArrayLike,
+  nextTick,
+} from '../../core/dom.js';
 
-import * as TabContent from './content';
-import * as TabList from './list';
-import * as TabItem from './item';
+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;
 
-/**
- * @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(TabList.SELECTION_CHANGED_EVENT, onTabListSelectionChanged, getPassiveEventListenerOption());
-
-  const items = tabElement.getElementsByClassName('mdw-tab__item');
-
-  let selectedItem;
-  iterateArrayLike(items, (itemElement) => {
-    if (itemElement.getAttribute('aria-selected') === 'true') {
-      selectedItem = itemElement;
-    }
-  });
-  if (!selectedItem && items.length) {
-    selectedItem = items[0];
-  }
-  if (selectedItem) {
-    TabItem.selectTabItem(selectedItem, true, true);
-    onResize(tabElement);
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-export function onTabListSelectionChanged(event) {
-  /** @type {HTMLElement} */
-  const tabElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const tabItemElement = (event.target);
-  /** @type {HTMLElement} */
-  const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);
-  if (tabContentElement) {
-    let index = 0;
-    let previous = tabItemElement.previousElementSibling;
-    while (previous) {
-      previous = previous.previousElementSibling;
-      index += 1;
-    }
-    if (!tabContentElement.hasAttribute('mdw-no-scroll')) {
-      TabContent.selectPanel(tabContentElement, index, 'smooth');
-      return;
-    }
-    TabContent.selectPanel(tabContentElement, index, true);
-  }
-
-  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
-  if (tabListElement) {
-    TabList.setIndicatorPosition(tabListElement, tabItemElement, 0, true);
-  }
-}
-
-/**
- * @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(TabContent.SCROLL_EVENT, onTabContentScroll);
-  tabElement.removeEventListener(TabList.SELECTION_CHANGED_EVENT, onTabListSelectionChanged);
-  tabElement.removeAttribute('mdw-resize-stage');
-}
+export const SELECTED_INDEX_CHANGE_EVENT = 'mdw:tab-selectedindexchange';
 
 /**
  * @param {Element} tabElement
@@ -119,7 +37,7 @@ export function onResize(tabElement) {
     if (stage === RESIZE_WAIT_FRAMES) {
       /** @type {HTMLElement} */
       const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);
-      if (tabContentElement && !tabContentElement.hasAttribute('mdw-no-scroll')) {
+      if (tabContentElement) {
         /** @type {HTMLElement} */
         const relatedPanel = (tabContentElement.querySelector('.mdw-tab__panel[aria-expanded="true"]'));
         if (relatedPanel) {
@@ -146,22 +64,197 @@ export function onResize(tabElement) {
 }
 
 /**
- * @param {Event} event
+ * @param {HTMLElement} tabElement
+ * @param {number} index
  * @return {void}
  */
-export function onTabContentScroll(event) {
+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);
-  if (tabElement.hasAttribute('mdw-resize-stage')) {
+  /** @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) {
+  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;
   }
-  TabList.setIndicatorPosition(tabListElement, detail.leftPanelIndex, detail.visibilityPercentage);
-  if (detail.newSelectedIndex != null) {
-    TabList.selectItemAtIndex(tabListElement, detail.newSelectedIndex, true);
+  /** @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

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

package/components/tab/item.js

@@ -1,64 +1,43 @@
 // https://www.w3.org/TR/wai-aria-1.1/#tab
 
-import * as AriaTab from '../../core/aria/tab';
-import { iterateArrayLike, iterateElementSiblings } from '../../core/dom';
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-import { setSelected } from '../../core/aria/attributes';
+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
- * @return {void}
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
  */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  if (!element.hasAttribute('mdw-overlay-off')) {
-    element.setAttribute('mdw-overlay-off', 'selected');
-  }
-  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);
+export function setSelected(element, value, dispatchEvent = true) {
+  return AriaTab.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
 }
 
 /**
- * @param {Element} tabItemElement
- * @param {boolean} [deselectSiblings=true]
- * @param {boolean} [dispatchEvents=false]
+ * @param {MouseEvent} event
  * @return {void}
  */
-export function selectTabItem(tabItemElement, deselectSiblings = true, dispatchEvents = false) {
-  setSelected(tabItemElement, 'true', dispatchEvents);
-  if (deselectSiblings) {
-    deselectTabItemSiblings(tabItemElement, dispatchEvents);
+function onClick(event) {
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return;
   }
+  setSelected(element, true);
 }
 
 /**
- * @param {Element} tabItemElement
- * @param {boolean} [dispatchEvent=false]
- * @return {void}
- */
-export function deselectTabItem(tabItemElement, dispatchEvent) {
-  setSelected(tabItemElement, 'false', dispatchEvent);
-}
-
-/**
- * @param {Element} selectedTabItemElement
- * @param {boolean} [dispatchEvents=false]
+ * @param {Element} element
  * @return {void}
  */
-export function deselectTabItemSiblings(selectedTabItemElement, dispatchEvents = false) {
-  iterateElementSiblings(selectedTabItemElement, (sibling) => {
-    if (sibling.classList.contains('mdw-tab__item')) {
-      setSelected(sibling, 'false', dispatchEvents);
-    }
-  });
+export function attachAria(element) {
+  AriaTab.attach(element);
+  iterateArrayLike(element.getElementsByClassName('mdw-tab__icon'),
+    (el) => el.setAttribute('aria-hidden', 'true'));
 }
 
 /**
@@ -67,24 +46,27 @@ export function deselectTabItemSiblings(selectedTabItemElement, dispatchEvents =
  */
 export function attachCore(element) {
   attachAria(element);
+  element.addEventListener('click', onClick);
 }
 
 /**
  * @param {Element} element
  * @return {void}
  */
-export function attachAria(element) {
-  AriaTab.attach(element);
-  iterateArrayLike(element.getElementsByClassName('mdw-tab__icon'),
-    el => el.setAttribute('aria-hidden', 'true'));
-}
+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);
 
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detachAria(element) {
-  AriaTab.attach(element);
+  element.classList.add('mdw-ripple');
+  Ripple.attach(element);
+
+  attachCore(element);
 }
 
 /**
@@ -93,6 +75,7 @@ export function detachAria(element) {
  */
 export function detachCore(element) {
   AriaTab.detach(element);
+  element.removeEventListener('click', onClick);
 }
 
 /**