material 1.0.3 → 3.0.0-next.0

package/src/slider.js

@@ -1,340 +0,0 @@
-import init from './mixin/init'
-import build from './element/build'
-import control from './mixin/control'
-
-import events from './mixin/events'
-import insert from './element/insert'
-import offset from './element/offset'
-import classify from './module/classify'
-// import control from './control';
-import * as css from './module/css'
-import emitter from './module/emitter'
-
-import icon from './skin/material/icon/pin.svg'
-
-class Slider {
-  static defaults = {
-    class: 'slider',
-    type: 'control',
-    label: null,
-    checked: false,
-    error: false,
-    value: false,
-    range: [0, 100],
-    step: 5,
-    modules: [control, emitter],
-    mixins: [],
-    build: ['$root.material-slider', {},
-      ['label$label.slider-label', {}],
-      ['input$input'],
-      ['$control.slider-control', {},
-        ['$track.slider-track', {},
-          ['canvas$canvas.slider-canvas', {}],
-          ['$trackvalue.slider-track-value', {}],
-          ['$knob.slider-knob', {}],
-          ['$marker.slider-marker', {},
-            ['$value.slider-value', {}]
-          ]
-        ]
-      ]
-    ],
-    events: [
-      ['element.input.focus', 'focus'],
-      ['element.input.blur', 'blur']
-    ]
-  }
-
-  constructor (options) {
-    this.init(this.options)
-    this.build(this.options)
-    this.setup()
-  }
-
-  init (options) {
-    this.options = Object.assign({}, Slider.defaults, options || {})
-    init(this)
-  }
-
-  setup () {
-    events.attach(this.options.events, this)
-  }
-
-  build () {
-    this.element = build(this.options.build)
-    this.element = this.element.root
-
-    classify(this.element, this.options)
-
-    if (this.options.container) {
-      insert(this.element, this.options.container)
-    }
-
-    const value = this.element.marker.innerHTML
-    this.element.marker.innerHTML = icon + value
-
-    if (this.options.type) {
-      css.add(this.element, 'type-' + this.options.type)
-    }
-
-    // init input
-    if (this.options.disabled) {
-      this.disable(true)
-    }
-
-    // if (this.options.name) {
-    //   this.element.dataset.name = name
-    //   this.element.input.name = name
-    // }
-
-    // init text
-    const text = this.options.label || this.options.text
-    this.element.label.textContent = text
-
-    this.options.label = this.options.label || this.options.text
-
-    this.initTrack()
-
-    const delay = 50
-
-    setTimeout(() => {
-      this.initCanvas()
-    }, delay)
-  }
-
-  initCanvas () {
-    window.addEventListener('resize', () => {
-      console.log('resize')
-      this.drawCanvas()
-    }, false)
-    this.drawCanvas()
-  }
-
-  drawCanvas () {
-    const width = offset(this.element.track, 'width')
-    const height = offset(this.element.track, 'height')
-
-    this.element.canvas.width = width
-    this.element.canvas.height = height
-
-    const context = this.element.canvas.getContext('2d')
-    context.lineWidth = 2
-    context.beginPath()
-
-    context.moveTo(0, (height / 2) + 1)
-    context.lineTo(width, (height / 2) + 1)
-    context.strokeStyle = 'rgba(34, 31, 31, .26)'
-    context.stroke()
-  }
-
-  /**
-   * [buildControl description]
-   * @return {?} [description]
-   */
-  initTrack () {
-    this.element.track.addEventListener('mousedown', (ev) => {
-      if (this.disabled === true) return
-      this.initTrackSize()
-      const position = ev.layerX
-      this.update(position)
-    })
-
-    this.element.knob.addEventListener('click', (ev) => {
-      ev.stopPropagation()
-    })
-
-    this.initDragging()
-
-    const delay = 100
-
-    setTimeout(() => {
-      this.setValue(this.options.value)
-    }, delay)
-  }
-
-  initTrackSize () {
-    this._tracksize = offset(this.element.track, 'width')
-    this._knobsize = offset(this.element.knob, 'width')
-    this._markersize = 32 /* offset(this.element.marker, 'width') */
-    this._trackleft = offset(this.element.track, 'left')
-    return this
-  }
-
-  /**
-   * [initDragging description]
-   * @return {?} [description]
-   */
-  initDragging () {
-    this.element.knob.onmousedown = (e) => {
-      if (this.disabled === true) return
-
-      e.stopPropagation()
-      e = e || window.event
-
-      css.add(this.element.control, 'dragging')
-
-      let start = 0
-      let position = 0
-
-      if (e.pageX) start = e.pageX
-      else if (e.clientX) start = e.clientX
-
-      start = this._trackleft
-      document.body.onmousemove = (e) => {
-        if (this.disabled === true) return
-        console.log('mousedown', this.disabled)
-
-        e = e || window.event
-        let end = 0
-        if (e.pageX) end = e.pageX
-        else if (e.clientX) end = e.clientX
-
-        position = end - start
-        this.update(position)
-      }
-      document.body.onmouseup = (e) => {
-        document.body.onmousemove = document.body.onmouseup = null
-
-        e = e || window.event
-        let end = 0
-        if (e.pageX) end = e.pageX
-        else if (e.clientX) end = e.clientX
-
-        position = end - start
-        this.update(position)
-        css.remove(this.element.control, 'dragging')
-      }
-    }
-  }
-
-  update (position) {
-    const size = this._tracksize
-    const range = this.options.range[1] - this.options.range[0]
-
-    if (position > size) {
-      position = size
-    }
-
-    if (position < 0) {
-      position = 0
-    }
-
-    const ratio = (size / position)
-    const value = Math.round((range / ratio)) + this.options.range[0]
-
-    if (position === 0) {
-      css.remove(this.element.knob, 'notnull')
-    }
-
-    this.element.knob.style.left = position - this._knobsize / 2 + 'px'
-    this.element.trackvalue.style.width = (position) + 'px'
-    this.element.marker.style.left = position - this._markersize / 2 + 'px'
-
-    this.element.value.textContent = value
-
-    this.element.input.value = value
-    if (value > this.options.range[0]) {
-      css.add(this.element.knob, 'notnull')
-    } else {
-      css.remove(this.element.knob, 'notnull')
-    }
-  }
-
-  updateValue (value) {
-    this.initTrackSize()
-
-    let size = offset(this.element.track, 'width')
-    size = parseInt(size)
-
-    const range = this.options.range[1] - this.options.range[0]
-    const ratio = value * 100 / range
-    const position = Math.round(size * ratio / 100)
-
-    this.update(position)
-
-    return this
-  }
-
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.element, container, context)
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   */
-  set (prop, value) {
-    switch (prop) {
-      case 'value':
-        this.setValue(value)
-        break
-      case 'label':
-        this.setLabel(value)
-        break
-      default:
-        this.setValue(prop)
-    }
-
-    return this
-  }
-
-  /**
-   * Getter
-   * @param {string} prop
-   * @param {string} value
-   */
-  get (prop) {
-    let value
-
-    switch (prop) {
-      case 'value':
-        value = this.getValue()
-        break
-      case 'name':
-        value = this.name
-        break
-      default:
-        return this.getValue()
-    }
-
-    return value
-  }
-
-  /**
-   * [getValue description]
-   * @return {Object} The class instance
-   */
-  getValue () {
-    return this.element.input.value
-  }
-
-  /**
-   * [setValue description]
-   * @param {string} value [description]
-   */
-  setValue (value) {
-    value = value || this.options.range[0]
-    this.element.input.value = value
-    this.updateValue(value)
-  }
-
-  /**
-   * [setLabel description]
-   * @param {?} text [description]
-   */
-  setLabel (text) {
-    text = text || this.options.label || this.options.text
-
-    if (text !== null && this.label) {
-      this.label.textContent = text
-    }
-  }
-}
-
-export default Slider

