From 5b21696fa176944e6905df0061dc58986576e91e Mon Sep 17 00:00:00 2001 From: lxsang Date: Fri, 3 Apr 2020 13:49:12 +0200 Subject: [PATCH] grid view update --- src/core/tags/GridView.coffee | 80 +++++++++++++++++++++-- src/core/tags/MenuTag.coffee | 1 + src/core/tags/tag.coffee | 6 +- src/packages/ShowCase/Makefile | 2 +- src/packages/ShowCase/coffees/main.coffee | 12 +++- src/packages/ShowCase/css/main.css | 14 ++++ src/packages/pkg.mk | 4 +- 7 files changed, 108 insertions(+), 11 deletions(-) create mode 100644 src/packages/ShowCase/css/main.css diff --git a/src/core/tags/GridView.coffee b/src/core/tags/GridView.coffee index 847bd38..120991b 100644 --- a/src/core/tags/GridView.coffee +++ b/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 = $("
") + .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") diff --git a/src/core/tags/MenuTag.coffee b/src/core/tags/MenuTag.coffee index 86f1ae4..68c34ed 100644 --- a/src/core/tags/MenuTag.coffee +++ b/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 diff --git a/src/core/tags/tag.coffee b/src/core/tags/tag.coffee index cef674b..546c8c6 100644 --- a/src/core/tags/tag.coffee +++ b/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 diff --git a/src/packages/ShowCase/Makefile b/src/packages/ShowCase/Makefile index 03af4c6..3e2c4ed 100644 --- a/src/packages/ShowCase/Makefile +++ b/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 diff --git a/src/packages/ShowCase/coffees/main.coffee b/src/packages/ShowCase/coffees/main.coffee index 666f735..aa9b723 100644 --- a/src/packages/ShowCase/coffees/main.coffee +++ b/src/packages/ShowCase/coffees/main.coffee @@ -35,7 +35,7 @@ class ShowCase extends this.OS.GUI.BaseApplication openwin: () -> me = @ scheme = $.parseHTML """ - + @@ -55,10 +55,10 @@ class ShowCase extends this.OS.GUI.BaseApplication - + - + @@ -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" }], diff --git a/src/packages/ShowCase/css/main.css b/src/packages/ShowCase/css/main.css new file mode 100644 index 0000000..f06ae01 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/packages/pkg.mk b/src/packages/pkg.mk index 4858d2a..3f88a7e 100644 --- a/src/packages/pkg.mk +++ b/src/packages/pkg.mk @@ -24,4 +24,6 @@ css: copy: cp -rf $(copyfiles) build/ clean: - - rm -rf build/* \ No newline at end of file + - rm -rf build/* + +.PHONY: all main clean copy css js cofee \ No newline at end of file