material 0.7.0 → 0.7.1

package/src/control/image.js

@@ -1,92 +0,0 @@
-
-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.element = document.createElement(this.options.tag)
-    this.element.classList.add(this.options.class)
-    if (this.options.class !== 'image') {
-      this.element.classList.add('image')
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    return this
-  }
-
-  set (src) {
-    // console.log('set', src)
-    if (!src) {
-      this.element.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.element.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/list.js

@@ -1,67 +0,0 @@
-// menu related modules
-import emitter from '../module/emitter'
-import attach from '../module/attach'
-import build from '../module/build'
-import display from '../module/display'
-
-import Layout from '../layout'
-import Element from '../element'
-import Button from './text'
-
-const defaults = {
-  class: 'list',
-  layout: [
-    [Element, 'main', { tag: 'ul' }]
-  ],
-  item: [Text, { tag: 'li' }],
-  events: [
-    ['ui.main.click', 'select']
-  ]
-}
-
-class List {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    // implement modules
-    Object.assign(this, emitter, build, attach, display)
-
-    this.build()
-
-    return this
-  }
-
-  add (items) {
-    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.element.innerHTML = label + text
-
-    if (this.options.spaceAfter) {
-      this.element.innerHTML = this.element.innerHTML + ' '
-    }
-  }
-
-  select()
-
-  setText (text) {
-    // console.log('setText', text)
-    this.element.innerHTML = text
-  }
-}
-
-export default List

package/src/control/loading.js

@@ -1,128 +0,0 @@
-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.element = document.createElement(this.options.tag)
-    this.classify()
-
-    if (this.options.type === 'circular') {
-      this.element.innerHTML = this.options.circular
-    } if (this.options.type === 'indeterminate') {
-      this.bar = document.createElement(this.options.tag)
-      this.bar.classList.add('bar')
-      this.element.classList.add('type-indeterminate')
-      this.element.appendChild(this.bar)
-    }
-
-    return this
-  }
-
-  classify () {
-    if (this.options.class !== 'loading') {
-      this.element.setAttribute('class', this.options.class + ' ' + this.options.class)
-    } else {
-      this.element.classList.add(this.options.class)
-    }
-  }
-
-  append (container) {
-    container = container || this.options.container
-    if (this.options.container) {
-      container.appendChild(this.element)
-    }
-  }
-
-  set (progress) {
-    this.bar.setAttribute('style', 'width: ' + progress)
-  }
-
-  show (delay) {
-    delay = delay || this.options.delay
-
-    clearTimeout(this.showTimeout)
-    this.showTimeout = setTimeout(() => {
-      this.element.classList.add('show')
-    }, this.options.delay)
-
-    this.visible = true
-
-    return this
-  }
-
-  showNow () {
-    this.element.classList.add('show')
-
-    this.visible
-
-    return this
-  }
-
-  hide () {
-    clearTimeout(this.showTimeout)
-    this.element.classList.remove('show')
-    this.visible = false
-    return this
-  }
-};
-
-export default Loading

package/src/control/menu.js

@@ -1,85 +0,0 @@
-import EventEmitter from '../mixin/emitter'
-// menu related modules
-import build from '../module/build'
-import bindEvents from '../module/events'
-import display from '../mixin/display'
-
-import Element from '../element'
-import Button from './button'
-
-class Menu extends EventEmitter {
-  static defaults = {
-    class: 'menu',
-    transition: 200,
-    modal: false,
-    layout: [
-      [Element, 'surface', { class: 'surface' },
-        [Element, 'list', { tag: 'ul', class: 'items' }]
-      ]
-    ],
-    events: [
-      ['element.click', 'close']
-    ]
-  };
-
-  constructor (options) {
-    super()
-    
-    this.init(options)
-    this.build(this.constructor)    
-    this.bindEvents()
-
-    this.render(this.options.items)
-  }
-
-  init(options) {
-    this.options = Object.assign({}, Menu.defaults, options || {})
-    Object.assign(this, build, bindEvents, display)
-  }
-
-  render (items) {
-      if (items && Array.isArray(items)) {
-      for (var i = 0; i < items.length; i++) {
-        this.add(items[i])
-      }
-    }
-
-    return this
-  }
-
-  add (obj) {
-    if (typeof obj !== 'object') return this;
-    let item;
-    if (obj.type === 'divider') {
-      item = new Element({ tag: 'li', class: 'divider' })
-    } else {
-      obj.container = this.ui.list
-      obj.class = 'item'
-      item = new Button(obj).on('click', (ev) => {
-        // console.log('select', ev.target.name)
-        this.emit('select', ev.target.name)
-      })
-    }
-
-    return this
-  }
-
-  position(target) {
-    if (!target) return
-    var offs = target.getBoundingClientRect()
-
-    var offsw = this.offset = this.ui.surface.getBoundingClientRect()
-
-    this.ui.surface.style.top = (offs.top - 4) + 'px'
-    this.ui.surface.style.left = offs.left - offsw.width + offs.width + 'px'
-
-    return this
-  }
-
-  close() {
-    // console.log('close')
-    this.destroy()
-  }
-}
-
-export default Menu

