material 0.4.2 → 0.5.0

package/src/control/file.js

@@ -0,0 +1,123 @@
+import emitter from '../module/emitter'
+import dataset from '../view/dataset'
+import attributes from './module/attributes'
+
+const defaults = {
+  class: 'file',
+  attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
+}
+
+class File {
+  /**
+   * 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('file')
+
+    if (this.options.class !== 'file') {
+      this.root.classList.add(this.options.class)
+    }
+
+    this.buildLabel()
+    this.buildInput()
+
+    if (this.options.data) {
+      dataset(this.root, this.options.data)
+    }
+
+    if (this.options.focus) {
+      this.input.focus()
+    }
+
+    if (this.options.container) {
+      this.options.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 () {
+    this.field = document.createElement('div')
+    this.field.classList.add('field')
+    this.root.appendChild(this.field)
+
+    this.input = document.createElement('input')
+    this.input.setAttribute('type', 'file')
+    this.root.appendChild(this.input)
+
+    attributes(this.input, this.options)
+
+    this.field.appendChild(this.input)
+
+    if (this.options.focus) {
+      this.input.focus()
+    }
+  }
+
+  attach () {
+    this.input.addEventListener('change', (e) => {
+      this.emit('change', e)
+    })
+  }
+
+  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)
+  }
+
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.label) {
+      this.label.innerHTML = value
+    }
+  }
+
+  setText (value) {
+    this.setLabel(value)
+  }
+}
+
+export default File

package/src/control/image.js

@@ -0,0 +1,92 @@
+
+const defaults = {
+  class: 'image',
+  tag: 'div',
+  format: 'thumb'
+}
+
+/**
+ * Class representing an image.
+ *
+ * @extends Image
+ * @return {parent} The class instance
+ * @example new Image({
+ *   src: {
+ *     filename: 'image.png',
+ *     url: 'exmaple.com/image/'
+ *     format: ['thumbs/', 'medium/', 'large/'],
+ *   },
+ *   container: document.body
+ * });
+ */
+class Image {
+  /**
+   * 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 !== 'image') {
+      this.root.classList.add('image')
+    }
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    return this
+  }
+
+  set (src) {
+    // console.log('set', src)
+    if (!src) {
+      this.root.style.backgroundImage = ''
+    } else {
+      var url = null
+
+      if (src.format) {
+        var format = this.sanitize(src.format)
+
+        if (format.length > 0) {
+          var index = format.indexOf(this.options.format)
+          if (index === -1) {
+            format = src.format[0] + '/'
+          } else {
+            format = this.options.format + '/'
+          }
+        }
+
+        url = src.url + format
+      } else {
+        url = src.url
+      }
+
+      this.root.style.backgroundImage = 'url(' + url + src.filename + ')'
+    }
+  }
+
+  sanitize (formats) {
+    var a = []
+    for (var i = 0; i < formats.length; i++) {
+      var format = formats[i].replace(/\/$/, '')
+      a.push(format)
+    }
+    return a
+  }
+}
+
+export default Image

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

@@ -0,0 +1,21 @@
+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]
+
+    if (o[attribute] && o[attribute] !== 'undefined') {
+      if (special.indexOf(attribute) > -1) {
+        element.setAttribute(attribute, attribute)
+      } else {
+        element.setAttribute(attribute, o[attribute])
+      }
+    }
+  }
+}
+
+export default setAttributes

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