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,19 +76,29 @@ 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
 
-    __buttons__: (v) ->
+    has_data: (v) ->
-        return if @get "dropdown"
+        @get("data").includes v
 
-    __data__: (data) ->
+    push: (item, flag) ->
-        $( @refs.mlist).empty()
+        el = $("<#{@get "itemtag"}>")
-        for item in data
+        if flag
-            el = $("<#{@get "itemtag"}>").appendTo @refs.mlist
+            @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]
@@ -104,6 +114,24 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
             .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"
+    
+    __data__: (data) ->
+        $( @refs.mlist).empty()
+        for item in data
+            @push item, false
+
     iclick: (e) ->
         return if not e.item
         list = @get("selectedItems")
@@ -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

@@ -38,6 +38,7 @@ 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-tab-bar data-height="30" data-id="tab" />
                 <afx-hbox>
                 <afx-vbox data-width="150">
                     <div>box 2</div>
@@ -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) ->

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,7 +37,8 @@ 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,
+afx-list-view > div.list-container > ul li:nth-child(even){
     background-color:#f5F5F5;
 }
 afx-list-view  i.closable{
@@ -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;