add more tag

Makefile

@@ -34,6 +34,7 @@ coffees= 	src/core/core.coffee \
 			src/core/tags/ListViewTag.coffee \
 			src/core/tags/SwitchTag.coffee \
 			src/core/tags/NSpinnerTag.coffee \
+			src/core/tags/MenuTag.coffee \
         	src/antos.coffee
  
 

src/core/tags/ButtonTag.coffee

@@ -44,8 +44,8 @@ class ButtonTag extends Ant.OS.GUI.BaseTag
         if typeof hd is "string"
             eval hd
         else if hd
-            hd e
+            hd { id: @aid(), data: e }
-        @observable.trigger "btclick", { id: @aid(), data: @root }
+        @observable.trigger "btclick", { id: @aid(), data: e }
         if @toggle
             @set "selected", !@get "selected"
 

src/core/tags/ListViewTag.coffee

@@ -112,7 +112,9 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
         e.item.set "selected", true
 
     idbclick: (e) ->
-        @get("onlistdbclick")(e)
+        evt = { id: @aid(), data: e }
+        @get("onlistdbclick") evt
+        @observable.trigger "listdbclick", evt
     iselect: (e) ->
         return unless e.item
         if @multiselect()
@@ -130,8 +132,9 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
             @refs.drlabel.set "*", e.item.get "data"
             $(@refs.mlist).hide()
 
-        @get("onlistselect")(e)
+        evt = { id: @aid(), data: e }
-        @observable.trigger "listselect", { id: @aid(), evt: e }
+        @get("onlistselect") evt
+        @observable.trigger "listselect", evt
 
     iclose: (e) ->
         return unless e.item

src/core/tags/MenuTag.coffee

@@ -1,44 +1,109 @@
 
-class MenuEntrySimpleContentTag extends Ant.OS.GUI.BaseTag
-    constructor: (r, o) ->
-        super r, o
-        @setopt "data", {}
-
-    layout: () ->
-        [{
-            el: "a", children: [
-                { el: "afx-switch" },
-                { el: "afx-label" },
-                { el: "span", class: "shortcut" }
-            ]
-        }]
-    
 class MenuEntryTag extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
+        @setopt "switch", false
+        @setopt "radio", false
+        @setopt "color", undefined
+        @setopt "icon", undefined
+        @setopt "iconclass", undefined
+        @setopt "text", ""
+        @setopt "shortcut", undefined
+        @setopt "children", undefined
         @setopt "data", {}
-        @setopt "contentag", "afx-menu-entry"
-    
-    on_data_changed: (v) ->
 
+    on_data_changed: (data) ->
+        @set  k, v for k, v of data
+
+    on_switch_changed: (v) ->
+        if @get("radio") or v
+            $(@refs.switch).show()
+        else
+            $(@refs.switch).hide()
+    
+    on_radio_changed: (v) ->
+        if @get("switch") or v
+            $(@refs.switch).show()
+        else
+            $(@refs.switch).hide()
+
+    on_color_changed: (v) ->
+        return unless  v
+        @refs.label.set "color", v
+    
+    on_icon_changed: (v) ->
+        $(@refs.container).removeClass("fix_padding")
+        return unless v
+        @refs.label.set "icon", v
+        $(@refs.container).addClass("fix_padding")
+    
+    on_iconclass_changed: (v) ->
+        return unless v
+        @refs.label.set "iconclass", v
+
+    on_text_changed: (v) ->
+        return unless v isnt undefined
+        @refs.label.set "text", v
+    
+    on_shortcut_changed: (v) ->
+        $(@refs.shortcut).hide()
+        return unless v
+        $(@refs.shortcut).show()
+        $(@refs.shortcut).val v
+
+    on_children_changed: (v) ->
+        $(@refs.container).removeClass("afx_submenu")
+        return $(@refs.submenu).hide() unless v and v.length > 0
+        $(@refs.container).addClass("afx_submenu")
+        $(@refs.submenu)
+            .show()
+            .attr("style", "")
+        @refs.submenu.set "root", false
+        @refs.submenu.set "items", v
+
+    mount: () ->
+        @refs.switch.set "enable", false
 
     layout: () ->
         [{
-            el: "li", ref: "container"
+            el: "li", ref: "container", children: [
+                {
+                    el: "a", children: [
+                        { el: "afx-switch", ref: "switch" },
+                        { el: "afx-label", ref: "label" },
+                        { el: "span", class: "shortcut", ref: "shortcut" }
+                    ]
+                },
+                { el: "afx-menu", ref: "submenu" }
+            ]
         }]
 
 class MenuTag extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
         @setopt "context", false
