material 0.4.2 → 0.5.0

package/src/control/switcher.js

@@ -0,0 +1,245 @@
+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
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter)
+
+    this.build()
+    this.attach()
+
+    if (this.options.default) {
+      this.selectByName(this.options.default, true)
+    }
+
+    return this
+  }
+
+  build () {
+    this.root = document.createElement(this.options.tag)
+
+    if (this.options.class !== 'button') {
+      this.root.setAttribute('class', 'switcher ' + this.options.class)
+    } else {
+      this.root.classList.add('switcher')
+    }
+
+    if (this.options.label) {
+      this.label = document.createElement('label')
+      this.label.innerHTML = this.options.label
+      this.root.appendChild(this.label)
+    }
+
+    this.knob = document.createElement('span')
+    this.knob.classList.add('knob')
+    this.root.appendChild(this.knob)
+
+    if (this.options.size) {
+      this.root.classList.add(this.options.size + '-size')
+    }
+
+    this.buildList(this.options.list)
+
+    if (this.options.list) {
+      this.addOptions(this.options.list)
+    }
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+  }
+
+  buildList (list) {
+    this.list = document.createElement('ul')
+    this.root.appendChild(this.list)
+  }
+
+  attach () {
+    this.root.addEventListener('click', (event) => {
+      if (!event.target.dataset.switcher) return
+      this.select(event.target)
+    })
+  }
+
+  select (option) {
+    if (this.options.mode === 'multiple') {
+      this.multiple(option)
+    } else {
+      this.unique(option)
+    }
+  }
+
+  preselect (item) {
+    // console.log('preselect', item)
+    if (item) {
+      item.classList.add('preselected')
+    } else {
+      var items = this.list.childNodes
+      for (var i = 0; i < items.length; i++) {
+        items[i].classList.remove('preselected')
+      }
+    }
+  }
+
+  selectByName (name) {
+    // console.log('selectByName', name)
+    var item = this.root.querySelector('[data-switcher="' + name + '"]')
+    // console.log('item', item)
+    if (item) {
+      this.select(item)
+    }
+  }
+
+  preSelectByName (name) {
+    // console.log('selectByName', name)
+    var item = this.root.querySelector('[data-switcher="' + name + '"]')
+    // console.log('item', item)
+    this.preselect(item)
+  }
+
+  unique (option) {
+    // console.log('option', option)
+    if (!option.classList.contains('selected')) {
+      var options = this.list.childNodes
+
+      for (var i = 0; i < options.length; i++) {
+        options[i].classList.remove('selected')
+      }
+
+      option.classList.add('selected')
+      this.selected = [option.dataset.switcher]
+      this.emit('change', this.selected[0])
+    } else {
+      if (this.options.allowEmpty) {
+        option.classList.remove('selected')
+        this.selected = []
+        this.emit('change', this.selected[0])
+      }
+    }
+  }
+
+  multiple (option) {
+    if (option.classList.contains('selected')) {
+      if (this.selected.length === 1) return
+      var i = this.selected.indexOf(option.dataset.switcher)
+      this.selected.splice(i, 1)
+      option.classList.remove('selected')
+    } else {
+      option.classList.add('selected')
+      this.selected.push(option.dataset.switcher)
+    }
+
+    this.emit('change', this.selected)
+  }
+
+  set (prop, value) {
+    switch (prop) {
+      case 'value':
+        this.setValue(value)
+        break
+      case 'options':
+        this.setOptions(value)
+        break
+      case 'option':
+        this.addOptions(value)
+        break
+      default:
+        this.setValue(prop)
+    }
+
+    return this
+  }
+
+  setValue (value) {
+    // console.log('value', value, this.options.list, this.root)
+    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')
+        if (list[i] == value) {
+          this.selected = [value]
+          this.root.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')
+        if (value.indexOf(list[i]) !== -1) {
+          this.selected.push(list[i])
+          this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
+        }
+      }
+    }
+  }
+
+  addOptions (list) {
+    // console.log('setOptions', list, this.options.list)
+
+    if (!list) return
+
+    for (var i = 0; i < list.length; i++) {
+      this.addOption(list[i])
+    }
+  }
+
+  setOptions (list) {
+    // console.log('setOptions', list, this.options.list)
+
+    if (!list) return
+
+    if (this.options.list.length < 1) this.options.list = list
+
+    for (var i = 0; i < list.length; i++) {
+      this.addOption(list[i])
+    }
+  }
+
+  addOption (value) {
+    // console.log('addOption', value)
+    var item = document.createElement('li')
+    item.classList.add('item')
+    item.dataset.switcher = value
+    item.innerHTML = value
+    this.list.appendChild(item)
+      // this.options.list.push(list[i])
+  }
+
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
+    }
+  }
+
+  setText (value) {
+    // console.log('setText', value)
+    this.setLabel(value)
+  }
+
+  get () {
+    // console.log('get', this.selected)
+    if (this.options.mode === 'unique') {
+      return this.selected[0]
+    } else {
+      return this.selected
+    }
+  }
+}
+
+export default Switcher

