dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 09:28:21 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

some tag

Browse Source
This commit is contained in:
lxsang 2020-02-25 18:28:08 +01:00
parent 2656c21cdb
commit ffdb5b5f8a
6 changed files with 325 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Makefile
View File

@ -25,7 +25,8 @@ coffees= src/core/core.coffee\
src/core/BaseService.coffee\
src/core/BaseEvent.coffee\
src/core/BaseDialog.coffee\
src/core/tag.coffee\
src/core/tags/tag.coffee\
src/core/tags/WindowTag.coffee\
src/antos.coffee

41
src/core/tags/TileLayoutTags.coffee Normal file
View File

@ -0,0 +1,41 @@
class TileLayoutTag extends Ant.OS.GUI.BaseTag
constructor: (r, o, @conf) ->
super r, o
@setopt @conf.opt, "grow"
@mount()
mount: () ->
$(@refs.yield)
.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: () ->
layout: () ->
{
el: "div", class: "afx-#{@conf.name}-container", ref: "yield"
}
class HBoxTag extends TileLayoutTag
constructor: (r, o) ->
super r, o, {
name: "hbox",
dir: "row",
opt: "data-width"
}
class VBoxTag extends TileLayoutTag
constructor: (r, o) ->
super r, o, {
name: "vbox",
dir: "column",
opt: "data-height"
}

200
src/core/tags/WindowTag.coffee Normal file
View File

@ -0,0 +1,200 @@
class WindowTag extends Ant.OS.GUI.BaseTag
constructor: (r, o) ->
super r, o
@setopt "minimizable", true
@setopt "resizable", true
@setopt "apptitle", "Untitled"
@setopt "desktop", "#desktop"
@setopt "width", 400
@setopt "height", 300
@shown = false
@isMaxi = false
@history = {}
@desktop = $(@get "desktop")
@desktop_pos = @desktop.offset()
me = @
@root.contextmenuHandle = (e) ->
$(@refs["minbt"]).click (e) ->
me.observable.trigger("hide")
$(@refs["maxbt"]).click (e) ->
me.toggle_window()
$(@refs["closebt"]).click (e) ->
me.observable.trigger("exit")
@mount()
resize: () ->
ch = $(@refs["yield"]).height() / $(@refs["yield"]).children().length
$(@refs["yield"]).children().each (e) ->
$(this).css "height", "#{ch}px"
mount: () ->
me = @
left = ($(@desktop).width() - (@get "width")) / 2
top = ($(@desktop).height() - (@get "height")) / 2
$(@root)
.css("position", 'absolute')
.css("left", "#{left}px")
.css("top", "#{top}px")
.css("width", "#{(@get "width")}px")
.css("height", "#{(@get "height")}px")
.css("z-index", Ant.OS.GUI.zindex++)
$(@root).on "mousedown", (e) ->
return if me.shown
me.observable.trigger "focus"
$(@refs["dragger"]).dblclick (e) ->
me.toggle_window()
@observable.on "resize", (e) -> me.resize()
@observable.on "focus", () ->
Ant.OS.GUI.zindex++
$(me.root)
.show()
.css("z-index", Ant.OS.GUI.zindex)
.removeClass("unactive")
me.shown = true
@observable.on "blur", () ->
me.shown = false
$(me.root)
.addClass("unactive")
@observable.on "hide", () ->
$(me.root).hide()
me.shown = false
@observable.on "toggle", () ->
if me.shown
me.observable.trigger "hide"
else
me.observable.trigger "focus"
@enable_dragging()
@enable_resize()
@resize()
@observable.trigger "rendered", @root
on_minimizable_changed: (value) ->
if value then $(@refs["minbt"]).show() else $(@refs["minbt"]).hide()
on_resizable_changed: (value) ->
if value
$(@refs["maxbt"]).show()
$(@refs["grip"]).show()
else
$(@refs["maxbt"]).hide()
$(@refs["grip"]).hide()
on_apptitle_changed: (value) ->
$(@refs["dragger"]).text value.__() if value
enable_dragging: () ->
me = @
$(@refs["dragger"])
.css("user-select", "none")
.css("cursor", "default")
$(@refs["dragger"]).on "mousedown", (e) ->
e.preventDefault()
offset = $(me.root).offset()
offset.top = e.clientY - offset.top
offset.left = e.clientX - offset.left
$(window).on "mousemove", (e) ->
if me.isMaxi
me.toggle_window()
top = 0
letf = e.clientX - $(me.root).width() / 2
offset.top = 10
offset.left = $(me.root).width() / 2
else
top = e.clientY - offset.top - me.desktop_pos.top
left = e.clientX - me.desktop_pos.top - offset.left
left = if left < 0 then 0 else left
top = if top < 0 then 0 else top
$(me.root)
.css("top", "#{top}px")
.css("left", "#{left}px")
$(window).on "mouseup", (e) ->
$(window).unbind "mousemove", null
$(window).unbind "mouseup", null
enable_resize: () ->
me = @
$(@refs["grip"])
.css("user-select", "none")
.css("cursor", "default")
.css("position", "absolute")
.css("bottom", "0")
.css("right", "0")
.css("cursor", "nwse-resize")
$(@refs["grip"]).on "mousedown", (e) ->
e.preventDefault()
offset = { top: 0, left: 0 }
offset.top = e.clientY
offset.left = e.clientX
$(window).on "mousemove", (e) ->
w = $(me.root).width() + e.clientX - offset.left
h = $(me.root).height() + e.clientY - offset.top
w = if w < 100 then 100 else w
h = if h < 100 then 100 else h
offset.top = e.clientY
offset.left = e.clientX
$(me.root)
.css("width", "#{w}px")
.css("height", "#{h}px")
me.isMaxi = false
me.observable.trigger "resize", { id: me.id(), w: w, h: h }
$(window).on "mouseup", (e) ->
$(window).unbind "mousemove", null
$(window).unbind "mouseup", null
toggle_window: () ->
return unless @get "resizable"
me = @
if @isMaxi is false
@history = {
top: $(@root).css("top"),
left: $(@root).css("left"),
width: $(@root).css("width"),
height: $(@root).css("height")
}
w = $(@desktop).width() - 5
h = $(@desktop).height() - 10
$(@root)
.css("width", "#{w}px")
.css("height", "#{h}px")
.css("top", "0")
.css("left", "0")
@observable.trigger 'resize', { id: @id(), w: w, h: h }
@isMaxi = true
else
@isMaxi = false
$(@root)
.css("width", @history.width)
.css("height", @history.height)
.css("top", @history.top)
.css("left", @history.left)
@observable.trigger 'resize', { id: @id(), w: history.width, h: history.height }
layout: () ->
{
el: "div", class: "afx-window-wrapper", children: [
{
el: "ul", class: "afx-window-top", children: [
{ el: "li", class: "afx-window-close", ref: "closebt" },
{ el: "li", class: "afx-window-minimize", ref: "minbt" },
{ el: "li", class: "afx-window-maximize", ref: "maxbt" },
{ el: "li", class: "afx-window-title", ref: "dragger" }
]
},
{ el: "div", class: "afx-clear" },
{ el: "div", ref: "yield", class: "afx-window-content" },
{ el: "div", ref: "grip", class: "afx-window-grip" }
]
}
Ant.OS.GUI.define "afx-app-window", WindowTag