package/src/control/search.js

@@ -1,98 +0,0 @@
-// 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.element = document.createElement('div')
-    this.element.classList.add('search')
-
-    if (this.options.class !== 'search') {
-      this.element.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.element.appendChild(this.icon)
-    }
-
-    this.input = document.createElement('input')
-    this.input.classList.add('input')
-    this.element.appendChild(this.input)
-
-    this.cancel = new Button({
-      container: this.element,
-      class: 'clear',
-      icon: this.options.iconCancel
-    })
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    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.element.innerHTML = email
-    this.element.setAttribute('href', 'mailto:' + email)
-  }
-}
-
-export default Search

package/src/control/select.js

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

package/src/control/snackbar.js

@@ -1,91 +0,0 @@
-// base class
-import EventEmitter from '../mixin/emitter'
-// related modules
-import build from '../module/build'
-import bindEvents from '../module/events'
-import display from '../mixin/display'
-// ui element
-import Text from './text'
-import Button from './button'
-
-class Snackbar extends EventEmitter {
-  static defaults = {
-    class: 'snackbar',
-    transition: 225,
-    duration: 4000,
-    close: false,
-    layout: [
-      [Text, 'text', { tag: 'span', class: 'text' }],
-      [Button, 'action', { class: 'action', type: 'link' }],
-      [Button, 'close', { class: 'close', type: 'action' }]
-    ],
-    events: [
-      ['ui.action.click', 'action'],
-      ['ui.close.click', 'destroy']
-    ]
-  };
-
-  constructor (options) {
-    super()
-
-    this.init(options)
-    this.build(this.constructor)
-    this.render()    
-    this.bindEvents()
-    this.show()
-
-    if (this.options.duration)
-      setTimeout(()=>{
-        this.destroy()
-      }, this.options.duration)
-  }
-
-  init(options) {
-    this.options = Object.assign({}, Snackbar.defaults, options || {})
-    Object.assign(this, build, bindEvents, display)
-
-    this.buildSnackbarContainer(this.options.container)
-  }
-
-  buildSnackbarContainer (container = document.body) {
-    // console.log('buildSnackbarContainer', container)
-
-    let snackbarContainer = container.querySelector('.snackbars')
-
-    // console.log('snackbarContainer', snackbarContainer)
-
-    if (!snackbarContainer) {
-      this.options.container = document.createElement('div')
-      this.options.container.classList.add('snackbars')
-      container.appendChild(this.options.container)
-    } else {
-      this.options.container = snackbarContainer
-    }
-  }
-
-  render () {
-    this.ui.text.set(this.options.text)
-
-    if (this.options.action) {
-      this.ui.action.set(this.options.action)
-      this.ui.action.element.classList.add('show')
-    }
-
-    if (this.options.close) this.ui.close.element.classList.add('show')
-
-    return this
-  }
-
-  action () {
-    // console.log('action')
-    this.emit('action')
-    this.destroy()
-  }
-
-  close() {
-    // console.log('close')
-    this.destroy()
-  }
-}
-
-export default Snackbar