tab container

Makefile

@@ -37,6 +37,7 @@ coffees= 	src/core/core.coffee \
 			src/core/tags/MenuTag.coffee \
 			src/core/tags/GridView.coffee \
 			src/core/tags/TabBarTag.coffee \
+			src/core/tags/TabContainer.coffee \
 			src/core/tags/TreeViewTag.coffee \
 			src/core/tags/SliderTag.coffee \
         	src/antos.coffee
@@ -44,7 +45,7 @@ coffees= 	src/core/core.coffee \
 
 
 
-packages = CoreServices ActivityMonitor Setting ShowCase # Files MarkOn MarketPlace Preview NotePad wTerm
+packages = CoreServices ActivityMonitor Setting ShowCase DummyApp # Files MarkOn MarketPlace Preview NotePad wTerm
 
 main: initd build_coffees build_tags build_themes schemes libs  build_packages languages
 	- cp src/index.html $(BUILDDIR)/

src/core/tags/ListViewTag.coffee

@@ -105,7 +105,6 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
         el[0].uify @observable
         me = @
         el[0]
-            .set "data", item
             .set "oncontextmenu", (e) ->
                 me.iclick e, true
             .set "ondbclick", (e) ->
@@ -116,6 +115,8 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
                 me.iselect e
             .set "onclose", (e) ->
                 me.iclose e
+            .set "data", item
+        el[0]
 
     remove: (item) ->
         el = item.get "data"

src/core/tags/ResizerTag.coffee

@@ -7,6 +7,7 @@ class ResizerTag extends Ant.OS.GUI.BaseTag
         @minsize = 0
 
     mount: () ->
+        $(@root).css " display", "block"
         tagname = $(@parent).prop("tagName")
         @resizable_el = if $(@root).prev().length is 1 then  $(@root).prev()[0] else undefined
         if tagname is "AFX-HBOX"

src/core/tags/SliderTag.coffee

@@ -44,6 +44,7 @@ class SliderTag extends Ant.OS.GUI.BaseTag
             evt = { id: me.aid(), data: me.get("value") }
             me.get("onchange") evt
             me.get("onchanging") evt
+        @calibrate()
 
     calibrate: () ->
         @set "value", @get("max") if @get("value") > @get("max")

src/core/tags/TabBarTag.coffee

@@ -4,15 +4,19 @@ class TabBarTag extends Ant.OS.GUI.BaseTag
         @setopt "closable", false
         @setopt "ontabselect", (e) ->
         @setopt "items", []
+        me = @
+        @root.push = (e) -> me.refs.list.push e
+        @root.remove = (e) -> me.refs.list.remove e
+        @root.unshift = (e) -> me.refs.list.unshift e
+        @refs.list.set "onlistselect", (e) ->
+                me.get("ontabselect") e
+                me.observable.trigger "tabselect", e
 
     __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

src/core/tags/TabContainer.coffee

@@ -2,10 +2,60 @@ class TabContainer extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
         @setopt "dir", "column" # or row
