@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/core/tab/index.js

@@ -1,174 +0,0 @@
-/**
- * @param {HTMLElement} element
- * @param {MouseEvent|PointerEvent} event
- * @return {void}
- */
-function updateRipplePosition(element, event) {
-  if (!event.pointerType && !event.detail) {
-    // Ripple from center
-    element.style.setProperty('left', '0');
-    element.style.setProperty('top', '0');
-    return;
-  }
-  const x = event.offsetX - (element.clientWidth / 2.0);
-  const y = event.offsetY - (element.clientHeight / 2.0);
-  element.style.setProperty('left', `${x}px`);
-  element.style.setProperty('top', `${y}px`);
-}
-
-class TabItem {
-  /**
-   * @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;
-    }
-    this.element.setAttribute('mdw-js-ripple', '');
-    this.element.addEventListener('click', (event) => {
-      updateRipplePosition(this.ripple, event);
-    });
-  }
-}
-
-class Tab {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-    this.inputs = element.getElementsByTagName('input');
-    this.items = element.getElementsByClassName('mdw-tab__item');
-
-    const indicatorElements = element.getElementsByClassName('mdw-tab__indicator');
-    this.indicator = indicatorElements && indicatorElements[0];
-    if (!this.indicator) {
-      const indicator = document.createElement('div');
-      indicator.classList.add('mdw-tab__indicator');
-      this.element.appendChild(indicator);
-      this.indicator = indicator;
-    }
-
-    for (let i = 0; i < this.inputs.length; i += 1) {
-      const inputElement = this.inputs[i];
-      if (inputElement.checked) {
-        this.onInputChanged(inputElement);
-      }
-      inputElement.addEventListener('change', () => {
-        this.onInputChanged(inputElement);
-      });
-    }
-
-    for (let i = 0; i < this.items.length; i += 1) {
-      const itemElement = this.items[i];
-      if (itemElement.hasAttribute('selected')) {
-        this.selectItem(itemElement);
-      }
-      itemElement.addEventListener('click', () => {
-        this.selectItem(itemElement);
-      });
-    }
-  }
-
-  /**
-   * @param {HTMLInputElement} inputElement
-   * @return {HTMLElement}
-   */
-  static getItemForInput(inputElement) {
-    let itemElement;
-    if (inputElement.parentElement.classList.contains('mdw-tab__item')) {
-      itemElement = inputElement.parentElement;
-    }
-    if (inputElement.id) {
-      itemElement = document.querySelector(`label.mdw-tab__item[for="${inputElement.id}"]`);
-    }
-    return itemElement;
-  }
-
-  static isRtl() {
-    const htmlElement = document.getElementsByTagName('html')[0];
-    if (htmlElement.hasAttribute('dir') && htmlElement.getAttribute('dir').toLowerCase() === 'rtl') {
-      return true;
-    }
-    if (!document.body.hasAttribute('dir')) {
-      return false;
-    }
-    return document.body.getAttribute('dir').toLowerCase() === 'rtl';
-  }
-
-  /**
-   * @param {HTMLElement} itemElement
-   * @return {boolean} changed
-   */
-  selectItem(itemElement) {
-    let foundPreviousSelection = false;
-    let foundTarget = false;
-    let indicatorUpdated = false;
-    let left = 0;
-    const isRtl = Tab.isRtl();
-    for (let i = 0; i < this.items.length; i += 1) {
-      const index = isRtl ? this.items.length - 1 -i : i;
-      const item = this.items.item(index);
-      if (item.hasAttribute('selected')) {
-        foundPreviousSelection = true;
-        item.removeAttribute('selected');
-        if (!indicatorUpdated) {
-          this.indicator.setAttribute('mdw-direction', 'forwards');
-          indicatorUpdated = true;
-        }
-      }
-      if (item === itemElement) {
-        foundTarget = true;
-        itemElement.setAttribute('selected', '');
-        if (!indicatorUpdated) {
-          this.indicator.setAttribute('mdw-direction', 'backwards');
-          indicatorUpdated = true;
-        }
-      }
-      if (!foundTarget) {
-        left += item.clientWidth;
-      }
-      if (foundTarget && foundPreviousSelection) {
-        break;
-      }
-    }
-
-    if (!this.element.clientWidth) {
-      this.indicator.style.setProperty('left', '');
-      this.indicator.style.setProperty('right', '');
-      this.indicator.removeAttribute('mdw-js-indicator');
-      // use CSS styling fallback
-      return false;
-    }
-    const right = this.element.clientWidth - left - itemElement.clientWidth;
-    if (!this.indicator.hasAttribute('mdw-js-indicator')) {
-      this.indicator.setAttribute('mdw-js-indicator', '');
-    }
-
-    this.indicator.style.setProperty('left', `${left}px`);
-    this.indicator.style.setProperty('right', `${right}px`);
-    return false;
-  }
-
-  /**
-   * @param {HTMLInputElement} inputElement
-   * @return {void}
-   */
-  onInputChanged(inputElement) {
-    const itemElement = Tab.getItemForInput(inputElement);
-    if (itemElement) {
-      this.selectItem(itemElement);
-    }
-  }
-}
-
-export {
-  Tab,
-  TabItem,
-};

