grid view update

src/core/tags/GridView.coffee

@@ -1,9 +1,25 @@
 class GridCellPrototype extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
-        @setopt "class", "afxgridcell"
+        @setopt "class", "afx-grid-cell"
+        @setopt "oncellselect", (e) ->
+        @setopt "oncelldbclick", (e) ->
         @setopt "data", {}
     
+    mount: () ->
+        me = @
+        $(@root).css "display", "block"
+        $(@root).click (e) ->
+            me.cellseleck e, false
+        $(@root).dblclick (e) ->
+            me.cellseleck e, true
+    
+
+    cellseleck: (e, flag) ->
+        e.item = @root
+        evt = { id: @aid(), data: e }
+        return @get("oncellselect") evt unless flag
+        @get("oncelldbclick") evt
 
     __class__: (v) ->
         $(@root).removeClass().addClass @get("class")
@@ -19,8 +35,6 @@ class SimpleGridCell extends GridCellPrototype
     __data__: (d) ->
         @refs.cell.set  k, v for k, v of d
 
-    mount: () ->
-        $(@root).css "display", "block"
     layout: () ->
         [{
             el: "afx-label", ref: "cell"
@@ -32,8 +46,14 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
         @setopt "header", []
         @setopt "headeritem", "afx-grid-cell"
         @setopt "cellitem", "afx-grid-cell"
-        @setopt "cellclass", "afxgridcell"
+        @setopt "selectedCell", undefined
+        @setopt "selectedRows", []
+        @setopt "selectedRow", undefined
         @setopt "rows", []
+        @setopt "oncellselect", (e) ->
+        @setopt "onrowselect", (e) ->
+        @setopt "oncelldbclick", (e) ->
+        @setopt "multiselect", false
 
     __header__: (v) ->
         return $(@refs.header).hide() if not v or v.length is 0
@@ -46,13 +66,63 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
         @calibrate()
 
     __rows__: (rows) ->
+        me = @
         $(@refs.grid).empty()
         for row in rows
+            div = $("<div>")
+                .addClass("afx-grid-row")
+                .css "display", "contents"
+                .appendTo @refs.grid
             for cell in row
-                el = $("<#{@get("cellitem")}>").appendTo @refs.grid
+                el = $("<#{@get("cellitem")}>").appendTo div
                 el[0].uify undefined
                 el[0].set "data", cell
                 cell.domel = el[0]
+                el[0].set "oncellselect", (e) -> me.cellselect e, false
+                el[0].set "oncelldbclick", (e) -> me.cellselect e, true
+
+    multiselect: () ->
+        @get "multiselect"
+
+    cellselect: (e, flag) ->
+        e.id = @aid()
+        selectedCell = @get "selectedCell"
+        # return if e.data.item is selectedCell and not flag
+        selectedCell.set "class", "afx-grid-cell" if selectedCell
+        @set "selectedCell", e.data.item
+        $(e.data.item).addClass "afx-grid-cell-selected"
+        if flag
+            @observable.trigger "celldbclick", e
+            @get("oncelldbclick") e
+        else
+            @observable.trigger "cellselect", e
+            @get("oncellselect") e
+            @rowselect e
+
+    rowselect: (e) ->
+        return unless e.data.item
+        selectedRow = @get "selectedRow"
+        selectedRows = @get "selectedRows"
+        evt = { id: @aid(), data: {} }
+        div = $(e.data.item).parent()[0]
+        if @multiselect()
+            if selectedRows.includes div
+                selectedRows.splice selectedRows.indexOf(div) , 1
+                $(div).removeClass()
+            else
+                selectedRows.push div
+                $(div).removeClass().addClass("afx-grid-row-selected")
+            evt.data.items = @get "selectedRows"
+        else
+            return if selectedRow is div
+            $(selectedRow).removeClass()
+            @set "selectedRow", div
+            @set "selectedRows", [div]
+            evt.data.item = div
+            evt.data.items = [ div ]
+            $(div).removeClass().addClass("afx-grid-row-selected")
+        @get("onrowselect") evt
+        @observable.trigger "rowselect", evt
 
     has_header: () ->
         h = @get("header")

src/core/tags/MenuTag.coffee

@@ -158,6 +158,7 @@ class MenuTag extends Ant.OS.GUI.BaseTag
 
     handleselect: (e) ->
         $(@root).hide() if @isctxmenu()
+        e.id = @aid()
         @get("onmenuselect") e
         @observable.trigger "menuselect", e
 

src/core/tags/tag.coffee

@@ -12,9 +12,13 @@ class Ant.OS.GUI.BaseTag
         @root.aid = () -> me.aid()
         @refs = {}
         @setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString()
-        $(@root).attr "data-id", @get("data-id")
+        #$(@root).attr "data-id", @get("data-id")
         @children = []
 
+        __: (k, v) ->
+            @set k, v if v
+            @get k
+
         for obj in @layout()
             dom = @mkui obj
             if dom

src/packages/ShowCase/Makefile

@@ -2,7 +2,7 @@ coffee_files = coffees/main.coffee
 
 jsfiles =
 
-cssfiles = 
+cssfiles =  css/main.css
 
 copyfiles = assets/scheme.html package.json
 

src/packages/ShowCase/coffees/main.coffee

@@ -35,7 +35,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
     openwin: () ->
         me = @
         scheme =  $.parseHTML """
-        <afx-app-window apptitle="Preview" width="650" height="500">
+        <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>
@@ -55,10 +55,10 @@ class ShowCase extends this.OS.GUI.BaseApplication
                     </afx-hbox>
                     <afx-resizer data-height="5" />
                     <afx-hbox>
-                        <afx-list-view data-id="list" dropdown="false" multiselect="false" />
+                        <afx-list-view data-id="list" dropdown="false" multiselect="true" />
                     </afx-hbox>
                      <afx-hbox data-height="150">
-                        <afx-grid-view data-id="grid" />
+                        <afx-grid-view data-id="grid" multiselect="true" />
                     </afx-hbox>
                 </afx-vbox>
                 <afx-vbox data-width="150">
@@ -122,6 +122,12 @@ class ShowCase extends this.OS.GUI.BaseApplication
             ctmenu.show e
         
         grid = $ "[data-id='grid']", scheme[0]
+        grid[0].set "oncelldbclick", (e) ->
+            console.log  "on dbclick", e
+        grid[0].set "onrowselect", (e) ->
+            console.log  "on rowselect", e.data.items
+        me.subwin.observable.on "cellselect", (e) ->
+            console.log "observable", e
         grid[0].set "header", [{ text: "header1", width: 80 }, { text: "header2" }, { text: "header3" }]
         grid[0].set "rows", [
             [{ text: "text 1" }, { text: "text 2" }, { text: "text 3" }],

src/packages/ShowCase/css/main.css

@@ -0,0 +1,14 @@
+afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row:nth-child(even) .afx-grid-cell
+{
+    background-color: #f5F5F5;
+}
+
+afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row-selected .afx-grid-cell
+{
+    background-color: #116cd6;
+    color:white;
+}
+afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row-selected .afx-grid-cell-selected
+{
+    font-weight: bold;
+}

src/packages/pkg.mk

@@ -25,3 +25,5 @@ copy:
 	cp -rf $(copyfiles) build/
 clean:
 	- rm -rf build/*
+
+.PHONY: all main clean copy css js cofee