add more tags

This commit is contained in:
lxsang 2020-04-14 20:58:00 +02:00
parent 64f055e7ce
commit 56a79e2db0
8 changed files with 182 additions and 35 deletions

View File

@ -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

View File

@ -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"
}]

View File

@ -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

View File

@ -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" }
]
}]

View File

@ -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

View File

@ -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

View File

@ -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}__"]
@

View File

@ -42,6 +42,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
<afx-hbox>
<afx-vbox data-width="150">
<afx-tree-view data-id="tree" />
<afx-slider data-id="slider" data-height="30" value="50"/>
</afx-vbox>
<afx-resizer data-width="5" />
<afx-vbox data-width="grow">
@ -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