fix tree view, add features to Blogger

This commit is contained in:
Xuan Sang LE
2018-02-13 04:59:08 +01:00
parent 7dc275e1e5
commit 133b7512fa
18 changed files with 296 additions and 85 deletions

View File

@ -56,7 +56,7 @@ class BasicDialog extends BaseDialog
@title = @name if not @title
html = "<afx-app-window data-id = 'dia-window' apptitle='#{@title}' width='#{@conf.width}' height='#{@conf.height}'>
<afx-vbox>"
html += "<#{v.tag} #{v.att} data-id = 'content#{k}'></#{v.tag}>" for k,v of @conf.tags
html += "<#{v.tag} #{v.att} style = 'margin-left:5px; margin-right:5px;' data-id = 'content#{k}'></#{v.tag}>" for k,v of @conf.tags
html += "<div data-height = '35' style=' text-align:right;padding-top:3px;'>"
html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-right:5px;'></afx-button>" for k,v of @conf.buttons
html += "</div></afx-vbox></afx-app-window>"
@ -104,7 +104,7 @@ class PromptDialog extends BasicDialog
(d.find "content0").set "text", d.data.label
(d.find "content1").value = d.data.value if d.data.value
xtra: (d) ->
$( d.find "content0" ).keyup (e) ->
$( d.find "content1" ).keyup (e) ->
(d.find "bt0").trigger() if e.which is 13
}

View File

@ -3,8 +3,15 @@ class DB
save: (d, f) ->
_API.handler.dbquery "save", { table: @table, data: d }, f
delete: (id, f) ->
_API.handler.dbquery "delete", { table: @table, id: id }, f
delete: (c, f) ->
rq = { table: @table }
return _courrier.oserror "Unknown condition for delete command",
(_API.throwe "OS.DB"), c unless c and c inst ""
if isNaN c
rq.cond = c
else
rq.id = c
_API.handler.dbquery "delete", rq, f
get: (id, f) ->
_API.handler.dbquery "get", { table: @table, id: id }, f
find: (cond, f) ->

View File

@ -97,6 +97,7 @@ self.OS.GUI =
forceLaunch: (app, args) ->
console.log "This method is used for developing only, please use the launch method instead"
_PM.killAll app
($ _OS.APP[app].style).remove() if _OS.APP[app] and _OS.APP[app].style
_OS.APP[app] = undefined
_GUI.launch app, args
@ -109,8 +110,9 @@ self.OS.GUI =
#load css file
css = "#{path}/main.css"
css.asFileHandler().onready (d) ->
$ '<link>', { rel: 'stylesheet', type: 'text/css', 'href': "#{_API.handler.get}/#{css}" }
el = $ '<link>', { rel: 'stylesheet', type: 'text/css', 'href': "#{_API.handler.get}/#{css}" }
.appendTo 'head'
_OS.APP[app].style = el[0] if _OS.APP[app]
, () ->
#launch
# load app meta data

View File

@ -82,7 +82,7 @@
var tdata = {}
tdata.name = self.path
tdata.nodes = getTreeData(self.data)
self.refs.treeview.root.set("*", tdata)
self.refs.treeview.root.set("data", tdata)
}
var getTreeData = function(data)
{
@ -170,20 +170,21 @@
self.refs.treeview.ontreeselect = function(d)
{
if(!d) return;
if(!d.data)// select the root
var data;
var el = d;
if(d.treepath == 0)// select the root
{
var r = self.path.asFileHandler()
r.size = 0
r.filename = r.path
d.data = { child: r , i:0 }
el = self.path.asFileHandler()
el.size = 0
el.filename = el.path
}
var data = {id:self.rid, data:d.data.child, idx:d.data.i}
var data = {id:self.rid, data:el}
self.root.observable.trigger("fileselect",data)
}
self.refs.treeview.ontreedbclick = function(d)
{
if(!d.data) return;
var data = {id:self.rid, data:d.data.child, idx:d.data.i}
if(!d || d.treepath == 0) return;
var data = {id:self.rid, data:d}
self.root.observable.trigger("filedbclick",data)
}
self.root.observable.on("fileselect", function(e){

View File

@ -40,6 +40,8 @@
if(dw)
{
if(dw == "grow") return
if(dw[dw.length-1] === "%")
dw = Number(dw.slice(0,-1))*avaiWidth/100;
$(this).css("width",dw + "px")
ocwidth += Number(dw)
}
@ -51,10 +53,11 @@
}
})
csize = (avaiWidth - ocwidth)/ (auto_width.length)
$.each(auto_width, function(i,v)
{
$(v).css("width", csize + "px")
})
if(csize > 0)
$.each(auto_width, function(i,v)
{
$(v).css("width", csize + "px")
})
self.root.observable.trigger("hboxchange",
{id:self.rid, w:csize, h:avaiheight})
}

View File

@ -6,6 +6,9 @@
<li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select}>
<afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
<i if = {item.closable} class = "closable" click = {parent._remove}></i>
<ul if = {item.complex} class = "complex-content">
<li each = {ctn,j in item.content} class = {ctn.class}>{ctn.text}</li>
</ul>
</li>
</ul>
</div>

View File