package/src/snackbar.js

@@ -1,100 +0,0 @@
-import Control from './class/control'
-import display from './mixin/display'
-import Element from './element'
-import Text from './text'
-import Button from './button'
-
-class Snackbar extends Control {
-  static defaults = {
-    class: 'snackbar',
-    mixins: [display],
-    transition: 225,
-    duration: 4000,
-    stack: false,
-    close: false,
-    layout: [
-      [Text, 'message', { tag: 'span', class: 'message' }],
-      [Element, 'action', { tag: 'span', class: 'action' },
-        [Button, 'callback', { class: 'callback', type: 'link' }],
-        [Button, 'close', { class: 'close', type: 'action' }]
-      ]
-    ],
-    events: [
-      ['ui.callback.click', 'action'],
-      ['ui.close.click', 'destroy']
-    ]
-  }
-
-  constructor (options) {
-    super(options)
-    this.init(options)
-    this.render()
-    this.show()
-
-    if (this.options.duration) {
-      setTimeout(() => {
-        this.destroy()
-      }, this.options.duration)
-    }
-  }
-
-  init (options) {
-    this.buildSnackbarContainer(this.options.container)
-  }
-
-  buildSnackbarContainer (container = document.body) {
-    const snackbarContainer = container.querySelector('.snackbars')
-
-    if (!snackbarContainer) {
-      this.options.container = document.createElement('div')
-      this.options.container.classList.add('snackbars')
-      container.appendChild(this.options.container)
-    } else {
-      if (this.options.stack === false) snackbarContainer.innerHTML = ''
-      this.options.container = snackbarContainer
-    }
-
-    this.options.container.appendChild(this.element)
-  }
-
-  render () {
-    if (!this.ui) {
-      console.error('UI elements not initialized properly.')
-      return
-    }
-
-    const { message, callback, close, action } = this.ui
-
-    if (message) {
-      message.set(this.options.message)
-    } else {
-      console.error('Message UI element not initialized.')
-    }
-
-    if (this.options.action && callback && callback.element) {
-      callback.set(this.options.action)
-      callback.element.classList.add('show')
-      if (action) {
-        action.classList.add('show')
-      }
-    }
-
-    if (this.options.close && close && close.element) {
-      close.element.classList.add('show')
-      if (action) {
-        action.classList.add('show')
-      }
-    }
-  }
-
-  action () {
-    this.emit('action')
-    this.destroy()
-  }
-
-  close () {
-    this.destroy()
-  }
-}
-
-export default Snackbar