-        
+        @setopt "root", true
+        @setopt "contentag", "afx-menu-entry"
+        @setopt "items", []
+
+    mount: () ->
+
+    on_context_changed: (v) ->
+        $(@refs.container).removeClass("context")
+        $(@refs.container).addClass("context") if v
+
+    on_items_changed: (data) ->
+        $(@refs.container).empty()
+        $("<li>").appendTo(@refs.container).addClass("afx-corner-fix")
+        for item in data
+            el = $("<#{@get("contentag")}>").appendTo @refs.container
+            el[0].uify @observable
+            el[0].set "data", item
+
+        $("<li>").appendTo(@refs.container).addClass("afx-corner-fix")
+
     layout: () ->
-        [{
+        [{ el: "ul", ref: "container" }]
-            el: "ul", children: [
-                { el: "li", ref: "start", class: "afx-corner-fix" },
-                { el: "li", ref: "end", class: "afx-corner-fix" }
-            ]
-        }]
 
 Ant.OS.GUI.define "afx-menu", MenuTag
-Ant.OS.GUI.define "afx-menu-entry", MenuEntrySimpleContentTag
+Ant.OS.GUI.define "afx-menu-entry", MenuEntryTag

src/core/tags/NSpinnerTag.coffee

@@ -2,28 +2,62 @@
 class NSpinnerTag extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
+        @setopt "onchange", (e) ->
         @setopt "value", 0
         @setopt "step", 1
-        @setopt "onchange", (e) ->
     
     mount: () ->
         me = @
         $(@refs.holder).attr "type", "text"
         $(@refs.incr).click (e) ->
             me.set "value", (me.get("value") + me.get("step") )
-            e.nspin = me.get "value"
+
-            me.get("onchange")(e)
-            me.observable.trigger "nspin", { id: me.aid(), evt: e }
          $(@refs.decr).click (e) ->
             me.set "value", (me.get("value") - me.get("step") )
-            e.nspin = me.get "value"
+        
-            me.get("onchange")(e)
+        # @observable.on "calibrate", () -> me.calibrate()
-            me.observable.trigger "nspin", { id: me.aid(), evt: e }
+        @observable.on "resize", () -> me.calibrate()
+
+        $(@refs.holder).on 'keyup', (e) ->
+            if e.keyCode is 13
+                val = me.refs.holder.value
+                if not isNaN(val)
+                    val = parseInt(val)
+                    val = me.value if val < 0
+                    me.set "value", val
+        @calibrate()
+
+    calibrate: () ->
+        $(@refs.holder).css "width", $(@root).width() - 20 + "px"
+        $(@refs.holder).css "height", $(@root).height() + "px"
+        $(@refs.spinner)
+            .css "width", "20px"
+            .css "height", $(@root).height() + "px"
+        $(@refs.incr)
+            .css "height", $(@root).height() / 2 - 2 + "px"
+            .css "position", "relative"
+        $(@refs.decr).css "height", $(@root).height() / 2 - 2 + "px"
+            .css "position", "relative"
+        $(@refs.spinner).find("li")
+            .css "display", "block"
+            .css "text-align", "center"
+            .css "vertical-align", "middle"
+        $(@refs.spinner).find("i")
+            .css "font-size", "16px"
+            .css "position", "absolute"
+        fn = (ie, pos) ->
+            el = $(ie).find("i")
+            el
+            .css pos, ($(ie).height() - el.height()) / 2 + "px"
+            .css "left", ($(ie).width() - el.width()) / 2 + "px"
+        fn @refs.decr, "bottom"
+        fn @refs.incr, "top"
 
     on_value_changed: (v) ->
         $(@refs.holder).val @get("value")
