material 0.4.3 → 0.5.0

package/src/control/{upload.js → file.js}

@@ -3,11 +3,11 @@ import dataset from '../view/dataset'
 import attributes from './module/attributes'
 
 const defaults = {
-  class: 'upload',
-  attributes: ['name', 'accept', 'required', 'disabled']
+  class: 'file',
+  attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
 }
 
-class Upload {
+class File {
   /**
    * Constructor
    * @param  {Object} options - Component options
@@ -29,9 +29,9 @@ class Upload {
    */
   build () {
     this.root = document.createElement('div')
-    this.root.classList.add('upload')
+    this.root.classList.add('file')
 
-    if (this.options.class !== 'upload') {
+    if (this.options.class !== 'file') {
       this.root.classList.add(this.options.class)
     }
 
@@ -55,7 +55,8 @@ class Upload {
 
   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)
     }
@@ -85,14 +86,38 @@ class Upload {
     })
   }
 
+  image (e) {
+    // console.log('image', e.target)
+    // if (input.files && input.files[0]) {
+    //   var reader = new FileReader()
+
+    //   reader.onload = (e) => {
+    //     cover.style.backgroundImage = 'url("' + e.target.result + '")'
+    //   }
+
+    //   reader.readAsDataURL(input.files[0])
+    // }
+  }
+
   reset () {
     // console.log('reset')
     this.input.value = ''
   }
 
   set (image) {
-    console.log('set', image)
+    // console.log('set', image)
+  }
+
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
+    }
+  }
+
+  setText (value) {
+    this.setLabel(value)
   }
 }
 
-export default Upload
+export default File

package/src/control/link.js

@@ -0,0 +1,61 @@
+'use strict'
+
+const defaults = {
+  class: 'link',
+  tag: 'a'
+}
+
+class Link {
+  /**
+   * Constructor
+   * @param  {Object} options - Component options
+   * @return {Object} Class instance
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+
+    this.build()
+
+    return this
+  }
+
+  /**
+   * Build Method
+   * @return {Object} This class instance
+   */
+  build () {
+    this.root = document.createElement(this.options.tag)
+    this.root.classList.add(this.options.class)
+
+    if (this.options.class !== 'link') {
+      this.root.classList.add('link')
+    }
+
+    if (this.options.link) {
+      this.set(this.options.link)
+    }
+
+    if (this.options.target) {
+      this.root.target = this.options.target
+    }
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    if (this.options.text) {
+      this.root.innerHTML = this.options.text
+    }
+
+    return this
+  }
+
+  set (link) {
+    // console.log('set', text)
+    if (link === undefined) return
+
+    this.root.href = link
+  }
+}
+
+export default Link

package/src/control/list.js

