From 56a79e2db091cd9c0c92f27ccb772cb68cdabed1 Mon Sep 17 00:00:00 2001 From: lxsang Date: Tue, 14 Apr 2020 20:58:00 +0200 Subject: [PATCH] add more tags --- Makefile | 1 + src/core/tags/FloatListTag.coffee | 25 ++++++ src/core/tags/SliderTag.coffee | 92 +++++++++++++++++++++++ src/core/tags/TabContainer.coffee | 11 +++ src/core/tags/TileLayoutTags.coffee | 73 ++++++++++-------- src/core/tags/TreeViewTag.coffee | 9 ++- src/core/tags/tag.coffee | 1 + src/packages/ShowCase/coffees/main.coffee | 5 ++ 8 files changed, 182 insertions(+), 35 deletions(-) create mode 100644 src/core/tags/FloatListTag.coffee create mode 100644 src/core/tags/SliderTag.coffee create mode 100644 src/core/tags/TabContainer.coffee diff --git a/Makefile b/Makefile index ca4da96..b7d3adc 100644 --- a/Makefile +++ b/Makefile @@ -38,6 +38,7 @@ coffees= src/core/core.coffee \ src/core/tags/GridView.coffee \ src/core/tags/TabBarTag.coffee \ src/core/tags/TreeViewTag.coffee \ + src/core/tags/SliderTag.coffee \ src/antos.coffee diff --git a/src/core/tags/FloatListTag.coffee b/src/core/tags/FloatListTag.coffee new file mode 100644 index 0000000..a53cf10 --- /dev/null +++ b/src/core/tags/FloatListTag.coffee @@ -0,0 +1,25 @@ +class FloatListTag extends ListViewTag + constructor: (r, o) -> + super r, o + me = @ + @root.refresh = () -> + me.refresh() + + # disable some uneccessary functions + __dropdown__: (v) -> + @set "dropdown", false if v + __buttons__: (v) -> + showlist: (e) -> + dropoff: (e) -> + calibrate: (e) -> + @refresh() + mount: () -> + @refresh() + + refresh: () -> + + + layout: () -> + [{ + el: "div", ref: "mlist" + }] \ No newline at end of file diff --git a/src/core/tags/SliderTag.coffee b/src/core/tags/SliderTag.coffee new file mode 100644 index 0000000..a69c887 --- /dev/null +++ b/src/core/tags/SliderTag.coffee @@ -0,0 +1,92 @@ +class SliderTag extends Ant.OS.GUI.BaseTag + constructor: (r, o) -> + super r, o + @setopt "dragable", true + @setopt "max", 100 + @setopt "value", 0 + @setopt "onchanging", (e) -> + @setopt "onchange", (e) -> + + + __value__: () -> + @calibrate() + + __max__: () -> + @calibrate() + + __dragable__: (v) -> + if v + me = @ + $(@root) + .mouseover () -> + $(me.refs.point).show() + .mouseout () -> + $(me.refs.point).hide() + else + $(@refs.point).hide() + $(@root) + .unbind("mouseover") + .ubbind("mouseout") + + mount: () -> + me = @ + @enable_dragging() + $(@refs.point).css "position", "absolute" + $(@refs.point).hide() + @observable.on "resize", (e) -> + me.calibrate() + $(@refs.container).click (e) -> + offset = $(me.refs.container).offset() + left = e.clientX - offset.left + maxw = $(me.refs.container).width() + me.set "value", left * me.get("max") / maxw + me.calibrate() + evt = { id: me.aid(), data: me.get("value") } + me.get("onchange") evt + me.get("onchanging") evt + + calibrate: () -> + @set "value", @get("max") if @get("value") > @get("max") + $(@refs.container).css "width", $(@root).width() + "px" + w = $(@refs.container).width() * @get("value") / @get("max") + $(@refs.prg) + .css "width", w + "px" + .css "height", $(@refs.container).height() + "px" + if @get("dragable") + ow = w - $(@refs.point).width() / 2 + top = Math.floor(($(@refs.prg).height() - $(@refs.point).height()) / 2) + $(@refs.point) + .css "left", ow + "px" + .css "top", top + "px" + + enable_dragging: () -> + me = @ + $(@refs.point) + .css "user-select", "none" + .css "cursor", "default" + $(@refs.point).on "mousedown", (e) -> + e.preventDefault() + offset = $(me.refs.container).offset() + $(window).on "mousemove", (e) -> + left = e.clientX - offset.left + left = if left < 0 then 0 else left + maxw = $(me.refs.container).width() + left = if left > maxw then maxw else left + me.set "value", left * me.get("max") / maxw + me.calibrate() + me.get("onchanging") { id: me.aid(), data: me.get("value") } + + $(window).on "mouseup", (e) -> + me.get("onchange") { id: me.aid(), data: me.get("value") } + $(window).unbind("mousemove", null) + $(window).unbind("mouseup", null) + + layout: () -> + [{ + el: "div", class: "container", ref: "container", children: [ + { el: "div", class: "progress", ref: "prg" }, + { el: "div", class: "dragpoint", ref: "point" } + ] + }] + +Ant.OS.GUI.define "afx-slider", SliderTag \ No newline at end of file diff --git a/src/core/tags/TabContainer.coffee b/src/core/tags/TabContainer.coffee new file mode 100644 index 0000000..41a06ac --- /dev/null +++ b/src/core/tags/TabContainer.coffee @@ -0,0 +1,11 @@ +class TabContainer extends Ant.OS.GUI.BaseTag + constructor: (r, o) -> + super r, o + @setopt "dir", "column" # or row + + layout: () -> + [{ + el: "afx-tile", ref: "wrapper", chidren: [ + { el: "afx-tab-bar" } + ] + }] \ No newline at end of file diff --git a/src/core/tags/TileLayoutTags.coffee b/src/core/tags/TileLayoutTags.coffee index e292e0b..d34513f 100644 --- a/src/core/tags/TileLayoutTags.coffee +++ b/src/core/tags/TileLayoutTags.coffee @@ -1,38 +1,36 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag - constructor: (r, o, @conf) -> + constructor: (r, o) -> super r, o - @setopt @conf.opt, "grow" + @setopt "name", undefined + @setopt "dir", undefined + # @setopt @conf.opt, "grow" + + __name__: (v) -> + return unless v + $(@refs.yield) + .removeClass() + .addClass("afx-#{v}-container") + @calibrate() + + __dir__: (v) -> + return unless v + $(@refs.yield) + .css("flex-direction", v) + @calibrate() mount: () -> $(@root).css("display", "block") $(@refs.yield) - .addClass("afx-#{@conf.name}-container") .css("display", "flex") - .css("flex-direction", @conf.dir) .css("width", "100%") me = @ @observable.on "resize", (e) -> me.calibrate() - # @observable.on "calibrate", (e) -> me.calibrate() - @calibrate() calibrate: () -> + return @hcalibrate() if @get("dir") is "row" + @vcalibrate() if @get("dir") is "column" - - layout: () -> - [{ - el: "div", ref: "yield" - }] - - -class HBoxTag extends TileLayoutTag - constructor: (r, o) -> - super r, o, { - name: "hbox", - dir: "row", - opt: "data-width" - } - - calibrate: () -> + hcalibrate: () -> auto_width = [] ocwidth = 0 avaiheight = $(@root).height() @@ -55,17 +53,8 @@ class HBoxTag extends TileLayoutTag $.each auto_width, (i, v) -> $(v).css "width", "#{csize}px" @observable.trigger "hboxchange", { id: @aid(), data: { w: avaiWidth, h: avaiheight } } - -class VBoxTag extends TileLayoutTag - constructor: (r, o) -> - super r, o, { - name: "vbox", - dir: "column", - opt: "data-height" - } - - calibrate: () -> + vcalibrate: () -> auto_height = [] ocheight = 0 avaiheight = $(@root).height() @@ -90,5 +79,25 @@ class VBoxTag extends TileLayoutTag @observable.trigger "vboxchange", { id: @aid(), data: { w: avaiwidth, h: avaiheight } } + layout: () -> + [{ + el: "div", ref: "yield" + }] + + +class HBoxTag extends TileLayoutTag + constructor: (r, o) -> + super r, o + @set "dir", "row" + @set "name", "hbox" + +class VBoxTag extends TileLayoutTag + constructor: (r, o) -> + super r, o + @set "dir", "column" + @set "name", "vbox" + + +Ant.OS.GUI.define "afx-tile", TileLayoutTag Ant.OS.GUI.define "afx-hbox", HBoxTag Ant.OS.GUI.define "afx-vbox", VBoxTag \ No newline at end of file diff --git a/src/core/tags/TreeViewTag.coffee b/src/core/tags/TreeViewTag.coffee index b0542bc..d1f786c 100644 --- a/src/core/tags/TreeViewTag.coffee +++ b/src/core/tags/TreeViewTag.coffee @@ -17,14 +17,18 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag @set "nodes", v.nodes if v.nodes __selected__: (v) -> + $(@refs.wrapper).removeClass() return $(@refs.wrapper).addClass("afx_tree_item_selected") if v - $(@refs.wrapper).removeClass("afx_tree_item_selected") __open__: (v) -> + me = @ $(@refs.toggle) .removeClass() return unless @is_folder() if(v) + if @get("fetch") + @get("fetch") @root, (d) -> + me.set "data", d $(@refs.childnodes).show() else $(@refs.childnodes).hide() @@ -143,7 +147,7 @@ class TreeViewTag extends Ant.OS.GUI.BaseTag @setopt "treepath", @aid() @indexcounter = 0 - __selectedItem__: (v) -> + __selectedItem: (v) -> return unless v @get("selectedItem").set "selected", false if @get("selectedItem") v.set "selected", true @@ -154,7 +158,6 @@ class TreeViewTag extends Ant.OS.GUI.BaseTag @set "selectedItem", e.item evt = { id: @aid(), data: e } if flag - console.log "dblclick" @get("ontreedbclick") evt @observable.trigger "treedbclick", evt else diff --git a/src/core/tags/tag.coffee b/src/core/tags/tag.coffee index 546c8c6..d8f860d 100644 --- a/src/core/tags/tag.coffee +++ b/src/core/tags/tag.coffee @@ -44,6 +44,7 @@ class Ant.OS.GUI.BaseTag if opt is "*" @set k, v for k, v of value else + @["__#{opt}"](value) if @["__#{opt}"] @opts[opt] = value @["__#{opt}__"](value) if @["__#{opt}__"] @ diff --git a/src/packages/ShowCase/coffees/main.coffee b/src/packages/ShowCase/coffees/main.coffee index 93d03e9..505223f 100644 --- a/src/packages/ShowCase/coffees/main.coffee +++ b/src/packages/ShowCase/coffees/main.coffee @@ -42,6 +42,7 @@ class ShowCase extends this.OS.GUI.BaseApplication + @@ -191,6 +192,10 @@ class ShowCase extends this.OS.GUI.BaseApplication console.log "treedbclick", e me.subwin.observable.on "treedbclick", (e) -> console.log "observable treedbclick", e + + slider = $ "[data-id='slider']", scheme[0] + slider[0].set "onchanging", (v) -> + console.log v mnFile: () -> #console.log file