mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-26 09:28:21 +01:00
add more tag
This commit is contained in:
parent
ed03c72e3b
commit
45ec9e4792
1
Makefile
1
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
|
||||
|
||||
|
||||
|
@ -44,8 +44,8 @@ class ButtonTag extends Ant.OS.GUI.BaseTag
|
||||
if typeof hd is "string"
|
||||
eval hd
|
||||
else if hd
|
||||
hd e
|
||||
@observable.trigger "btclick", { id: @aid(), data: @root }
|
||||
hd { id: @aid(), data: e }
|
||||
@observable.trigger "btclick", { id: @aid(), data: e }
|
||||
if @toggle
|
||||
@set "selected", !@get "selected"
|
||||
|
||||
|
@ -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)
|
||||
@observable.trigger "listselect", { id: @aid(), evt: e }
|
||||
evt = { id: @aid(), data: e }
|
||||
@get("onlistselect") evt
|
||||
@observable.trigger "listselect", evt
|
||||
|
||||
iclose: (e) ->
|
||||
return unless e.item
|
||||
|
@ -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", children: [
|
||||
{ el: "li", ref: "start", class: "afx-corner-fix" },
|
||||
{ el: "li", ref: "end", class: "afx-corner-fix" }
|
||||
]
|
||||
}]
|
||||
[{ el: "ul", ref: "container" }]
|
||||
|
||||
Ant.OS.GUI.define "afx-menu", MenuTag
|
||||
Ant.OS.GUI.define "afx-menu-entry", MenuEntrySimpleContentTag
|
||||
Ant.OS.GUI.define "afx-menu-entry", MenuEntryTag
|
@ -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)
|
||||
me.observable.trigger "nspin", { id: me.aid(), evt: e }
|
||||
|
||||
# @observable.on "calibrate", () -> me.calibrate()
|
||||
@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: () ->
|
||||
[
|
||||
|
@ -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: () ->
|
||||
[]
|
||||
|
@ -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"
|
||||
@get("onchange")(e)
|
||||
@observable.trigger "switch", { id: @aid(), evt: e }
|
||||
evt = { id: @aid(), data: @get "swon" }
|
||||
@get("onchange") evt
|
||||
@observable.trigger "switch", evt
|
||||
|
||||
on_swon_changed: (v) ->
|
||||
$(@refs.switch).removeClass()
|
||||
|
@ -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
|
@ -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: () ->
|
||||
[{
|
||||
|
@ -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) ->
|
||||
|
@ -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
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user