package/components/core/tab/style.scss

@@ -1,202 +0,0 @@
-// https://material.io/guidelines/components/tabs.html#
-
-@import '../../common/functions.scss';
-@import '../../common/motion.scss';
-
-.mdw-tab {
-  min-height: dp(48);
-  overflow-y: hidden;
-  position: relative;
-  display:flex;
-  width: 100%;
-  justify-content: center;
-  flex-direction:row;
-}
-
-.mdw-tab__indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  width: 0;
-  left: 0;
-  right: auto;
-  [dir=rtl] & {
-    right: 0;
-    left: auto;
-  }
-  background-color: currentColor;
-  transition-property: transform;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-  // Indicator width
-  // Element position = 2 * number of input elements + 1 (itself)
-  // Width = 100% / number of input elements
-  @for $j from 1 through 8 {
-    // Fallback for 0 width element with JS indicator
-    &:nth-child(#{$j + 1}):not([mdw-js-indicator]) {
-      width: #{100% / $j};
-    }
-    input ~ &:nth-child(#{($j * 2) + 1}):not([mdw-js-indicator]) {
-      width: #{100% / $j};
-    }
-  }
-  // Indicator offset
-  @for $i from 1 through 8 {
-    input:nth-of-type(#{$i}):checked ~ &:not([mdw-js-indicator]) {
-      transform: translateX(#{100% * ($i - 1)});
-    }
-    [dir=rtl] input:nth-of-type(#{$i}):checked ~ &:not([mdw-js-indicator]) {
-      transform: translateX(#{-100% * ($i - 1)});
-    }
-  }
-  
-  &[mdw-js-indicator] {
-    width: auto;
-    // Stretch animation
-    transition-property: left, right;
-    &[mdw-direction="backwards"] {
-      transition-property: right, left;
-    }
-    transition-delay: $motion-duration-desktop-default / 2, 0ms;
-    transition-duration: $motion-duration-desktop-default / 2;
-    @include allHandsets {
-      transition-delay: $motion-duration-mobile-default / 2, 0ms;
-      transition-duration: $motion-duration-mobile-default / 2;
-    }
-    @include allTablets {
-      transition-delay: $motion-duration-tablet-default / 2, 0ms;
-      transition-duration: $motion-duration-tablet-default / 2;
-    }
-    transform: none;
-  }
-}
-
-.mdw-tab__item {
-  min-height: dp(48); // Redundant but needed for IE11
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-basis: 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  box-shadow: none;
-  box-sizing: content-box;
-  border-radius: 0;
-  z-index: 0;
-  overflow: hidden;
-  cursor: pointer;
-  color: black;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  input:checked + & {
-    cursor: default;
-  }
-
-  > .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;
-    }
-  }
-}
-
-.mdw-tab__icon {
-  pointer-events: none;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-  margin-top: 12px;
-  &:last-child {
-    margin-bottom: 12px;
-  }
-}
-
-.mdw-tab__label {
-  display: block;
-  text-align: center;
-
-  pointer-events: none;
-  min-width: dp(80);
-  max-width: dp(168);
-  padding-left: dp(12);
-  padding-right: dp(12);
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 1em; // Prevents stretching when using larger fonts
-  height: auto;
-  font-size: sp(14);
-  text-transform: uppercase;
-  font-weight: $font-weight-medium;
-
-  // 10dp top padding
-  &::before {
-    content: "\200D"; // ‍
-    display: inline-block;
-    margin-top: dp(10);
-    line-height: 1;
-    vertical-align: text-bottom;
-  }
-
-  // 20dp bottom padding from baseline
-  &::after {
-    content: "\200D"; // ‍
-    display: inline-block;
-    line-height: 1;
-    margin-bottom: dp(20);
-    vertical-align: text-top;
-  }
-
-  .mdw-tab__icon ~ & {
-    &::after {
-      content: "\200D"; // ‍
-      display: inline-block;
-      line-height: 1;
-      margin-bottom: dp(16);
-      vertical-align: text-top;
-    }
-  }
-}
-
-.mdw-tab input {
-  // Using `display: none` breaks keyboard navigation
-  opacity: 0;
-  height: 0;
-  width: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  position: absolute;
-  display: inline;
-}
-
-.mdw-tab[mdw-theme-color] {
-  .mdw-tab__item,
-  .mdw-tab__indicator {
-    color: inherit;
-  }
-}

