material 0.9.20 → 0.9.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/class/component.js

@@ -17,7 +17,7 @@ class Component {
   }
 
   destroy () {
-    console.log('dest5roy')
+    // console.log('destroy')
     if (this.options.transition && this.element) {
       this.element.classList.remove('show')
 

package/src/datehour.js

@@ -3,25 +3,30 @@ import Component from './class/component'
 class DateHour extends Component {
   static defaults = {
     class: 'date',
-    tag: 'span'
+    tag: 'span',
+    locale: navigator.language,
+    format: { // Changed from 'options' to 'format'
+      dateStyle: 'short',
+      timeStyle: 'short',
+      hour12: false
+    }
+  }
+
+  constructor (options) {
+    super(options)
+    this.formatter = new Intl.DateTimeFormat(
+      this.options.locale,
+      this.options.format // Using format instead of options
+    )
   }
 
   set (date) {
-    // console.log('set', src)
     const d = new Date(date)
-    const formatted = this.format(d)
-    this.element.innerHTML = formatted
+    this.element.innerHTML = this.format(d)
   }
 
   format (date) {
-    let hours = date.getHours()
-    let minutes = date.getMinutes()
-    const ampm = hours >= 12 ? 'pm' : 'am'
-    hours = hours % 12
-    hours = hours || 12 // the hour '0' should be '12'
-    minutes = minutes < 10 ? '0' + minutes : minutes
-    const strTime = hours + ':' + minutes + ' ' + ampm
-    return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear() + ' ' + strTime
+    return this.formatter.format(date)
   }
 }
 

package/src/module/dom.js

@@ -1,7 +1,6 @@
 // DOM manipulation function
 
 function append (container, element) {
-  console.log(container, element)
   container.appendChild(element)
   return element
 }

package/src/module/layout.js

@@ -16,7 +16,7 @@ function create (schema, container, structure = {}, level = 0, components = [])
   const fragment = document.createDocumentFragment()
 
   if (!Array.isArray(schema)) {
-    console.trace('Schema is not an array!')
+    console.error('Schema is not an array!', container, level, schema)
   }
 
   for (let i = 0; i < schema.length; i++) {

package/src/slider-new.js

@@ -0,0 +1,341 @@
+import init from './mixin/init'
+import build from './element/build'
+import control from './mixin/control'
+
+import events from './mixin/events'
+import insert from './element/insert'
+import offset from './element/offset'
+import classify from './module/classify'
+// import control from './control';
+import * as css from './module/css'
+import emitter from './module/emitter'
+
+import icon from './skin/material/icon/pin.svg'
+
+class Slider {
+  static defaults = {
+    class: 'slider',
+    type: 'control',
+    label: null,
+    checked: false,
+    error: false,
+    value: false,
+    range: [0, 100],
+    step: 5,
+    modules: [control, emitter],
+    mixins: [],
+    build: ['$root.material-slider', {},
+      ['label$label.slider-label', {}],
+      ['input$input'],
+      ['$control.slider-control', {},
+        ['$track.slider-track', {},
+          ['canvas$canvas.slider-canvas', {}],
+          ['$trackvalue.slider-track-value', {}],
+          ['$knob.slider-knob', {}],
+          ['$marker.slider-marker', {},
+            ['$value.slider-value', {}]
+          ]
+        ]
+      ]
+    ],
+    events: [
+      ['element.input.focus', 'focus'],
+      ['element.input.blur', 'blur']
+    ]
+  }
+
+  constructor (options) {
+    log.info('Slider')
+    this.init(this.options)
+    this.build(this.options)
+    this.setup()
+  }
+
+  init (options) {
+    this.options = Object.assign({}, Slider.defaults, options || {})
+    init(this)
+  }
+
+  setup () {
+    events.attach(this.options.events, this)
+  }
+
+  build () {
+    this.element = build(this.options.build)
+    this.element = this.element.root
+
+    classify(this.element, this.options)
+
+    if (this.options.container) {
+      insert(this.element, this.options.container)
+    }
+
+    const value = this.element.marker.innerHTML
+    this.element.marker.innerHTML = icon + value
+
+    if (this.options.type) {
+      css.add(this.element, 'type-' + this.options.type)
+    }
+
+    // init input
+    if (this.options.disabled) {
+      this.disable(true)
+    }
+
+    // if (this.options.name) {
+    //   this.element.dataset.name = name
+    //   this.element.input.name = name
+    // }
+
+    // init text
+    const text = this.options.label || this.options.text
+    this.element.label.textContent = text
+
+    this.options.label = this.options.label || this.options.text
+
+    this.initTrack()
+
+    const delay = 50
+
+    setTimeout(() => {
+      this.initCanvas()
+    }, delay)
+  }
+
+  initCanvas () {
+    window.addEventListener('resize', () => {
+      console.log('resize')
+      this.drawCanvas()
+    }, false)
+    this.drawCanvas()
+  }
+
+  drawCanvas () {
+    const width = offset(this.element.track, 'width')
+    const height = offset(this.element.track, 'height')
+
+    this.element.canvas.width = width
+    this.element.canvas.height = height
+
+    const context = this.element.canvas.getContext('2d')
+    context.lineWidth = 2
+    context.beginPath()
+
+    context.moveTo(0, (height / 2) + 1)
+    context.lineTo(width, (height / 2) + 1)
+    context.strokeStyle = 'rgba(34, 31, 31, .26)'
+    context.stroke()
+  }
+
+  /**
+   * [buildControl description]
+   * @return {?} [description]
+   */
+  initTrack () {
+    this.element.track.addEventListener('mousedown', (ev) => {
+      if (this.disabled === true) return
+      this.initTrackSize()
+      const position = ev.layerX
+      this.update(position)
+    })
+
+    this.element.knob.addEventListener('click', (ev) => {
+      ev.stopPropagation()
+    })
+
+    this.initDragging()
+
+    const delay = 100
+
+    setTimeout(() => {
+      this.setValue(this.options.value)
+    }, delay)
+  }
+
+  initTrackSize () {
+    this._tracksize = offset(this.element.track, 'width')
+    this._knobsize = offset(this.element.knob, 'width')
+    this._markersize = 32 /* offset(this.element.marker, 'width') */
+    this._trackleft = offset(this.element.track, 'left')
+    return this
+  }
+
+  /**
+   * [initDragging description]
+   * @return {?} [description]
+   */
+  initDragging () {
+    this.element.knob.onmousedown = (e) => {
+      if (this.disabled === true) return
+
+      e.stopPropagation()
+      e = e || window.event
+
+      css.add(this.element.control, 'dragging')
+
+      let start = 0
+      let position = 0
+
+      if (e.pageX) start = e.pageX
+      else if (e.clientX) start = e.clientX
+
+      start = this._trackleft
+      document.body.onmousemove = (e) => {
+        if (this.disabled === true) return
+        console.log('mousedown', this.disabled)
+
+        e = e || window.event
+        let end = 0
+        if (e.pageX) end = e.pageX
+        else if (e.clientX) end = e.clientX
+
+        position = end - start
+        this.update(position)
+      }
+      document.body.onmouseup = (e) => {
+        document.body.onmousemove = document.body.onmouseup = null
+
+        e = e || window.event
+        let end = 0
+        if (e.pageX) end = e.pageX
+        else if (e.clientX) end = e.clientX
+
+        position = end - start
+        this.update(position)
+        css.remove(this.element.control, 'dragging')
+      }
+    }
+  }
+
+  update (position) {
+    const size = this._tracksize
+    const range = this.options.range[1] - this.options.range[0]
+
+    if (position > size) {
+      position = size
+    }
+
+    if (position < 0) {
+      position = 0
+    }
+
+    const ratio = (size / position)
+    const value = Math.round((range / ratio)) + this.options.range[0]
+
+    if (position === 0) {
+      css.remove(this.element.knob, 'notnull')
+    }
+
+    this.element.knob.style.left = position - this._knobsize / 2 + 'px'
+    this.element.trackvalue.style.width = (position) + 'px'
+    this.element.marker.style.left = position - this._markersize / 2 + 'px'
+
+    this.element.value.textContent = value
+
+    this.element.input.value = value
+    if (value > this.options.range[0]) {
+      css.add(this.element.knob, 'notnull')
+    } else {
+      css.remove(this.element.knob, 'notnull')
+    }
+  }
+
+  updateValue (value) {
+    this.initTrackSize()
+
+    let size = offset(this.element.track, 'width')
+    size = parseInt(size)
+
+    const range = this.options.range[1] - this.options.range[0]
+    const ratio = value * 100 / range
+    const position = Math.round(size * ratio / 100)
+
+    this.update(position)
+
+    return this
+  }
+
+  /**
+   * [insert description]
+   * @param  {?} container [description]
+   * @param  {?} context   [description]
+   * @return {?}           [description]
+   */
+  insert (container, context) {
+    insert(this.element, container, context)
+  }
+
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   */
+  set (prop, value) {
+    switch (prop) {
+      case 'value':
+        this.setValue(value)
+        break
+      case 'label':
+        this.setLabel(value)
+        break
+      default:
+        this.setValue(prop)
+    }
+
+    return this
+  }
+
+  /**
+   * Getter
+   * @param {string} prop
+   * @param {string} value
+   */
+  get (prop) {
+    let value
+
+    switch (prop) {
+      case 'value':
+        value = this.getValue()
+        break
+      case 'name':
+        value = this.name
+        break
+      default:
+        return this.getValue()
+    }
+
+    return value
+  }
+
+  /**
+   * [getValue description]
+   * @return {Object} The class instance
+   */
+  getValue () {
+    return this.element.input.value
+  }
+
+  /**
+   * [setValue description]
+   * @param {string} value [description]
+   */
+  setValue (value) {
+    value = value || this.options.range[0]
+    this.element.input.value = value
+    this.updateValue(value)
+  }
+
+  /**
+   * [setLabel description]
+   * @param {?} text [description]
+   */
+  setLabel (text) {
+    text = text || this.options.label || this.options.text
+
+    if (text !== null && this.label) {
+      this.label.textContent = text
+    }
+  }
+}
+
+export default Slider

package/src/switch.js

@@ -100,7 +100,7 @@ class Switch extends EventEmitter {
         this.setValue(value, silent)
         break
       case 'text':
-        this.setValue(value)
+        this.setText(value)
         break
       case 'disabled':
         if (value === true) {
@@ -160,17 +160,15 @@ class Switch extends EventEmitter {
       this.ui.input.checked = true
       this.checked = true
       this.value = true
-      if (!silent) {
-        this.emit('change', this.checked)
-      }
     } else {
       this.element.classList.remove('is-checked')
       this.ui.input.checked = false
       this.checked = false
       this.value = false
-      if (!silent) {
-        this.emit('change', this.checked)
-      }
+    }
+
+    if (!silent) {
+      this.emit('change', this.checked)
     }
     return this
   }

package/src/switcher.js

@@ -169,7 +169,7 @@ class Switcher extends EventEmitter {
     return this
   }
 
-  setValue (value) {
+  setValue (value, silent) {
     // console.log('value', value, this.options.list, this.element)
     const list = this.options.list
     if (this.options.mode === 'unique') {
@@ -193,6 +193,15 @@ class Switcher extends EventEmitter {
     }
   }
 
+  get () {
+    // console.log('get', this.selected)
+    if (this.options.mode === 'unique') {
+      return this.selected[0]
+    } else {
+      return this.selected
+    }
+  }
+
   addOptions (list) {
     // console.log('setOptions', list, this.options.list)
 
@@ -236,15 +245,6 @@ class Switcher extends EventEmitter {
     // 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/text.js

@@ -19,7 +19,7 @@ class Text extends Component {
 
   set (text) {
     // console.log('set', text)
-    if (text === 'undefined') text = ''
+    if (text === 'undefined' || !text) text = ''
 
     const label = this.options.label || ''
 

package/src/textfield.js

@@ -2,6 +2,7 @@ import emitter from './module/emitter'
 import events from './module/events'
 import dataset from './module/dataset'
 import attributes from './module/attributes'
+import * as css from './module/css'
 
 class Textfield {
   static isComponent () {
@@ -38,7 +39,7 @@ class Textfield {
     this.element.classList.add('textfield')
 
     if (this.options.class !== 'textfield') {
-      this.element.classList.add(this.options.class)
+      css.add(this.element, this.options.class)
     }
 
     this.buildLabel()

package/src/list.new/build.js

@@ -1,139 +0,0 @@
-import scrollbar from '../module/scrollbar'
-import dataset from '../module/dataset'
-
-import { create } from '../module/layout'
-import Virtual from './virtual'
-import Loading from '../loading'
-
-export default {
-  build (data) {
-    // console.log('options', this.options.name)
-
-    this.dataId = this.options.dataId || '_id'
-
-    this.element = document.createElement('div')
-    this.element.classList.add('list')
-
-    if (this.options.class) {
-      this.addClass(this.options.class)
-    }
-
-    this.element.addEventListener('click', (e) => {
-      e.stopPropagation()
-    })
-
-    if (this.options.name) {
-      this.name = this.options.name
-    }
-
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
-
-    this.layout = create(this.options.layout.main, this.element)
-    this.ui = this.layout.component
-
-    // prepare loading
-    // this.ui.loading = new Loading()
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    const scrollbarOffset = scrollbar()
-
-    // console.log('scrollbarOffset', scrollbarOffset)
-    if (this.ui && this.ui.body) {
-      // console.log('body padding', 11 - scrollbarOffset + 'px')
-      this.ui.body.style.marginRight = 11 - scrollbarOffset + 'px'
-      this.ui.body.classList.add('offset' + scrollbarOffset)
-    }
-
-    this.buildVirtual()
-  },
-
-  addClass (c) {
-    const list = c.split(' ')
-
-    for (let i = 0; i < list.length; i++) {
-      this.element.classList.add(list[i])
-    }
-  },
-
-  buildVirtual () {
-    // console.log('buildVirtual', this.options.class)
-    let height = 80
-    this.size = this.options.list.size
-    this.stop = false
-
-    if (this.options.item && this.options.item.height) {
-      height = this.options.item.height
-    }
-
-    this.virtual = new Virtual({
-      view: this.options.name,
-      container: this.ui.body,
-      itemHeight: height,
-      size: this.size,
-      render: (i) => {
-        // console.log('render', this.data[i])
-        return this.renderItem(this.data[i])
-      }
-    }).on('next', (total) => {
-      // console.log('next', total)
-      if (this.stop) return
-
-      // console.log('next', total, this.page, this.size)
-      this.page = this.page || 1
-      // console.log('slide', total, this.options.list.size)
-      // var page = Math.ceil(total / this.size) + 1
-
-      this.page++
-
-      if (this.mode === 'search') {
-        this.search(this.ui['search-input'].input.value, this.page, this.size, true)
-      } else {
-        // console.log('request', this.page, this.size, true)
-        this.request(this.page, this.size, true)
-      }
-    }).on('progress', (progress) => {
-      // console.log('progress', progress, this.count)
-
-      if (this.statusDisplay) {
-        const percent = parseInt(progress / this.count * 100)
-        this.statusDisplay('count', percent + '% | ' + progress + ' / ' + this.count)
-      }
-
-      this.onProgress(progress)
-    })
-    // .on('size', (size) => {
-    // console.log('!!!!size', size)
-    // this.size = size
-    // })
-    //
-  },
-
-  onProgress (value) {
-    // console.log('progress', value, this._value)
-
-    if (this.ui.head) {
-      if (this.ui.body.scrollTop > 0 && this.ui.head) {
-        this.ui.head.classList.add('scrolled')
-      } else if (this.ui.head) {
-        this.ui.head.classList.remove('scrolled')
-      }
-    }
-
-    if (value > this._value) {
-      // console.log('scrolling down')
-      this.emit('scrolling', 'down')
-    } else if (value < this._value) {
-      // console.log('scrolling up')
-      this.emit('scrolling', 'up')
-    }
-
-    this._value = value
-
-    this.scrollTop = this.ui.body.scrollTop
-  }
-}

package/src/list.new/click.js

@@ -1,40 +0,0 @@
-
-export default {
-  click (e) {
-    // console.log('click', e.target)
-    e.stopPropagation()
-
-    if (e.target === e.currentTarget) {
-      return
-    }
-
-    const target = '[data-id]'
-    let item = e.target
-    let i = 0
-
-    while (item && !item.matches(target)) {
-      // console.log('item', item)
-      if (i > 10) {
-        item = null
-        break
-      }
-      item = item.parentNode
-      i++
-    }
-
-    if (e.target.matches('BUTTON') && e.target.dataset.name && item.dataset.id) {
-      // console.log('button', e.target.dataset.name)
-      this.emit(e.target.dataset.name, item.dataset.id)
-      return this
-    }
-
-    if (this.select) {
-      this.select(item)
-    }
-
-    // console.log('item', item, e.target.dataset.name)
-
-    return this
-    // console.log(item)
-  }
-}