+        @setopt "selectedTab", undefined
+        @setopt "tabbarwidth", undefined
+        @setopt "tabbarheight", undefined
+        me = @
+        @refs.bar.set "ontabselect", (e) ->
+            data = e.data.item.get "data"
+            me.set "selectedTab", data
+
+    __selectedTab: (v) ->
+        return unless v
+        selected = @get("selectedTab")
+        $(selected.container).hide() if selected
+        $(v.container).show()
+        @observable.trigger "resize"
+
+    __tabbarwidth__: (v) ->
+        return unless v
+        $(@refs.bar).attr "data-width", "#{@get("tabbarwidth")}"
+        @refs.wrapper.calibrate()
+
+    __tabbarheight__: (v) ->
+        $(@refs.bar).attr "data-height", "#{@get("tabbarheight")}"
+        @refs.wrapper.calibrate()
+
+    __dir__: (v) ->
+        return unless v
+        @refs.wrapper.set "dir", v
+        @set "tabsize", @get("tabsize")
+
+    mount: () ->
+        me = @
+        $(@children).each () ->
+            item = {}
+            item.text = $(@).attr "title" if $(@).attr "title"
+            item.icon = $(@).attr "icon" if $(@).attr "icon"
+            item.iconclass = $(@).attr "iconclass" if $(@).attr "iconclass"
+            item.container = @
+            $(@)
+                .css "width", "100%"
+                .css "height", "100%"
+            el = me.refs.bar.push item
+            el.set "selected", true
+        @observable.on "resize", (e) -> me.calibrate()
+        @calibrate()
+
+    calibrate: () ->
+        $(@refs.wrapper).css "height", "#{$(@root).height()}px"
 
     layout: () ->
         [{
-            el: "afx-tile", ref: "wrapper", chidren: [
+            el: "afx-tile", ref: "wrapper", children: [
-                { el: "afx-tab-bar" }
+                { el: "afx-tab-bar", ref: "bar" },
+                { el: "div", ref: "yield" }
             ]
         }]
+
+Ant.OS.GUI.define "afx-tab-container", TabContainer

src/core/tags/TileLayoutTags.coffee

@@ -3,6 +3,10 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag
         super r, o
         @setopt "name", undefined
         @setopt "dir", undefined
+        $(@root).css("display", "block")
+        $(@refs.yield)
+            .css("display", "flex")
+            .css("width", "100%")
         # @setopt @conf.opt, "grow"
 
     __name__: (v) ->
@@ -19,12 +23,9 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag
         @calibrate()
 
     mount: () ->
-        $(@root).css("display", "block")
-        $(@refs.yield)
-            .css("display", "flex")
-            .css("width", "100%")
         me = @
         @observable.on "resize", (e) -> me.calibrate()
+        @calibrate()
 
     calibrate: () ->
         return @hcalibrate() if @get("dir") is "row"

src/core/tags/tag.coffee

@@ -10,25 +10,27 @@ class Ant.OS.GUI.BaseTag
         @root.set = (k, v) -> me.set k, v
         @root.get = (k) -> me.get k
         @root.aid = () -> me.aid()
+        @root.calibrate = () -> me.calibrate()
+        @mounted = false
+        @root.sync = () -> me.sync()
         @refs = {}
         @setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString()
         #$(@root).attr "data-id", @get("data-id")
-        @children = []
+        @children = $(@root).children()
-
-        __: (k, v) ->
-            @set k, v if v
-            @get k
         
         for obj in @layout()
             dom = @mkui obj
             if dom
-                if @refs.yield
+                $(dom).appendTo(@root)
-                    @children = $(@root).children()
+        if @refs.yield
-                    $(v).detach().appendTo @refs.yield for v in @children
+            $(v).detach().appendTo @refs.yield for v in @children
-                    $(dom).appendTo(@root)
+        else
-                else
+            @children = []
-                    # $(@root).empty()
+        $(@root).children().each () -> @.mkui me.observable
-                    $(dom).appendTo(@root)
+
+    __: (k, v) ->
+            @set k, v if v
+            @get k
 
     setopt: (name, val) ->
         value = val
@@ -52,14 +54,17 @@ class Ant.OS.GUI.BaseTag
     aid: () ->
         @get "data-id"
     
+    calibrate: () ->
 
     get: (opt) ->
         return @opts if opt is "*"
         @opts[opt]
 
-    uify: () ->
+    sync: () ->
+        return if @mounted
+        @mounted = true
         @mount()
-        v.uify(@observable) for v in @children
+        $(@root).children().each () -> @.mount()
         @root
 
     mount: () ->
@@ -77,18 +82,28 @@ class Ant.OS.GUI.BaseTag
         if tag.ref
             @refs[tag.ref] = dom[0]
         # dom.mount @observable
-        dom[0].uify(@observable)
+        dom[0] #.uify(@observable)
 
-Element.prototype.uify = (observable) ->
+Element.prototype.mkui = (observable) ->
     tag = @tagName.toLowerCase()
     if RegExp("afx-*", "i" ).test(tag) and Ant.OS.GUI.tag[tag]
         o = new Ant.OS.GUI.tag[tag](@, observable)
-        return o.uify()
+        return o.root
-    ### else
+    else
         $(@).children().each () ->
-            @uify(observable) ###
+            @mkui(observable)
     return @
 
+
+Element.prototype.mount = () ->
+    return @sync() if @sync
+    $(@).children().each () -> @mount()
+    @
+
+Element.prototype.uify = (observable) ->
+    @mkui(observable)
+    @sync()
+
 Ant.OS.GUI.define = (name, cls) ->
     Ant.OS.GUI.tag[name] = cls
 

src/packages/ShowCase/coffees/main.coffee

@@ -38,35 +38,42 @@ 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-tab-container data-id="tabctn" tabbarheight= "30">
-                <afx-hbox>
+
-                <afx-vbox data-width="150">
+                    <afx-hbox title="Widgets">
-                    <afx-tree-view data-id="tree" />
+                        <afx-vbox data-width="150">
-                    <afx-slider data-id="slider" data-height="30" value="50"/>
+                            <afx-tree-view data-id="tree" />
-                </afx-vbox>
+                            <afx-slider data-id="slider" data-height="30" value="50"/>
-                    <afx-resizer data-width="5" />
+                        </afx-vbox>
-                    <afx-vbox data-width="grow">
+                        <afx-resizer data-width="5" />
-                        <afx-hbox min-height="50">
+                        <afx-vbox data-width="grow">
-                        <afx-switch data-id="switch" />
+                            <afx-hbox min-height="50">
-                        <afx-button text="__(This is the label)"
+                            <afx-switch data-id="switch" />
-                            data-id="bttest"
+                            <afx-button text="__(This is the label)"
-                            iconclass="fa fa-camera-retro fa-lg"
+                                data-id="bttest"
-                            icon="os://packages/DummyApp/icon.png"/>
+                                iconclass="fa fa-camera-retro fa-lg"
-                        <afx-nspinner data-id="spin" value="10" step="2" />
+                                icon="os://packages/DummyApp/icon.png"/>
-                        </afx-hbox>
+                            <afx-nspinner data-id="spin" value="10" step="2" />
-                        <afx-resizer data-height="5" />
+                            </afx-hbox>
-                        <afx-hbox>
+                            <afx-resizer data-height="5" />
-                            <afx-list-view data-id="list" dropdown="false" multiselect="true" />
+                            <afx-hbox>
-                        </afx-hbox>
+                                <afx-list-view data-id="list" dropdown="false" multiselect="true" />
-                        <afx-hbox data-height="150">
+                            </afx-hbox>
-                            <afx-grid-view data-id="grid" multiselect="true" />
+                            <afx-hbox data-height="150">
-                        </afx-hbox>
+                                <afx-grid-view data-id="grid" multiselect="true" />
-                    </afx-vbox>
+                            </afx-hbox>
-                    <afx-vbox data-width="150">
+                        </afx-vbox>
-                        <div data-height="grow">box 3</div>
+                        <afx-vbox data-width="150">
-                        <div data-height="200">box 4
+                            <div data-height="grow">box 3</div>
-                    </afx-vbox>
+                            <div data-height="200">box 4</div>
-                </afx-hbox>
+                        </afx-vbox>
+                    </afx-hbox>
+
+                    <afx-hbox title="Virtual desktop">
+                        <div data-height="200">desktop</div>
+                    </afx-hbox>
+
+                </afx-tab-container>
             </afx-vbox>
         </afx-app-window>
         """
@@ -90,12 +97,6 @@ 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", [

src/themes/antos/afx-resizer.css

@@ -1,4 +1,3 @@
 afx-resizer {
-    display: block;
     background-color: #a6a6a6;
 }