add tab bar

Makefile

@@ -36,6 +36,7 @@ coffees= 	src/core/core.coffee \
 			src/core/tags/NSpinnerTag.coffee \
 			src/core/tags/MenuTag.coffee \
 			src/core/tags/GridView.coffee \
+			src/core/tags/TabBarTag.coffee \
         	src/antos.coffee
  
 

src/core/tags/ListViewTag.coffee

@@ -65,7 +65,7 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
         super r, o
         @setopt "onlistselect", () ->
         @setopt "onlistdbclick", () ->
-        @setopt "onitemclose", () ->
+        @setopt "onitemclose", () -> true
         @setopt "buttons", []
         @setopt "data", {}
         @setopt "dropdown", false
@@ -76,11 +76,53 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
         $(@root)
             .css "display", "flex"
             .css "flex-direction", "column"
+        me = @
+        @root.push = (e) -> me.push e
+        @root.remove = (e) -> me.remove e
+        @root.unshift = (e) -> me.unshift e
 
     multiselect: () ->
         return false if @get "dropdown"
         @get "multiselect"
 
+    unshift: (item) ->
+        @push item, true
+
+    has_data: (v) ->
+        @get("data").includes v
+
+    push: (item, flag) ->
+        el = $("<#{@get "itemtag"}>")
+        if flag
+            @get("data").unshift item if not  @has_data item
+            $(@refs.mlist).prepend el[0]
+        else
+            @get("data").push item if not  @has_data item
+            el.appendTo @refs.mlist
+        el[0].uify @observable
+        me = @
+        el[0]
+            .set "data", item
+            .set "oncontextmenu", (e) ->
+                me.iclick e
+            .set "ondbclick", (e) ->
+                me.idbclick e
+            .set "onclick", (e) ->
+                me.iclick e
+            .set "onselect", (e) ->
+                me.iselect e
+            .set "onclose", (e) ->
+                me.iclose e
+
+    remove: (item) ->
+        el = item.get "data"
+        data = @get "data"
+        @set "selectedItem", undefined if @get("selectedItem") is item
+        list = @get("selectedItems")
+        list.splice(list.indexOf(item), 1) if list.includes(item)
+        if data.includes el
+            data.splice data.indexOf(el), 1
+        $(item).remove()
 
     __buttons__: (v) ->
         return if @get "dropdown"
@@ -88,21 +130,7 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
     __data__: (data) ->
         $( @refs.mlist).empty()
         for item in data
-            el = $("<#{@get "itemtag"}>").appendTo @refs.mlist
+            @push item, false
-            el[0].uify @observable
-            me = @
-            el[0]
-                .set "data", item
-                .set "oncontextmenu", (e) ->
-                    me.iclick e
-                .set "ondbclick", (e) ->
-                    me.idbclick e
-                .set "onclick", (e) ->
-                    me.iclick e
-                .set "onselect", (e) ->
-                    me.iselect e
-                .set "onclose", (e) ->
-                    me.iclose e
 
     iclick: (e) ->
         return if not e.item
@@ -140,7 +168,11 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
 
     iclose: (e) ->
         return unless e.item
-        $(e.item).remove()
+        evt = { id: @aid(), data: e }
+        r = @get("onitemclose") evt
+        return unless r
+        @observable.trigger "itemclose", evt
+        @remove(e.item)
 
     __dropdown__: (v) ->
         $(@refs.container).removeAttr "style"

src/core/tags/TabBarTag.coffee

@@ -0,0 +1,26 @@
+class TabBarTag extends Ant.OS.GUI.BaseTag
+    constructor: (r, o) ->
+        super r, o
+        @setopt "closable", false
+        @setopt "ontabselect", (e) ->
+        @setopt "items", []
+    
+    __items__: (v) ->
+        @refs.list.set "data", v
+
+    mount: () ->
+        me  = @
+        @refs.list.set "onlistselect", (e) ->
+            me.get("ontabselect") e
+            me.observable.trigger "tabselect", e
+        @root.push = (e) -> me.refs.list.push e
+        @root.unshift = (e) -> me.refs.list.unshift e
+        @root.remove = (e) -> me.refs.list.remove e
+        $(@refs.list).css "height", "100%"
+
+    layout: () ->
+        [{
+            el: "afx-list-view", ref: "list"
+        }]
+
+Ant.OS.GUI.define "afx-tab-bar", TabBarTag

src/packages/ShowCase/coffees/main.coffee

@@ -3,7 +3,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
     constructor: (args) ->
         super "ShowCase", args
     
-    main:() ->
+    main: () ->
         me = @
         @announcer = new Ant.OS.API.Announcer()
         @announcer.on "evt1", (data) ->
@@ -38,34 +38,35 @@ class ShowCase extends this.OS.GUI.BaseApplication
         <afx-app-window data-id="example-show-case" apptitle="Preview" width="650" height="500">
             <afx-vbox>
                 <afx-menu data-height="30" data-id="menu" />
