material 0.4.3 → 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

@@ -1,4 +1,4 @@
-'use strict'
+import addClass from './module/addclass'
 
 const defaults = {
   class: 'text',
@@ -14,6 +14,8 @@ class Text {
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 
+    // console.log('options', this.options)
+
     this.build()
 
     return this
@@ -25,7 +27,11 @@ class Text {
    */
   build () {
     this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    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)
@@ -40,12 +46,21 @@ class Text {
 
   set (text) {
     // console.log('set', text)
-    this.root.innerHTML = 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

@@ -6,10 +6,12 @@ import attributes from './module/attributes'
 
 const defaults = {
   class: 'textfield',
-  tag: 'div',
-  attributes: ['type', 'name', 'autocomplete', 'required', 'disabled'],
+  attributes: ['type', 'name', 'title', 'maxlength', 'pattern', 'min', 'max', 'placeholder', 'readonly', 'autocomplete', 'required', 'disabled'],
   events: [
-    ['input.keyup', 'onKeyup']
+    ['input.input', 'onInput'],
+    ['input.focus', 'onFocus'],
+    ['input.blur', 'onBlur'],
+    ['input.click', 'onClick']
   ]
 }
 
@@ -38,10 +40,12 @@ class Text {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
+    var tag = this.options.tag || 'div'
+
+    this.root = document.createElement(tag)
     this.root.classList.add('textfield')
 
-    if (this.options.class !== 'upload') {
+    if (this.options.class !== 'textfield') {
       this.root.classList.add(this.options.class)
     }
 
@@ -65,14 +69,20 @@ class Text {
 
   buildLabel () {
     if (this.options.label) {
-      this.label = document.createElement('span')
+      this.label = document.createElement('label')
+      this.label.classList.add('label')
       this.label.innerHTML = this.options.label
       this.root.appendChild(this.label)
     }
   }
 
   buildInput () {
-    this.input = document.createElement('input')
+    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)
@@ -82,17 +92,81 @@ class Text {
     }
   }
 
-  onKeyup (ev) {
-    // console.log('change', this.value, this.input.value)
-    if (this.value !== this.input.value) {
-      this.emit('change', ev)
+  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')
   }
 
-  set (value) {
-    // console.log('set', value)
-    this.value = value
-    this.input.value = value
+  show () {
+    this.root.classList.remove('hide')
   }
 
   get () {

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

@@ -12,6 +12,10 @@ export default {
       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)
     }
@@ -33,12 +37,12 @@ export default {
       this.form.setAttribute('method', form.method)
     }
 
-    if (form && form.autocomplete) {
-      this.form.setAttribute('autocomplete', form.autocomplete)
+    if (this.options.autocomplete) {
+      this.form.setAttribute('autocomplete', this.options.autocomplete)
     }
 
-    if (form && form.action) {
-      this.form.setAttribute('action', form.action)
+    if (this.options.action) {
+      this.form.setAttribute('action', this.options.action)
     }
   },
 
@@ -48,6 +52,8 @@ 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)
@@ -55,6 +61,11 @@ export default {
     if (this.disableControl) {
       this.disableControl()
     }
+
+    if (this.language) {
+      // console.log('translate')
+      this.translate()
+    }
   },
 
   extractFile (object) {
@@ -90,5 +101,18 @@ export default {
         }
       }
     }
+  },
+
+  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
   }
 }

package/src/form/controller.js

@@ -0,0 +1,90 @@
+
+export default {
+
+  initController () {
+    // console.log('initController', this.field)
+
+    this.disableControls()
+
+    for (var field in this.field) {
+      if (this.field.hasOwnProperty(field)) {
+        this.bindControl(this.field[field])
+      }
+    }
+
+    for (var file in this.file) {
+      if (this.file.hasOwnProperty(file)) {
+        this.bindControl(this.file[file])
+      }
+    }
+  },
+
+  setMode (mode) {
+    // console.log('setMode', mode)
+    this.mode = mode
+
+    this.updateClassMode(mode)
+
+    this.emit('mode', mode)
+  },
+
+  updateClassMode (mode) {
+    var modes = ['read', 'create', 'update']
+
+    for (var i = 0; i < modes.length; i++) {
+      this.form.classList.remove(modes[i] + '-mode')
+    }
+
+    this.form.classList.add(mode + '-mode')
+  },
+
+  changeMode (mode) {
+    console.log('changeMode', mode)
+
+    if (mode === 'update' && this.enableControls) {
+      this.enableControls()
+    } else if (mode === 'update' && this.disableControls) {
+      this.disableControls()
+    } else if (mode === 'read' && this.disableControls) {
+      this.disableControls()
+    }
+  },
+
+  bindControl (control) {
+    // console.log('bindControl')
+    if (control && control.on) {
+      control.on('change', () => {
+        // console.log('change', control, this.mode)
+        if (this.mode === 'read') {
+          this.setMode('update')
+        }
+      })
+    }
+  },
+
+  enableControls () {
+    // console.log('enableControls')
+    var controls = this.options.controls || ['submit', 'cancel']
+
+    if (controls === null) return
+
+    for (var i = 0; i < controls.length; i++) {
+      if (this.ui[controls[i]] && this.ui[controls[i]].enable) {
+        this.ui[controls[i]].enable()
+      }
+    }
+  },
+
+  disableControls () {
+    // console.log('disableControls')
+    var controls = this.options.controls || ['submit', 'cancel']
+
+    if (controls === null) return
+
+    for (var i = 0; i < controls.length; i++) {
+      if (this.ui[controls[i]] && this.ui[controls[i]].disable) {
+        this.ui[controls[i]].disable()
+      }
+    }
+  }
+}

package/src/form/create.js

@@ -1,15 +1,19 @@
 
 export default {
 
-  create (info) {
-    console.log('create', info, this.info)
-    this.form.style.display = 'flex'
+  create () {
+    console.log('create', this.options.create.info)
 
+    this.clean()
+
+    var info = this.options.create.info || { name: 'New Item' }
+
+    console.log('info', info)
+
+    this.render(info, 'create')
     this.setMode('create')
-    this.render(this.options.create, 'create')
+    this.enableControls()
 
-    if (this.controls) {
-      this.enableControls()
-    }
+    this.emit('new')
   }
 }