material 0.4.3 → 0.5.1

package/src/form/data.js

@@ -0,0 +1,82 @@
+import { byString } from '../module/object'
+
+export default {
+
+  initData () {
+    // console.log('submit', this.mode)
+
+    var data = new FormData()
+
+    if (this.mode !== 'create') {
+      this.appendSysinfo(data)
+    }
+
+    this.appendFields(data)
+    this.appendFiles(data)
+
+    return data
+  },
+
+  appendSysinfo (data) {
+    var sys = this.options.sysinfo
+    for (var i = 0; i < sys.length; i++) {
+      // console.log('sys', sys[i], this.info[sys[i]])
+      var name = sys[i]
+      if (sys[i] === '_id') name = 'id'
+
+      data.append(name, this.info[sys[i]])
+    }
+
+    return data
+  },
+
+  appendFields (data) {
+    for (var field in this.field) {
+      // console.log('field', field)
+      if (this.field.hasOwnProperty(field)) {
+        // console.log('check field', field)
+        var value = this.field[field].get()
+        if (value !== null) {
+          if (this.mode === 'update' && this.options.update && this.options.update.modifiedOnly) {
+            var modified = this.isModified(field, value)
+            if (modified) {
+              data.append(field, value)
+            }
+          } else {
+            data.append(field, value)
+          }
+        }
+      }
+    }
+
+    return data
+  },
+
+  appendFiles (data) {
+    // console.log('appendFiles', this.file)
+    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) {
+        data.append(file, this.file[file].input.files[0])
+      }
+    }
+
+    return data
+  },
+
+  isModified (field, value) {
+    var initial = byString(this.info, field)
+
+    if (typeof initial === 'number') {
+      value = Number(value)
+    }
+
+    if (initial !== value) {
+      // console.log('field', field, typeof value, value)
+      return true
+    } else {
+      return false
+    }
+  }
+}

package/src/form/delete.js

@@ -18,7 +18,7 @@ export default {
     // console.log('delete', this.info._id)
     if (!this.info._id) return
     this.setMode('delete')
-    fetch(this.options.route, {
+    fetch(this.options.action, {
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
@@ -32,6 +32,7 @@ export default {
       return resp.json()
     }).then((data) => {
       // console.log('data', data)
+      this.form.reset()
       this.emit('deleted', this.info._id)
     })
   }

package/src/form/fetch.js

@@ -1,22 +1,24 @@
 export default {
   fetch (option) {
+    // console.log('fetch', this.options.route, option.method)
     fetch(this.options.route, {
       method: option.method,
       body: option.formData
     }).then(r => r.json()).then(info => {
       if (info.error) {
-        console.log('Error: ' + info.error)
+        // console.log('Error: ' + info.error)
         if (this.error) {
           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'
         }
 
         if (this.success) {

package/src/form/render.js

@@ -18,40 +18,42 @@ export default {
 
     for (var field in this.field) {
       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)
         }
       }
     }
 
-    if (this.disableControls) {
-      this.disableControls()
-    }
-
     this.emit('rendered')
 
-    // won't stay there
+    // won't stay here
     if (option === 'create' && this.field['name']) {
       this.focusNameOnRender(this.field['name'])
     }
   },
 
   objectValueByDotKey (object, dotkey) {
+    // console.log('objectValueByDotKey', object, dotkey)
     var keys = dotkey.split(/\./)
 
     var value = Object.assign({}, object)
 
     for (var i = 0; i < keys.length; i++) {
-      value = value[keys[i]]
+      if (value !== undefined) {
+        value = value[keys[i]]
+      }
     }
 
     return value
   },
 
   focusNameOnRender (field) {
-    field.focus()
+    // console.log('focusNameOnRender', field)
+    field.input.focus()
     field.input.select()
   }
 }

package/src/form/set.js

@@ -1,13 +1,17 @@
 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)
 
     this.setMode('read')
     // this.render(info)
-    fetch(this.options.route + id, {
+    fetch(this.options.action + id, {
       headers: {
         'Accept': 'application/json'
       },
@@ -15,17 +19,28 @@ export default {
     }).then((resp) => {
       // console.log('resp', resp)
       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.emit('setted', id)
+      this.info = info
+      this.render(info)
+      this.emit('setted', info)
     })
+  },
+
+  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)
   }
 }

package/src/form/submit.js

@@ -2,53 +2,29 @@ export default {
 
   submit (ev) {
     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 formData = new FormData()
-
-    if (this.info && this.info._id) {
-      formData.append('id', this.info._id)
-    }
-
-    if (this.info && this.info.uuid) {
-      formData.append('id', this.info.uuid)
-    }
+    var data = this.initData()
 
-    // append field
+    // console.log('data', data)
 
-    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())
-      }
+    if (this.update) {
+      this.update(data)
+    } else {
+      this.setMethod(data)
     }
 
-    // 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())
+    return false
+  },
 
+  setMethod (formData) {
     var method = 'PUT'
     if (this.mode === 'create') {
       method = 'POST'
     }
 
     if (this.fetch) {
+      // console.log('formData', formData.keys())
       this.fetch({
         method: method,
         formData: formData
@@ -61,7 +37,5 @@ export default {
         formData: formData
       })
     }
-
-    return false
   }
 }

package/src/form/update.js

@@ -1,26 +1,45 @@
-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 || {}
+
+    // 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(this.options.form.action, {
-      method: this.options.form.method,
-      headers: header,
-      body: JSON.stringify(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)
       }
     })
   }