@@ -0,0 +1,77 @@
+import addClass from './module/addclass'
+
+const defaults = {
+  class: 'text',
+  tag: 'span',
+  seprator: ' | '
+}
+
+class List {
+  /**
+   * 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.list) {
+      this.set(this.options.list)
+    }
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    return this
+  }
+
+  set (list) {
+    var text = ''
+
+    for (var i = 0; i < list.length; i++) {
+      if (i < list.length - 1) {
+        text = text + list[i] + this.options.seprator
+      } else {
+        text = text + list[i]
+      }
+    }
+
+    // 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 List

package/src/control/loading.js

@@ -0,0 +1,128 @@
+import emitter from '../module/emitter'
+import attach from '../module/attach'
+
+import dataset from '../view/dataset'
+
+var defaults = {
+  class: 'loading',
+  tag: 'div',
+  delay: 1000,
+  type: 'indeterminate',
+  circular: `<svg class="progress" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+      <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+    </svg>`
+}
+
+/**
+ * The class represents an item ie for list
+ *
+ * @class
+ * @return {Object} The class instance
+ * @example new Item(object);
+ */
+class Loading {
+  static isComponent () {
+    return true
+  }
+
+  /**
+   * init
+   * @return {Object} The class options
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter, attach)
+    // console.log('options', options)
+
+    this.init()
+
+    return this
+  }
+
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
+   */
+  init () {
+    this.build()
+    // this.setup()
+    // this.attach()
+
+    if (this.options.container) {
+      this.append(this.options.container)
+    }
+
+    return this
+  }
+
+  /**
+   * Build function for item
+   * @return {Object} This class instance
+   */
+  build (options) {
+    this.root = document.createElement(this.options.tag)
+    this.classify()
+
+    if (this.options.type === 'circular') {
+      this.root.innerHTML = this.options.circular
+    } if (this.options.type === 'indeterminate') {
+      this.bar = document.createElement(this.options.tag)
+      this.bar.classList.add('bar')
+      this.root.classList.add('type-indeterminate')
+      this.root.appendChild(this.bar)
+    }
+
+    return this
+  }
+
+  classify () {
+    if (this.options.class !== 'loading') {
+      this.root.setAttribute('class', this.options.class + ' ' + this.options.class)
+    } else {
+      this.root.classList.add(this.options.class)
+    }
+  }
+
+  append (container) {
+    container = container || this.options.container
+    if (this.options.container) {
+      container.appendChild(this.root)
+    }
+  }
+
+  set (progress) {
+    this.bar.setAttribute('style', 'width: ' + progress)
+  }
+
+  show (delay) {
+    delay = delay || this.options.delay
+
+    clearTimeout(this.showTimeout)
+    this.showTimeout = setTimeout(() => {
+      this.root.classList.add('show')
+    }, this.options.delay)
+
+    this.visible = true
+
+    return this
+  }
+
+  showNow () {
+    this.root.classList.add('show')
+
+    this.visible
+
+    return this
+  }
+
+  hide () {
+    clearTimeout(this.showTimeout)
+    this.root.classList.remove('show')
+    this.visible = false
+    return this
+  }
+};
+
+export default Loading

package/src/control/module/addclass.js

@@ -0,0 +1,16 @@
+
+function setClass (element, className) {
+  // console.log('attributes', o.attributes, element)
+
+  if (!element || !className) return
+
+  let classNames = className.split(' ')
+
+  for (var i = 0; i < classNames.length; i++) {
+    var name = classNames[i]
+    element.classList.add(name)
+  }
+  return element
+}
+
+export default setClass

package/src/control/module/attributes.js

@@ -1,8 +1,10 @@
-const special = ['required', 'disabled']
+const special = ['required', 'disabled', 'multiple', 'checked']
 
 function setAttributes (element, o) {
   // console.log('attributes', o.attributes, element)
 
+  if (!element) return
+
   for (var i = 0; i < o.attributes.length; i++) {
     var attribute = o.attributes[i]
 

package/src/control/search.js

@@ -0,0 +1,98 @@
+// search control
+
+import emitter from '../module/emitter'
+import Button from '../control/button'
+import cancel from '../skin/material/icon/cancel.svg'
+
+const defaults = {
+  class: 'search-input',
+  minChar: 4,
+  iconCancel: cancel,
+  timeout: 200
+}
+
+/**
+ * Class representing a search input
+ *
+ * @return {parent} The class instance
+ * @example new Search({
+ *   container: document.body
+ * });
+ */
+class Search {
+  /**
+   * 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()
+
+    return this
+  }
+
+  /**
+   * Build Method
+   * @return {Object} This class instance
+   */
+  build () {
+    this.root = document.createElement('div')
+    this.root.classList.add('search')
+
+    if (this.options.class !== 'search') {
+      this.root.classList.add(this.options.class)
+    }
+
+    if (this.options.icon) {
+      this.icon = document.createElement('i')
+      this.icon.classList.add('icon')
+      this.icon.innerHTML = this.options.icon
+      this.root.appendChild(this.icon)
+    }
+
+    this.input = document.createElement('input')
+    this.input.classList.add('input')
+    this.root.appendChild(this.input)
+
+    this.cancel = new Button({
+      container: this.root,
+      class: 'clear',
+      icon: this.options.iconCancel
+    })
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    return this
+  }
+
+  attach () {
+    this.input.addEventListener('input', () => {
+      if (this.input.value.length < this.options.minChar) return
+
+      clearTimeout(this.timeout)
+
+      this.timeout = setTimeout(() => {
+        this.emit('change', this.input.value)
+      }, this.options.timeout)
+    })
+
+    this.cancel.on('click', () => {
+      this.input.value = ''
+      this.input.focus()
+      this.emit('cancel')
+    })
+  }
+
+  set (email) {
+    this.root.innerHTML = email
+    this.root.setAttribute('href', 'mailto:' + email)
+  }
+}
+
+export default Search

package/src/control/select.js

@@ -1,10 +1,16 @@
+import emitter from '..//module/emitter'
+import attach from '../module/attach'
+import attributes from './module/attributes'
+import dataset from '../view/dataset'
 
 const defaults = {
-  class: 'textfield',
-  tag: 'div'
+  type: 'list', // native
+  class: 'select',
+  first: null,
+  attributes: ['type', 'name', 'autocomplete', 'required']
 }
 
-class Text {
+class Select {
   /**
    * Constructor
    * @param  {Object} options - Component options
@@ -12,10 +18,10 @@ class Text {
    */
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
-
-    // console.log('options', options)
+    Object.assign(this, emitter, attach, dataset)
 
     this.build()
+    this.attach()
 
     return this
   }
@@ -25,48 +31,100 @@ class Text {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    var tag = this.options.tag || 'span'
+    this.root = document.createElement(tag)
+    this.root.classList.add('select')
+
+    if (this.options.class !== 'select') {
+      this.root.classList.add(this.options.class)
+    }
+
+    this.buildLabel()
+    this.buildInput()
+
+    if (this.container) {
+      this.container.appendChild(this.root)
+    }
 
+    return this
+  }
+
+  buildLabel () {
     if (this.options.label) {
       this.label = document.createElement('span')
+      this.label.classList.add('label')
       this.label.innerHTML = this.options.label
       this.root.appendChild(this.label)
     }
+  }
 
-    this.input = document.createElement('input')
+  buildInput () {
+    this.input = document.createElement('select')
+    this.input.classList.add('input')
     this.root.appendChild(this.input)
 
-    if (this.options.type) {
-      this.input.setAttribute('type', this.options.type)
-    }
+    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.name) {
-      this.input.setAttribute('name', this.options.name)
+    if (this.options.data) {
+      dataset(this.data, this.options.data)
     }
 
-    if (this.options.required) {
-      this.input.setAttribute('required', 'required')
+    attributes(this.input, this.options)
+
+    if (this.options.options) {
+      this.setOptions(this.options.options)
     }
+  }
+
+  setOptions (options) {
+    // console.log('buildCountry', this.input)
 
-    if (this.options.autocomplete) {
-      this.input.setAttribute('autocomplete', this.options.autocomplete)
+    var first = this.options.first
+
+    if (first && first[0] && first[1]) {
+      this.input.options[0] = new Option(first[1], first[0])
     }
 
-    if (this.container) {
-      this.container.appendChild(this.root)
+    for (var i = 0; i < options.length; i++) {
+      this.addOption(options[i][1], options[i][0])
     }
+  }
 
-    return this
+  addOption (name, value) {
+    // console.log('addOption', name, value)
+    this.input.options[this.input.options.length] = new Option(name, value)
   }
 
   set (value) {
+    // console.log('set', value)
     this.input.value = value
+
+    return this
+  }
+
+  setLabel (value) {
+    console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
+    }
+  }
+
+  setText (value) {
+    this.setLabel(value)
   }
 
   get () {
-    return this.input.value
+    var value = null
+
+    if (this.input[this.input.selectedIndex]) {
+      value = this.input[this.input.selectedIndex].value
+    }
+
+    return value
   }
 }
 
-export default Text
+export default Select