add more tagesr

Makefile

@@ -30,6 +30,8 @@ coffees= 	src/core/core.coffee \
 			src/core/tags/TileLayoutTags.coffee \
 			src/core/tags/ResizerTag.coffee \
 			src/core/tags/LabelTag.coffee \
+			src/core/tags/ButtonTag.coffee \
+			src/core/tags/ListViewTag.coffee \
         	src/antos.coffee
  
 

src/core/gui.coffee

@@ -20,6 +20,7 @@ Ant.OS.GUI =
     subwindows: new Object()
     dialog: undefined
     fullscreen: false
+    workspace: "#desktop"
     shortcut:
         ALT: {}
         CTRL: {}
@@ -331,7 +332,7 @@ Ant.OS.GUI =
                 Ant.OS.GUI.showTooltip el, ($(el).attr "tooltip"), e
             
             # desktop default file manager
-            desktop = $ "#desktop"
+            desktop = $ Ant.OS.GUI.workspace
             fp = Ant.OS.setting.desktop.path.asFileHandle()
             desktop[0].fetch = () ->
                 fn = () ->
@@ -413,7 +414,7 @@ Ant.OS.GUI =
             alert __("System fail: Cannot init desktop manager")
             console.log s, e
     refreshDesktop: () ->
-        ($ "#desktop")[0].fetch()
+        ($ Ant.OS.GUI.workspace)[0].fetch()
     
     refreshSystemMenu: () ->
         Ant.OS.GUI.SYS_MENU[0].child.length = 1

src/core/tags/ButtonTag.coffee

@@ -6,13 +6,55 @@ class ButtonTag extends Ant.OS.GUI.BaseTag
         @setopt "iconclass", undefined
         @setopt "text", ""
         @setopt "enable", true
+        @setopt "selected", false
+        @setopt "toggle", false
+        @setopt "onbtclick", () ->
+    
+
+    on_color_changed: (v) ->
+        console.log @refs
+        @refs.label.set "color", v
+    
+    on_icon_changed: (v) ->
+        @refs.label.set "icon", v
+    
+    on_iconclass_changed: (v) ->
+        @refs.label.set "iconclass", v
+    
+    on_text_changed: (v) ->
+        @refs.label.set "text", v
+    
+    on_enable_changed: (v) ->
+        $(@refs.button).prop "disabled", !(@get "enable")
+    
+    on_selected_changed: (v) ->
+        $(@button).removeClass()
+        $(@button).addClass "selected" if v
+
+    mount: () ->
+        me = @
+        @root.trigger = () ->
+            ($me.refs.button).trigger "click"
+
+        $(@refs.button).click (e) ->
+            me.btclickhd e
+    
+    btclickhd: (e) ->
+        hd = @get "onbtclick"
+        if typeof hd is "string"
+            eval hd
+        else if hd
+            hd e
+        @observable.trigger "btclick", { id: @aid(), data: @root }
+        if @toggle
+            @set "selected", !@get "selected"
 
     layout: () ->
-        {
+        [{
             el: "Button", ref: "button", children: [
                 { el: "afx-label", ref: "label" }
             ]
-        }
+        }]
 
 
 Ant.OS.GUI.define "afx-button", ButtonTag

src/core/tags/LabelTag.coffee

@@ -4,8 +4,12 @@ class LabelTag extends Ant.OS.GUI.BaseTag
         @setopt "color", undefined
         @setopt "icon", undefined
         @setopt "iconclass", undefined
+        @refs.text = document.createTextNode ""
+        $(@refs.container).append @refs.text
         @setopt "text", ""
 
+    mount: () ->
+
     on_color_changed: (v) ->
         return unless v
         $(@refs.container).css "color", v
@@ -32,16 +36,15 @@ class LabelTag extends Ant.OS.GUI.BaseTag
 
 
     on_text_changed: (v) ->
-        $(@refs.text).text v.__() if v
+        @refs.text.nodeValue =  v.__() if v
 
     layout: () ->
-        {
+       [{
             el: "span", ref: "container", children: [
                 { el: "i", ref: "iclass" },
-                { el: "i", ref: "i", class: "icon-style" },
+                { el: "i", ref: "i", class: "icon-style" }
-                { el: "i", ref: "text" }
             ]
-        }
+        }]
 
 
 Ant.OS.GUI.define "afx-label", LabelTag

src/core/tags/ListViewTag.coffee