package/src/control/text.js

@@ -0,0 +1,66 @@
+import addClass from './module/addclass'
+
+const defaults = {
+  class: 'text',
+  tag: 'span'
+}
+
+class Text {
+  /**
+   * Constructor
+   * @param  {Object} options - Component options
+   * @return {Object} Class instance
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+
+    // console.log('options', this.options)
+
+    this.build()
+
+    return this
+  }
+
+  /**
+   * Build Method
+   * @return {Object} This class instance
+   */
+  build () {
+    this.root = document.createElement(this.options.tag)
+    addClass(this.root, this.options.class)
+
+    if (this.options.class !== 'text') {
+      this.root.classList.add('text')
+    }
+
+    if (this.options.text) {
+      this.set(this.options.text)
+    }
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    return this
+  }
+
+  set (text) {
+    // console.log('set', text)
+    if (text === undefined) return
+
+    var label = this.options.label || ''
+
+    this.root.innerHTML = label + text
+
+    if (this.options.spaceAfter) {
+      this.root.innerHTML = this.root.innerHTML + ' '
+    }
+  }
+
+  setText (text) {
+    // console.log('setText', text)
+    this.root.innerHTML = text
+  }
+}
+
+export default Text

package/src/control/textfield.js

@@ -0,0 +1,177 @@
+
+import emitter from '../module/emitter'
+import attach from '../module/attach'
+import dataset from '../view/dataset'
+import attributes from './module/attributes'
+
+const 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']
+  ]
+}
+
+class Text {
+  static isComponent () {
+    return true
+  }
+  /**
+   * Constructor
+   * @param  {Object} options - Component options
+   * @return {Object} Class instance
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter, attach, dataset)
+    // console.log('options', options)
+
+    this.build()
+    this.attach()
+
+    return this
+  }
+
+  /**
+   * Build Method
+   * @return {Object} This class instance
+   */
+  build () {
+    var tag = this.options.tag || 'div'
+
+    this.root = document.createElement(tag)
+    this.root.classList.add('textfield')
+
+    if (this.options.class !== 'textfield') {
+      this.root.classList.add(this.options.class)
+    }
+
+    this.buildLabel()
+    this.buildInput()
+
+    if (this.options.value) {
+      this.set(this.options.value)
+    }
+
+    if (this.options.data) {
+      dataset(this.root, this.options.data)
+    }
+
+    if (this.container) {
+      this.container.appendChild(this.root)
+    }
+
+    return this
+  }
+
+  buildLabel () {
+    if (this.options.label) {
+      this.label = document.createElement('label')
+      this.label.classList.add('label')
+      this.label.innerHTML = this.options.label
+      this.root.appendChild(this.label)
+    }
+  }
+
+  buildInput () {
+    let tag = 'input'
+    if (this.options.type === 'multiline') {
+      tag = 'textarea'
+    }
+    this.input = document.createElement(tag)
+    this.input.classList.add('input')
+    this.root.appendChild(this.input)
+
+    attributes(this.input, this.options)
+
+    if (this.options.focus) {
+      this.input.focus()
+    }
+  }
+
+  onInput (ev) {
+    console.log('onInput', this.value, this.input.value)
+
+    this.emit('change', ev)
+  }
+
+  onFocus (ev) {
+    this.root.classList.add('focused')
+    this.emit('focus', ev)
+  }
+
+  onBlur (ev) {
+    this.root.classList.remove('focused')
+    this.emit('blur', ev)
+  }
+
+  onClick (ev) {
+    console.log('click')
+    this.emit('click', ev)
+  }
+
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
+   */
+  set (prop, value) {
+    // console.log('set', this.root, prop, value)
+    switch (prop) {
+      case 'value':
+        this.setValue(value)
+        break
+      case 'label':
+        this.setLabel(value)
+        break
+      default:
+        // console.log('prop', prop)
+        this.setValue(prop)
+    }
+
+    return this
+  }
+
+  setValue (value) {
+    // console.log('set', typeof value, value)
+    if (value && value !== 'undefined') {
+      this.value = value
+      this.input.value = value
+    } else {
+      this.input.value = ''
+    }
+  }
+
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
+    }
+  }
+
+  setText (value) {
+    this.setLabel(value)
+
+    if (this.options.placeholder) {
+      this.input.placeholder = value
+    }
+  }
+
+  hide () {
+    this.root.classList.add('hide')
+  }
+
+  show () {
+    this.root.classList.remove('hide')
+  }
+
+  get () {
+    return this.input.value
+  }
+}
+
+export default Text

