material - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

package.json

 {
   "name": "material",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "A lightweight implementation of Material Design Components - ES6",
@@ -5,0 +5,0 @@ "main": "index.js",

src/appbar.js

@@ -1,3 +0,2 @@
-'use strict'
-
+import passiveEvents from './module/passive'
 import create from './component/create'
@@ -4,0 +3,0 @@ import insert from './component/insert'

src/control/button.js

 import emitter from '../module/emitter'
+import attach from '../module/attach'
+
 import dataset from '../view/dataset'
@@ -8,11 +10,12 @@
   styles: ['style', 'color'],
-  components: ['label', 'icon'],
-  component: {
-    label: {
-      tag: 'label'
-    },
-    icon: {
-      tag: 'i'
-    }
-  }
+  stopPropagation: false,
+  events: [
+    ['root.click', 'click'],
+    ['root.mousedown', 'mousedown'],
+    ['root.mouseup', 'mouseup'],
+    ['root.mouseleave', 'mouseup'],
+    ['root.touchstart', 'mousedown'],
+    ['root.touchend', 'mouseup']
+  ]
+
 }
@@ -24,2 +27,3 @@
   }
+
   /**
@@ -32,9 +36,18 @@ * Constructor
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+    Object.assign(this, emitter, attach)
     // console.log('options', options)
 
+    this.init()
+
+    return this
+  }
+
+  init () {
     this.build()
+    this.setup()
     this.attach()
 
-    return this
+    if (this.options.container) {
+      this.append(this.options.container)
+    }
   }
@@ -50,12 +63,20 @@
     if (this.options.class !== 'button') {
+      this.root.setAttribute('class', 'button ' + this.options.class)
+    } else {
       this.root.classList.add('button')
     }
 
-    this.root.classList.add(this.options.class)
     this.styleAttributes()
 
+    this.buildIcon()
+    this.buildLabel()
+
     if (this.options.text) {
-      this.root.innerHTML = this.options.text
+      this.root.innerHTML = this.root.innerHTML + this.options.text
     }
 
+    return this
+  }
+
+  setup () {
     if (this.options.data) {
@@ -65,4 +86,2 @@ dataset(this.root, this.options.data)
 
-    this.buildComponent()
-
     if (this.options.type) {
@@ -78,33 +97,49 @@ this.root.setAttribute('type', this.options.type)
 
+    if (this.options.value) {
+      this.root.setAttribute('value', this.options.value)
+    }
+
+    if (this.options.title) {
+      this.root.setAttribute('title', this.options.title)
+    }
+
+    this.root.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
+
+    if (this.options.tooltip) {
+      this.root.setAttribute('data-tooltip', this.options.tooltip)
+    }
+
     if (this.options.case) {
       this.root.classList.add(this.options.case + '-case')
     }
+  }
 
+  append (container) {
+    container = container || this.options.container
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      container.appendChild(this.root)
     }
-
-    return this
   }
 
-  buildComponent () {
-    this.ui = this.ui || {}
+  buildLabel () {
+    if (!this.options.label) return
 
-    for (var i = 0; i < this.options.components.length; i++) {
-      var component = this.options.components[i]
+    if (this.options.label) {
+      this.label = document.createElement('label')
+      this.label.classList.add('label')
+      this.label.innerHTML = this.options.label
 
-      if (!this.options[component]) continue
+      this.root.appendChild(this.label)
+    }
+  }
 
-      var tag = 'div'
-      if (this.options.component && this.options.component[component]) {
-        tag = this.options.component[component].tag || tag
-      }
+  buildIcon () {
+    if (!this.options.icon) return
 
-      this.ui[component] = document.createElement(tag)
+    if (this.options.icon) {
+      this.icon = document.createElement('i')
+      this.icon.classList.add('icon')
+      this.icon.innerHTML = this.options.icon
 
-      if (component === 'label' || component === 'icon') {
-        this.ui[component].innerHTML = this.options[component]
-      }
-
-      this.root.appendChild(this.ui[component])
+      this.root.appendChild(this.icon)
     }
@@ -118,2 +153,6 @@ }
 
+    if (this.options.size) {
+      this.root.classList.add(this.options.size + '-size')
+    }
+
     if (this.options.color) {
@@ -128,8 +167,2 @@ this.root.classList.add('color-' + this.options.color)
 
-  attach () {
-    this.root.addEventListener('click', (ev) => {
-      this.emit('click', ev)
-    })
-  }
-
   /**
@@ -142,2 +175,3 @@ * Setter
   set (prop, value) {
+    // console.log('set', this.root, prop, value)
     switch (prop) {
@@ -148,8 +182,17 @@ case 'value':
       case 'label':
-        if (this.ui.label) {
-          this.ui.label.innerHTML = value
+        if (this.label) {
+          this.label.innerHTML = value
         }
         break
+      case 'text':
+        this.root.innerHTML = value
+        break
+      case 'icon':
+        if (this.label) {
+          this.icon.innerHTML = value
+        }
+        break
       default:
-        this.root.value = value
+        // console.log('prop', prop)
+        this.root.innerHTML = prop
     }
@@ -160,2 +203,16 @@
 
+  setLabel (value) {
+    // console.log('setLabel', value)
+    this.label.innerHTML = value
+  }
+
+  setText (value) {
+    // console.log('setText', value)
+    if (this.label) {
+      this.setLabel(value)
+    } else {
+      this.root.innerHTML = value
+    }
+  }
+
   /**
@@ -172,3 +229,3 @@ * Setter
       case 'label':
-        return this.ui.label.innerHTML
+        return this.label.innerHTML
       default:
@@ -187,7 +244,33 @@ return this.root.value
 
+  hide () {
+    this.root.classList.add('hide')
+  }
+
+  show () {
+    this.root.classList.remove('hide')
+  }
+
   destroy () {
-    this.root.parentNode.removeChild(this.root)
+    if (this.root && this.root.parentNode) {
+      this.root.parentNode.removeChild(this.root)
+    }
   }
+
+  click (ev) {
+    if (this.options.stopPropagation === true) {
+      ev.stopPropagation()
+    }
+
+    this.emit('click', ev)
+  }
+
+  mousedown (ev) {
+    this.root.classList.add('pushed')
+  }
+
+  mouseup (ev) {
+    this.root.classList.remove('pushed')
+  }
 }
 
 export default Button

src/control/module/attributes.js

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

src/control/select.js

@@ -0,8 +1,14 @@
+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 {
   /**
@@ -15,6 +21,6 @@ * Constructor
     this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter, attach, dataset)
 
-    // console.log('options', options)
-
     this.build()
+    this.attach()
 
@@ -29,46 +35,98 @@ return this
   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)
     }
+  }
 
-    if (this.options.autocomplete) {
-      this.input.setAttribute('autocomplete', this.options.autocomplete)
+  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])
     }
 
-    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

src/control/text.js

@@ -1,2 +0,2 @@
-'use strict'
+import addClass from './module/addclass'
 
@@ -17,2 +17,4 @@ const defaults = {
 
+    // console.log('options', this.options)
+
     this.build()
@@ -29,4 +31,8 @@
     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) {
@@ -45,4 +51,8 @@ this.set(this.options.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) {
@@ -52,4 +62,9 @@ this.root.innerHTML = this.root.innerHTML + ' '
   }
+
+  setText (text) {
+    // console.log('setText', text)
+    this.root.innerHTML = text
+  }
 }
 
 export default Text

src/control/textfield.js

@@ -9,6 +9,8 @@
   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']
   ]
@@ -42,6 +44,8 @@ }
   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)
@@ -70,3 +74,4 @@ }
     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
@@ -78,3 +83,8 @@ 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)
@@ -89,15 +99,79 @@
 
-  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
   }
 
-  set (value) {
-    // console.log('set', value)
-    this.value = value
-    this.input.value = value
+  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')
+  }
+
+  show () {
+    this.root.classList.remove('hide')
+  }
+
   get () {
@@ -104,0 +178,0 @@ return this.input.value

src/field/image.js

@@ -23,2 +23,5 @@ 'use strict'
 class Image {
+  static isImage () {
+    return true
+  }
   /**
@@ -30,2 +33,3 @@ * Constructor
   constructor (options) {
+    // console.log('options', options)
     this.options = Object.assign({}, defaults, options || {})
@@ -53,5 +57,7 @@
 
-  set (src) {
-    // console.log('set', src)
+  set (src, asset) {
+    console.log('set', src, asset)
 
+    asset = asset || {}
+
     if (!src) return
@@ -76,3 +82,3 @@
 
-    this.root.style.backgroundImage = 'url(' + url + src.filename + ')'
+    this.root.style.backgroundImage = 'url(' + asset.url + src.path + 'thumb/' + src.filename + ')'
   }
@@ -79,0 +85,0 @@

src/form/build.js

@@ -15,2 +15,6 @@ import dataset from '../view/dataset'
 
+    if (this.options.form) {
+      this.root.classList.add(this.options.form)
+    }
+
     if (this.options.data) {
@@ -37,8 +41,8 @@ dataset(this.root, this.options.data)
 
-    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)
     }
@@ -53,2 +57,4 @@ },
 
+    // console.log('ui', this.ui)
+
     this.extractInfo(this.ui)
@@ -61,2 +67,7 @@ this.extractFile(this.ui)
     }
+
+    if (this.language) {
+      // console.log('translate')
+      this.translate()
+    }
   },
@@ -97,3 +108,16 @@
     }
+  },
+
+  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')
   }
 }

src/form/cancel.js

 export default {
-  cancel () {
-    console.log('cancel', this.info, this.mode)
+  cancel (ev) {
+    // console.log('cancel', this.info, this.mode)
+    ev.preventDefault()
 
@@ -8,7 +9,10 @@ this.render(this.info)
     if (this.mode === 'create') {
-      console.log('cancel create')
       this.mode = null
       this.emit('cancel', 'create')
     }
+
+    this.setMode('read')
+
+    return false
   }
 }

src/form/create.js

 
 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')
   }
 }

src/form/delete.js

@@ -21,3 +21,3 @@ import Dialog from '../dialog'
     this.setMode('delete')
-    fetch(this.options.route, {
+    fetch(this.options.action, {
       headers: {
@@ -36,2 +36,3 @@ 'Accept': 'application/json',
       // console.log('data', data)
+      this.form.reset()
       this.emit('deleted', this.info._id)
@@ -38,0 +39,0 @@ })

src/form/fetch.js

 export default {
   fetch (option) {
+    // console.log('fetch', this.options.route, option.method)
     fetch(this.options.route, {
@@ -8,3 +9,3 @@ method: option.method,
       if (info.error) {
-        console.log('Error: ' + info.error)
+        // console.log('Error: ' + info.error)
         if (this.error) {
@@ -14,9 +15,10 @@ this.error(info)
       } else {
-        // console.log('submit ok', info, this.mode)
+        // console.log('updated', info, this.mode)
         if (this.mode === 'create') {
           this.emit('created', info)
-          this.mode = null
+          this.mode = 'read'
         } else {
           this.info = info
           this.emit('updated', info)
+          this.mode = 'read'
         }
@@ -23,0 +25,0 @@

src/form/render.js

@@ -21,6 +21,8 @@ import dot from '../module/dot'
       if (this.field.hasOwnProperty(field)) {
-        // console.log('field type', field)
+        // console.log('field type', field, this.field[field])
         if (this.field[field] &&
             this.field[field].set) {
-          this.field[field].set(this.objectValueByDotKey(object, field))
+          var value = this.objectValueByDotKey(object, field)
+          // console.log('value', value)
+          this.field[field].set(value, true)
         }
@@ -30,9 +32,5 @@ }
 
-    if (this.disableControls) {
-      this.disableControls()
-    }
-
     this.emit('rendered')
 
-    // won't stay there
+    // won't stay here
     if (option === 'create' && this.field['name']) {
@@ -44,2 +42,3 @@ this.focusNameOnRender(this.field['name'])
   objectValueByDotKey (object, dotkey) {
+    // console.log('objectValueByDotKey', object, dotkey)
     var keys = dotkey.split(/\./)
@@ -50,3 +49,5 @@
     for (var i = 0; i < keys.length; i++) {
-      value = value[keys[i]]
+      if (value !== undefined) {
+        value = value[keys[i]]
+      }
     }
@@ -58,5 +59,6 @@
   focusNameOnRender (field) {
-    field.focus()
+    // console.log('focusNameOnRender', field)
+    field.input.focus()
     field.input.select()
   }
 }

src/form/set.js

 export default {
   set (id) {
-    // console.log('set', info._id)
+    // console.log('set', id)
     if (!id) return
 
+    if (this.clean) {
+      this.clean()
+    }
+
     this.emit('set', id)
@@ -10,3 +14,3 @@
     // this.render(info)
-    fetch(this.options.route + id, {
+    fetch(this.options.action + id, {
       headers: {
@@ -19,15 +23,26 @@ 'Accept': 'application/json'
       return resp.json()
-    }).then((data) => {
-      // console.log('data', data)
-      this.form.style.display = 'flex'
-      this.info = data
-      this.render(data)
-
-      if (this.ui.delete) {
-        this.ui.delete.enable()
+    }).then((info) => {
+      if (this.options.debug) {
+        console.log('info', info)
       }
+      this.info = info
+      this.render(info)
+      this.emit('setted', info)
+    })
+  },
 
-      this.emit('setted', id)
-    })
+  setInfo (info) {
+    // console.log('set', id)
+    if (!info) return
+
+    // console.log('info', info)
+    this.info = info
+    this.render(info)
+    this.emit('setted', info)
+  },
+
+  updateInfo (info) {
+    Object.assign(this.info, info)
+    this.render(info)
   }
 }

src/form/submit.js

@@ -5,43 +5,18 @@ export default {
     ev.preventDefault()
-    // console.log('submit', this.ui, this.file, this.info)
-    // ev.preventDefault()
-    if (this.verify && !this.verify()) return
+    // console.log('submit', this.mode)
 
-    // console.log('submit')
-    if (this.disableControls) {
-      this.disableControls()
-    }
+    var data = this.initData()
 
-    var formData = new FormData()
+    // console.log('data', data)
 
-    if (this.info && this.info._id) {
-      formData.append('id', this.info._id)
+    if (this.update) {
+      this.update(data)
+    } else {
+      this.setMethod(data)
     }
 
-    if (this.info && this.info.uuid) {
-      formData.append('id', this.info.uuid)
-    }
+    return false
+  },
 
-    // append field
-
-    for (var field in this.field) {
-      if (this.field.hasOwnProperty(field)) {
-        // console.log('append field', field, this.field[field])
-        formData.append(field, this.field[field].get())
-      }
-    }
-
-    // append files
-
-    for (var file in this.file) {
-      // console.log('this file', this.file, this.file[file].input)
-      // console.log('file', file, this.file[file])
-      if (this.file.hasOwnProperty(file) && this.file[file].input && this.file[file].input.value) {
-        // console.log('---- append file', this.file[file].input.value)
-        formData.append(file, this.file[file].input.files[0])
-      }
-    }
-
-    // console.log('formData', formData.keys())
-
+  setMethod (formData) {
     var method = 'PUT'
@@ -53,2 +28,3 @@ if (this.mode === 'create') {
     if (this.fetch) {
+      // console.log('formData', formData.keys())
       this.fetch({
@@ -66,5 +42,3 @@ method: method,
     }
-
-    return false
   }
 }

src/form/update.js

@@ -1,24 +0,43 @@
-const headers = {
-  'Accept': 'application/json',
-  'Content-Type': 'application/json'
-}
-
 export default {
-  update (data) {
-    // console.log('update', data)
-    var header = this.options.form.headers || headers
+  update (data, options) {
+    // console.log('update', data, options)
+    // console.log('mode', this.mode)
+    options = options || {}
 
-    fetch(this.options.form.action, {
-      method: this.options.form.method,
-      headers: header,
-      body: JSON.stringify(data)
+    // console.log('mode', this.mode)
+    var method = options.method ||
+        this.options[this.mode].method ||
+        'put'
+
+    var action = options.action ||
+        this.options[this.mode].action ||
+        this.options.action
+
+    if (this.beforeCreate) {
+      this.beforeCreate(data)
+    }
+
+    fetch(action, {
+      method: method,
+      body: data
     }).then((resp) => {
+      // console.log('resp', resp)
       return resp.json()
-    }).then((info) => {
-      // console.log('info', info)
+    }).then(info => {
+      // console.log('update', info)
       if (info.error) {
-        if (this.error) this.error(info)
+        // console.log('Error: ' + info.error)
+        if (this.error) {
+          this.error(info)
+        }
       } else {
+        // console.log('info', this.mode, info)
+        if (this.mode === 'create') {
+          this.emit('created', info)
+          this.setMode('read')
+        } else {
+          this.emit('updated', info)
+          this.setMode('read')
+        }
         this.info = info
-        this.emit('updated', this.info)
       }
@@ -25,0 +44,0 @@ })

src/layout.js

@@ -0,4 +1,4 @@
+
 import { is as isObject } from './module/object'
 import css from './module/css'
-import insert from './element/insert'
 
@@ -16,5 +16,7 @@ /**
   constructor (schema, container) {
+    this.components = []
     this.component = this.create(schema, container)
-    // this.field = this.extractInfo(this.component)
 
+    // console.log('this', this)
+
     return this
@@ -34,5 +36,2 @@ }
 
-    // console.log('level', level, schema)
-    // console.log('-------------')
-
     structure = structure || {}
@@ -48,3 +47,5 @@ let component = null
         typeof schema[i] === 'function') {
-        if (isObject(schema[i + 2])) {
+        if (isObject(schema[i + 1])) {
+          options = schema[i + 1]
+        } else if (isObject(schema[i + 2])) {
           options = schema[i + 2]
@@ -61,23 +62,26 @@ }
         component = new schema[i](options)
+        var element = component.root || component
 
+        if (level === 1) {
+          structure.root = element
+        }
+
         if (name) {
           structure[name] = component
+          this.components.push([name, component])
         }
 
-        if (component) {
-          this.display(component.root, options)
-          this.style(component, options)
-        }
+        // if (component) {
+        //   this.display(component.root, options)
+        //   this.style(component, options)
+        // }
 
-        if (level === 1) {
-          var isClass = fn => /^\sclass/.test(schema[i].toString())
+        if (component && container) {
+          if (component.insert) {
+            component.insert(container)
+          } else {
+            var wrapper = container.root || container
 
-          // console.log('isClass', isClass)
-          // console.log('root', component.root)
-          structure.root = component.root
-        }
-
-        if (component && container) {
-          if (component.insert) component.insert(container)
-          else insert(component, container)
+            wrapper.appendChild(element)
+          }
           component._container = container
@@ -169,3 +173,3 @@ }
 
-    console.log('--- field', field)
+    // console.log('--- field', field)
 
@@ -172,0 +176,0 @@ return field

src/list/add.js

 
 export default {
+  add (info, context) {
+    // console.log('list add', info)
 
+    if (!this.dataStore) return
+    context = context || null
+
+    this.dataList = this.dataList || []
+
+    if (context === 'bottom') {
+      if (this.data) { this.data.push(info) }
+      if (this.dataList) { this.dataList.push(info[this.dataId]) }
+    } else {
+      if (this.data) {
+        this.data.unshift(info)
+      } else {
+        console.log('error no data')
+      }
+
+      if (this.dataList) { this.dataList.unshift(info[this.dataId]) }
+    }
+
+    this.dataStore[info[this.dataId]] = info
+    // console.log('data', this.data.length, this.data)
+
+    if (window.getComputedStyle(this.root, null).display === 'none') {
+      this.virtual.items = this.data
+    } else {
+      this.virtual.update(this.data)
+    }
+
+    // this.ui.body.scrollTo(0, this.ui.body.scrollTop + 1)
+    // this.ui.body.scrollTo(0, this.ui.body.scrollTop - 1)
+
+    return info
+  }
 }

src/list/build.js

@@ -1,2 +0,2 @@
-import observer from '../module/observer'
+import scrollbar from '../module/scrollbar'
 import dataset from '../view/dataset'
@@ -6,11 +6,17 @@
 import Virtual from './virtual'
+import Loading from '../control/loading'
 
 export default {
   build (data) {
-    // console.log('options', this.options.layout)
+    // console.log('options', this.options.name)
 
+    this.dataId = this.options.dataId || '_id'
+
     this.root = document.createElement('div')
     this.root.classList.add('list')
-    this.root.classList.add(this.options.class)
 
+    if (this.options.class) {
+      this.addClass(this.options.class)
+    }
+
     this.root.addEventListener('click', (e) => {
@@ -20,2 +26,6 @@ e.stopPropagation()
 
+    if (this.options.name) {
+      this.name = this.options.name
+    }
+
     if (this.options.data) {
@@ -28,19 +38,34 @@ dataset(this.root, this.options.data)
 
+    // prepare loading
+    // this.ui.loading = new Loading()
+
     if (this.options.container) {
       this.options.container.appendChild(this.root)
-      this.show()
-      this.buildVirtual()
-      // console.log('form', this.root)
-    } else {
-      this.inserted = true
-      observer.insert(this.root, () => {
-        this.buildVirtual()
-        this.inserted = true
-      })
     }
+
+    var 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) {
+    var list = c.split(' ')
+
+    for (var i = 0; i < list.length; i++) {
+      this.root.classList.add(list[i])
+    }
+  },
+
   buildVirtual () {
     // console.log('buildVirtual', this.options.class)
     var height = 80
+    this.size = this.options.list.size
+    this.stop = false
 
@@ -52,4 +77,6 @@ if (this.options.item && this.options.item.height) {
     this.virtual = new Virtual({
+      view: this.options.name,
       container: this.ui.body,
       itemHeight: height,
+      size: this.size,
       render: (i) => {
@@ -60,3 +87,60 @@ // console.log('render', this.data[i])
     })
+
+    // console.log('dynamic')
+    this.virtual.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) {
+        var 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
   }
 }

src/list/click.js

 
 export default {
   click (e) {
-    // e.stopPropagation()
+    // console.log('click', e.target)
+    e.stopPropagation()
 
@@ -24,13 +25,17 @@ if (e.target === e.currentTarget) {
 
-    if (this.select) {
-      this.select(item)
-    }
-
     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)
   }
 }

src/list/create.js

 export default {
   create () {
-    console.log('create', this.mode, this.options.item.new)
+    // console.log('create', this.mode, this.options.item.new)
     // console.log('selected', this.info, this.item)
@@ -10,4 +10,9 @@
 
-    if (this.options.item) {
-      this.newItem = this.renderItem(this.options.item.new, 'create')
+    if (this.options.virtual === true) {
+      this.data.unshift(this.options.item.new)
+      this.render(this.data)
+    } else {
+      if (this.options.item) {
+        this.newItem = this.renderItem(this.options.item.new, 'create')
+      }
     }
@@ -19,13 +24,18 @@
   created (data) {
-    console.log('created', data)
-    this.mode = null
-    this.info = data
-    this.ui.body.removeChild(this.newItem)
-    this.item = this.renderItem(data, 'top')
+    // console.log('created', this.data.length, data)
+    if (this.options.virtual === true) {
+      this.data[0] = data
+      this.render(this.data)
+    } else {
+      this.mode = null
+      this.info = data
+      this.ui.body.removeChild(this.newItem)
+      this.item = this.renderItem(data, 'top')
+    }
   },
 
   createCancel () {
-    console.log('createCancel', this.newItem)
-    console.log('remove')
-    console.log('prepare reselect', this.info, this.item)
+    // console.log('createCancel', this.newItem)
+    // console.log('remove')
+    // console.log('prepare reselect', this.info, this.item)
     this.ui.body.removeChild(this.newItem)
@@ -32,0 +42,0 @@ this.mode = null

src/list/empty.js

 export default {
   empty () {
-  	console.log('empty')
+    // console.log('empty')
     this.ui.body.innerHTML = ''
+    this.data = []
+    this.dataList = []
+    this.dataStore = {}
   }
 }

src/list/load.js

 
 export default {
   load () {
-  	this.page = this.page || 2
+    this.page = this.page || 2
     this.page++
-    this.fetch(this.page)
+    this.request(this.page)
   }
 }

src/list/remove.js

 export default {
   remove (id) {
-    // console.log('remove', id, this.ui.body)
+    // console.log('remove', id, this.dataList)
+    // console.log('datalist', this.dataList)
 
-    var item = this.ui.body.querySelector('[data-id="' + id + '"]')
-    // console.log('item', item)
-    this.ui.body.removeChild(item)
+    if (!id) return
+
+    if (!this.dataStore[id]) {
+      // console.log('not in the list')
+      return
+    }
+
+    this.dataList.splice(this.dataList.indexOf(id), 1)
+
+    // remove id from the list
+    this.data = this.data.filter((info) => { return info[this.dataId] !== id })
+
+    // console.log('data', this.data)
+
+    this.virtual.update(this.data)
   }
 }

src/list/render.js

@@ -11,2 +11,6 @@ import Element from '../element'
     this.virtual.set(list)
+
+    if (this.status && this.options.count !== true) {
+      this.status('count', list.length)
+    }
   },
@@ -20,3 +24,3 @@
   renderItem (info, context) {
-    // console.log('renderItem', context, this.options.layout.item)
+    // console.log('renderItem', info)
     info = info || {}
@@ -30,5 +34,5 @@
 
-    if (context === 'search') {
-      container = this.ui['search-list']
-    }
+    // if (context === 'search') {
+    //   container = this.ui['search-list']
+    // }
 
@@ -40,7 +44,9 @@ var element = new Element({
 
-    if (this.id && this.id === info._id) {
+    // console.log('---', this.id)
+
+    if (this.id && this.id === info[this.dataId]) {
       element.classList.add('selected')
     }
 
-    element.dataset.id = info._id
+    element.dataset.id = info[this.dataId]
     element.dataset.info = this.options.info
@@ -52,7 +58,20 @@
       var item = info[this.options.itemSwitch]
-      layout = new Layout(this.options.layout.item[item], element)
+
+      if (this.options.layout.item[item]) {
+        layout = new Layout(this.options.layout.item[item], element)
+      } else {
+        layout = new Layout(this.options.layout.item.base, element)
+      }
     } else {
-      layout = new Layout(this.options.layout.item, element)
+      var itemName = this.options.itemName || 'item'
+      layout = new Layout(this.options.layout[itemName], element)
     }
 
+    // console.log('translate', layout)
+
+    if (this.translate && this.options.item && this.options.item.translate) {
+      // console.log('----')
+      this.translate(layout)
+    }
+
     this.renderInfo(layout, info)
@@ -67,2 +86,4 @@
 
+    this.emit('infoRendered', info, element)
+
     return element
@@ -101,3 +122,5 @@ },
     for (var i = 0; i < keys.length; i++) {
-      value = value[keys[i]]
+      if (value !== undefined) {
+        value = value[keys[i]]
+      }
     }
@@ -104,0 +127,0 @@

src/list/search.js

 export default {
-  /**
-   * [search description]
-   * @param  {[type]} ev [description]
-   * @return {[type]}    [description]
-   */
-  search (ev) {
-    // console.log('search', ev)
-    var keywords = ev.target.value
-    if (keywords.length < 4) return
+  search (keywords, page, size, more) {
+    // console.log('search', keywords, page, size, more)
 
-    fetch(this.options.route.search + '?search=' + keywords).then((resp) => {
+    this.emit('searching')
+
+    if (more !== true) {
+      this.ui.body.innerHTML = ''
+      this.virtual.reset()
+      this.data = []
+      this.dataList = []
+      this.data = []
+      this.page = 1
+      this.stop = false
+    }
+
+    this.data = this.data || []
+    var signal = null
+
+    if (this.abortController) {
+      this.abortController.abort()
+      this.abortController = null
+    }
+
+    if (more !== true) {
+      this.abortController = new AbortController()
+      signal = this.abortController.signal
+    }
+
+    page = page || 1
+    size = size || this.options.list.size
+
+    if (page === 1) {
+      this.ui.body.scrolltop = 0
+    }
+
+    var route = this.buildRoute(page, size, 'search')
+
+    route = this.addParams(route, 'search=' + keywords)
+
+    // console.log('route', route)
+
+    if (more !== true && this.options.count) {
+      this.requestCount(route)
+    }
+
+    fetch(route, {signal}).then((resp) => {
       return resp.json()
-    }).then((list) => {
+    }).then((data) => {
+      // console.log('data', data)
+      this.storeData(data)
+
+      this.data = data || []
+
       // console.log('list', list)
-      this.store(list)
-      this.ui['search-list'].innerHTML = ''
-      this.renderSearch(list)
+
+      if (data.error) {
+        console.log('error', data.error)
+        return
+      }
+
+      if (data.length < this.size && more) {
+        this.stop = true
+      }
+
+      if (more === true) {
+        var a = this.data.concat(data)
+        this.data = a
+        this.storeData(data, more)
+        this.virtual.add(this.data)
+      } else {
+        this.data = []
+        this.data = data
+        this.storeData(data)
+        this.render(data)
+      }
+
+      this.emit('fetched', data)
+    }).catch(function (e) {
+      // console.log('error', e.message)
     })
   },
 
-  renderSearch (list) {
-    console.log('render', list.length, list)
-    for (var i = 0; i < list.length; i++) {
-      var info = list[i]
-      this.renderItem(info, 'search')
-    }
+  cancelSearch () {
+    // console.log('cancel search')
+    this.ui.body.innerHTML = ''
   },
@@ -37,8 +96,6 @@
     // console.log('toggle search', this.ui.body)
-    if (!this.ui['search-input'].classList.contains('show')) {
+    if (!this.ui['search-input'].root.classList.contains('show')) {
       this.showSearch()
-      if (this.ui.delete) { this.ui.delete.disable() }
     } else {
       this.hideSearch()
-      if (this.ui.delete) { this.ui.delete.enable() }
     }
@@ -52,9 +109,24 @@ },
   showSearch () {
+    if (this.hideFilter) {
+      this.hideFilter()
+    }
+
     // console.log('showSearch')
+    this.mode = 'search'
+    this.root.classList.add('search-mode')
 
-    this.ui['search'].root.classList.add('selected')
-    this.ui['search-input'].classList.add('show')
-    this.ui['search-list'].classList.add('show')
-    this.ui.body.classList.add('hide')
-    this.ui['search-input'].focus()
+    if (this.ui.search) {
+      this.ui.search.root.classList.add('selected')
+    }
+
+    if (this.ui['search-input']) {
+      this.ui['search-input'].input.value = ''
+      this.ui['search-input'].root.classList.add('show')
+      this.ui['search-input'].input.focus()
+    }
+
+    this.ui.body.innerHTML = ''
+
+    // this.ui['search-list'].classList.add('show')
+    // this.ui.body.classList.add('hide')
   },
@@ -66,10 +138,21 @@
    */
-  hideSearch () {
-    // console.log('hideSearch')
-    this.ui['search'].root.classList.remove('selected')
-    this.ui['search-input'].classList.remove('show')
-    this.ui['search-list'].classList.remove('show')
-    this.ui.body.classList.remove('hide')
+  hideSearch (notfetch) {
+    // console.log('hideSearch', notfetch)
+    this.mode = 'standard'
+    this.root.classList.remove('search-mode')
+
+    if (this.ui.search) {
+      this.ui.search.root.classList.remove('selected')
+    }
+    if (this.ui['search-input']) {
+      this.ui['search-input'].root.classList.remove('show')
+      this.ui['search-input'].input.value = ''
+    }
+    // this.ui['search-list'].classList.remove('show')
+    // this.ui.body.classList.remove('hide')
+    // console.log('request', notfetch)
+    if (!notfetch) {
+      this.request()
+    }
   }
-
 }

src/list/select.js

 export default {
-  select (item) {
-    // console.log('select')
+  select (item, silent) {
+    // console.log('select', item.dataset.id)
+    if (!item || !item.dataset.id) return
 
-    if (!item.dataset.id) return
-
     var id = item.dataset.id
 
+    this.index = this.dataList.indexOf(id)
+    this.info = this.dataStore[id]
+
     if (this.options.preventSelectAgain && this.id === id) {
@@ -13,10 +15,4 @@ return
 
-    if (this.mode === 'create') {
-      // console.log('cancel create', this.newItem)
-      if (this.newItem) {
-        this.ui.body.removeChild(this.newItem)
-        this.newItem = null
-      }
-      this.mode = null
-    }
+    var selected = this.ui.body.querySelector('.selected')
+    if (selected) selected.classList.remove('selected')
 
@@ -27,10 +23,10 @@ if (id) {
       this.id = id
-      if (this.ui.delete) { this.ui.delete.enable() }
-      this.emit('select', id)
+
+      if (silent !== true) {
+        this.emit('select', id)
+        this.emit('selectItem', item)
+      }
     } else {
       this.id = null
-      if (this.item) {
-        this.item.classList.remove('selected')
-      }
-      this.ui.delete.disable()
+      this.item = null
     }
@@ -40,27 +36,152 @@ },
   unselect () {
+    // console.log('unselect')
+    var item = this.ui.body.querySelector('[data-id="' + this.id + '"]') || this.item
     this.id = null
-    if (this.item) {
-      this.item.classList.remove('selected')
+    if (item) {
+      item.classList.remove('selected')
     }
+    this.index = null
     this.item = null
   },
 
-  next () {
-    // console.log('next', this.item)
-    if (this.item && this.item.nextSibling) {
-      this.select(this.item.nextSibling)
+  getItemById (id, silent) {
+    // console.log('selectItemById', id)
+    var item = this.ui.body.querySelector('[data-id="' + id + '"]')
+
+    if (!item) {
+      return null
     } else {
-      if (!this.item && this.ui.body.firstChild) {
-        this.select(this.ui.body.firstChild)
+      return item
+    }
+  },
+
+  selectById (id, silent) {
+    // console.log('selectById', id)
+
+    if (!this.dataList) {
+      return false
+    }
+
+    var index = this.dataList.indexOf(id)
+    if (index < 0) {
+      // console.log('can\'t selectid, not in the list')
+      return false
+    }
+
+    this.index = index
+    this.id = id
+
+    this.selectItemById(id, 'down')
+
+    return id
+  },
+
+  selectItemById (id, direction) {
+    // console.log('selectItemById', id)
+    var item = this.ui.body.querySelector('[data-id="' + id + '"]')
+
+    this.id = id
+
+    if (!item) {
+      var index = this.dataList.indexOf(id)
+      // console.log('not found in DOM, check in dataList', index)
+      if (index > -1) {
+        var listSize = this.options.list.size
+        var slice = listSize * index / listSize
+        // console.log('getSlice', slice)
       }
+
+      return
     }
+
+    // console.log('item found', item)
+
+    // if (this.item) this.item.classList.remove('selected')
+
+    var selected = this.ui.body.querySelector('.selected')
+    if (selected) selected.classList.remove('selected')
+
+    this.item = item
+    item.classList.add('selected')
+
+    if (this.options.updatePosition === true) {
+      this.selectPosition(item, direction)
+    }
+
+    return item
   },
 
-  previous () {
-    // console.log('previous', this.item)
-    if (this.item && this.item.previousSibling) {
-      this.select(this.item.previousSibling)
+  selectPosition (item, direction) {
+    var offsetY = this.options.item.height
+    direction = direction || 'down'
+    // console.log('selectPosition', this.ui.body, direction)
+
+    this.coord = this.ui.body.getBoundingClientRect()
+
+    // console.log('coord', this.coord)
+
+    var itemTop = item.offsetTop + this.coord.top - this.ui.body.scrollTop
+
+    if (direction === 'down' && itemTop + this.options.item.height + offsetY - this.coord.y > this.coord.height) {
+      var top = this.ui.body.scrollTop + itemTop - this.coord.height - this.coord.y + this.options.item.height + offsetY
+      this.ui.body.scrollTo({
+        top: top,
+        left: 0
+        // behavior: 'smooth'
+      })
     }
+
+    if (direction === 'up' && itemTop - offsetY < this.coord.top + this.coord.y) {
+      var top = this.ui.body.scrollTop + itemTop - this.coord.top - offsetY
+      // console.lof('scrollTo', top, item)
+      this.ui.body.scrollTo({
+        left: 0,
+        top: top
+        // behavior: 'smooth'
+      })
+    }
   },
 
+  selectNext (silent) {
+    // console.log('selectNext', this.id)
+    var idx = this.dataList.indexOf(this.id)
+
+    var id = this.dataList[idx + 1]
+
+    // console.log('id', id)
+
+    if (id) {
+      this.id = id
+      // console.log('item', item)
+      this.selectItemById(id, 'down')
+
+      if (silent !== true) {
+        this.emit('select', id)
+      }
+      return id
+    } else {
+      return false
+    }
+  },
+
+  selectPrevious (silent) {
+    // console.log('selectPrevious', this.id)
+    var idx = this.dataList.indexOf(this.id)
+
+    var id = this.dataList[idx - 1]
+
+    if (id) {
+      this.id = id
+      // console.log('item', item)
+      this.selectItemById(id, 'up')
+
+      if (silent !== true) {
+        this.emit('select', id)
+      }
+      return id
+    } else {
+      return false
+    }
+  },
+
   highlight (item) {
@@ -67,0 +188,0 @@ if (this.item) {

src/list/status.js

 export default {
 
-  status (prop, info) {
+  statusDisplay (prop, info) {
+    // console.log('status', prop, info)
     if (prop === 'count') {
@@ -9,7 +10,13 @@ this.statusCount(info)
 
-  statusCount (info) {
+  statusCount (count) {
+    // console.log('statusCount', count)
+    var items = 'items'
+    if (this.status && this.status.count && this.status.count.name) {
+      items = this.status.count.name
+    }
+
     if (this.ui.count) {
-      this.ui.count.innerHTML = info
+      this.ui.count.innerHTML = '<span class="number">' + count + '</span> ' + items
     }
   }
 }

src/list/update.js

@@ -5,17 +5,58 @@ import Layout from '../layout'
   update (info) {
-    console.log('update', info)
-    // console.log('selected', this.info, this.item)
+    // console.log('update', info)
 
+    this.getUpdatedInfo(info[this.dataId])
+  },
+
+  getUpdatedIndex (id) {
+    // console.log('getUpdatedIndex', id)
+    var index = null
+    for (var i = 0; i < this.data.length; i++) {
+      // console.log('--', this.data[i][this.dataId], id)
+      if (this.data[i][this.dataId] === id) {
+        index = i
+        break
+      }
+    }
+
+    return index
+  },
+
+  getUpdatedInfo (id) {
+    // console.log('getUpdatedInfo', id)
+    var index = this.getUpdatedIndex(id)
+    // console.log('index', index)
+    var route = this.buildRoute(index + 1, 1)
+    // console.log('roote', route)
+    fetch(route).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      // console.log('info', data)
+      this.updateUpdatedInfo(data[0], index, id)
+    })
+  },
+
+  updateUpdatedInfo (info, index, id) {
+    // console.log('updateUpdatedInfo', info, index)
+
+    if (!info) return
+    if (info[this.dataId] !== id) return
+
     this.info = info
 
-    var item = this.ui.body.querySelector('[data-id="' + info._id + '"]')
+    // update datalist
+    this.data[index] = info
 
-    item.innerHTML = ''
+    // update datastore
+    this.dataStore[info[this.dataId]] = info
 
-    var layout = new Layout(this.options.layout.item, item)
+    // update item if on the screen
+    var item = this.ui.body.querySelector('[data-id="' + info[this.dataId] + '"]')
+    if (item) {
+      item.innerHTML = ''
+      var layout = new Layout(this.options.layout.item, item)
 
-    this.renderInfo(layout, info)
-
-    return item
+      this.renderInfo(layout, info)
+    }
   }
 }

src/list/virtual.js

@@ -0,167 +1,235 @@
+import passiveEvents from '../module/passive'
 import emitter from '../module/emitter'
-import observer from '../module/observer'
 
-const defaults = {
-  class: 'virtual',
-  width: '100%',
-  height: '100%'
+// based on https://sergimansilla.com/blog/virtual-scrolling/
 
+function VirtualList (options) {
+  this.options = Object.assign({}, options || {})
+  Object.assign(this, emitter)
+
+  this.itemHeight = options.itemHeight
+
+  // console.log('itemHeight', this.itemHeight)
+  this.next = false
+  this.size = options.size
+  this.chunkSize = options.size
+
+  this.items = options.items
+  this.render = options.render
+
+  this.scroller = VirtualList.createScroller()
+  this.container = options.container
+
+  // get offset height
+  this.setOffset()
+
+  // console.log('itemBySreen', this.itemsByScreen)
+
+  window.addEventListener('resize', () => {
+    clearTimeout(this.resizeTimeout)
+
+    this.resizeTimeout = setTimeout(() => {
+      this.setOffset()
+    }, 50)
+  })
+
+  this.container.classList.add('virtual')
 }
 
-class Virtual {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+VirtualList.prototype._renderChunk = function (node, from, number) {
+  // console.log('_renderChunk', from, number, this.options.class)
 
-    this.items = this.options.items
-    this.itemHeight = this.options.itemHeight
-    this.render = this.options.render
+  var fragment = document.createDocumentFragment()
+  fragment.appendChild(this.scroller)
 
-    this.build()
-    this.setup()
-    this.attach()
+  var last = from + number
+  if (last > this.count) last = this.count
 
-    return this
+  for (var i = from; i < last; i++) {
+    var item = this.render(i)
+
+    item.style.position = 'absolute'
+    item.style.top = i * this.itemHeight + 'px'
+    fragment.appendChild(item)
   }
 
-  build () {
-    this.root = document.createElement('ul')
-    this.root.classList.add(this.options.class)
+  node.innerHTML = ''
+  node.appendChild(fragment)
 
-    this.buildScroller()
+  // console.log('last', last, 'count', this.count, 'size', this.size, 'chunk')
+  // console.log('---------------------------------')
+  // console.log('last && last > (this.count - this.size / 2)')
+  // console.log(last + '>' + '(' + this.count + '-' + this.size + '/' + '2)' + (this.count - this.size / 2))
 
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
+  if (this.next && last && last > (this.count - this.size / 2)) {
+    // console.log('emit next', last, this.count, this.size)
+    this.emit('next', this.count)
   }
 
-  buildScroller () {
-    // console.log('build')
-    this.scroller = document.createElement('div')
-    this.scroller.classList.add('scroller')
-    this.root.appendChild(this.scroller)
-  }
+  this.next = true
 
-  setup () {
-    // console.log('setup', this.root.offsetHeight, this.itemHeight)
-    this.itemPerView = Math.ceil(this.root.offsetHeight / this.itemHeight)
-    // console.log('itemPerView', this.itemPerView)
-    this.maxBuffer = this.itemPerView * this.itemHeight
-    // console.log('maxBuffer', this.maxBuffer)
+  // console.log('last', final, this.count)
+}
 
-    this.lastRepaintY = 0
-    this.lastScrolled = 0
+VirtualList.prototype.set = function (items) {
+  // console.log('set', items.length)
+  this.next = false
+  this.items = items
+  this.count = items.length
 
-    return this
-  }
+  // console.log('count', this.count)
 
-  attach () {
-    var self = this
+  if (this.count < 1 || this.count === undefined) return
 
-    // As soon as scrolling has stopped, this interval asynchronouslyremoves all
-    // the nodes that are not used anymore
-    this.rmNodeInterval = setInterval(() => {
-      if (Date.now() - this.lastScrolled > 100) {
-        var badNodes = this.root.querySelectorAll('[data-rm="1"]')
-        for (var i = 0, l = badNodes.length; i < l; i++) {
-          this.root.removeChild(badNodes[i])
-        }
-      }
-    }, 300)
+  this.container.innerHTML = ''
+  this.container.scrollTop = 0
 
-    function onScroll (e) {
-      // console.log('this.lastRepaintY', self.lastRepaintY)
-      var scrollTop = e.target.scrollTop // Triggers reflow
-      if (!this.lastRepaintY || Math.abs(scrollTop - self.lastRepaintY) > self.maxBuffer) {
-        var first = parseInt(scrollTop / self.itemHeight) - self.itemPerView
-        self._renderChunk(first < 0 ? 0 : first)
-        self.lastRepaintY = scrollTop
-      }
+  var height = this.itemHeight * this.count
 
-      this.lastScrolled = Date.now()
-      e.preventDefault && e.preventDefault()
+  this.scroller.style.height = height + 'px'
+
+  this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+  // console.log('offsetHeioght', this.container.offsetHeight)
+  // console.log('this.itemsByScreen', this.itemsByScreen)
+
+  // Cache 4 times the number of items that fit in the container viewport
+  var size = this.itemsByScreen * 4
+  this._renderChunk(this.container, 0, size)
+
+  this.size = size
+
+  // console.log('emit size', size)
+  this.emit('size', size)
+
+  var self = this
+  var lastRepaintY
+  var maxBuffer = this.itemsByScreen * this.itemHeight
+
+  function onScroll (e) {
+    // console.log('scroll', e.target.scrollTop, height)
+    var scrollTop = e.target.scrollTop
+
+    // console.log('itemsByScreen', self.itemsByScreen)
+
+    // console.log('offsetHeight', self.container.offsetHeight)
+    // console.log('size', self.size)
+    // if (this.itemsByScreen === 0) {
+    //   size = self.size = this.itemsByScreen * 4
+    // }
+
+    // console.log('scrollTop', scrollTop)
+
+    if (scrollTop < 0) return
+
+    // console.log('itemsByScreen', self.itemsByScreen)
+
+    var first = parseInt(scrollTop / self.itemHeight) - self.itemsByScreen
+    first = first < 0 ? 0 : first
+
+    size = self.itemsByScreen * 4
+
+    if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
+      self._renderChunk(self.container, first, size)
+      lastRepaintY = scrollTop
     }
 
-    this.root.addEventListener('scroll', onScroll)
+    var progress = Math.ceil((scrollTop / self.itemHeight) + self.itemsByScreen) - 1
+    // console.log('progress', progress)
+    self.emit('progress', progress)
 
-    // var refresh
-    // window.onresize = () => {
-    //   clearTimeout(refresh)
-    //   refresh = setTimeout(() => {
-    //     this.refresh()
-    //   }, 300)
-    // }
+    // e.preventDefault && e.preventDefault()
   }
 
-  refresh () {
-    this.itemPerView = Math.ceil(this.root.offsetHeight / this.itemHeight)
-    this.maxBuffer = this.itemPerView * this.itemHeight
+  // console.log('this.scrollEvents', this.scrollEvents)
 
-    return this
+  if (!this.scrollEvents) {
+    this.container.addEventListener('scroll', onScroll, passiveEvents() ? { passive: true } : false)
+    this.scrollEvents = true
   }
 
-  set (items) {
-    // console.log('set', items)
-    if (!items || Array.isArray(items) === false) {
-      return
-    }
+  // this.container.addEventListener('scroll', onScroll)
+}
 
-    this.root.innerHTML = ''
-    this.root.scrollTop = 0
-    if (items.length < 1 || items === undefined) return
+VirtualList.prototype.update = function (items) {
+  // console.log('update', items)
+  this.items = items || this.items
 
-    this.buildScroller()
+  if (!this.items) return
 
-    this.items = items
-    this.itemsCount = items.length
+  this.count = this.items.length
 
-    this.setup()
+  // var itemsByScreen = Math.ceil(this.container.offsetHeight / this.itemHeight)
+  var cachedItemsLen = this.itemsByScreen * 4
+  var scrollTop = this.container.scrollTop
 
-    this.scroller.style.height = (this.itemHeight * this.itemsCount) + 'px'
-    this.itemBuffer = this.itemPerView * 3
+  var height = this.itemHeight * this.count
 
-    this._renderChunk(0)
-  }
+  this.scroller.style.height = height + 'px'
 
-  createRow (i) {
-    // console.log('createRow', this.render)
-    var item = this.render(i)
+  var first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+  first = first < 0 ? 0 : first
 
-    item.classList.add('vrow')
-    item.style.position = 'absolute'
-    item.style.top = (i * this.itemHeight) + 'px'
-    return item
-  }
+  // console.log('first', first, cachedItemsLen)
 
-  _renderChunk (from) {
-    // console.log('_renderChunk', from, this.root)
-    var finalItem = from + this.itemBuffer
-    if (finalItem > this.itemsCount) { finalItem = this.itemsCount }
+  this._renderChunk(this.container, first, cachedItemsLen)
+}
 
-    // Append all the new rows in a document fragment that we will later append to
-    // the parent node
-    var fragment = document.createDocumentFragment()
+VirtualList.prototype.add = function (items) {
+  // console.log('add', items.length)
+  this.items = items || this.items
 
-    // console.log('finalItem', finalItem)
+  if (!this.items) return
 
-    for (var i = from; i < finalItem; i++) {
-      fragment.appendChild(this.createRow(i))
-    }
+  this.count = this.items.length
 
-    // Hide and mark obsolete nodes for deletion.
-    for (var j = 1, l = this.root.childNodes.length; j < l; j++) {
-      this.root.childNodes[j].style.display = 'none'
-      this.root.childNodes[j].setAttribute('data-rm', '1')
-    }
+  var height = this.itemHeight * this.count
 
-    // console.log('fragment', fragment)
-    this.root.appendChild(fragment)
+  this.scroller.style.height = height + 'px'
+}
+
+VirtualList.prototype.reset = function () {
+  // console.log('reset')
+  this.items = []
+  this.count = 0
+
+  this.container.scrollTop = 0
+
+  this.scroller.style.height = 0
+}
+
+VirtualList.prototype.setOffset = function (info) {
+  // console.log('setOffset', info)
+
+  this.offsetHeight = this.container.offsetHeight
+  if (this.offsetHeight < 1) {
+    this.offsetHeight = window.innerHeight ||
+    document.documentElement.clientHeight ||
+    document.body.clientHeight
   }
+
+  this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+  // console.log('new itemsByScreen', this.itemsByScreen)
+
+  var itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+  // Cache 4 times the number of items that fit in the container viewport
+  var size = itemsByScreen * 4
+
+  return size
 }
 
-export default Virtual
+VirtualList.prototype.getCount = function () {
+  // console.log('getCount')
+
+  return this.count
+}
+
+VirtualList.createScroller = function () {
+  var scroller = document.createElement('div')
+  scroller.classList.add('scroller')
+  return scroller
+}
+
+export default VirtualList

src/module/attach.js

@@ -26,2 +26,3 @@ import extract from './extract'
       var f = extract.f(instance, def[1])
+      var option = def[2]
 
@@ -35,7 +36,13 @@ var keys = def[1].split('.')
         if (!f) { console.log('error') }
-        e.element.addEventListener(e.name, f.bind(bound))
+
+        if (option) {
+          e.element.addEventListener(e.name, f.bind(bound), option)
+        } else {
+          e.element.addEventListener(e.name, f.bind(bound))
+        }
       } else if (e && e.element && e.element.on && f && bound) {
         e.element.on(e.name, f.bind(bound))
       } else {
-        console.log('can\'t attach', def[0])
+        // console.trace('can\'t attach', def[0])
+        // console.log('can\'t attach', def[0])
       }
@@ -42,0 +49,0 @@ })

src/module/object.js

@@ -0,1 +1,2 @@
+
 function is (object) {
@@ -7,2 +8,17 @@ return object &&
 
-export { is }
+function byString (o, s) {
+  s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
+  s = s.replace(/^\./, '')           // strip a leading dot
+  var a = s.split('.')
+  for (var i = 0, n = a.length; i < n; ++i) {
+    var k = a[i]
+    if (k in o) {
+      o = o[k]
+    } else {
+      return
+    }
+  }
+  return o
+}
+
+export { is, byString }

src/module/observer.js

@@ -6,3 +6,3 @@
       if (document.contains(element)) {
-        if (typeof cb === 'function') {
+        if (typeof cb === 'function' && !element.classList.contains('inserted')) {
           cb()
@@ -9,0 +9,0 @@ }

src/switch.js

@@ -126,3 +126,3 @@ 'use strict'
       default:
-        this.setValue(prop, silent)
+        this.setValue(prop, value)
     }
@@ -129,0 +129,0 @@

src/tabview.js

 import emitter from './module/emitter'
 import observer from './module/observer'
+import display from './view/display'
 
@@ -25,10 +26,19 @@ /**
   constructor (options) {
+    // console.log('TabView')
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+    Object.assign(this, emitter, display)
 
     this.build()
 
+    var ready = false
+
     observer.insert(this.root, () => {
-      this.setup()
-      this.attach()
+      // console.log('!!! inserted')
+      if (!ready) {
+        ready = true
+        this.setup()
+        this.attach()
+
+        this.emit('ready')
+      }
     })
@@ -41,4 +51,10 @@
     this.root = document.createElement(this.options.tag || 'div')
-    this.root.classList.add(this.options.class)
+    this.root.classList.add('tabview')
 
+    this.root.classList.add('view')
+
+    if (this.options.class !== 'tabview') {
+      this.root.classList.add(this.options.class)
+    }
+
     this.ui = {}
@@ -59,2 +75,4 @@ }
 
+    // console.log('views', this.ui.views)
+
     for (var i = 0; i < this.ui.views.length; i++) {
@@ -85,11 +103,44 @@ if (this.ui.views[i].dataset) {
     // console.log('select', view, this.ui.tabs)
-    var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
-    // console.log('tab', button)
-    if (button) {
-      this.click(button)
+    if (this.ui && this.ui.tabs) {
+      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      // console.log('tab', button)
+      if (button) {
+        this.click(button)
+      }
+    } else {
+      this.emit('notready')
     }
   }
 
+  disable (view) {
+    // console.log('select', view)
+    if (this.ui && this.ui.tabs) {
+      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      // console.log('tab', button)
+      if (button) {
+        button.disabled = 'disabled'
+      }
+    } else {
+      this.emit('notready')
+    }
+  }
+
+  enable (view) {
+    // console.log('select', view)
+
+    if (this.ui && this.ui.tabs) {
+      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      // console.log('tab', button)
+      if (button) {
+        button.disabled = false
+      }
+    } else {
+      this.emit('notready')
+    }
+  }
+
   hideView () {
+    // console.log('hideView')
     for (var i = 0; i < this.ui.views.length; i++) {
+      // console.log('hide', this.ui.views[i])
       this.ui.views[i].classList.add('hide')
@@ -100,8 +151,6 @@ }
   click (button) {
-    // console.log('click', button.dataset.view)
+    // console.log('click', button.dataset.view, true)
     var view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
     this.hideView()
 
-    button.classList.add('selected')
-
     if (this.button) {
@@ -111,6 +160,9 @@ this.button.classList.remove('selected')
 
+    this.button = button
+
+    button.classList.add('selected')
+
     this.indicator(button)
 
     if (view) {
-      // console.log('view block', view)
       view.classList.remove('hide')
@@ -123,4 +175,2 @@ } else {
 
-    this.button = button
-
     return view
@@ -127,0 +177,0 @@ }

src/tooltip.js

@@ -45,2 +45,3 @@ import touch from './module/touch'
     this.root.classList.add('tooltip')
+    this.root.classList.add('control')
 
@@ -66,8 +67,17 @@ this.pointer = document.createElement('span')
         if (touch()) return
-        if (this.disabled === true) return
 
+        if (this.disabled === true) {
+          this.hide()
+          return
+        }
+
+        if (e.currentTarget.classList.contains('selected')) {
+          this.hide()
+          return
+        }
+
         this.label.innerHTML = e.currentTarget.dataset.tooltip
         var coord = this.offset(e.currentTarget)
 
-        this.root.classList.add('show')
+        this.show()
         this.root.style.top = (coord.top + this.options.offset.top) + 'px'
@@ -79,3 +89,3 @@ this.root.style.left = coord.left - (this.root.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
         this.label.innerHTML = ''
-        this.root.classList.remove('show')
+        this.hide()
       })
@@ -87,3 +97,3 @@ }
       e.stop()
-      this.root.classList.remove('show')
+      this.hide()
     })
@@ -99,5 +109,13 @@ }
 
+  hide () {
+    this.root.classList.remove('show')
+  }
+
+  show () {
+    this.root.classList.add('show')
+  }
+
   disable () {
     // console.log('disable')
-    this.root.classList.remove('show')
+    this.hide()
     this.disabled = true
@@ -104,0 +122,0 @@ }

src/view/build.js

@@ -0,1 +1,2 @@
+import scrollbar from '../module/scrollbar'
 import dataset from './dataset'
@@ -7,5 +8,8 @@ import Layout from '../layout'
     this.root = document.createElement('div')
-    this.root.classList.add(this.options.class)
     this.root.classList.add('view')
 
+    if (this.options.class) {
+      this.addClass(this.options.class)
+    }
+
     if (this.options.data) {
@@ -22,3 +26,11 @@ dataset(this.root, this.options.data)
     }
+  },
+
+  addClass (c) {
+    var list = c.split(' ')
+
+    for (var i = 0; i < list.length; i++) {
+      this.root.classList.add(list[i])
+    }
   }
 }

src/view/display.js

@@ -5,6 +5,19 @@
     this.visible ? this.hide() : this.show()
+
+    this.emit('toggle')
+    return this
   },
 
   show () {
-    // console.log('show')
+    // console.log('show', this.visible)
+
+    // if (this.options.transition) {
+    //   this.root.style.display = 'initial'
+    // }
+
+    this.root.getBoundingClientRect()
+
+    // clearTimeout(this.displayTimeout)
+    // this.root.style.display = this._display
+
     this.root.classList.add('show')
@@ -18,6 +31,13 @@ this.visible = true
     this.emit('show')
+    return this
   },
 
   hide () {
-    // console.log('show')
+    // console.log('hide', this.root.style.display)
+    // if (this.root.style.display === 'none') return
+    // clearTimeout(this.displayTimeout)
+    // this._display = getComputedStyle(this.root).display
+
+    if (!this.root) return
+
     this.root.classList.remove('show')
@@ -30,4 +50,45 @@ this.visible = false
 
+    // if (this.options.transition) {
+    //   this.displayTimeout = setTimeout(() => {
+    //     console.log('display: none', this._display)
+    //     this.root.style.display = 'none'
+    //   }, this.options.transition)
+    // }
+
     this.emit('hide')
+    return this
+  },
+
+  destroy () {
+    // console.log('destroy', this.options.transition, this.root)
+    if (this.options.transition && this.root) {
+      this.root.classList.remove('show')
+
+      if (this.underlay) {
+        this.underlay.classList.remove('show')
+      }
+
+      setTimeout(() => {
+        this.removeChild()
+      }, this.options.transition)
+    } else {
+      this.removeChild()
+    }
+
+    this.emit('destroy')
+  },
+
+  removeChild () {
+    if (this.root && this.root.parentNode) {
+      this.root.parentNode.removeChild(this.root)
+      this.root = null
+    }
+
+    if (this.underlay && this.underlay.parentNode) {
+      this.underlay.parentNode.removeChild(this.underlay)
+    }
+
+    this.emit('remove')
+    return this
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

990465

increased by44.85%

Number of package files

296

increased by54.17%

Lines of code

17858

increased by43.15%

Worsened metrics

Number of medium supply chain risk alerts

11

increased by83.33%

No dependency changes