@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/core/list/index.js

@@ -1,94 +0,0 @@
-class List {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-  }
-
-  detach() {
-    this.element = null;
-  }
-
-  /**
-   * Clear and detach all children
-   * @param {WeakMap=} elementMap
-   * @return {void}
-   */
-  clear(elementMap) {
-    const el = this.element;
-    if (!el) {
-      return;
-    }
-    while (el.firstChild) {
-      if (elementMap && elementMap.has(el.firstChild)) {
-        elementMap.get(el.firstChild).detach();
-        elementMap.delete(el.firstChild);
-      }
-      el.removeChild(el.firstChild);
-    }
-  }
-}
-
-class ListItem {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-    const rippleElements = element.getElementsByClassName('mdw-ripple');
-    this.ripple = rippleElements && rippleElements[0];
-    if (!this.ripple) {
-      const ripple = document.createElement('div');
-      ripple.classList.add('mdw-ripple');
-      this.element.insertBefore(ripple, this.element.firstChild);
-      this.ripple = ripple;
-    }
-    const innerRippleElements = this.ripple.getElementsByClassName('mdw-ripple__inner');
-    this.rippleInner = innerRippleElements && innerRippleElements[0];
-    if (!this.rippleInner) {
-      const rippleInner = document.createElement('div');
-      rippleInner.classList.add('mdw-ripple__inner');
-      this.ripple.appendChild(rippleInner);
-      this.rippleInner = rippleInner;
-    }
-    this.element.setAttribute('mdw-ripple', '');
-    this.element.addEventListener('click', (event) => {
-      this.updateRipplePosition(event);
-    });
-  }
-
-  /**
-   * @param {MouseEvent|PointerEvent} event
-   * @return {void}
-   */
-  updateRipplePosition(event) {
-    if (event.target !== this.element && event.target !== this.ripple) {
-      return;
-    }
-    if (!event.pointerType && !event.detail) {
-      // Ripple from center
-      this.rippleInner.style.removeProperty('left');
-      this.rippleInner.style.removeProperty('top');
-      return;
-    }
-    const x = event.offsetX;
-    const y = event.offsetY;
-    this.rippleInner.style.setProperty('left', `${x}px`);
-    this.rippleInner.style.setProperty('top', `${y}px`);
-  }
-
-  /**
-   * Destroys all HTML Element references for garbage collection
-   * @return {void}
-   */
-  detach() {
-    this.ripple = null;
-    this.element = null;
-  }
-}
-
-export {
-  List,
-  ListItem,
-};

package/components/core/list/style.scss