68
src/core/tags/tag.coffee
View File

@ -1,9 +1,67 @@
Ant.OS.GUI.tag = {}
Ant.OS.GUI.zindex = 10
class Ant.OS.GUI.BaseTag
constructor: (@root, @observable) ->
@opts = {}
me = @
@observable = new Ant.OS.API.Announcer() unless @observable
# export to rootnode
@root.observable = @observable
@root.set = (k, v) -> me.set k, v
@root.get = (k) -> me.get k
@refs = {}
@setopt "data-id", Math.floor(Math.random() * 100000) + 1
@wrapper = @mkui()
if @refs["yield"]
($($(v).detach()[0].uify(@observable)).appendTo(@refs.yield)) for v in $(@root).children()
$(@wrapper).appendTo(@root)
else
$(@root).empty()
$(@wrapper).appendTo(@root)
Element.prototype.mount = () ->
Ant.OS.GUI.tag[@tagName](@) if RegExp('afx-*').test(@tagName) and Ant.OS.GUI.tag[@tagName]
setopt: (name, val) ->
value = val
if ($(@root).attr name)
v = $(@root).attr name
try
value = JSON.parse(v)
catch e
value = v
@set name, value
set: (opt, value) ->
@opts[opt] = value
@["on_#{opt}_changed"](value) if @["on_#{opt}_changed"]
id: () ->
@get "data-id"
Ant.OS.GUI.tag.define = (name, fn) ->
Ant.OS.GUI.tag[name] = fn
get: (opt) ->
@opts[opt]
layout: () ->
# should be defined by subclasses
mkui: (obj) ->
tag = obj
tag = @layout() unless tag
dom = $("<#{tag.el}>")
$(dom).addClass tag.class if tag.class
if tag.children
$(@mkui(v)).appendTo(dom) for v in tag.children
if tag.ref
@refs[tag.ref] = dom
# dom.mount @observable
return dom
Element.prototype.uify = (observable) ->
tag = @tagName.toLowerCase()
if RegExp('afx-*', "i" ).test(tag) and Ant.OS.GUI.tag[tag]
return new Ant.OS.GUI.tag[tag](@, observable).root
return @
Ant.OS.GUI.define = (name, cls) ->
Ant.OS.GUI.tag[name] = cls
Ant.OS.GUI.tag.mount = (obj) ->

8
src/core/tags/window-tag.coffee
View File

@ -1,8 +0,0 @@
Ant.OS.GUI.tag.define "afx-window", (tag) ->
childen = $(tag).childen()
@(tag).empty()
$(tag).append(
$("<div>")
.addClass("afx-window-wrapper")
.append())

21
src/packages/ShowCase/coffees/main.coffee
View File

@ -23,14 +23,31 @@ class ShowCase extends this.OS.GUI.BaseApplication
console.log me.announcer
@on "btclick", (e) ->
me.openwin()
###
me.announcer.trigger("evt1", "Hello 1")
me.announcer.off("*")
me.announcer.trigger("evt2", "Hello 2")
console.log me.announcer
me.notify "Hello"
tag = new Ant.OS.GUI.tags["afx-window"]()
console.log tag
###
openwin: () ->
scheme = $.parseHTML """
<afx-app-window apptitle="Preview" width="650" height="500">
<div>
<p>hello</p>
</div>
</afx-app-window>
"""
obj = scheme[0].uify()
($ "#desktop").append obj
obj.set "resizable", false
obj.set "minimizable", false
obj.observable.on "exit", () ->
console.log "exit"
obj.observable.off "*"
$(obj).remove()
ShowCase.singleton = false
this.OS.register "ShowCase", ShowCase