@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/tab/content.js

@@ -1,205 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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

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

package/components/tab/item.js

@@ -1,89 +0,0 @@
-// 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);
-}