@@ -1,269 +0,0 @@
-// https://material.io/guidelines/components/lists.html
-// https://material.io/guidelines/components/lists-controls.html
-
-@import '../../common/variables.scss';
-
-$list__divider-height: dp(1);
-
-// single     = 48dp
-// two-line   = 72dp
-// three-line = 88dp
-// 2x + y = 72 
-// 3x + y = 88
-// x = 32, y = 8 or x = 40, y = 16
-// item-height: 32px or 40px
-// base-height: 8px or 16px
-
-.mdw-list {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  min-width: 100%;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-.mdw-list__divider {
-  min-width: 100%;
-  border-top-style: solid;
-  border-top-width: 1px;
-  height: 0;
-}
-
-.mdw-list__subheader {
-  display: flex;
-  flex-direction: row;
-  min-height: dp(48);
-  align-items: center;
-  justify-content: stretch;
-  padding-left: dp(16);
-  padding-right: dp(16);
-  // color: var(--secondary-text-color);
-  font-size: sp(14);
-  font-weight: $font-weight-medium;
-  &:first-child {
-    margin-top: -8px;
-  }
-}
-.mdw-list__item {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  min-height: dp(48);
-  align-items: center;
-  justify-content: stretch;
-  margin: 0;
-  padding: 0 dp(16);
-  text-transform: none;
-  text-decoration: none;
-  // color: var(--primary-text-color);
-  font-weight: $font-weight-regular;
-  font-size: sp(16);
-
-  text-align: start;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden; // Contain ripple
-  z-index: 0;
-  outline: none;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  &[hidden] {
-    display: none;
-  }
-}
-
-.mdw-list__avatar,
-.mdw-list__icon {
-  display: flex;
-  flex-direction: row;
-  order: -1;
-  min-width: dp(72 - 16);
-  max-width: dp(72 - 16);
-  align-self: flex-start;
-  justify-content: flex-start;
-  margin-top: dp(16); // min-height - 24px / 2
-  &.material-icons {
-    // 2px from material-icon inset padding
-    // margin-top: calc(16px - (2em / 24));
-    // margin-left: calc(0 - (2em / 24));
-  }
-  
-}
-
-.mdw-list__avatar {
-  min-height: dp(56);
-}
-
-.mdw-list__secondary {
-  z-index: 1;
-  order: 1;
-  min-width: dp(24 + 16);
-  min-height: dp(56);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.mdw-list__icon,
-.mdw-list__secondary {
-  @include IEOnly() {
-    // Fix IE min-height flexbug
-    &::after {
-      content: '';
-      min-height: inherit;
-      width: 0;
-    }
-  }
-}
-
-.mdw-list__text {
-  position: static;
-  pointer-events: none;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: space-between;
-  &,
-  & > span {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-  }
-  [mdw-divider] > .mdw-list__item:not(:last-child) &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: $list__divider-height;
-    // background-color: var(--divider-color);
-  }
-  
-  [mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__avatar ~ &::after,
-  [mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__icon ~ &::after {
-    margin-left: dp(72);
-  }
-}
-
-.mdw-list__text-line {
-  overflow-y: hidden;
-  &,
-  & > span {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-  }
-  &:not(:first-child) {
-    font-size: sp(14);
-    line-height: sp(16);
-    min-height: sp(16);
-  }
-  &:only-child {
-    // only of its type
-    margin: 0;
-  }
-  &:first-child {
-    line-height: sp(24);
-  }
-  &:last-child {
-    margin-bottom: dp(16);
-  }
-  &:first-child:not(:only-child) {
-    margin-top: dp(16);
-  }
-  &:last-child:not(:only-child) {
-    // color: var(--primary-text-color);
-    &:nth-child(3) {
-      // color: var(--secondary-text-color);
-      line-height: 1.5rem;
-      margin-bottom: sp(14);
-    }
-  }
-
-  .mdw-list[mdw-rows="3"] & {
-    &:first-child {
-      margin-top: dp(10);
-    }
-  }
-  
-}
-
-.mdw-list__text-line > span,
-.mdw-list__text-block > span {
-  color: var(--secondary-text-color);
-}
-
-.mdw-list__text-block {
-  pointer-events: none;
-  font-size: sp(14);
-  font-weight: normal;
-  text-transform: none;
-  text-align: start;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  white-space: normal;
-  &:first-of-type {
-    font-size: sp(16);
-  }
-  display: block;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  margin-bottom: sp(14);
-  line-height: sp(20);
-  height: sp(20*2);
-  max-height: sp(20*2);
-}
-
-.mdw-list__item > .mdw-ripple {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.mdw-list__item {
-  // Long press color
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    transition-property: background-color;
-    transition-duration: 500ms;
-    transition-delay: 5ms;
-    transition-timing-function: $motion-easing-standard;
-    pointer-events: 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-y: visible;
-    &::after {
-      // If using custom ripple, destroy ::after object
-      content: none;
-    }
-  }
-}

package/components/core/list/theming.scss

@@ -1,74 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$listColors: (
-  text-color:           ((#000, 0.87), (#fff, 1.00)),
-  secondary-text-color: ((#000, 0.54), (#fff, 0.70)),
-  divider-color:        ((#000, 0.12), (#fff, 0.12)),
-  press-color:          ((#999, 0.40), (#CCC, 0.25)),
-  selected-color:       ((#999, 0.40), (#CCC, 0.25)),
-  ripple-color:         ( #000       ,  #fff       ),
-  ripple-opacity:       (         0.12 ,          0.30,           0.20),
-);
-
-@function listThemeValue($key, $type) {
-  @return themeValue('list', $listColors, $key, $type);
-}
-
-@mixin listThemeVariables($color, $lightness) {
-  @include themeVariables('list', $listColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin listContrastRules($type: 'var', $theme: null) {
-  .mdw-list__subheader {
-    color: listThemeValue("secondary-text-color", $type);
-  }
-  .mdw-list__item:not([mdw-theme-color]) {
-    color: listThemeValue("text-color", $type)
-  }
-  .mdw-list__text {
-    [mdw-divider] > .mdw-list__item:not(:last-child) &::after {
-      background-color: listThemeValue("divider-color", $type);
-    }
-  }
-  .mdw-list__divider {
-    border-top-color: listThemeValue("divider-color", $type);
-  }
-  .mdw-list__text-line {
-    &:last-child:not(:only-child) {
-      color: listThemeValue("text-color", $type);
-      &:nth-child(3) {
-        color: listThemeValue("secondary-text-color", $type);
-      }
-    }
-  }
-  .mdw-list__text-line > span,
-  .mdw-list__text-block > span {
-    color: listThemeValue("secondary-text-color", $type);
-  }
-  .mdw-list__item {
-    &[selected] {
-      background-color: listThemeValue("selected-color", $type);
-    }
-    &[tabindex]:active:focus::before {
-      background-color: listThemeValue("press-color", $type);
-    }
-    &:active:not(:focus-within)::before,
-    &:active[tabindex]:focus:not(:focus-within)::before {
-      background-color: listThemeValue("press-color", $type);
-    }
-
-    // IE and Edge does not support :focus-within
-    @include MSOnly {
-      &:active::before {
-        background-color: listThemeValue("press-color", $type);
-      }
-    }
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &:after {
-      opacity: buttonThemeValue("ripple-opacity", $type, $theme);
-      color: buttonThemeValue("ripple-color", $type, $theme);
-    }
-  }
-}

package/components/core/menu/index.js

@@ -1,127 +0,0 @@
-class Menu {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-    let [menuCloser] = this.element.getElementsByClassName('mdw-menu__close');
-    if (!menuCloser) {
-      menuCloser = document.createElement('div');
-      menuCloser.classList.add('mdw-menu__close');
-      this.element.appendChild(menuCloser);
-    }
-    this.menuCloser = menuCloser;
-    this.menuCloser.addEventListener('click', () => {
-      this.hide();
-    });
-  }
-
-  detach() {
-    this.element = null;
-  }
-
-  /** @return {boolean} handled */
-  show() {
-    let changed = false;
-    if (this.element.hasAttribute('mdw-hide')) {
-      this.element.removeAttribute('mdw-hide');
-      changed = true;
-    }
-    if (!this.element.hasAttribute('mdw-show')) {
-      this.element.setAttribute('mdw-show', '');
-      changed = true;
-    }
-    return changed;
-  }
-
-  /** @return {boolean} handled */
-  hide() {
-    if (!this.element.hasAttribute('mdw-hide')) {
-      this.element.setAttribute('mdw-hide', '');
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Clear and detach all children
-   * @param {WeakMap=} elementMap
-   * @return {void}
-   */
-  clear(elementMap) {
-    const el = this.element;
-    if (!el) {
-      return;
-    }
-    while (el.firstChild) {
-      if (elementMap && elementMap.has(el.firstChild)) {
-        elementMap.get(el.firstChild).detach();
-        elementMap.delete(el.firstChild);
-      }
-      el.removeChild(el.firstChild);
-    }
-  }
-}
-
-class MenuItem {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-    const rippleElements = element.getElementsByClassName('mdw-ripple');
-    this.ripple = rippleElements && rippleElements[0];
-    if (!this.ripple) {
-      const ripple = document.createElement('div');
-      ripple.classList.add('mdw-ripple');
-      this.element.insertBefore(ripple, this.element.firstChild);
-      this.ripple = ripple;
-    }
-    const innerRippleElements = this.ripple.getElementsByClassName('mdw-ripple__inner');
-    this.rippleInner = innerRippleElements && innerRippleElements[0];
-    if (!this.rippleInner) {
-      const rippleInner = document.createElement('div');
-      rippleInner.classList.add('mdw-ripple__inner');
-      this.ripple.appendChild(rippleInner);
-      this.rippleInner = rippleInner;
-    }
-    this.element.setAttribute('mdw-ripple', '');
-    this.element.addEventListener('click', (event) => {
-      this.updateRipplePosition(event);
-    });
-  }
-
-  /**
-   * @param {MouseEvent|PointerEvent} event
-   * @return {void}
-   */
-  updateRipplePosition(event) {
-    if (event.target !== this.element && event.target !== this.ripple) {
-      return;
-    }
-    if (!event.pointerType && !event.detail) {
-      // Ripple from center
-      this.rippleInner.style.removeProperty('left');
-      this.rippleInner.style.removeProperty('top');
-      return;
-    }
-    const x = event.offsetX;
-    const y = event.offsetY;
-    this.rippleInner.style.setProperty('left', `${x}px`);
-    this.rippleInner.style.setProperty('top', `${y}px`);
-  }
-
-  /**
-   * Destroys all HTMLElement references for garbage collection
-   * @return {void}
-   */
-  detach() {
-    this.ripple = null;
-    this.element = null;
-  }
-}
-
-export {
-  Menu,
-  MenuItem,
-};