-            <afx-hbox>
+                <afx-tab-bar data-height="30" data-id="tab" />
-               <afx-vbox data-width="150">
+                <afx-hbox>
-                    <div>box 2</div>
-                    <div>box 2</div>
-                </afx-vbox>
-                <afx-resizer data-width="5" />
-                <afx-vbox data-width="grow">
-                    <afx-hbox min-height="50">
-                    <afx-switch data-id="switch" />
-                    <afx-button text="__(This is the label)"
-                        data-id="bttest"
-                        iconclass="fa fa-camera-retro fa-lg"
-                        icon="os://packages/DummyApp/icon.png"/>
-                    <afx-nspinner data-id="spin" value="10" step="2" />
-                    </afx-hbox>
-                    <afx-resizer data-height="5" />
-                    <afx-hbox>
-                        <afx-list-view data-id="list" dropdown="false" multiselect="true" />
-                    </afx-hbox>
-                     <afx-hbox data-height="150">
-                        <afx-grid-view data-id="grid" multiselect="true" />
-                    </afx-hbox>
-                </afx-vbox>
                 <afx-vbox data-width="150">
-                    <div data-height="grow">box 3</div>
+                    <div>box 2</div>
-                    <div data-height="200">box 4
+                    <div>box 2</div>
-                </afx-vbox>
+                    </afx-vbox>
-            </afx-hbox>
+                    <afx-resizer data-width="5" />
+                    <afx-vbox data-width="grow">
+                        <afx-hbox min-height="50">
+                        <afx-switch data-id="switch" />
+                        <afx-button text="__(This is the label)"
+                            data-id="bttest"
+                            iconclass="fa fa-camera-retro fa-lg"
+                            icon="os://packages/DummyApp/icon.png"/>
+                        <afx-nspinner data-id="spin" value="10" step="2" />
+                        </afx-hbox>
+                        <afx-resizer data-height="5" />
+                        <afx-hbox>
+                            <afx-list-view data-id="list" dropdown="false" multiselect="true" />
+                        </afx-hbox>
+                        <afx-hbox data-height="150">
+                            <afx-grid-view data-id="grid" multiselect="true" />
+                        </afx-hbox>
+                    </afx-vbox>
+                    <afx-vbox data-width="150">
+                        <div data-height="grow">box 3</div>
+                        <div data-height="200">box 4
+                    </afx-vbox>
+                </afx-hbox>
             </afx-vbox>
         </afx-app-window>
         """
@@ -89,6 +90,12 @@ class ShowCase extends this.OS.GUI.BaseApplication
         me.subwin.observable.on "menuselect", (e) ->
             console.log e.id
         
+        tab = $ "[data-id='tab']", scheme[0]
+        tab[0].set "items", [
+            { text: "data.txt" },
+            { text: "antos.conf", closable: true }
+        ]
+
         list = $ "[data-id='list']", scheme[0]
 
         list[0].set "data", [
@@ -99,9 +106,14 @@ class ShowCase extends this.OS.GUI.BaseApplication
             { text: "some thing 4" },
             { text: "some thing 5" }
         ]
+        list[0].unshift { text: "shifted el" }
+        console.log "after shift", list[0].get("data")
         list[0].set "onlistselect", (e) ->
             console.log(e.data.items)
-        
+         me.subwin.observable.on "itemclose", (e) ->
+            console.log "remove", list[0].get("data")
+            console.log list[0].get "selectedItem"
+            console.log list[0].get "selectedItems"
 
         sw = $ "[data-id='switch']", scheme[0]
         sw[0].set "onchange", (e) ->
@@ -143,7 +155,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
             [{ text: "text 7" }, { text: "text 8" }, { text: "text 9" }]
         ]
 
-    mnFile:() ->
+    mnFile: () ->
         #console.log file
         me = @
         arr = {

src/themes/antos/afx-list-view.css

@@ -11,6 +11,10 @@ afx-list-view div.list-container{
     position: relative;
     background-color: red;
 }*/
+afx-list-view afx-list-item
+{
+    display: contents;
+}
 afx-list-view > div.list-container{
     overflow: auto;
 }
@@ -33,8 +37,9 @@ afx-list-view  > div.list-container > ul  li{
     -webkit-user-select:none;
     cursor:default;
 }
-afx-list-view > div.list-container > ul li:nth-of-type(odd){
+afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li,
-    background-color: #f5F5F5;
+afx-list-view > div.list-container > ul li:nth-child(even){
+    background-color:#f5F5F5;
 }
 afx-list-view  i.closable{
     width: 16px;
@@ -58,6 +63,7 @@ afx-list-view  > div.list-container > ul  li > i {
     margin-right: 3px;
     
 }
+afx-list-view > div.list-container > ul > afx-list-item > li.selected,
 afx-list-view  > div.list-container > ul  li.selected {
     background-color: #116cd6;
     color:white;

src/themes/antos/afx-tab-bar.css

@@ -7,7 +7,7 @@ afx-tab-bar afx-list-view {
     padding:0;
     margin:0;
 }
-afx-tab-bar afx-list-view  > div.list-container > ul > li{
+afx-tab-bar afx-list-view  > div.list-container > ul  li{
     float:left;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;