package/src/field/image.js

@@ -20,12 +20,16 @@ const defaults = {
  * });
  */
 class Image {
+  static isImage () {
+    return true
+  }
   /**
    * Constructor
    * @param  {Object} options - Component options
    * @return {Object} Class instance
    */
   constructor (options) {
+    // console.log('options', options)
     this.options = Object.assign({}, defaults, options || {})
 
     this.build()
@@ -48,8 +52,10 @@ class Image {
     return this
   }
 
-  set (src) {
-    // console.log('set', src)
+  set (src, asset) {
+    console.log('set', src, asset)
+
+    asset = asset || {}
 
     if (!src) return
 
@@ -70,7 +76,7 @@ class Image {
       url = url + format
     }
 
-    this.root.style.backgroundImage = 'url(' + url + src.filename + ')'
+    this.root.style.backgroundImage = 'url(' + asset.url + src.path + 'thumb/' + src.filename + ')'
   }
 
   sanitize (formats) {

package/src/form/build.js

@@ -1,15 +1,49 @@
+import dataset from '../view/dataset'
+
 import Layout from '../layout'
 
 export default {
   build () {
     // console.log('build', this.options.layout)
     this.root = document.createElement('div')
-    this.root.classList.add('form-view')
+    this.root.classList.add('form')
+
+    if (this.options.class !== 'form') {
+      this.root.classList.add(this.options.class)
+    }
+
+    if (this.options.form) {
+      this.root.classList.add(this.options.form)
+    }
+
+    if (this.options.data) {
+      dataset(this.root, this.options.data)
+    }
+
+    this.buildForm(this.options.form)
 
+    this.buildLayout()
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+  },
+
+  buildForm (form) {
     this.form = document.createElement('form')
     this.root.appendChild(this.form)
 
-    this.buildLayout()
+    if (form && form.method) {
+      this.form.setAttribute('method', form.method)
+    }
+
+    if (this.options.autocomplete) {
+      this.form.setAttribute('autocomplete', this.options.autocomplete)
+    }
+
+    if (this.options.action) {
+      this.form.setAttribute('action', this.options.action)
+    }
   },
 
   buildLayout () {
@@ -18,14 +52,20 @@ export default {
     this.layout = new Layout(this.options.layout, this.form)
     this.ui = this.layout.component
 
+    // console.log('ui', this.ui)
+
     this.extractInfo(this.ui)
     this.extractFile(this.ui)
     // console.log('file', this.file)
 
-    this.ui.submit.disable()
-    this.ui.cancel.disable()
+    if (this.disableControl) {
+      this.disableControl()
+    }
 
-    // console.log('ui', this.ui)
+    if (this.language) {
+      // console.log('translate')
+      this.translate()
+    }
   },
 
   extractFile (object) {
@@ -47,6 +87,7 @@ export default {
     // console.log('extractField', object)
 
     this.field = {}
+    this.fields = []
 
     for (var property in object) {
       if (object.hasOwnProperty(property)) {
@@ -55,10 +96,23 @@ export default {
         if (infos[0] === 'info' && infos[1] !== undefined) {
           var name = property.substr(5, property.length)
           // console.log('field', name, property)
-
+          this.fields.push(name)
           this.field[name] = object[property]
         }
       }
     }
+  },
+
+  clean () {
+    // console.log('clean', this.info)
+    for (var member in this.info) {
+      delete this.info[member]
+    }
+
+    this.form.reset()
+
+    // console.log('cleaned', this.info)
+
+    this.emit('cleaned')
   }
 }

package/src/form/cancel.js

@@ -1,13 +1,17 @@
 export default {
-  cancel () {
-    console.log('cancel', this.info, this.mode)
+  cancel (ev) {
+    // console.log('cancel', this.info, this.mode)
+    ev.preventDefault()
 
     this.render(this.info)
 
     if (this.mode === 'create') {
-      console.log('cancel create')
       this.mode = null
       this.emit('cancel', 'create')
     }
+
+    this.setMode('read')
+
+    return false
   }
 }