material 0.7.0 → 0.7.2

package/src/tabview.js

@@ -1,38 +1,24 @@
-import emitter from './module/emitter'
-import observer from './module/observer'
+import EventEmitter from './mixin/emitter'
+import observer from './element/observer'
+import build from './module/build'
 import display from './view/display'
 
-/**
- * Class Tab
- * @class
- * @since 0.0.1
- * @example
- * var tab = new TabView()
- */
-
-var defaults = {
-  class: 'tabview',
-  mode: 'style' // css
-}
+class TabView extends EventEmitter {
+  static defaults = {
+    base: 'view',
+    class: 'tabview',
+    mode: 'style'
+  }
 
-class TabView {
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
   constructor (options) {
-    // console.log('TabView')
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, display)
+    super()
 
+    this.init(options)
     this.build()
 
-    var ready = false
+    let ready = false
 
     observer.insert(this.element, () => {
-      // console.log('!!! inserted')
       if (!ready) {
         ready = true
         this.setup()
@@ -45,15 +31,9 @@ class TabView {
     return this
   }
 
-  build () {
-    this.element = document.createElement(this.options.tag || 'div')
-    this.element.classList.add('tabview')
-
-    this.element.classList.add('view')
-
-    if (this.options.class !== 'tabview') {
-      this.element.classList.add(this.options.class)
-    }
+  init (options) {
+    this.options = { ...TabView.defaults, ...options }
+    Object.assign(this, build, display)
 
     this.ui = {}
   }
@@ -72,7 +52,7 @@ class TabView {
 
     // console.log('views', this.ui.views)
 
-    for (var i = 0; i < this.ui.views.length; i++) {
+    for (let i = 0; i < this.ui.views.length; i++) {
       if (this.ui.views[i].dataset) {
         this.views.push(this.ui.views[i].dataset.view)
         this.view[this.ui.views[i].dataset.view] = this.ui.views[i]
@@ -98,7 +78,7 @@ class TabView {
   select (view) {
     // console.log('select', view, this.ui.tabs)
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         this.click(button)
@@ -111,7 +91,7 @@ class TabView {
   disable (view) {
     // console.log('select', view)
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         button.disabled = 'disabled'
@@ -125,7 +105,7 @@ class TabView {
     // console.log('select', view)
 
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         button.disabled = false
@@ -137,7 +117,7 @@ class TabView {
 
   hideView () {
     // console.log('hideView')
-    for (var i = 0; i < this.ui.views.length; i++) {
+    for (let i = 0; i < this.ui.views.length; i++) {
       // console.log('hide', this.ui.views[i])
       this.ui.views[i].classList.add('hide')
     }
@@ -145,7 +125,7 @@ class TabView {
 
   click (button) {
     // console.log('click', button.dataset.view, true)
-    var view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
+    const view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
     this.hideView()
 
     if (this.button) {
@@ -172,14 +152,14 @@ class TabView {
   indicator (button) {
     if (!this.ui.indicator) return
 
-    var t = this.ui.tabs.getBoundingClientRect()
-    var b = button.getBoundingClientRect()
+    const tabs = this.ui.tabs.getBoundingClientRect()
+    var button = button.getBoundingClientRect()
 
     // console.log('tab rect', b.height, b.height)
 
-    this.ui.indicator.style.top = t.height - 2 + 'px'
-    this.ui.indicator.style.left = (b.left - t.left) + 'px'
-    this.ui.indicator.style.width = b.width + 'px'
+    this.ui.indicator.style.top = tabs.height - 2 + 'px'
+    this.ui.indicator.style.left = (button.left - tabs.left) + 'px'
+    this.ui.indicator.style.width = button.width + 'px'
   }
 }
 

package/src/text.js

@@ -1,96 +1,47 @@
-'use strict'
+import build from './module/build'
 
-import create from './mixin/create'
-import insert from './mixin/insert'
-
-var defaults = {
-  prefix: 'material',
-  class: 'text',
-  type: 'default',
-  types: {
-    default: 'span',
-    display4: 'h1',
-    display3: 'h1',
-    display2: 'h1',
-    display1: 'h1',
-    headline: 'h1',
-    title: 'h2',
-    subheading2: 'h3',
-    subheading1: 'h4',
-    body: 'p',
-    body2: 'aside',
-    caption: 'span'
+class Text {
+  static defaults = {
+    class: 'text',
+    tag: 'span'
   }
-}
 
-/**
- * this class creates a text component
- *
- * @since 0.0.6
- * @category Element
- * @param {HTMLElement} element Related element
- * @param {String} className the className to add
- *  grouped values.
- * @returns {HTMLElement} The modified element
- * @example
- *
- * var text = new Text({
- *   text: 'hello',
- *   type: 'title'
- * }).insert(document.body);
- *
- * // => Hello
- */
-class Text {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
-
-    return this
+    this.setup()
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    Object.assign(this, insert)
+    this.options = Object.assign({}, Text.defaults, options || {})
+    Object.assign(this, build)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build () {
-    this.options.tag = this.options.types[this.options.type]
-
-    this.element = create(this.options)
-
+  setup () {
     if (this.options.text) {
       this.set(this.options.text)
     }
-
-    if (this.options.container) {
-      this.insert(this.options.container)
-    }
-    return this
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
-  set (value) {
-    if (value) {
-      this.element.textContent = value
+  set (text) {
+    // console.log('set', text)
+    if (text === undefined) return
+
+    const label = this.options.label || ''
+
+    if (this.options.textFirst) {
+      this.element.innerHTML = text + label
     } else {
-      this.element.textContent = ''
+      this.element.innerHTML = label + text
     }
 
-    return this
+    if (this.options.spaceAfter) {
+      this.element.innerHTML = this.element.innerHTML + ' '
+    }
+  }
+
+  setText (text) {
+    this.element.innerHTML = text
   }
 }
 

package/src/textfield.js

@@ -1,307 +1,170 @@
-'use strict'
-
 import emitter from './module/emitter'
 import attach from './module/attach'
+import dataset from './module/dataset'
+import attributes from './module/attributes'
 
-var defaults = {
-  prefix: 'material',
-  class: 'textfield',
-  type: 'control',
-  tag: 'div',
-  events: [
-    // 'change': '_onChange',
-    ['input.focus', 'focus'],
-    ['input.blur', 'blur'],
-    // ['input.keypress', '_handleInputKeyPress',
-    ['input.keyup', '_handleInputKeyPress']
-    // ['input.change', '_onChange']
-    // 'input.keydown': '_handleInputKeyPress'
-
-  ]
-}
-
-/**
- * Textfield class
- * @class
- */
 class Textfield {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+  static isComponent () {
+    return true
+  }
 
-    this.init()
+  static defaults = {
+    class: 'textfield',
+    attributes: ['type', 'name', 'title', 'maxlength', 'pattern', 'min', 'max', 'placeholder', 'readonly', 'autocomplete', 'required', 'disabled'],
+    events: [
+      ['input.input', 'onInput'],
+      ['input.focus', 'onFocus'],
+      ['input.blur', 'onBlur'],
+      ['input.click', 'onClick']
+    ]
+  }
+
+  constructor (options) {
+    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
-    this.readonly = this.options.readonly
-    this.disabled = this.options.disabled
-
-    return this
+  init (options) {
+    this.options = Object.assign({}, Textfield.defaults, options || {})
+    Object.assign(this, emitter, attach, dataset)
+    // console.log('options', options)
   }
 
-  /**
-   * [build description]
-   * @return {Object} The class instance
-   */
   build () {
-    // create a new div as input element
-    var tag = this.options.tag || 'div'
+    const tag = this.options.tag || 'div'
+
     this.element = document.createElement(tag)
-    this.element.classList.add(this.options.prefix + '-' + this.options.class)
+    this.element.classList.add('textfield')
+
+    if (this.options.class !== 'textfield') {
+      this.element.classList.add(this.options.class)
+    }
 
     this.buildLabel()
     this.buildInput()
-    this.buildUnderline()
 
-    if (this.disabled) {
-      css.add(this.element, 'is-disabled')
+    if (this.options.value) {
+      this.set(this.options.value)
     }
 
-    // insert if container this.options is given
-    if (this.options.container) {
-      // console.log(this.name, opts.container);
-      insert(this.element, this.options.container)
+    if (this.options.data) {
+      dataset(this.element, this.options.data)
     }
+
+    if (this.container) {
+      this.container.appendChild(this.element)
+    }
+
+    return this
   }
 
   buildLabel () {
-    this.label = document.createElement('label')
-    this.label.classList.add(this.options.class + '-label')
-    this.element.appendChild(this.label)
-
-    if (this.options.label !== false) {
-      this.setLabel()
+    if (this.options.label) {
+      this.label = document.createElement('label')
+      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('input')
-    this.input.classList.add(this.options.class + '-input')
-    this.input.setAttribute('type', 'text')
-    this.element.appendChild(this.input)
-
-    if (this.options.name) {
-      this.input.setAttribute('name', this.options.name)
+    let tag = 'input'
+    if (this.options.type === 'multiline') {
+      tag = 'textarea'
     }
 
-    if (!this.options.value) {
-      this.element.classList.add('is-empty')
-    }
-
-    if (this.readonly) {
-      this.input.setAttribute('readonly', 'readonly')
-      this.input.setAttribute('tabindex', '-1')
-    }
+    this.input = document.createElement(tag)
+    this.input.classList.add('input')
 
-    return this.input
-  }
+    this.element.appendChild(this.input)
 
-  /**
-   * _initUnderline
-   * @return {Object} The class instance
-   */
-  buildUnderline () {
-    this.underline = document.createElement('span')
-    this.underline.classList.add(this.options.class + '-underline')
-    this.element.appendChild(this.underline)
-  }
+    attributes(this.input, this.options)
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   */
-  set (prop, value, options) {
-    switch (prop) {
-      case 'value':
-        this.setValue(value, options)
-        break
-      case 'label':
-        this.setLabel(value, options)
-        break
-      case 'disabled':
-        if (value === true) {
-          this.disable()
-        } else if (value === false) {
-          this.enable()
-        }
-        break
-      default:
-        this.setValue(prop, value)
+    if (this.options.focus) {
+      this.input.focus()
     }
-
-    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
-    }
+  onInput (ev) {
+    // console.log('onInput', this.value, this.input.value)
 
-    this.label.textContent = text
+    this.emit('change', ev)
   }
 
-  disable () {
-    this.disabled = true
-
-    this.input.setAttribute('disabled', 'disabled')
-    this.element.classList.add('is-disabled')
-    return this
+  onFocus (ev) {
+    this.element.classList.add('focused')
+    this.emit('focus', ev)
   }
 
-  enable () {
-    this.disabled = false
+  onBlur (ev) {
+    this.element.classList.remove('focused')
+    this.emit('blur', ev)
+  }
 
-    this.element.input.removeAttribute('disabled')
-    this.element.classList.remove('is-disabled')
-    return this
+  onClick (ev) {
+    // console.log('click')
+    this.emit('click', ev)
   }
 
   /**
-   * Getter
+   * Setter
    * @param {string} prop
    * @param {string} value
+   * @return {Object} The class instance
    */
-  get (prop) {
-    var value
-
+  set (prop, value) {
+    // console.log('set', this.element, prop, value)
     switch (prop) {
       case 'value':
-        value = this.getValue()
+        this.setValue(value)
         break
-      case 'name':
-        value = this.name
+      case 'label':
+        this.setLabel(value)
         break
       default:
-        return this.getValue()
+        // console.log('prop', prop)
+        this.setValue(prop)
     }
 
-    return value
-  }
-
-  /**
-   * [getValue description]
-   * @return {Object} The class instance
-   */
-  getValue () {
-    // console.log('getValue', this);
-    return this.input.value
+    return this
   }
 
-  /**
-   * [setValue description]
-   * @param {string} value [description]
-   */
-  setValue (value, silent) {
-    // console.log('setValue', value, silent);
-    this.input.value = value
-
-    if (value) {
-      this.element.classList.remove('is-empty')
+  setValue (value) {
+    // console.log('set', typeof value, value)
+    if (value && value !== 'undefined') {
+      this.value = value
+      this.input.value = value
     } else {
-      this.element.classList.add('is-empty')
+      this.input.value = ''
     }
-
-    if (!silent) { this.emit('change', 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)
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
     }
   }
 
-  /**
-   * [_onFocus description]
-   * @return {Object} The class instance
-   */
-  _handleInputKeyPress (e) {
-    // console.log('_handleInputKeyPress', e);
-    if (this.readonly) return
+  setText (value) {
+    this.setLabel(value)
 
-    if (this.get('value') === '') {
-      this.element.classList.add('is-empty')
-    } else {
-      this.element.classList.remove('is-empty')
+    if (this.options.placeholder) {
+      this.input.placeholder = value
     }
-
-    this.emit('change', this.getValue())
   }
 
-  /**
-   * focus method
-   * @return {?} [description]
-   */
-  focus () {
-    if (this.disabled) return this
-    if (this.readonly) return this
-
-    this.element.classList.add('is-focused')
-    if (this.input !== document.activeElement) { this.input.focus() }
-    return this
+  hide () {
+    this.element.classList.add('hide')
   }
 
-  /**
-   * blur method
-   * @return {?} [description]
-   */
-  blur () {
-    if (this.readonly) return this
-
-    this.element.classList.remove('is-focused')
-
-    return this
+  show () {
+    this.element.classList.remove('hide')
   }
-  /**
-   * [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', '') }
-    }
+
+  get () {
+    return this.input.value
   }
 }