package/src/layout.js

@@ -1,6 +1,6 @@
+
 import { is as isObject } from './module/object'
 import css from './module/css'
-import insert from './element/insert'
 
 /**
  *
@@ -13,8 +13,10 @@ class Layout {
    * @return {?}           [description]
    */
   constructor (schema, container) {
+    this.components = []
     this.component = this.create(schema, container)
-    // this.field = this.extractInfo(this.component)
+
+    // console.log('this', this)
 
     return this
   }
@@ -30,9 +32,6 @@ class Layout {
     level = level || 0
     level++
 
-    // console.log('level', level, schema)
-    // console.log('-------------')
-
     structure = structure || {}
     let component = null
 
@@ -43,7 +42,9 @@ class Layout {
 
       if (schema[i] instanceof Object &&
         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]
         }
 
@@ -55,27 +56,30 @@ class Layout {
         }
 
         component = new schema[i](options)
+        var element = component.root || component
 
-        if (name) {
-          structure[name] = component
+        if (level === 1) {
+          structure.root = element
         }
 
-        if (component) {
-          this.display(component.root, options)
-          this.style(component, options)
+        if (name) {
+          structure[name] = component
+          this.components.push([name, component])
         }
 
-        if (level === 1) {
-          var isClass = fn => /^\sclass/.test(schema[i].toString())
-
-          // console.log('isClass', isClass)
-          // console.log('root', component.root)
-          structure.root = component.root
-        }
+        // if (component) {
+        //   this.display(component.root, options)
+        //   this.style(component, options)
+        // }
 
         if (component && container) {
-          if (component.insert) component.insert(container)
-          else insert(component, container)
+          if (component.insert) {
+            component.insert(container)
+          } else {
+            var wrapper = container.root || container
+
+            wrapper.appendChild(element)
+          }
           component._container = container
         }
       } else if (Array.isArray(schema[i])) {
@@ -162,7 +166,7 @@ class Layout {
       }
     }
 
-    console.log('--- field', field)
+    // console.log('--- field', field)
 
     return field
   }

package/src/list/add.js

@@ -1,4 +1,38 @@
 
 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
+  }
 }

package/src/list/build.js

@@ -1,21 +1,31 @@
-import observer from '../module/observer'
+import scrollbar from '../module/scrollbar'
 import dataset from '../view/dataset'
 
 import Layout from '../layout'
 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) => {
       e.stopPropagation()
     })
 
+    if (this.options.name) {
+      this.name = this.options.name
+    }
+
     if (this.options.data) {
       dataset(this.root, this.options.data)
     }
@@ -23,35 +33,109 @@ export default {
     this.layout = new Layout(this.options.layout.main, this.root)
     this.ui = this.layout.component
 
+    // 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
 
     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])
       }
     })
+
+    // 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
   }
 }

package/src/list/click.js

@@ -1,7 +1,8 @@
 
 export default {
   click (e) {
-    // e.stopPropagation()
+    // console.log('click', e.target)
+    e.stopPropagation()
 
     if (e.target === e.currentTarget) {
       return
@@ -21,15 +22,19 @@ export default {
       i++
     }
 
-    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)
   }
 }