material 0.6.2 → 0.7.1

package/src/select.js

@@ -1,323 +1,108 @@
-'use strict'
+import EventEmitter from './mixin/emitter'
 
-import emitter from './module/emitter'
+import build from './module/build'
 import attach from './module/attach'
+import attributes from './module/attributes'
+import dataset from './view/dataset'
 
-var defaults = {
-  prefix: 'material',
-  class: 'textfield',
-  type: 'control',
-  tag: 'div',
-  events: [
-    ['input.change', '_onChange'],
-    ['input.focus', 'focus'],
-    ['input.blur', 'blur'],
-    // ['input.keypress', '_handleInputKeyPress',
-    ['input.keyup', '_handleInputKeyPress']
-    // ['input.mouseover', 'mouseover']
-    // ['input.change', '_onChange']
-    // 'input.keydown': '_handleInputKeyPress'
-
-  ]
-}
+class Select extends EventEmitter {
+  static defaults = {
+    type: 'list',
+    class: 'select',
+    first: null,
+    attributes: ['type', 'name', 'autocomplete', 'required']
+  }
 
-/**
- * Textfield class
- * @class
- */
-class Select {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    super()
 
-    this.init()
+    this.init(options)
     this.build()
-    this.attach()
-
-    return this
-  }
-
-  /**
-   * init
-   * @param  {Object} options The class options
-   * @return {Object} The class instance
-   */
-  init () {
-    Object.assign(this, emitter, attach)
-
-    this.value = this.options.value
-
-    return this
-  }
-
-  mouseover () {
-    // console.log('mouseover')
-  }
-
-  /**
-   * [build description]
-   * @return {Object} The class instance
-   */
-  build () {
-    // create a new div as input element
-    var tag = this.options.tag || 'div'
-    this.root = document.createElement(tag)
-    this.root.classList.add(this.options.prefix + '-' + this.options.class)
-
     this.buildLabel()
     this.buildInput()
-    this.buildUnderline()
-
-    if (this.disabled) {
-      css.add(this.root, 'is-disabled')
-    }
+    this.attach()
+  }
 
-    // insert if container this.options is given
-    if (this.options.container) {
-      // console.log(this.name, opts.container);
-      insert(this.root, this.options.container)
-    }
+  init(options) {
+    this.options = Object.assign({}, Select.defaults, options || {})
+    Object.assign(this, build, attach, dataset)
   }
 
   buildLabel () {
-    this.label = document.createElement('label')
-    this.label.classList.add(this.options.class + '-label')
-    this.root.appendChild(this.label)
-
-    if (this.options.label !== false) {
-      this.setLabel()
+    if (this.options.label) {
+      this.label = document.createElement('span')
+      this.label.classList.add('label')
+      this.label.innerHTML = this.options.label
+      this.element.appendChild(this.label)
     }
   }
 
-  /**
-   * [_initInput description]
-   * @return {Object} The class instance
-   */
   buildInput () {
     this.input = document.createElement('select')
-    this.input.classList.add(this.options.class + '-input')
-    // this.input.setAttribute('type', 'text')
-    this.root.appendChild(this.input)
+    this.input.classList.add('input')
+    this.element.appendChild(this.input)
 
-    if (this.options.options) {
-      this.setOptions(this.options.options)
+    this.input.addEventListener('change', () => {
+      // console.log('change', this.input[this.input.selectedIndex].value)
+      this.emit('change', this.input[this.input.selectedIndex].value)
+    })
+
+    if (this.options.data) {
+      dataset(this.data, this.options.data)
     }
 
-    // if (!this.options.value) {
-    //   this.root.classList.add('is-empty')
-    // }
+    attributes(this.input, this.options)
 
-    if (this.readonly) {
-      this.input.setAttribute('readonly', 'readonly')
-      this.input.setAttribute('tabindex', '-1')
+    if (this.options.options) {
+      this.setOptions(this.options.options)
     }
-
-    return this.input
   }
 
   setOptions (options) {
-    for (var i = 0; i < options.length; i++) {
-      this.add(options[i], options[i])
-    }
-  }
+    // console.log('buildCountry', this.input)
 
-  /**
-   * _initUnderline
-   * @return {Object} The class instance
-   */
-  buildUnderline () {
-    this.underline = document.createElement('span')
-    this.underline.classList.add(this.options.class + '-underline')
-    this.root.appendChild(this.underline)
-  }
+    var first = this.options.first
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   */
-  set (prop, value) {
-    switch (prop) {
-      case 'value':
-        this.setValue(value)
-        break
-      case 'label':
-        this.setLabel(value)
-        break
-      case 'disabled':
-        if (value === true) {
-          this.disable()
-        } else if (value === false) {
-          this.enable()
-        }
-        break
-      default:
-        this.setValue(prop)
+    if (first && first[0] && first[1]) {
+      this.input.options[0] = new Option(first[1], first[0])
     }
 
-    return this
-  }
-
-  /**
-   * [buildLabel description]
-   * @return {Object} The class instance
-   */
-  setLabel (label) {
-    label = label || this.options.label
-    var text
-
-    if (label === null || label === false) {
-      text = ''
-    } else if (this.options.label) {
-      text = label
-    } else {
-      text = this.options.name
+    for (var i = 0; i < options.length; i++) {
+      this.addOption(options[i][1], options[i][0])
     }
-
-    this.label.textContent = text
   }
 
-  disable () {
-    this.disabled = true
-
-    this.input.setAttribute('disabled', 'disabled')
-    this.root.classList.add('is-disabled')
-    return this
+  addOption (name, value) {
+    // console.log('addOption', name, value)
+    this.input.options[this.input.options.length] = new Option(name, value)
   }
 
-  enable () {
-    this.disabled = false
+  set (value) {
+    // console.log('set', value)
+    this.input.value = value
 
-    this.element.input.removeAttribute('disabled')
-    this.root.classList.remove('is-disabled')
     return this
   }
 
-  /**
-   * Getter
-   * @param {string} prop
-   * @param {string} value
-   */
-  get (prop) {
-    var value
-
-    switch (prop) {
-      case 'value':
-        value = this.getValue()
-        break
-      case 'name':
-        value = this.name
-        break
-      default:
-        return this.getValue()
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
     }
-
-    return value
-  }
-
-  /**
-   * [getValue description]
-   * @return {Object} The class instance
-   */
-  getValue () {
-    // console.log('getValue', this);
-    return this.input.value
-  }
-
-  /**
-   * [setValue description]
-   * @param {string} value [description]
-   */
-  setValue (value) {
-    // console.log('setValue', this.options.name, value)
-    this.input.value = value
-
-    if (value) {
-      this.root.classList.remove('is-empty')
-    } else {
-      this.root.classList.add('is-empty')
-    }
-
-    this.emit('change', value)
   }
 
-  _onChange (ev) {
-    // console.log('change', ev)
-
-    this.emit('change', ev.target.value)
-  }
-
-  /**
-   * [_initValue description]
-   * @return {Object} The class instance
-   */
-  _initValue () {
-    var opts = this.options
-
-    // create a new div as input element
-    if (opts.value) {
-      this.setValue(opts.value)
-    }
+  setText (value) {
+    this.setLabel(value)
   }
 
-  /**
-   * [_onFocus description]
-   * @return {Object} The class instance
-   */
-  _handleInputKeyPress (e) {
-    // console.log('_handleInputKeyPress', e);
+  get () {
+    var value = null
 
-    if (this.get('value') === '') {
-      this.root.classList.add('is-empty')
-    } else {
-      this.root.classList.remove('is-empty')
+    if (this.input[this.input.selectedIndex]) {
+      value = this.input[this.input.selectedIndex].value
     }
 
-    this.emit('change', this.getValue())
-  }
-
-  add (key, value, selected) {
-    selected = selected || false
-    var select = this.input
-    select.options[select.options.length] = new Option(value, key, selected, selected)
-  }
-
-  /**
-   * focus method
-   * @return {?} [description]
-   */
-  focus () {
-    if (this.disabled === true) return this
-
-    this.root.classList.add('is-focused')
-    if (this.input !== document.activeElement) { this.input.focus() }
-    return this
-  }
-
-  /**
-   * blur method
-   * @return {?} [description]
-   */
-  blur () {
-    this.root.classList.remove('is-focused')
-    return this
-  }
-  /**
-   * [setError description]
-   * @param {string} error Error description
-   */
-  setError (error) {
-    if (error) {
-      this.addClass('field-error')
-      if (this.error) { this.error.set('html', error) }
-    } else {
-      if (this.error) { this.removeClass('field-error') }
-      if (this.error) { this.error.set('html', '') }
-    }
+    return value
   }
 }
 

package/src/{control/selecter.js → selecter.js}

@@ -1,12 +1,12 @@
-import emitter from '..//module/emitter'
-import attach from '../module/attach'
-import dataset from '../view/dataset'
+import emitter from './module/emitter'
+import attach from './module/attach'
+import dataset from './view/dataset'
 import attributes from './module/attributes'
 import addClass from './module/addclass'
 
 // ui
-import Layout from '../layout'
-import Element from '../element'
+import Layout from './layout'
+import Element from './element'
 import Button from './button'
 
 const defaults = {
@@ -51,7 +51,7 @@ class Selecter {
 
   setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)
@@ -62,7 +62,7 @@ class Selecter {
     }
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     if (this.options.label) {
@@ -72,7 +72,7 @@ class Selecter {
     this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
   /**
@@ -81,14 +81,14 @@ class Selecter {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('selecter')
+    this.element = document.createElement(tag)
+    this.element.classList.add('selecter')
 
     if (this.options.class !== 'selecter') {
-      addClass(this.root, this.options.class)
+      addClass(this.element, this.options.class)
     }
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)
@@ -99,7 +99,7 @@ class Selecter {
     this.setList(this.options.list)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
@@ -110,13 +110,13 @@ class Selecter {
     this.ui.icon.classList.add('icon')
     this.ui.icon.innerHTML = this.options.icon
 
-    this.root.insertBefore(this.ui.icon, this.ui.input)
+    this.element.insertBefore(this.ui.icon, this.ui.input)
   }
 
   buildInput () {
     this.input = document.createElement('select')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.input.addEventListener('change', () => {
       // console.log('change', this.input[this.input.selectedIndex].value)
@@ -154,19 +154,19 @@ class Selecter {
 
   styleAttributes () {
     if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
+      this.element.classList.add('style-' + this.options.style)
     }
 
     if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
+      this.element.classList.add(this.options.size + '-size')
     }
 
     if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
+      this.element.classList.add('color-' + this.options.color)
     }
 
     if (this.options.bold) {
-      this.root.classList.add('bold')
+      this.element.classList.add('bold')
     }
   }
   showList () {
@@ -216,7 +216,7 @@ class Selecter {
       this.ui.value.innerHTML = this.values[value]
     }
 
-    this.selected = this.root.querySelector('[data-value=' + value + ']')
+    this.selected = this.element.querySelector('[data-value=' + value + ']')
 
     // console.log('item', this.selected)
     if (this.selected) {

package/src/selector.js

@@ -44,7 +44,7 @@ class Selector {
     this.attach()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
@@ -53,30 +53,30 @@ class Selector {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
 
-    this.root.classList.add('selector')
+    this.element.classList.add('selector')
 
     if (this.options.class !== 'selector') {
-      this.root.setAttribute('class', this.options.class)
+      this.element.setAttribute('class', this.options.class)
     }
 
     if (this.options.modules.indexOf('border') > -1) {
       this.border = document.createElement('div')
       this.border.classList.add('border')
-      this.root.appendChild(this.border)
+      this.element.appendChild(this.border)
     }
 
     if (this.options.modules.indexOf('label') > -1) {
       this.label = document.createElement('div')
       this.label.classList.add('label')
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
 
     if (this.options.modules.indexOf('resizer') > -1) {
       this.resizer = document.createElement('div')
       this.resizer.classList.add('resizer')
-      this.root.appendChild(this.resizer)
+      this.element.appendChild(this.resizer)
     }
 
     return this
@@ -95,7 +95,7 @@ class Selector {
    * @return {Object} The class instance
    */
   set (prop, value) {
-    // console.log('set', this.root, prop, value)
+    // console.log('set', this.element, prop, value)
     switch (prop) {
       case 'target':
         this.setTarget(value)
@@ -113,21 +113,21 @@ class Selector {
 
     this.update(this.target)
 
-    this.root.classList.remove('hide')
+    this.element.classList.remove('hide')
 
-    // console.log('target', this.root, this.target)
+    // console.log('target', this.element, this.target)
   }
 
   update (target) {
     target = target || this.target
     if (!target) return
     var coords = target.getBoundingClientRect()
-    var pcoords = this.root.parentNode.getBoundingClientRect()
+    var pcoords = this.element.parentNode.getBoundingClientRect()
 
-    this.root.style.top = coords.top - pcoords.top + 'px'
-    this.root.style.left = coords.left - pcoords.left + 'px'
-    this.root.style.width = coords.width + 'px'
-    this.root.style.height = coords.height + 'px'
+    this.element.style.top = coords.top - pcoords.top + 'px'
+    this.element.style.left = coords.left - pcoords.left + 'px'
+    this.element.style.width = coords.width + 'px'
+    this.element.style.height = coords.height + 'px'
   }
 
   /**
@@ -139,11 +139,11 @@ class Selector {
   get (prop, value) {
     switch (prop) {
       case 'value':
-        return this.root.value
+        return this.element.value
       case 'label':
         return this.label.innerHTML
       default:
-        return this.root.value
+        return this.element.value
     }
   }
 
@@ -154,11 +154,11 @@ class Selector {
     let width = 0
     let height = 0
 
-    const offsetX = this.root.getBoundingClientRect().x
-    const offsetY = this.root.getBoundingClientRect().y
+    const offsetX = this.element.getBoundingClientRect().x
+    const offsetY = this.element.getBoundingClientRect().y
     const element = document.body
 
-    var ratio = parseInt(this.root.style.width, 10) / parseInt(this.root.style.height, 10)
+    var ratio = parseInt(this.element.style.width, 10) / parseInt(this.element.style.height, 10)
 
     this.border.setPointerCapture(ev.pointerId)
 
@@ -184,8 +184,8 @@ class Selector {
         if (height < this.options.resizer.minHeight) height = this.options.resizer.minHeight
       }
 
-      this.root.style.width = width + 'px'
-      this.root.style.height = height + 'px'
+      this.element.style.width = width + 'px'
+      this.element.style.height = height + 'px'
 
       this.emit('resize', width, height)
     }
@@ -195,31 +195,31 @@ class Selector {
 
       element.onpointermove = null
       element.onpointerup = null
-      this.root.releasePointerCapture(e.pointerId)
+      this.element.releasePointerCapture(e.pointerId)
 
-      // if (e.target !== this.root) return
+      // if (e.target !== this.element) return
     }
   }
 
   disable () {
-    this.root.disabled = true
+    this.element.disabled = true
   }
 
   enable () {
-    this.root.disabled = false
+    this.element.disabled = false
   }
 
   hide () {
-    this.root.classList.add('hide')
+    this.element.classList.add('hide')
   }
 
   show () {
-    this.root.classList.remove('hide')
+    this.element.classList.remove('hide')
   }
 
   destroy () {
-    if (this.root && this.root.parentNode) {
-      this.root.parentNode.removeChild(this.root)
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element)
     }
   }
 
@@ -228,11 +228,11 @@ class Selector {
   }
 
   mousedown (ev) {
-    this.root.classList.add('pushed')
+    this.element.classList.add('pushed')
   }
 
   mouseup (ev) {
-    this.root.classList.remove('pushed')
+    this.element.classList.remove('pushed')
   }
 }
 

package/src/skin/material/component/navigation.sass

@@ -0,0 +1 @@
+.navigation

package/src/skin/material/control/button.sass

@@ -123,3 +123,13 @@
     background-color: rgba(0, 0, 0, .1)
     &:focus
       background-color: rgba(0, 0, 0, .1)
+
+.ripple
+  opacity: 1
+  pointer-events: none
+  z-index: 1
+  position: absolute
+  background-color: rgba(255, 255, 255, 0.1)
+  height: 5px
+  width: 5px
+  border-radius: 50%