@@ -0,0 +1,194 @@
+class ListViewItemTag extends Ant.OS.GUI.BaseTag
+    constructor: (r, o) ->
+        super r, o
+        me = @
+        @setopt "data", {}
+        @setopt "oncontextmenu", (e) ->
+        @setopt "onclick", (e) ->
+        @setopt "onselect", (e) ->
+        @setopt "ondbclick", (e) ->
+        @setopt "onclose", (e) ->
+        @setopt "index", 0
+        @setopt "closable", false
+        @setopt "selected", false
+        
+class ListItemSimpleTag extends ListViewItemTag
+    constructor: (r, o) ->
+        super r, o
+    mount: () ->
+        me = @
+        @refs.item.oncontextmenu = (e) ->
+            me.get("oncontextmenu")(e)
+
+        $(@refs.item).click (e) ->
+            e.item = me.root
+            me.get("onclick")(e)
+
+        $(@refs.item).dblclick (e) ->
+            e.item = me.root
+            me.get("ondbclick")(e)
+        $(@refs.btcl).click (e) ->
+            e.item = me.root
+            me.get("onclose")(e)
+
+    on_closable_changed: (v) ->
+        if v then $(@refs.btcl).show() else $(@refs.btcl).hide()
+
+    on_selected_changed: (v) ->
+        $(@refs.item).removeClass()
+        return unless v
+        $(@refs.item).addClass "selected"
+        @get("onselect")({ item: @root })
+
+    on_data_changed: (v) ->
+        return unless v
+        @refs.label.set "class", v.class if v.class
+        @refs.label.set "color", v.color if v.color
+        @refs.label.set "iconclass", v.iconclass if v.iconclass
+        @refs.label.set "icon", v.icon if v.icon
+        @refs.label.set "text", v.text if v.text
+        @set "selected", v.selected if v.selected
+        @set "closable", v.closable if v.closable
+
+    layout: () ->
+        [{
+            el: "li", ref: "item", children: [
+                { el: "afx-label", ref: "label" },
+                { el: "i", class: "closable", ref: "btcl" }
+            ]
+        }]
+
+
+class ListViewTag extends Ant.OS.GUI.BaseTag
+    constructor: (r, o) ->
+        super r, o
+        @setopt "onlistselect", () ->
+        @setopt "onlistdbclick", () ->
+        @setopt "onitemclose", () ->
+        @setopt "buttons", []
+        @setopt "data", {}
+        @setopt "dropdown", false
+        @setopt "itemtag", "afx-list-item"
+        @setopt "multiselect", false
+        @setopt "selectedItem", undefined
+        @setopt "selectedIndex", -1
+        @items = []
+        $(@root)
+            .css "display", "flex"
+            .css "flex-direction", "column"
+
+    on_buttons_changed: (v) ->
+        return if @get "dropdown"
+    
+    on_data_changed: (data) ->
+        $( @refs.mlist).empty()
+        for item in data
+            el = $("<#{@get "itemtag"}>").appendTo @refs.mlist
+            el[0].uify @observable
+            console.log el
+            me = @
+            el[0]
+                .set "data", item
+                .set "oncontextmenu", (e) ->
+                    me.icontextmenu e
+                .set "ondbclick", (e) ->
+                    me.idbclick e
+                .set "onclick", (e) ->
+                    return if not e.item or e.item is me.selectedItem
+                    e.item.set "selected", true
+                .set "onselect", (e) ->
+                    me.iselect e
+                .set "onclose", (e) ->
+                    me.iclose e
+
+    icontextmenu: (e) ->
+        console.log "context menu", e
+    idbclick: (e) ->
+        console.log "db click", e
+    iselect: (e) ->
+        return unless e.item
+        @selectedItem.set "selected", false if @selectedItem
+        @selectedItem = e.item
+        @get("onlistselect")(e)
+
+    iclose: (e) ->
+        console.log "close", e
+
+    on_dropdown_changed: (v) ->
+        $(@refs.container).removeAttr "style"
+        $(@refs.mlist).removeAttr "style"
+        $(@refs.container).css "flex", 1
+        $(@root).removeClass()
+        me = @
+        drop = (e) ->
+            me.dropoff e
+        show = (e) ->
+            me.showlist e
+        calib = (e) ->
+            me.calibrate e
+        if v
+            $(@root).addClass "dropdown"
+            $(@refs.current).show()
+            @observable.on "calibrate", calib
+            @observable.on "resize", calib
+            $(document).on "click", drop
+            $(@refs.current).on "click", show
+            $(@refs.container)
+                .css "position", "absolute"
+                .css "display", "inline-block"
+            $(@refs.mlist)
+                .css "position", "absolute"
+                .css "display", "none"
+                .css "top", "100%"
+                .css "left", "0"
+            @calibrate()
+        else
+            $(@refs.current).hide()
+            @observable.off "calibrate", calib
+            @observable.off "resize", calib
+            $(document).off "click", drop
+            $(@refs.current).off "click", show
+
+    showlist: (e) ->
+        return unless @get "dropdown"
+        desktoph = $(Ant.OS.GUI.workspace).height()
+        offset = $(@root).offset().top + $(@refs.mlist).height()
+        if offset > desktoph
+            $(@refs.mlist)
+                .css "top", "-#{$(@refs.mlist).outerHeight()}px"
+        else
+            $(@mlist).css "top", "100%"
+        $(@refs.mlist).show()
+
+    dropoff: (e) ->
+        $(@refs.mlist).hide() if $(e.target).closest(@refs.container).length is 0
+        
+
+    calibrate: (e) ->
+        return unless @get "dropdown"
+        w = "#{$(@root).width()}px"
+        $(@refs.container).css "width", w
+        $(@refs.current).css "width", w
+        $(@refs.mlist).css "width", w
+
+
+    layout: () ->
+        [
+            {
+                el: "div",
+                class: "list-container",
+                ref: "container",
+                children: [
+                    {
+                        el: "div", ref: "current", children: [
+                            { el: "afx-label", ref: "drlabel" }
+                        ]
+                    },
+                    { el: "ul", ref: "mlist" }
+                ]
+            },
+            { el: "div", class: "button_container", ref: "btlist" }
+        ]
+
+Ant.OS.GUI.define "afx-list-view", ListViewTag
+Ant.OS.GUI.define "afx-list-item", ListItemSimpleTag

