material 0.6.2 → 0.7.1

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

@@ -1,55 +1,52 @@
-import emitter from '../module/emitter'
-
-const defaults = {
-  class: 'switcher',
-  tag: 'div',
-  list: [],
-  first: false,
-  mode: 'unique',
-  allowEmpty: false
-}
-
-class Switcher {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
+import EventEmitter from './mixin/emitter'
+
+class Switcher extends EventEmitter{
+  static defaults = {
+    class: 'switcher',
+    tag: 'div',
+    list: [],
+    first: false,
+    mode: 'unique',
+    allowEmpty: false
+  }
+  
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+    super()
 
+    this.init(options)
     this.build()
     this.attach()
 
     if (this.options.default) {
       this.selectByName(this.options.default, true)
     }
+  }
 
-    return this
+  init(options) {
+    this.options = Object.assign({}, Switcher.defaults, options || {})
   }
 
   build () {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
 
     if (this.options.class !== 'button') {
-      this.root.setAttribute('class', 'switcher ' + this.options.class)
+      this.element.setAttribute('class', 'switcher ' + this.options.class)
     } else {
-      this.root.classList.add('switcher')
+      this.element.classList.add('switcher')
     }
 
     if (this.options.label) {
       this.label = document.createElement('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
 
     this.knob = document.createElement('span')
     this.knob.classList.add('knob')
-    this.root.appendChild(this.knob)
+    this.element.appendChild(this.knob)
 
     if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
+      this.element.classList.add(this.options.size + '-size')
     }
 
     this.buildList(this.options.list)
@@ -59,17 +56,17 @@ class Switcher {
     }
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
   buildList (list) {
     this.list = document.createElement('ul')
-    this.root.appendChild(this.list)
+    this.element.appendChild(this.list)
   }
 
   attach () {
-    this.root.addEventListener('click', (event) => {
+    this.element.addEventListener('click', (event) => {
       if (!event.target.dataset.switcher) return
       this.select(event.target)
     })
@@ -97,7 +94,7 @@ class Switcher {
 
   selectByName (name) {
     // console.log('selectByName', name)
-    var item = this.root.querySelector('[data-switcher="' + name + '"]')
+    var item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     if (item) {
       this.select(item)
@@ -106,7 +103,7 @@ class Switcher {
 
   preSelectByName (name) {
     // console.log('selectByName', name)
-    var item = this.root.querySelector('[data-switcher="' + name + '"]')
+    var item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     this.preselect(item)
   }
@@ -165,24 +162,24 @@ class Switcher {
   }
 
   setValue (value) {
-    // console.log('value', value, this.options.list, this.root)
+    // console.log('value', value, this.options.list, this.element)
     var list = this.options.list
     if (this.options.mode === 'unique') {
       for (var i = 0; i < list.length; i++) {
-        this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
+        this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
         if (list[i] == value) {
           this.selected = [value]
-          this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
+          this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
         }
       }
     } else {
       value = value || []
       this.selected = []
       for (var i = 0; i < list.length; i++) {
-        this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
+        this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
         if (value.indexOf(list[i]) !== -1) {
           this.selected.push(list[i])
-          this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
+          this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
         }
       }
     }

package/src/tabs.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 import emitter from './module/emitter'
 
 import offset from './element/offset'
@@ -44,11 +44,11 @@ class Tabs {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
     this.tab = { }
     if (this.options.list) {
       this.list = new List({
-        // root: this.root,
+        // root: this.element,
         tag: 'div',
         list: this.options.list,
         target: '.material-button',
@@ -75,11 +75,11 @@ class Tabs {
           this.selected = item
           this.click(item)
         }
-      }).insert(this.root)
+      }).insert(this.element)
     }
 
     this.indicator = create(this.options.indicator)
-    this.insertElement(this.indicator, this.root)
+    this.insertElement(this.indicator, this.element)
 
     if (this.options.container) {
       this.insert(this.options.container)
@@ -95,8 +95,8 @@ class Tabs {
   }
 
   click (item, silent) {
-    // console.log('clickitem', item, this.root);
-    var or = offset(this.root)
+    // console.log('clickitem', item, this.element);
+    var or = offset(this.element)
     var o = offset(item)
     this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
 

package/src/tabview.js

@@ -31,7 +31,7 @@ class TabView {
 
     var ready = false
 
-    observer.insert(this.root, () => {
+    observer.insert(this.element, () => {
       // console.log('!!! inserted')
       if (!ready) {
         ready = true
@@ -46,13 +46,13 @@ class TabView {
   }
 
   build () {
-    this.root = document.createElement(this.options.tag || 'div')
-    this.root.classList.add('tabview')
+    this.element = document.createElement(this.options.tag || 'div')
+    this.element.classList.add('tabview')
 
-    this.root.classList.add('view')
+    this.element.classList.add('view')
 
     if (this.options.class !== 'tabview') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.ui = {}
@@ -63,9 +63,9 @@ class TabView {
     this.view = {}
     this.views = []
 
-    this.ui.tabs = this.root.querySelector('[class="tabs"]')
-    this.ui.view = this.root.querySelector('[class="views"]')
-    this.ui.indicator = this.root.querySelector('[class="indicator"]')
+    this.ui.tabs = this.element.querySelector('[class="tabs"]')
+    this.ui.view = this.element.querySelector('[class="views"]')
+    this.ui.indicator = this.element.querySelector('[class="indicator"]')
 
     this.ui.buttons = this.ui.tabs.childNodes
     this.ui.views = this.ui.view.childNodes

package/src/text.js

@@ -1,96 +1,47 @@
-'use strict'
+import build from './module/build'
 
-import create from './component/create'
-import insert from './component/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.root = 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.root.textContent = value
+  set (text) {
+    // console.log('set', text)
+    if (text === undefined) return
+
+    var label = this.options.label || ''
+
+    if (this.options.textFirst) {
+      this.element.innerHTML = text + label
     } else {
-      this.root.textContent = ''
+      this.element.innerHTML = label + text
     }
 
-    return this
+    if (this.options.spaceAfter) {
+      this.element.innerHTML = this.element.innerHTML + ' '
+    }
+  }
+
+  setText (text) {
+    this.element.innerHTML = text
   }
 }