-
+        evt = { id: @aid(), data: v }
-    
+        @get("onchange")(evt)
+        @observable.trigger "nspin", evt
         
     layout: () ->
         [

src/core/tags/ResizerTag.coffee

@@ -50,7 +50,7 @@ class ResizerTag extends Ant.OS.GUI.BaseTag
         w = Math.round(e.clientX - offset.left)
         w = @minsize if w < @minsize
         $(@resizable_el).attr "data-width", w.toString()
-        @observable.trigger "calibrate", @resizable_el.aid()
+        @observable.trigger "resize", { id: @resizable_el.aid(), data: w }
 
 
     verticalResize: (e) ->
@@ -59,7 +59,7 @@ class ResizerTag extends Ant.OS.GUI.BaseTag
         h = Math.round(e.clientY - offset.top)
         h = @minsize if h < @minsize
         $(@resizable_el).attr "data-height", h.toString()
-        @observable.trigger "calibrate", @resizable_el.aid()
+        @observable.trigger "resize", { id: @resizable_el.aid(), data: h }
 
     layout: () ->
         []

src/core/tags/SwitchTag.coffee

@@ -14,9 +14,9 @@ class SwitchTag extends Ant.OS.GUI.BaseTag
     onchange: (e) ->
         return unless @get "enable"
         @setopt "swon", !@get("swon")
-        e.swon = @get "swon"
+        evt = { id: @aid(), data: @get "swon" }
-        @get("onchange")(e)
+        @get("onchange") evt
-        @observable.trigger "switch", { id: @aid(), evt: e }
+        @observable.trigger "switch", evt
 
     on_swon_changed: (v) ->
         $(@refs.switch).removeClass()

src/core/tags/TileLayoutTags.coffee

@@ -54,7 +54,7 @@ class HBoxTag extends TileLayoutTag
         if csize > 0
             $.each auto_width, (i, v) ->
                 $(v).css "width", "#{csize}px"
-        @observable.trigger "hboxchange",  { id: @aid(), w: avaiWidth, h: avaiheight }
+        @observable.trigger "hboxchange",  { id: @aid(), data: { w: avaiWidth, h: avaiheight } }
         
 
 class VBoxTag extends TileLayoutTag
@@ -88,7 +88,7 @@ class VBoxTag extends TileLayoutTag
             $.each auto_height, (i, v) ->
                 $(v).css "height", "#{csize}px"
 
-        @observable.trigger "vboxchange", { id: @aid(), w: avaiwidth, h: avaiheight }
+        @observable.trigger "vboxchange", { id: @aid(), data: { w: avaiwidth, h: avaiheight } }
 
 Ant.OS.GUI.define "afx-hbox", HBoxTag
 Ant.OS.GUI.define "afx-vbox", VBoxTag

src/core/tags/WindowTag.coffee

@@ -22,13 +22,13 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
         me = @
         @root.contextmenuHandle = (e) ->
         $(@refs["minbt"]).click (e) ->
-            me.observable.trigger("hide")
+            me.observable.trigger "hide", { id: me.aid() }
         
         $(@refs["maxbt"]).click (e) ->
             me.toggle_window()
 
         $(@refs["closebt"]).click (e) ->
-            me.observable.trigger("exit")
+            me.observable.trigger("exit", { id: me.aid() })
         left = ($(@desktop).width()  - (@get "width")) / 2
         top = ($(@desktop).height() - (@get "height")) / 2
         $(@root)
@@ -40,7 +40,7 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
             .css("z-index", Ant.OS.GUI.zindex++)
         $(@root).on "mousedown", (e) ->
             return if me.shown
-            me.observable.trigger "focus"
+            me.observable.trigger "focus", { id: me.aid() }
 
         $(@refs["dragger"]).dblclick (e) ->
             me.toggle_window()
@@ -66,13 +66,13 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
 
         @observable.on "toggle", () ->
             if me.shown
-                me.observable.trigger "hide"
+                me.observable.trigger "hide", { id: me.aid() }
             else
-                me.observable.trigger "focus"
+                me.observable.trigger "focus", { id: me.aid() }
         @enable_dragging()
         @enable_resize()
         @resize()
-        @observable.trigger "rendered", @root
+        @observable.trigger "rendered", { id: me.aid() }
 
     on_minimizable_changed: (value) ->
         if value then $(@refs["minbt"]).show() else $(@refs["minbt"]).hide()
@@ -144,7 +144,7 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
                     .css("width", "#{w}px")
                     .css("height", "#{h}px")
                 me.isMaxi = false
-                me.observable.trigger "resize", { id: me.aid(), w: w, h: h }
+                me.observable.trigger "resize", { id: me.aid(), data: { w: w, h: h } }
 
             $(window).on "mouseup", (e) ->
                 $(window).unbind "mousemove", null
@@ -167,7 +167,7 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
                 .css("height", "#{h}px")
                 .css("top", "0")
                 .css("left", "0")
-            @observable.trigger 'resize', { id: @aid(), w: w, h: h }
+            @observable.trigger 'resize', { id: @aid(), data: { w: w, h: h } }
             @isMaxi = true
         else
             @isMaxi = false
@@ -176,7 +176,8 @@ class WindowTag extends  Ant.OS.GUI.BaseTag
                 .css("height", @history.height)
                 .css("top", @history.top)
                 .css("left", @history.left)
-            @observable.trigger 'resize', { id: @aid(), w: history.width, h: history.height }
+            @observable.trigger 'resize',
+                { id: @aid(), data: { w: history.width, h: history.height } }
 
     layout: () ->
         [{

src/core/tags/tag.coffee

@@ -78,6 +78,9 @@ Element.prototype.uify = (observable) ->
     if RegExp("afx-*", "i" ).test(tag) and Ant.OS.GUI.tag[tag]
         o = new Ant.OS.GUI.tag[tag](@, observable)
         return o.uify()
+    ### else
+        $(@).children().each () ->
+            @uify(observable) ###
     return @
 
 Ant.OS.GUI.define = (name, cls) ->

src/packages/ShowCase/coffees/main.coffee

@@ -35,9 +35,11 @@ class ShowCase extends this.OS.GUI.BaseApplication
     openwin: () ->
         scheme =  $.parseHTML """
         <afx-app-window apptitle="Preview" width="650" height="500">
+            <afx-vbox>
+                <afx-menu data-height="30" data-id="menu" />
             <afx-hbox>
                <afx-vbox data-width="150">
-                    <div data-height="30%">box 1</div>
+                    <div>box 2</div>
                     <div>box 2</div>
                 </afx-vbox>
                 <afx-resizer data-width="5" />
@@ -64,6 +66,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
                     <div data-height="200">box 4</div>
                 </afx-vbox>
             </afx-hbox>
+            </afx-vbox>
         </afx-app-window>
         """
         ($ "#desktop").append scheme[0]
@@ -93,15 +96,33 @@ class ShowCase extends this.OS.GUI.BaseApplication
             { text: "some thing 5" }
         ]
         list[0].set "onlistselect", (e) ->
-            console.log(e.items)
+            console.log(e.data.items)
         
         sw = $ "[data-id='switch']", scheme[0]
         sw[0].set "onchange", (e) ->
-            console.log e.swon
+            console.log e.data
         
         spin = $ "[data-id='spin']", scheme[0]
         spin[0].set "onchange", (e) ->
-            console.log e.nspin
+            console.log e.data
 
+        menu = $ "[data-id='menu']", scheme[0]
+        console.log menu[0]
+        menudata = [
+            { text: "__(Refresh)", dataid: "refresh" },
+            { text: "__(Sidebar)", dataid: "side" },
+            { text: "__(Navigation bar)",  dataid: "nav" },
+            { text: "__(Hidden files)",  dataid: "hidden" },
+            { text: "__(Type)", children: [
+                    { text: "__(Icon view)", dataid: "icon", type: 'icon' },
+                    { text: "__(List view)", dataid: "list", type: 'list', children: [
+                        { text: "__(Refresh)" },
+                        { text: "__(Sidebar)" }
+                    ] },
+                    { text: "__(Tree view)", dataid: "tree", type: 'tree' }
+                ]
+            }
+        ]
+        menu[0].set "items", menudata
 ShowCase.singleton = true
 this.OS.register "ShowCase", ShowCase

src/themes/antos/afx-menu.css

@@ -46,7 +46,7 @@ afx-menu afx-menu ul {
     box-shadow: 1px 1px 1px #9f9F9F;
     background-color: #e7e7e7;
 }
-afx-menu ul > li{
+afx-menu ul  li /*, afx-menu ul >afx-menu-entry > li*/{
     list-style:none;
     margin:0;
     position: relative;