@ -1,41 +1,45 @@
<afx-tree-view>
<div class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.path == path, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0 } onclick={select} ondblclick = {_dbclick} oncontextmenu = {select}>
<div class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.treepath == data.treepath, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0 } onclick={select} ondblclick = {_dbclick} oncontextmenu = {select}>
<ul style = "padding:0;margin:0;white-space: nowrap;">
<li ref = "padding" ></li>
<li class = "itemname" style="display:inline-block;" >
<i if={ !isFolder() && iconclass} class = {iconclass} ></i>
<i if={!isFolder() && icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
<i if={ !isFolder() && data.iconclass} class = {data.iconclass} ></i>
<i if={!isFolder() && data.icon} class="icon-style" style = { "background: url("+data.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
<span onclick={ toggle } if={ isFolder() } class={open ? 'afx-tree-view-folder-open' : 'afx-tree-view-folder-close'}></span>
{ name }
{ data.name }
</li>
</ul>
</div>
<ul if={ isFolder() } show={ isFolder() && open }>
<li each={ child, i in nodes }>
<afx-tree-view ontreeselect = {parent.ontreeselect} fetch = {parent.fetch} ontreedbclick = {parent.ontreedbclick} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
<li each={ child, i in data.nodes }>
<afx-tree-view ontreeselect = {parent.ontreeselect} index = {i} fetch = {parent.fetch} ontreedbclick = {parent.ontreedbclick} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.data.treepath + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
</li>
</ul>
<script>
var self = this
self.open = true
self.data = { name:"", nodes:null, treepath: opts.path, i:-1}
if(opts.data)
{
self.name = opts.data.name
self.nodes = opts.data.nodes
self.icon = opts.data.icon
self.data = opts.data
//self.name = opts.data.name
//self.nodes = opts.data.nodes
//self.icon = opts.data.icon
self.open = opts.data.open == undefined?true:opts.data.open
self.iconclass = opts.data.iconclass
//self.iconclass = opts.data.iconclass
}
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.data.rid = self.rid
self.data.i = opts.index
self.ontreeselect = opts.ontreeselect
self.ontreedbclick = opts.ontreedbclick
self.fetch = opts.fetch
self.indent = opts.indent || 1
self.indent = opts.indent || 0
var istoggle = false
if(opts.treeroot)
{
@ -47,21 +51,48 @@
this.treeroot = self
this.treeroot.counter = 0
}
self.path = opts.path || 0
self.selected = false
self.data.treepath = opts.path || 0
//self.selected = false
self.selectedItem = null
self.index = this.treeroot.counter
var _dfind = function(l,d, k, v)
{
if( d[k] == v ) return l.push(d)
if(d.nodes && d.nodes.length > 0)
for(var i in d.nodes)
_dfind(l, d.nodes[i],k,v)
}
self.root.find = function(k, v)
{
var l = []
_dfind(l,self.data,k,v)
return l
}
self.root.set = function(k,v)
{
if(k == "*")
for(var i in v)
self[i] = v[i]
else if (k == "data")
for(var i in v)
self.data[i] = v[i]
else if (k == "selectedItem")
{
if(self.ontreeselect)
self.ontreeselect(self.data)
self.treeroot.selectedItem = v
self.root.observable.trigger('treeselect',self.data)
}
else
self[k] = v
self.update()
}
self.root.get = function(k)
{
//if(k == "data")
// return {name:self.name, nodes: self.nodes, icon:self.icon, iconclass: self.iconclass, selectedItem:self.selectedItem}
return self[k]
}
@ -83,18 +114,21 @@
})
isFolder() {
return self.nodes //&& self.nodes.length
return self.data.nodes //&& self.nodes.length
}
toggle(e) {
self.open = !self.open
e.preventDefault()
istoggle = true
if(self.open && self.nodes.length == 0 && self.fetch)
if(self.open && self.data.nodes.length == 0 && self.fetch)
{
self.fetch(e.item, function(d){
self.nodes = d
self.data.nodes = d
self.update()
})
}
}
select(event)
@ -104,15 +138,15 @@
istoggle = false
return
}
var data = {
/*var data = {
id:self.rid,
data:event.item,
path:self.path
}
path:self.data.path
} */
if(self.ontreeselect)
self.ontreeselect(data)
self.treeroot.selectedItem = data
this.root.observable.trigger('treeselect',data)
self.ontreeselect(self.data)
self.treeroot.selectedItem = self.data
this.root.observable.trigger('treeselect',self.data)
event.preventUpdate = true
self.treeroot.update()
event.preventDefault()
@ -124,15 +158,15 @@
istoggle = false
return
}
data = {
/*data = {
id:self.rid,
data:event.item,
path: self.path}
path: self.data.path}*/
if(self.ontreedbclick)
{
self.ontreedbclick(data)
self.ontreedbclick(self.data)
}
self.root.observable.trigger('treedbclick', data)
self.root.observable.trigger('treedbclick', self.data)
}
</script>
</afx-tree-view>

View File

@ -43,6 +43,8 @@
if(dw)
{
if(dw == "grow") return
if(dw[dw.length-1] === "%")
dw = Number(dw.slice(0,-1))*avaiheight/100;
$(this).css("height",dw + "px")
ocheight += Number(dw)
}
@ -54,10 +56,11 @@
}
})
csize = (avaiheight - ocheight)/ (auto_height.length)
$.each(auto_height, function(i,v)
{
$(v).css("height", csize + "px")
})
if(csize > 0)
$.each(auto_height, function(i,v)
{
$(v).css("height", csize + "px")
})
self.root.observable.trigger("vboxchange",
{id:self.rid, w:avaiwidth, h:csize})
}