track display status

pull/7/head
yann300 8 years ago
parent 5aa7bf8a5e
commit 404815b9da
  1. 27
      src/ui/TreeView.js

@ -16,10 +16,11 @@ class TreeView {
this.cssLabel = ui.formatCss(opts.css || {}, style.label)
this.cssUl = ui.formatCss(opts.css || {}, style.cssUl)
this.cssLi = ui.formatCss(opts.css || {}, style.cssLi)
this.keyPaths = {}
}
render (json) {
var view = this.renderProperties(json, true)
var view = this.renderProperties(json, false)
if (!this.view) {
this.view = view
}
@ -28,43 +29,41 @@ class TreeView {
update (json) {
if (this.view) {
yo.update(this.view, this.render(json), {onBeforeElUpdated: (fromEl, toEl) => {
toEl.style.display = fromEl.style.display
toEl.className = fromEl.className
return true
}})
yo.update(this.view, this.render(json))
}
}
renderObject (item, parent, key, expand) {
renderObject (item, parent, key, expand, keyPath) {
var data = this.extractData(item, parent, key)
var children = (data.children || []).map((child, index) => {
return this.renderObject(child.value, data, child.key, expand)
return this.renderObject(child.value, data, child.key, expand, keyPath + '_' + child.key)
})
return this.formatDataInternal(key, data, children, expand)
return this.formatDataInternal(key, data, children, expand, keyPath)
}
renderProperties (json, expand) {
var children = Object.keys(json).map((innerkey) => {
return this.renderObject(json[innerkey], json, innerkey, expand)
return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
})
return yo`<ul style=${this.cssUl}>${children}</ul>`
}
formatDataInternal (key, data, children, expand) {
formatDataInternal (key, data, children, expand, keyPath) {
var label = yo`<span style=${this.cssLabel}><label style=${ui.formatCss(style.caret)}></label><span style=${ui.formatCss(style.data)}>${this.formatData(key, data)}</span></span>`
var renderedChildren = ''
if (children.length) {
renderedChildren = yo`<ul style=${this.cssUl}>${children}</ul>`
renderedChildren.style.display = expand ? 'block' : 'none'
label.firstElementChild.className = expand ? 'fa fa-caret-down' : 'fa fa-caret-right'
renderedChildren.style.display = this.keyPaths[keyPath] ? this.keyPaths[keyPath] : expand ? 'block' : 'none'
label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
var self = this
label.onclick = function () {
this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
var list = this.parentElement.querySelector('ul')
list.style.display = list.style.display === 'none' ? 'block' : 'none'
self.keyPaths[keyPath] = list.style.display
}
}
return yo`<li id=${key + (new Date().getUTCMilliseconds())} style=${this.cssLi}>${label}${renderedChildren}</li>`
return yo`<li style=${this.cssLi}>${label}${renderedChildren}</li>`
}
formatDataDefault (key, data) {

Loading…
Cancel
Save