From 599e27bb01bd1db3398f64aeb75c1b782880968b Mon Sep 17 00:00:00 2001
From: Xuan Sang LE <xsang.le@gmail.com>
Date: Sat, 26 Aug 2017 20:27:43 +0200
Subject: [PATCH] add tree view

---
 src/core/tags/afx-app-window.js    |   3 +-
 src/core/tags/afx-file-view.js     | 100 ++++++++++++++++++++---------
 src/core/tags/afx-grid-view.js     |   5 +-
 src/core/tags/afx-list-view.js     |  21 +-----
 src/core/tags/afx-menu.js          |  25 ++++++++
 src/core/tags/afx-switch.js        |  18 ++++--
 src/core/tags/afx-sys-panel.js     |   5 +-
 src/core/tags/afx-tree-view.js     |  18 ++++--
 src/packages/DummyApp/scheme.html  |   2 +-
 src/packages/Files/main.coffee     |  10 +--
 src/themes/antos/afx-file-view.css |  30 +++++++--
 src/themes/antos/afx-menu.css      |   6 ++
 src/themes/antos/afx-tree-view.css |   1 +
 13 files changed, 165 insertions(+), 79 deletions(-)

diff --git a/src/core/tags/afx-app-window.js b/src/core/tags/afx-app-window.js
index 7c6cec6..eef7224 100644
--- a/src/core/tags/afx-app-window.js
+++ b/src/core/tags/afx-app-window.js
@@ -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()
diff --git a/src/core/tags/afx-file-view.js b/src/core/tags/afx-file-view.js
index 46b1edb..a2c4e03 100644
--- a/src/core/tags/afx-file-view.js
+++ b/src/core/tags/afx-file-view.js
@@ -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()
diff --git a/src/core/tags/afx-grid-view.js b/src/core/tags/afx-grid-view.js
index 32f56ee..18219cb 100644
--- a/src/core/tags/afx-grid-view.js
+++ b/src/core/tags/afx-grid-view.js
@@ -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(){
diff --git a/src/core/tags/afx-list-view.js b/src/core/tags/afx-list-view.js
index bb2a0c7..241916a 100644
--- a/src/core/tags/afx-list-view.js
+++ b/src/core/tags/afx-list-view.js
@@ -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>
\ No newline at end of file
diff --git a/src/core/tags/afx-menu.js b/src/core/tags/afx-menu.js
index de82594..cc5ad9e 100644
--- a/src/core/tags/afx-menu.js
+++ b/src/core/tags/afx-menu.js
@@ -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()
diff --git a/src/core/tags/afx-switch.js b/src/core/tags/afx-switch.js
index c52816a..54a6133 100644
--- a/src/core/tags/afx-switch.js
+++ b/src/core/tags/afx-switch.js
@@ -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)
diff --git a/src/core/tags/afx-sys-panel.js b/src/core/tags/afx-sys-panel.js
index 5730915..91b8dd7 100644
--- a/src/core/tags/afx-sys-panel.js
+++ b/src/core/tags/afx-sys-panel.js
@@ -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"},
diff --git a/src/core/tags/afx-tree-view.js b/src/core/tags/afx-tree-view.js
index 138542b..a28e6dc 100644
--- a/src/core/tags/afx-tree-view.js
+++ b/src/core/tags/afx-tree-view.js
@@ -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.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
diff --git a/src/packages/DummyApp/scheme.html b/src/packages/DummyApp/scheme.html
index 7e097ed..334fad0 100644
--- a/src/packages/DummyApp/scheme.html
+++ b/src/packages/DummyApp/scheme.html
@@ -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>
diff --git a/src/packages/Files/main.coffee b/src/packages/Files/main.coffee
index f819d55..4c28365 100644
--- a/src/packages/Files/main.coffee
+++ b/src/packages/Files/main.coffee
@@ -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
                     },
diff --git a/src/themes/antos/afx-file-view.css b/src/themes/antos/afx-file-view.css
index 3c8471c..9224ef8 100644
--- a/src/themes/antos/afx-file-view.css
+++ b/src/themes/antos/afx-file-view.css
@@ -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;
@@ -84,4 +84,26 @@ 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;
 }
\ No newline at end of file
diff --git a/src/themes/antos/afx-menu.css b/src/themes/antos/afx-menu.css
index 5fb124b..3f75a03 100644
--- a/src/themes/antos/afx-menu.css
+++ b/src/themes/antos/afx-menu.css
@@ -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;
diff --git a/src/themes/antos/afx-tree-view.css b/src/themes/antos/afx-tree-view.css
index 5b2cf52..afe9067 100644
--- a/src/themes/antos/afx-tree-view.css
+++ b/src/themes/antos/afx-tree-view.css
@@ -2,6 +2,7 @@ afx-tree-view{
     color: #414339;
     padding:3px;
     overflow: auto;
+    display: block;
 }
 afx-tree-view afx-tree-view{
     padding:0;