package/src/styles/M3/abstracts/variables.sass

@@ -1,44 +0,0 @@
-// Color Palette
-$color-primary: #3498db
-$color-secondary: #2ecc71
-$color-tertiary: #9b59b6
-$color-tonal: #d9e7cc
-$color-success: #2ecc71
-$color-warning: #f1c40f
-$color-danger: #e74c3c
-$color-light: #ecf0f1
-$color-dark: #34495e
-
-$text-on-primary: #ffffff
-$text-primary-on-dark: #ffffff
-$text-primary-on-light: #333333
-$text-on-tonal: #131F0D
-
-// Typography
-$font-primary: 'Helvetica Neue', Arial, sans-serif
-$font-secondary: 'Georgia', serif
-$font-size-base: 1rem // 16px
-$font-size-large: 1.25rem // 20px
-$font-size-small: 0.875rem // 14px
-
-// Spacing
-$spacing-unit: 10px
-
-// Breakpoints for Responsive Design
-$breakpoint-xs: 480px
-$breakpoint-sm: 768px
-$breakpoint-md: 992px
-$breakpoint-lg: 1200px
-
-// Z-index Layers
-$zindex-dropdown: 1000
-$zindex-sticky: 1020
-$zindex-fixed: 1030
-$zindex-modal-backdrop: 1040
-$zindex-modal: 1050
-$zindex-popover: 1060
-$zindex-tooltip: 1070
-
-// Other Variables
-$border-radius: 4px
-$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

