dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 17:38:20 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

add tree view

Browse Source
This commit is contained in:
Xuan Sang LE 2017-08-26 20:27:43 +02:00
parent 4cf1d694f9
commit 599e27bb01
13 changed files with 165 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/core/tags/afx-app-window.js
View File

@ -22,7 +22,6 @@
var desktop_pos = $("#desktop").offset()
var isMaxi = false
var history = {}
var isResize = opts.resize || true
var width = opts.width || 400
var height = opts.height || 300
this.root.observable = opts.observable || riot.observable()
@ -70,7 +69,7 @@
//self.root.observable.trigger("windowselect")
})
enable_dragging()
if(isResize)
if(self.resizable)
enable_resize()
$(self.refs.dragger).dblclick(function(e){
toggle_window()

100
src/core/tags/afx-file-view.js
View File

@ -1,15 +1,17 @@
<afx-file-view>
<afx-list-view if = {view == 'icon'} ref="listview" observable = {root.observable}></afx-list-view>
<afx-grid-view if = {view == 'list'} ref = "gridview" header = {header} observable = {root.observable}></afx-grid-view>
<afx-tree-view if = {view == 'tree'} ref = "treeview" observable = {root.observable}></afx-tree-view>
<afx-list-view ref="listview" observable = {root.observable}></afx-list-view>
<afx-grid-view ref = "gridview" header = {header} observable = {root.observable}></afx-grid-view>
<afx-tree-view ref = "treeview" observable = {root.observable}></afx-tree-view>
<div if = {status == true} class = "status" ref = "stbar"></div>
<script>
var self = this
self.root.observable = opts.observable || riot.observable()
self.view = opts.view || 'list'
self.data = opts.data || []
self.path = opts.path || "os://"
self.onfileselect
this.status = opts.status == undefined?true:opts.status
this.selectedFile = undefined
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
this.header = [{value:"File name"},{value: "Type", width:100}, {value: "Size", width:70}]
@ -20,6 +22,8 @@
self[i] = v[i]
else
self[k] = v
if(k == 'view')
switchView()
self.update()
}
self.root.get = function(k)
@ -35,67 +39,103 @@
var h = $(self.root).height()
if(self.refs.stbar)
h -= $(self.refs.stbar).height()
if(self.refs.listview)
$(self.refs.listview.root).css("height", h + "px")
else if(self.refs.gridview)
$(self.refs.gridview.root).css("height", h + "px")
else if(self.refs.treeview)
$(self.refs.treeview.root).css("height", h + "px")
$(self.refs.listview.root).css("height", h + "px")
$(self.refs.gridview.root).css("height", h + "px")
$(self.refs.treeview.root).css("height", h + "px")
}
var refreshList = function(){
$.each(self.data, function(i, v){
v.text = v.filename
if(v.text.length > 10)
v.text = v.text.substring(0,9) + "..."
if(v.type == 'file')
v.iconclass = 'afx-file'
else
v.iconclass = 'afx-dir'
v.iconclass = v.type
})
self.refs.listview.root.set("items", self.data)
}
var refreshGrid = function(){
var rows = []
$.each(self.data, function(i,v){
var row = [{value:v.filename, iconclass: v.type == "dir"?"afx-dir":"afx-file" },{value:v.mime},{value:v.size}]
var row = [{value:v.filename, iconclass: v.type},{value:v.mime},{value:v.size}]
rows.push(row)
})
self.refs.gridview.root.set("rows",rows)
}
var refreshTree = function(){
var tdata = {}
tdata.name = self.path
tdata.nodes = []
$.each(self.data, function(i,v){
v.name = v.filename
if(v.type == 'dir')
{
v.nodes = []
v.open = false
}
v.iconclass = v.type
tdata.nodes.push(v)
})
self.refs.treeview.root.set("*", tdata)
}
var refreshData = function(){
self.data.sort(sortByType)
if(self.refs.listview)
if(self.view == "icon")
refreshList()
else if(self.refs.gridview)
else if(self.view == "list")
refreshGrid()
else
refreshTree()
}
var switchView = function()
{
$(self.refs.listview.root).hide()
$(self.refs.gridview.root).hide()
$(self.refs.treeview.root).hide()
self.selectedFile = undefined
self.refs.listview.root.set("selected", -1)
self.refs.treeview.selectedItem = undefined
$(self.refs.stbar).html("")
switch (self.view) {
case 'icon':
$(self.refs.listview.root).show()
break;
case 'list':
$(self.refs.gridview.root).show()
break;
case 'tree':
$(self.refs.treeview.root).show()
break;
default:
break;
}
calibre_size()
}
self.on("updated", function(){
refreshData()
calibre_size()
})
self.on("mount", function(){
if(self.refs.listview)
switchView()
self.refs.listview.onlistselect = function(data)
{
self.refs.listview.onlistselect = function(data)
{
data.id = self.rid
self.root.observable.trigger("fileselect",data)
}
data.id = self.rid
self.root.observable.trigger("fileselect",data)
}
if(self.refs.gridview)
self.refs.gridview.root.observable = self.root.observable
self.refs.gridview.ongridselect = function(d)
{
self.refs.gridview.root.observable = self.root.observable
self.refs.gridview.ongridselect = function(d)
{
var data = {id:self.rid, data:self.data[d.data.i], idx:d.data.i}
self.root.observable.trigger("fileselect",data)
}
var data = {id:self.rid, data:self.data[d.data.i], idx:d.data.i}
self.root.observable.trigger("fileselect",data)
}
self.refs.treeview.ontreeselect = function(d)
{
var data = {id:self.rid, data:d.data.child, idx:d.data.i}
self.root.observable.trigger("fileselect",data)
}
self.root.observable.on("fileselect", function(e){
if(e.id != self.rid) return
self.selectedFile = e.data
$(self.refs.stbar).html("Selected: " + e.data.filename + " (" + e.data.size + " bytes)")
})
calibre_size()
self.root.observable.on("resize", function(e){
calibre_size()

5
src/core/tags/afx-grid-view.js
View File

@ -27,7 +27,7 @@
}
this.calibrate_size = function()
{
if(self.header)
if(self.header && self.refs.gridhead)
{
$(self.refs.scroller).css("height",
$(self.root).height() - $(self.refs.gridhead.root).children().first().height()
@ -55,7 +55,8 @@
self.calibrate_size()
self.root.observable.on("resize",function(){
self.calibrate_size()
if(self.root)
self.calibrate_size()
})
})
this.on("updated",function(){

21
src/core/tags/afx-list-view.js
View File

@ -22,7 +22,7 @@
{
if(self.selidx != -1)
self.items[self.selidx].selected =false
self.items[v].selected = true
if(self.items[v]) self.items[v].selected = true
}
else if(k == "*")
for(var i in v)
@ -137,25 +137,6 @@
if(self.selidx != -1)
self.items[self.selidx].selected =false
event.item.item.selected = true
/*var data = {
id:$(self.root).attr("data-id"),
data:event.item.item,
idx:event.item.i}
self.selidx = data.idx
if(!self.items[self.selidx])
return
self.items[self.selidx].selected = true
if(opts.dropdown == "true")
{
$(self.refs.mlist).hide()
self.selectedText = self.items[self.selidx].text
}
this.root.observable.trigger('listselect',data)
//event.preventDefault()*/
}
</script>
</afx-list-view>

25
src/core/tags/afx-menu.js
View File

@ -3,6 +3,7 @@
<li class="afx-corner-fix"></li>
<li ref = "container" each={ data,i in items } class = {afx_submenu:data.child != null, fix_padding:data.icon} no-reorder>
<a href="#" onclick = {parent.onselect}>
<afx-switch if = {data.switch || data.radio} class = {checked:parent.checkItem(data)} enable = false swon = {data.checked} ></afx-switch>
<afx-label iconclass = {data.iconclass} icon = {data.icon} text = {data.text} ></afx-label>
</a>
@ -13,6 +14,7 @@
<script>
this.items = opts.child || []
var isRoot
var lastChecked = undefined
if(opts.rootid)
{
this.rid = opts.rootid
@ -25,6 +27,17 @@
}
var self = this
this.onmenuselect = opts.onmenuselect
checkItem(d)
{
if(d.checked == true && d.radio)
{
if(lastChecked)
lastChecked.checked = false
lastChecked = d
lastChecked.checked = true
}
return false
}
self.root.set = function(k,v)
{
if(k == "*")
@ -125,6 +138,18 @@
onselect(event)
{
var data = {id:self.rid, root:isRoot, e:event, item:event.item}
if(event.item.data.switch)
{
event.item.data.checked = !event.item.data.checked
} else if(event.item.data.radio)
{
if(lastChecked)
{
lastChecked.checked = false
}
event.item.data.checked = true
lastChecked = event.item.data
}
this.root.observable.trigger('menuselect',data)
if( this.onmenuselect && !isRoot) this.onmenuselect(data)
event.preventDefault()

18
src/core/tags/afx-switch.js
View File

@ -4,16 +4,16 @@
this.swon = opts.swon || false
var self = this
this.root.observable = opts.observable
this.enable = opts.enable || true
this.onchange = opts.onchange
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
console.log(this.swon)
self.root.set = function(k,v)
{
if(k == "*")
for(var i in v)
self[i] = v[i]
opts[i] = v[i]
else
self[k] = v
opts[k] = v
self.update()
}
self.root.get = function(k)
@ -22,16 +22,20 @@
}
this.root.toggle = function()
{
self.swon = !self.swon
opts.swon = !self.swon
self.update()
}
this.on("update", function(e){
self.swon = opts.swon
self.onchange = opts.onchange
})
toggle(e)
{
self.swon = !self.swon
if(!self.enable) return
opts.swon = !self.swon
var data = {
id: self.rid,
data: self.swon
data: opts.swon
}
if(self.onchange)
self.onchange(data)

5
src/core/tags/afx-sys-panel.js
View File

@ -8,8 +8,9 @@
<script>
this.osmenu = {child:[
{text:"",iconclass:"fa fa-eercast", child:[
{text:"About"},
{text:"System Preferences", iconclass:"fa fa-commenting"},
{text:"About", radio:true},
{text:"App Store", radio:true},
{text:"System Preferences", switch:true, iconclass:"fa fa-commenting"},
{text:"Applications",child:[
{text:"wTerm",type:"app"},
{text:"NotePad",type:"app", iconclass:"fa fa-commenting"},

16
src/core/tags/afx-tree-view.js
View File

@ -11,20 +11,24 @@
<ul if={ isFolder() } show={ isFolder() && open }>
<li each={ child, i in nodes }>
<afx-tree-view data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
<afx-tree-view ontreeselect = {parent.ontreeselect} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
</li>
</ul>
<script>
var self = this
self.open = true
if(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
}
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.ontreeselect = opts.ontreeselect
self.indent = opts.indent || 1
self.open = true
var istoggle = false
if(opts.treeroot)
{
@ -66,7 +70,7 @@
})
isFolder() {
return self.nodes && self.nodes.length
return self.nodes //&& self.nodes.length
}
toggle(e) {
@ -83,12 +87,12 @@
return
}
var data = {
id:$(self.treeroot.root).attr("data-id"),
id:self.rid,
data:event.item,
path:self.path
}
if(opts.ontreeselect)
opts.ontreeselect(data)
if(self.ontreeselect)
self.ontreeselect(data)
self.treeroot.selectedItem = data
this.root.observable.trigger('treeselect',data)
event.preventUpdate = true

2
src/packages/DummyApp/scheme.html
View File

@ -3,7 +3,7 @@
<afx-tree-view data-id="mytree"> </afx-tree-view>
<afx-hbox>
<afx-button data-height="30" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>
<afx-switch data-height="30"></afx-switch>
<afx-switch enable= true data-height="30"></afx-switch>
<afx-calendar-view></afx-calendar-view>
<afx-color-picker></afx-color-picker>
<afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "40"></afx-list-view>

10
src/packages/Files/main.coffee
View File

@ -11,8 +11,10 @@ class Files extends this.OS.GUI.BaseApplication
m.show(e)
@on "fileselect", (d) -> console.log d
#load home directory
@_api.VFS.scandir 'home:///',
p = 'home:///'
@_api.VFS.scandir p,
(d) ->
me.view.set "path", p
me.view.set "data", d.result
, (e, s) ->
alert "cannot open dir"
@ -46,9 +48,9 @@ class Files extends this.OS.GUI.BaseApplication
{ text: "Navigation bar", dataid: "#{@name}-nav" },
{ text: "Hidden files", dataid: "#{@name}-hidden" },
{ text: "Type", child: [
{ text: "Icon view", dataid: "#{@name}-icon", type: 'icon' },
{ text: "List view", dataid: "#{@name}-list", type: 'list' },
{ text: "Tree view", dataid: "#{@name}-tree", type: 'tree' }
{ text: "Icon view", radio: true, dataid: "#{@name}-icon", type: 'icon' },
{ text: "List view", radio:true, checked: true, dataid: "#{@name}-list", type: 'list' },
{ text: "Tree view", radio:true, dataid: "#{@name}-tree", type: 'tree' }
], onmenuselect: (e) ->
me.view.set 'view', e.item.data.type
},

30
src/themes/antos/afx-file-view.css
View File

@ -25,7 +25,7 @@ afx-file-view afx-list-view li{
afx-file-view afx-list-view li:nth-child(odd){
background-color: transparent;
}
afx-file-view afx-list-view i.afx-dir:before{
afx-file-view afx-list-view i.dir:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 32px;
@ -41,7 +41,7 @@ afx-file-view afx-list-view i{
}
afx-file-view afx-list-view i.afx-file:before{
afx-file-view afx-list-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 28px;
@ -56,7 +56,7 @@ afx-file-view afx-list-view li.selected, afx-file-view afx-list-view li.select
border-radius: 6px;
}
afx-file-view afx-grid-view i.afx-file:before{
afx-file-view afx-grid-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 16px;
@ -64,7 +64,7 @@ afx-file-view afx-grid-view i.afx-file:before{
font-style: normal;
font-weight: normal;
}
afx-file-view afx-grid-view i.afx-dir:before{
afx-file-view afx-grid-view i.dir:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 16px;
@ -85,3 +85,25 @@ afx-file-view afx-grid-view afx-grid-row.grid_row_header{
afx-file-view afx-grid-view afx-grid-row.grid_row_header div{
border: 1px solid #a6a6a6;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 16px;
}
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c";
font-family: "FontAwesome";
font-size: 16px;
}
afx-file-view afx-tree-view {
margin:0;
}
afx-file-view afx-tree-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 16px;
color: #414339;
font-style: normal;
font-weight: normal;
}

6
src/themes/antos/afx-menu.css
View File

@ -16,6 +16,12 @@ afx-menu ul{
margin: 0;
}
afx-menu afx-switch span{
width: 20px;
height: 16px;
font-size: 16px;
/*margin-top:5px;*/
}
afx-menu afx-menu ul {
padding: 0;

1
src/themes/antos/afx-tree-view.css
View File

@ -2,6 +2,7 @@ afx-tree-view{
color: #414339;
padding:3px;
overflow: auto;
display: block;
}
afx-tree-view afx-tree-view{
padding:0;