package/components/core/tab/theming.scss

@@ -1,43 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$tabColors: (
-  active-color:      (inherit,        (#fff, 1.00)),
-  inactive-color:    ((#000, 0.54), (#fff, 0.50)),
-  indicator-color:   ((#000, 1.00), (#fff, 1.00)),
-  ripple-opacity:    (         0.26 ,          0.30,)
-);
-
-@function tabThemeValue($key, $type, $theme) {
-  @return themeValue('tab', $tabColors, $key, $type, $theme);
-}
-
-@mixin tabThemeVariables($color, $lightness) {
-  @include themeVariables('tab', $tabColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin tabContrastRules($type: 'var', $theme: null) {
-  .mdw-tab__icon,
-  .mdw-tab__label {
-    color: tabThemeValue("inactive-color", $type, $theme);
-  }
-  .mdw-tab__indicator {
-    color: tabThemeValue("indicator-color", $type, $theme);
-  }
-  input:checked ~ .mdw-tab__icon,
-  input:checked ~ .mdw-tab__label,
-  .mdw-tab__item[selected] > .mdw-tab__icon,
-  .mdw-tab__item[selected] > .mdw-tab__label,
-  input:checked + .mdw-tab__item > .mdw-tab__icon,
-  input:checked + .mdw-tab__item > .mdw-tab__label {
-    color: tabThemeValue("active-color", $type, $theme);
-  }
-  .mdw-tab__item {
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &:after {
-      color: tabThemeValue("active-color", $type, $theme);
-      opacity: tabThemeValue("ripple-opacity", $type, $theme);
-    }
-  }
-}

package/components/core/textfield/index.js

@@ -1,169 +0,0 @@
-class TextField {
-  /**
-   * @param {HTMLElement} element
-   */
-  constructor(element) {
-    this.element = element;
-    /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */
-    this.input = element.querySelector('.mdw-textfield__input');
-    if (this.input) {
-      if (this.input instanceof HTMLTextAreaElement && this.element.hasAttribute('mdw-multiline')) {
-        this.input.addEventListener('input', () => {
-          this.updateTextAreaSize();
-        });
-        this.updateTextAreaSize();
-      }
-      this.input.addEventListener('input', () => {
-        this.updateInputEmptyState();
-      });
-      this.updateInputEmptyState();
-    }
-    this.border = element.querySelector('.mdw-textfield__border-line');
-    if (!this.border) {
-      const border = document.createElement('div');
-      border.classList.add('.mdw-textfield__border-line');
-      element.appendChild(border);
-      this.border = border;
-    }
-    const rippleElements = this.border.getElementsByClassName('mdw-ripple');
-    this.ripple = rippleElements && rippleElements[0];
-    if (!this.ripple) {
-      const ripple = document.createElement('div');
-      ripple.classList.add('mdw-ripple');
-      this.border.appendChild(ripple);
-      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.border.addEventListener('click', (event) => {
-      this.updateRipplePosition(event);
-    });
-  }
-
-  /** @return {void} */
-  updateInputEmptyState() {
-    const attributeName = 'mdw-value-empty';
-    if (this.input.value) {
-      if (this.element.hasAttribute(attributeName)) {
-        this.element.removeAttribute(attributeName);
-      }
-    } else if (!this.element.hasAttribute(attributeName)) {
-      this.element.setAttribute('mdw-value-empty', '');
-    }
-  }
-
-  /** @return {number} Single row height */
-  updateTextAreaSize() {
-    const previousRowsValue = this.input.getAttribute('rows');
-    this.input.setAttribute('rows', '1');
-    const { height, paddingTop } = window.getComputedStyle(this.input);
-    if (height === 'auto') {
-      this.input.setAttribute('rows', previousRowsValue);
-      return -1;
-    }
-    const heightPx = parseInt(height.replace('px', ''), 10);
-    const paddingTopPx = parseInt(paddingTop.replace('px', ''), 10);
-    this.input.setAttribute('rows', Math.floor((this.input.scrollHeight - paddingTopPx) / heightPx).toString());
-    return heightPx;
-  }
-
-  /**
-   * @param {MouseEvent|PointerEvent} event
-   * @return {void}
-   */
-  updateRipplePosition(event) {
-    if (event.target !== this.border && 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`);
-  }
-
-  /**
-   * @return {string|Date|number}
-   */
-  get value() {
-    if ((this.input instanceof HTMLTextAreaElement) || (this.input instanceof HTMLSelectElement)) {
-      return this.value;
-    }
-    const type = this.input.hasAttribute('type') && this.input.getAttribute('type').toLowerCase();
-    switch (type) {
-      case 'date':
-      case 'time':
-        return this.input.valueAsDate;
-      case 'datetime-local':
-      case 'number':
-      case 'range':
-        return this.input.valueAsNumber;
-      default:
-        return this.input.value;
-    }
-  }
-
-  /** @param {(string|Date|number)=} value */
-  set value(value) {
-    if (value == null) {
-      this.input.value = null;
-    } else if (this.input instanceof HTMLTextAreaElement
-            || this.input instanceof HTMLSelectElement) {
-      if (value instanceof Date) {
-        this.input.value = value.toString();
-      } else if (typeof value === 'string') {
-        this.input.value = value;
-      } else {
-        this.input.value = value.toString(10);
-      }
-    } else if (value instanceof Date) {
-      const type = this.input.hasAttribute('type') && this.input.getAttribute('type').toLowerCase();
-      switch (type) {
-        case 'date':
-        case 'time':
-        case 'datetime-local':
-          this.input.valueAsDate = value;
-          break;
-        case 'number':
-        case 'range':
-          this.input.valueAsNumber = value.getTime();
-          break;
-        default:
-          this.input.value = value.toString();
-      }
-    } else if (typeof value === 'string') {
-      this.input.value = value;
-    } else {
-      const type = this.input.hasAttribute('type') && this.input.getAttribute('type').toLowerCase();
-      switch (type) {
-        case 'date':
-        case 'time':
-        case 'datetime-local':
-        case 'number':
-        case 'range':
-          this.input.valueAsNumber = value;
-          break;
-        default:
-          this.input.value = value.toString();
-      }
-    }
-    this.updateInputEmptyState();
-    this.updateTextAreaSize();
-  }
-}
-
-export {
-  TextField,
-};