package/src/styles/M3/app/index.sass

@@ -1,19 +0,0 @@
-html
-  font-size: 100%
-  line-height: 1.15
-  width: 100%
-  height: 100%
-
-body
-  color: rgba(0, 0, 0, 0.67)
-  font-family: Roboto, arial, serif
-  font-size: 100%
-  display: flex
-  // position: relative
-  // display: block
-  // height: 100%
-  // width: 100%
-  // overflow: hidden
-  margin: 0
-  padding: 0
-  // user-select: none

package/src/styles/M3/base/body.sass

@@ -1,55 +0,0 @@
-
-// HTML Tags General Defintion
-html
-  font-size: 100%
-  line-height: 1.15
-  width: 100%
-  height: 100%
-
-body
-  color: rgba(0, 0, 0, 0.67)
-  font-family: Roboto, arial, serif
-  font-size: 100%
-  // position: relative
-  // display: block
-  // height: 100%
-  // width: 100%
-  // overflow: hidden
-  margin: 0
-  padding: 0
-  // user-select: none
-
-input,
-textarea,
-keygen,
-select,
-button
-  font-size: 1em
-  font-family: Roboto, arial, serif
-  color: rgb(51, 51, 51)
-
-p
-  line-height: 20px
-  padding-top: 6px
-  margin-bottom: 14px
-  letter-spacing: 0
-  font-weight: 400
-
-// get rid of outline
-select,
-input,
-textarea,
-button
-  outline: none
-  &:hover
-    outline: none
-
-button
-  user-select: none
-
-// set all container boder-box
-*
-  box-sizing: border-box
-
-a
-  color: rgba(0, 0, 0, 0.7)

package/src/styles/M3/base/elevation.sass

@@ -1,50 +0,0 @@
-.elevation-z0
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
-.elevation-z1
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
-.elevation-z2
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
-.elevation-z3
-  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)
-.elevation-z4
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-.elevation-z5
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
-.elevation-z6
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
-.elevation-z7
-  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)
-.elevation-z8
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
-.elevation-z9
-  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)
-.elevation-z10
-  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)
-.elevation-z11
-  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)
-.elevation-z12
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
-.elevation-z13
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)
-.elevation-z14
-  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)
-.elevation-z15
-  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)
-.elevation-z16
-  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
-.elevation-z17
-  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)
-.elevation-z18
-  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)
-.elevation-z19
-  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)
-.elevation-z20
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)
-.elevation-z21
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)
-.elevation-z22
-  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)
-.elevation-z23
-  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)
-.elevation-z24
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)

package/src/styles/M3/base/grid.sass

@@ -1,63 +0,0 @@
-/////////////////
-// Semantic.gs // for SCSS: http://sass-lang.com/
-/////////////////
-
-// Defaults which you can freely override
-$column-width: 60px
-$gutter-width: 20px
-$columns: 12
-
-// Utility function — you should never need to modify this
-@function gridsystem-width($columns:$columns)
-  @return ($column-width * $columns) + ($gutter-width * $columns)
-
-
-// Set $total-width to 100% for a fluid layout
-$total-width: gridsystem-width($columns)
-
-// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
-// $min-width: 999999
-// $correction: 0.5 / $min-width * 100
-
-// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
-@mixin clearfix()
-  *zoom:1
-
-  &:before,
-  &:after
-      content:""
-      display:table
-  
-  &:after
-      clear:both
-
-//////////
-// GRID //
-//////////
-
-body
-  width: 100%
-  @include clearfix()
-
-
-@mixin row($columns:$columns)
-  display: block
-  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))
-  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)
-  // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
-  // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
-  @include clearfix()
-
-@mixin column($x,$columns:$columns)
-  display: inline
-  float: left
-  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))
-  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))
-  // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
-  // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
-
-@mixin push($offset:1)
-  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
-
-@mixin pull($offset:1)
-  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))