src/core/tags/ResizerTag.coffee

@@ -62,6 +62,6 @@ class ResizerTag extends Ant.OS.GUI.BaseTag
         @observable.trigger "calibrate", @resizable_el.aid()
 
     layout: () ->
-        return undefined
+        []
 
 Ant.OS.GUI.define "afx-resizer", ResizerTag

src/core/tags/TileLayoutTags.coffee

@@ -19,9 +19,9 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag
 
 
     layout: () ->
-        {
+        [{
             el: "div", ref: "yield"
-        }
+        }]
 
 
 class HBoxTag extends TileLayoutTag

src/core/tags/WindowTag.coffee

@@ -4,7 +4,7 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
         @setopt "minimizable", true
         @setopt "resizable", true
         @setopt "apptitle", "Untitled"
-        @setopt "desktop", "#desktop"
+        @setopt "desktop", Ant.OS.GUI.workspace
         @setopt "width", 400
         @setopt "height", 300
         @shown = false
@@ -179,7 +179,7 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
             @observable.trigger 'resize', { id: @aid(), w: history.width, h: history.height }
 
     layout: () ->
-        {
+        [{
             el: "div", class: "afx-window-wrapper", children: [
                 {
                     el: "ul", class: "afx-window-top", children: [
@@ -193,6 +193,6 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
                 { el: "div", ref: "yield", class: "afx-window-content" },
                 { el: "div", ref: "grip", class: "afx-window-grip" }
             ]
-        }
+        }]
 
 Ant.OS.GUI.define "afx-app-window", WindowTag

src/core/tags/afx-label.tag

@@ -1,7 +1,7 @@
 <afx-label>
     <span style = {color?"color:" + color:""} >
         <i if={iconclass} class = {iconclass} ></i>
-        <i if={icon} class="icon-style" style = { "background: url("+window.OS.API.handler.get+"/"+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+        <i if={icon} class="icon-style" style = { "background: url("+window.OS.API.handle.get+"/"+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
         { text?text.__():"" }
     </span>
     <script>

src/core/tags/tag.coffee

@@ -13,14 +13,16 @@ class Ant.OS.GUI.BaseTag
         @refs = {}
         @setopt "data-id", Math.floor(Math.random() * 100000) + 1
         @children = []
-        dom = @mkui()
+
+        for obj in @layout()
+            dom = @mkui obj
             if dom
                 if @refs.yield
                     @children = $(@root).children()
                     $(v).detach().appendTo @refs.yield for v in @children
                     $(dom).appendTo(@root)
                 else
-                $(@root).empty()
+                    # $(@root).empty()
                     $(dom).appendTo(@root)
 
     setopt: (name, val) ->
@@ -36,6 +38,7 @@ class Ant.OS.GUI.BaseTag
     set: (opt, value) ->
         @opts[opt] = value
         @["on_#{opt}_changed"](value) if @["on_#{opt}_changed"]
+        @
     
     aid: () ->
         @get "data-id"
@@ -52,20 +55,19 @@ class Ant.OS.GUI.BaseTag
     mount: () ->
 
     layout: () ->
+        []
         # should be defined by subclasses
 
-    mkui: (obj) ->
+    mkui: (tag) ->
-        tag = obj
-        tag = @layout() unless tag
         return undefined unless tag
         dom = $("<#{tag.el}>")
         $(dom).addClass tag.class if tag.class
         if tag.children
             $(@mkui(v)).appendTo(dom) for v in tag.children
         if tag.ref
-            @refs[tag.ref] = dom
+            @refs[tag.ref] = dom[0]
         # dom.mount @observable
-        dom
+        dom[0].uify(@observable)
 
 Element.prototype.uify = (observable) ->
     tag = @tagName.toLowerCase()

src/packages/ShowCase/coffees/main.coffee

@@ -43,14 +43,14 @@ class ShowCase extends this.OS.GUI.BaseApplication
                 <afx-resizer data-width="5" />
                 <afx-vbox data-width="grow">
                     <afx-hbox min-height="50">
-                    <afx-label text="__(This is the label)"
+                    <afx-button text="__(This is the label)"
+                        data-id="bttest"
                         iconclass="fa fa-camera-retro fa-lg"
                         icon="os://packages/DummyApp/icon.png"/>
                     </afx-hbox>
                     <afx-resizer data-height="5" />
                     <afx-hbox>
-                        <div>box center 3</div>
+                        <afx-list-view data-id="list" />
-                        <div>box center 4</div>
                     </afx-hbox>
                      <afx-hbox data-height="150">
                         <div>box center 3</div>
@@ -66,6 +66,9 @@ class ShowCase extends this.OS.GUI.BaseApplication
         """
         ($ "#desktop").append scheme[0]
         obj = scheme[0].uify()
+        bt = $ "[data-id='bttest']", scheme[0]
+        bt[0].set "onbtclick", (e) ->
+            console.log "btclicked"
         obj.set "resizable", true
         obj.set "minimizable", false
         obj.observable.on "exit", () ->
@@ -73,5 +76,20 @@ class ShowCase extends this.OS.GUI.BaseApplication
             obj.observable.off "*"
             $(obj).remove()
 
+        obj.observable.on "btclick", (e) ->
+            console.log "button clicked"
+
+        
+        list = $ "[data-id='list']", scheme[0]
+
+        list[0].set "data", [
+            { text: "some thing with avery long text" },
+            { text: "some thing 1" },
+            { text: "some thing 2" },
+            { text: "some thing 3" },
+            { text: "some thing 4" },
+            { text: "some thing 5" }
+        ]
+
 ShowCase.singleton = true
 this.OS.register "ShowCase", ShowCase

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

@@ -19,7 +19,7 @@ afx-list-view > div.list-container >  ul{
     padding: 0;
 }
 
-afx-list-view  > div.list-container > ul > li{
+afx-list-view  > div.list-container > ul  li{
     margin:0;
     padding:0;
     list-style: none;
@@ -33,7 +33,7 @@ afx-list-view  > div.list-container > ul > li{
     -webkit-user-select:none;
     cursor:default;
 }
-afx-list-view > div.list-container > ul >li:nth-child(odd){
+afx-list-view > div.list-container > ul li:nth-of-type(odd){
     background-color: #f5F5F5;
 }
 afx-list-view  i.closable{
@@ -54,11 +54,11 @@ afx-list-view  i.closable:before{
     font-style: normal;
 }
 
-afx-list-view  > div.list-container > ul > li > i {
+afx-list-view  > div.list-container > ul  li > i {
     margin-right: 3px;
     
 }
-afx-list-view  > div.list-container > ul > li.selected {
+afx-list-view  > div.list-container > ul  li.selected {
     background-color: #116cd6;
     color:white;
 }
@@ -98,7 +98,7 @@ afx-list-view.dropdown > div.list-container > ul{
     border-top-left-radius: 0px;
     z-index: 10;
 }
-afx-list-view.dropdown > div.list-container > ul > li{
+afx-list-view.dropdown > div.list-container > ul  li{
     display: inline-block;
     width:100%;
 }
@@ -125,7 +125,7 @@ afx-list-view.dropdown div.list-container div:before {
     top:25%;
     right: 5px;
  }
-afx-list-view.dropdown > div.list-container > ul > li:hover{
+afx-list-view.dropdown > div.list-container > ul  li:hover{
     background-color: #dcdcdc;
     color: #414339;
 }
@@ -140,7 +140,7 @@ afx-list-view ul.complex-content li{
     color:#5e5f59;
     list-style: none;
 }
-afx-list-view  > div.list-container > ul > li.selected ul.complex-content li{
+afx-list-view  > div.list-container > ul  li.selected ul.complex-content li{
     color:white;
 }
 /*