@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/menu/style.scss

@@ -1,280 +0,0 @@
-// https://material.io/guidelines/components/menus.html
-
-@import '../ripple/ripple.scss';
-@import '../common/variables.scss';
-@import '../common/type.scss';
-
-$menu__unit-width: dp(56);
-
-.mdw-menu__wrapper {
-  position: relative;
-  display: inline-flex;
-}
-.mdw-menu__close {
-  visibility: hidden;
-  pointer-events: inherit;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 8;
-  // z-index: -1; // Safari has a negative z-index bug
-  cursor: default;
-}
-
-.mdw-menu {
-  position: absolute;
-  display: inline-flex;
-  &[mdw-show]:not([mdw-hide]),
-  &[id]:target:not([mdw-hide]) {
-    .mdw-menu__close {
-      visibility: visible;
-    }
-    .mdw-menu__popup {
-      pointer-events: auto;
-      transition-timing-function: $motion-easing-acceleration;
-      transition-duration: $motion-duration-desktop-enter;
-      @include allHandsets {
-        transition-duration: $motion-duration-mobile-enter;
-      }
-      @include allTablets {
-        transition-duration: $motion-duration-tablet-enter;
-      }
-      transform: scale(1);
-      opacity: 1;
-      box-shadow: elevation(8);
-    }
-  }
-
-  // Default position is bottom
-  // Default direction is start
-
-  top: 100%;
-  bottom: auto;
-  left: 0;
-  right: auto;
-  transform-origin: left top;
-  html[dir=rtl] & {
-    left: auto;
-    right: 0;
-    transform-origin: right top;
-  }
-
-  &[mdw-position~="top"] {
-    top: 0;
-  }
-  &[mdw-position~="vcenter"] {
-    top: 50%;
-  }
-  &[mdw-position~="hcenter"] {
-    left: 50%;
-  }
-  &[mdw-position~="right"],
-  &[mdw-position~="end"] {
-    left: 100%;
-    right: auto;
-    html[dir=rtl] & {
-      left: auto;
-      right: 100%;
-    }
-  }
-
-  &[mdw-direction~="reverse"],
-  &[mdw-direction~="rtl"] {
-    left: auto;
-    right: 100%;
-    transform-origin: right top;
-    html[dir=rtl] & {
-      left: 100%;
-      right: auto;
-      transform-origin: left top;
-    }
-    &[mdw-position~="right"],
-    &[mdw-position~="end"] {
-      left: auto;
-      right: 0;
-      html[dir=rtl] & {
-        left: 0;
-        right: auto;
-      }
-    }
-  }
-  &[mdw-direction~="up"] {
-    top: auto;
-    bottom: 0;
-    transform-origin: left bottom;
-    html[dir=rtl] & {
-      transform-origin: right bottom;
-    }
-
-    &[mdw-position~="top"] {
-      bottom: 100%;
-    }
-    &[mdw-position~="vcenter"] {
-      bottom: 50%;
-    }
-    &[mdw-direction~="reverse"],
-    &[mdw-direction~="rtl"] {
-      transform-origin: right bottom;
-      html[dir=rtl] & {
-        transform-origin: left bottom;
-      }
-    }
-  }
-
-  @for $i from 3 to 8 {
-    &[mdw-width-units="#{$i}"] {
-      .mdw-menu__popup {
-        width: calc(#{$menu__unit-width} * #{$i});
-      }
-    }
-  }
-}
-
-.mdw-menu__popup {
-  z-index: 8;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  transition-property: transform, box-shadow, opacity;
-  transition-timing-function: $motion-easing-deceleration;
-  transition-duration: $motion-duration-desktop-leave;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-leave;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-leave;
-  }
-  
-  top: inherit;
-  left: inherit;
-  bottom: inherit;
-  right: inherit;
-  transform-origin: inherit;
-  transform: scale(0);
-  box-shadow: elevation(0);
-  opacity: 0;
-  margin-left: dp(8);
-  margin-right: dp(8);
-  padding-top: dp(8);
-  padding-bottom: dp(8);
-  border-radius: dp(4);
-  min-width: $menu__unit-width * 2;
-  max-width: $menu__unit-width * 7;
-  outline: none;
-  overflow-y: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  max-height: 50vh;
-}
-
-.mdw-menu__text {
-  white-space: nowrap;
-  flex: auto;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-.mdw-menu__icon,
-.mdw-menu__check {
-  min-width: dp(40);
-}
-
-.mdw-menu__check {
-  visibility: hidden;
-  .mdw-menu__item[mdw-checked] & {
-    visibility: visible;
-  }
-}
-
-.mdw-menu__divider {
-  height: dp(1);
-  margin-top: dp(7);
-  margin-bottom: dp(8);
-}
-
-.mdw-menu__item {
-  @include type-rules('body');
-  display: flex;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-
-
-  min-height: dp(48);
-  padding-left: dp(16);
-  padding-right: dp(16);
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  box-sizing: border-box;
-  flex-direction: row;
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  outline: none;
-
-  &[disabled] {
-    cursor: not-allowed;
-    & > .mdw-ripple,
-    &::after {
-      display: none;
-    }
-  }
-  & > .mdw-ripple {
-    @include mdw-ripple__container;
-  }
-
-  & > .mdw-ripple > .mdw-ripple__inner,
-  &::after {
-    @include mdw-ripple__inner;
-  }
-
-  & > .mdw-ripple:active > .mdw-ripple__inner,
-  &:active::after {
-    @include mdw-ripple__active;
-  }
-
-  &[mdw-ripple] {
-    overflow: visible;
-    &::after {
-      // If using custom ripple, destroy ::after object
-      content: none;
-    }
-  }
-}
-
-// Density based on dropdown, explicit attr, or no coarse pointer
-.mdw-menu[mdw-dense]:not([mdw-dense="never"]),
-.mdw-menu[mdw-dropdown] {
-  .mdw-menu__item {
-    min-height: dp(32);
-    padding-left: dp(24);
-    padding-right: dp(24);
-  }
-}
-@media not all and (any-pointer: coarse) {
-  .mdw-menu:not([mdw-dense="never"]) {
-    .mdw-menu__item {
-      min-height: dp(32);
-      padding-left: dp(24);
-      padding-right: dp(24);
-    }
-  }
-}
-
-.mdw-menu__info {
-  text-align: right;
-  text-align: end;
-  padding-left: dp(16);
-  padding-right: 0;
-  html[dir=rtl] & {
-    text-align: left;
-    text-align: end;
-    padding-left: 0;
-    padding-right: dp(16);
-  }
-}

package/components/menu/theming.scss

@@ -1,80 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$menuColors: (
-  text-color:       ((#000,              0.87), (#fff,              1.00)),
-  secondary-color:  ((#000,              0.54), (#fff,              0.70)),
-  background-color: ((#fff,              1.00), ('background', '800', 1.00)),
-  selected-color:   (('background', '100', 1.00), ('background', '700', 1.00)),
-  hover-color:      (('background', '200', 1.00), ('background', '600', 1.00)),
-  press-color:      ((#999,              0.40), (#CCC,              0.25)),
-  ripple-color:     ( #000                    ,  #fff                    ),
-  ripple-opacity:   (                      0.12 ,                       0.30,   0.20),
-  divider-color:    ((#000,              0.12), (#fff,              0.12)),
-  disabled-color:   ((#000,              0.26), (#fff,              0.30)),
-);
-
-@function menuThemeValue($key, $type, $theme) {
-  @return themeValue('menu', $menuColors, $key, $type, $theme);
-}
-
-@mixin menuThemeVariables($color, $lightness) {
-  @include themeVariables('menu', $menuColors, $color, $lightness);
-}
-
-@mixin internalMenuContrastRules($type: 'var', $theme: null) {
-  @at-root {
-    #{&}.mdw-menu {
-      &:not([mdw-js]) {
-        .mdw-menu__popup {
-          & > .mdw-menu__text,
-          .mdw-menu__item {
-            &:hover {
-              background-color: menuThemeValue("hover-color", $type, $theme);
-            }
-          }
-        }
-      }
-      .mdw-menu__popup {
-        background-color: menuThemeValue("background-color", $type, $theme);
-        & > .mdw-menu__text,
-        .mdw-menu__item {
-          color: menuThemeValue("text-color", $type, $theme);
-          &:focus,
-          &[mdw-selected] {
-            background-color: menuThemeValue("hover-color", $type, $theme);
-          }
-          &[disabled] {
-            color: menuThemeValue("disabled-color", $type, $theme);
-            & > .mdw-menu__icon,
-            & > .mdw-menu__check {
-              color: inherit;
-            }
-          }
-          & > .mdw-ripple > .mdw-ripple__inner,
-          &:after {
-            color: buttonThemeValue("ripple-color", $type, $theme);
-            opacity: buttonThemeValue("ripple-opacity", $type, $theme);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Vary by contrast or theme
-@mixin menuContrastRules($type: 'var', $theme: null) {
-  @include internalMenuContrastRules($type, $theme);
-  @if ($type != 'var') {
-    :not([mdw-theme-fill]) {
-      @include internalMenuContrastRules($type, $theme);
-    }
-  }
-  .mdw-menu__icon,
-  .mdw-menu__check {
-    color: menuThemeValue("secondary-color", $type, $theme);
-  }
-  .mdw-menu__divider {
-    background-color: menuThemeValue("divider-color", $type, $theme);
-  }
-}

package/components/navdrawer/index.js

@@ -1,200 +0,0 @@
-import { getChildElementByClass, findElementParentByClassName, dispatchDomEvent } from '../common/dom';
-
-class NavDrawerStack {
-  /**
-   * @param {Element} element
-   * @param {Object=} state
-   * @param {Object=} previousState
-   */
-  constructor(element, state, previousState) {
-    this.element = element;
-    this.state = state;
-    this.previousState = previousState;
-  }
-}
-
-/** @type {NavDrawerStack[]} */
-const OPEN_NAV_DRAWERS = [];
-class NavDrawer {
-  /**
-   * @param {Element} navDrawerElement
-   * @return {void}
-   */
-  static attach(navDrawerElement) {
-    let scrim = getChildElementByClass(navDrawerElement, 'mdw-navdrawer__scrim');
-    const openButton = navDrawerElement.getElementsByClassName('mdw-navdrawer__open')[0];
-    const closeButton = navDrawerElement.getElementsByClassName('mdw-navdrawer__close')[0];
-    const toggleButton = navDrawerElement.getElementsByClassName('mdw-navdrawer__toggle')[0];
-    if (!scrim) {
-      scrim = document.createElement('div');
-      scrim.classList.add('mdw-navdrawer__scrim');
-      navDrawerElement.insertBefore(scrim, navDrawerElement.firstChild);
-    }
-    if (openButton) {
-      openButton.addEventListener('click', NavDrawer.onOpenButtonClick);
-    }
-    if (closeButton) {
-      closeButton.addEventListener('click', NavDrawer.onCloseButtonClick);
-    }
-    if (toggleButton) {
-      toggleButton.addEventListener('click', NavDrawer.onToggleButtonClick);
-    }
-
-    scrim.addEventListener('click', NavDrawer.onScrimClick);
-    navDrawerElement.setAttribute('mdw-js', '');
-  }
-
-  static detach(navDrawerElement) {
-    const scrim = getChildElementByClass(navDrawerElement, 'mdw-navdrawer__scrim');
-    const openButton = navDrawerElement.getElementsByClassName('mdw-navdrawer__open')[0];
-    const closeButton = navDrawerElement.getElementsByClassName('mdw-navdrawer__close')[0];
-    const toggleButton = navDrawerElement.getElementsByClassName('mdw-navdrawer__toggle')[0];
-    if (scrim) {
-      scrim.removeEventListener('click', NavDrawer.onScrimClick);
-    }
-    if (openButton) {
-      openButton.removeEventListener('click', NavDrawer.onOpenButtonClick);
-    }
-    if (closeButton) {
-      closeButton.removeEventListener('click', NavDrawer.onCloseButtonClick);
-    }
-    if (toggleButton) {
-      toggleButton.removeEventListener('click', NavDrawer.onToggleButtonClick);
-    }
-    navDrawerElement.removeAttribute('mdw-js');
-    navDrawerElement.removeAttribute('mdw-show');
-    navDrawerElement.removeAttribute('mdw-hide');
-  }
-
-  static onScrimClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    const navdrawerElement = findElementParentByClassName(event.currentTarget, 'mdw-navdrawer');
-    NavDrawer.close(navdrawerElement);
-  }
-
-  static onOpenButtonClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    const navdrawerElement = findElementParentByClassName(event.currentTarget, 'mdw-navdrawer');
-    NavDrawer.open(navdrawerElement);
-  }
-
-  static onCloseButtonClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    const navdrawerElement = findElementParentByClassName(event.currentTarget, 'mdw-navdrawer');
-    NavDrawer.close(navdrawerElement);
-  }
-
-  static onToggleButtonClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    const navdrawerElement = findElementParentByClassName(event.currentTarget, 'mdw-navdrawer');
-    if (NavDrawer.open(navdrawerElement)) {
-      return;
-    }
-    NavDrawer.close(navdrawerElement);
-  }
-
-  /**
-   * @param {PopStateEvent} event
-   * @return {void}
-   */
-  static onPopState(event) {
-    if (!event.state) {
-      return;
-    }
-    const lastOpenNavDrawer = OPEN_NAV_DRAWERS[OPEN_NAV_DRAWERS.length - 1];
-    if (!lastOpenNavDrawer || !lastOpenNavDrawer.previousState) {
-      return;
-    }
-    if ((lastOpenNavDrawer.previousState === event.state) || Object.keys(event.state)
-      .every(key => event.state[key] === lastOpenNavDrawer.previousState[key])) {
-      NavDrawer.close(lastOpenNavDrawer.element);
-    }
-  }
-
-  /**
-   * @param {Element} navDrawerElement
-   * @return {boolean} handled
-   */
-  static close(navDrawerElement) {
-    if (!navDrawerElement.hasAttribute('mdw-hide')) {
-      navDrawerElement.setAttribute('mdw-hide', '');
-      let stackIndex = -1;
-      OPEN_NAV_DRAWERS.some((stack, index) => {
-        if (stack.element === navDrawerElement) {
-          stackIndex = index;
-          return true;
-        }
-        return false;
-      });
-      if (stackIndex !== -1) {
-        const stack = OPEN_NAV_DRAWERS[stackIndex];
-        OPEN_NAV_DRAWERS.splice(stackIndex, 1);
-        if (stack.state && window.history && window.history.state) {
-          // IE11 returns a cloned state object, not the original
-          if (stack.state.hash === window.history.state.hash) {
-            window.history.back();
-          }
-        }
-      }
-      if (!OPEN_NAV_DRAWERS.length) {
-        window.removeEventListener('popstate', NavDrawer.onPopState);
-      }
-      dispatchDomEvent(navDrawerElement, 'mdw:close');
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * @param {Element} navDrawerElement
-   * @param {MouseEvent=} event
-   * @return {boolean} handled
-   */
-  static open(navDrawerElement, event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      // Prevent anchor link
-      event.preventDefault();
-    }
-    let changed = false;
-    if (navDrawerElement.hasAttribute('mdw-hide')) {
-      navDrawerElement.removeAttribute('mdw-hide');
-      changed = true;
-    }
-    if (!navDrawerElement.hasAttribute('mdw-show')) {
-      navDrawerElement.setAttribute('mdw-show', '');
-      changed = true;
-    }
-    if (changed) {
-      NavDrawer.attach(navDrawerElement);
-      const newState = { hash: Math.random().toString(36).substr(2, 16) };
-      let previousState = null;
-      if (window.history && window.history.pushState) {
-        if (!window.history.state) {
-          // Create new previous state
-          window.history.replaceState({
-            hash: Math.random().toString(36).substr(2, 16),
-          }, document.title);
-        }
-        previousState = window.history.state;
-        window.history.pushState(newState, document.title);
-        window.addEventListener('popstate', NavDrawer.onPopState);
-      }
-      const navDrawerStack = new NavDrawerStack(navDrawerElement, newState, previousState);
-      OPEN_NAV_DRAWERS.push(navDrawerStack);
-      dispatchDomEvent(navDrawerElement, 'mdw:open');
-    }
-    return changed;
-  }
-}
-
-export {
-  NavDrawer,
-};