From 8a441e5a59219b537d02a181239d71b174cbe78f Mon Sep 17 00:00:00 2001 From: mrsang Date: Sun, 26 Apr 2020 21:08:26 +0200 Subject: [PATCH] tab container --- Makefile | 3 +- src/core/tags/ListViewTag.coffee | 3 +- src/core/tags/ResizerTag.coffee | 1 + src/core/tags/SliderTag.coffee | 1 + src/core/tags/TabBarTag.coffee | 12 ++-- src/core/tags/TabContainer.coffee | 58 ++++++++++++++++-- src/core/tags/TileLayoutTags.coffee | 9 +-- src/core/tags/tag.coffee | 57 +++++++++++------- src/packages/ShowCase/coffees/main.coffee | 71 ++++++++++++----------- src/themes/antos/afx-resizer.css | 1 - 10 files changed, 145 insertions(+), 71 deletions(-) diff --git a/Makefile b/Makefile index b7d3adc..a465c7b 100644 --- a/Makefile +++ b/Makefile @@ -37,6 +37,7 @@ coffees= src/core/core.coffee \ src/core/tags/MenuTag.coffee \ src/core/tags/GridView.coffee \ src/core/tags/TabBarTag.coffee \ + src/core/tags/TabContainer.coffee \ src/core/tags/TreeViewTag.coffee \ src/core/tags/SliderTag.coffee \ src/antos.coffee @@ -44,7 +45,7 @@ coffees= src/core/core.coffee \ -packages = CoreServices ActivityMonitor Setting ShowCase # Files MarkOn MarketPlace Preview NotePad wTerm +packages = CoreServices ActivityMonitor Setting ShowCase DummyApp # Files MarkOn MarketPlace Preview NotePad wTerm main: initd build_coffees build_tags build_themes schemes libs build_packages languages - cp src/index.html $(BUILDDIR)/ diff --git a/src/core/tags/ListViewTag.coffee b/src/core/tags/ListViewTag.coffee index 7a73348..f788541 100644 --- a/src/core/tags/ListViewTag.coffee +++ b/src/core/tags/ListViewTag.coffee @@ -105,7 +105,6 @@ class ListViewTag extends Ant.OS.GUI.BaseTag el[0].uify @observable me = @ el[0] - .set "data", item .set "oncontextmenu", (e) -> me.iclick e, true .set "ondbclick", (e) -> @@ -116,6 +115,8 @@ class ListViewTag extends Ant.OS.GUI.BaseTag me.iselect e .set "onclose", (e) -> me.iclose e + .set "data", item + el[0] remove: (item) -> el = item.get "data" diff --git a/src/core/tags/ResizerTag.coffee b/src/core/tags/ResizerTag.coffee index e973e84..cc0fde7 100644 --- a/src/core/tags/ResizerTag.coffee +++ b/src/core/tags/ResizerTag.coffee @@ -7,6 +7,7 @@ class ResizerTag extends Ant.OS.GUI.BaseTag @minsize = 0 mount: () -> + $(@root).css " display", "block" tagname = $(@parent).prop("tagName") @resizable_el = if $(@root).prev().length is 1 then $(@root).prev()[0] else undefined if tagname is "AFX-HBOX" diff --git a/src/core/tags/SliderTag.coffee b/src/core/tags/SliderTag.coffee index a69c887..37d7fc0 100644 --- a/src/core/tags/SliderTag.coffee +++ b/src/core/tags/SliderTag.coffee @@ -44,6 +44,7 @@ class SliderTag extends Ant.OS.GUI.BaseTag evt = { id: me.aid(), data: me.get("value") } me.get("onchange") evt me.get("onchanging") evt + @calibrate() calibrate: () -> @set "value", @get("max") if @get("value") > @get("max") diff --git a/src/core/tags/TabBarTag.coffee b/src/core/tags/TabBarTag.coffee index fc91c5c..f018b1e 100644 --- a/src/core/tags/TabBarTag.coffee +++ b/src/core/tags/TabBarTag.coffee @@ -4,15 +4,19 @@ class TabBarTag extends Ant.OS.GUI.BaseTag @setopt "closable", false @setopt "ontabselect", (e) -> @setopt "items", [] - + me = @ + @root.push = (e) -> me.refs.list.push e + @root.remove = (e) -> me.refs.list.remove e + @root.unshift = (e) -> me.refs.list.unshift e + @refs.list.set "onlistselect", (e) -> + me.get("ontabselect") e + me.observable.trigger "tabselect", e + __items__: (v) -> @refs.list.set "data", v mount: () -> me = @ - @refs.list.set "onlistselect", (e) -> - me.get("ontabselect") e - me.observable.trigger "tabselect", e @root.push = (e) -> me.refs.list.push e @root.unshift = (e) -> me.refs.list.unshift e @root.remove = (e) -> me.refs.list.remove e diff --git a/src/core/tags/TabContainer.coffee b/src/core/tags/TabContainer.coffee index 41a06ac..d5b9465 100644 --- a/src/core/tags/TabContainer.coffee +++ b/src/core/tags/TabContainer.coffee @@ -2,10 +2,60 @@ class TabContainer extends Ant.OS.GUI.BaseTag constructor: (r, o) -> super r, o @setopt "dir", "column" # or row - + @setopt "selectedTab", undefined + @setopt "tabbarwidth", undefined + @setopt "tabbarheight", undefined + me = @ + @refs.bar.set "ontabselect", (e) -> + data = e.data.item.get "data" + me.set "selectedTab", data + + __selectedTab: (v) -> + return unless v + selected = @get("selectedTab") + $(selected.container).hide() if selected + $(v.container).show() + @observable.trigger "resize" + + __tabbarwidth__: (v) -> + return unless v + $(@refs.bar).attr "data-width", "#{@get("tabbarwidth")}" + @refs.wrapper.calibrate() + + __tabbarheight__: (v) -> + $(@refs.bar).attr "data-height", "#{@get("tabbarheight")}" + @refs.wrapper.calibrate() + + __dir__: (v) -> + return unless v + @refs.wrapper.set "dir", v + @set "tabsize", @get("tabsize") + + mount: () -> + me = @ + $(@children).each () -> + item = {} + item.text = $(@).attr "title" if $(@).attr "title" + item.icon = $(@).attr "icon" if $(@).attr "icon" + item.iconclass = $(@).attr "iconclass" if $(@).attr "iconclass" + item.container = @ + $(@) + .css "width", "100%" + .css "height", "100%" + el = me.refs.bar.push item + el.set "selected", true + @observable.on "resize", (e) -> me.calibrate() + @calibrate() + + calibrate: () -> + $(@refs.wrapper).css "height", "#{$(@root).height()}px" + layout: () -> [{ - el: "afx-tile", ref: "wrapper", chidren: [ - { el: "afx-tab-bar" } + el: "afx-tile", ref: "wrapper", children: [ + { el: "afx-tab-bar", ref: "bar" }, + { el: "div", ref: "yield" } ] - }] \ No newline at end of file + }] + +Ant.OS.GUI.define "afx-tab-container", TabContainer \ No newline at end of file diff --git a/src/core/tags/TileLayoutTags.coffee b/src/core/tags/TileLayoutTags.coffee index d34513f..966b8ad 100644 --- a/src/core/tags/TileLayoutTags.coffee +++ b/src/core/tags/TileLayoutTags.coffee @@ -3,6 +3,10 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag super r, o @setopt "name", undefined @setopt "dir", undefined + $(@root).css("display", "block") + $(@refs.yield) + .css("display", "flex") + .css("width", "100%") # @setopt @conf.opt, "grow" __name__: (v) -> @@ -19,12 +23,9 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag @calibrate() mount: () -> - $(@root).css("display", "block") - $(@refs.yield) - .css("display", "flex") - .css("width", "100%") me = @ @observable.on "resize", (e) -> me.calibrate() + @calibrate() calibrate: () -> return @hcalibrate() if @get("dir") is "row" diff --git a/src/core/tags/tag.coffee b/src/core/tags/tag.coffee index d8f860d..d9817a2 100644 --- a/src/core/tags/tag.coffee +++ b/src/core/tags/tag.coffee @@ -10,25 +10,27 @@ class Ant.OS.GUI.BaseTag @root.set = (k, v) -> me.set k, v @root.get = (k) -> me.get k @root.aid = () -> me.aid() + @root.calibrate = () -> me.calibrate() + @mounted = false + @root.sync = () -> me.sync() @refs = {} @setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString() #$(@root).attr "data-id", @get("data-id") - @children = [] - - __: (k, v) -> - @set k, v if v - @get k - + @children = $(@root).children() + for obj in @layout() dom = @mkui obj if dom - if @refs.yield - @children = $(@root).children() - $(v).detach().appendTo @refs.yield for v in @children - $(dom).appendTo(@root) - else - # $(@root).empty() - $(dom).appendTo(@root) + $(dom).appendTo(@root) + if @refs.yield + $(v).detach().appendTo @refs.yield for v in @children + else + @children = [] + $(@root).children().each () -> @.mkui me.observable + + __: (k, v) -> + @set k, v if v + @get k setopt: (name, val) -> value = val @@ -52,14 +54,17 @@ class Ant.OS.GUI.BaseTag aid: () -> @get "data-id" + calibrate: () -> get: (opt) -> return @opts if opt is "*" @opts[opt] - - uify: () -> + + sync: () -> + return if @mounted + @mounted = true @mount() - v.uify(@observable) for v in @children + $(@root).children().each () -> @.mount() @root mount: () -> @@ -77,18 +82,28 @@ class Ant.OS.GUI.BaseTag if tag.ref @refs[tag.ref] = dom[0] # dom.mount @observable - dom[0].uify(@observable) + dom[0] #.uify(@observable) -Element.prototype.uify = (observable) -> +Element.prototype.mkui = (observable) -> tag = @tagName.toLowerCase() if RegExp("afx-*", "i" ).test(tag) and Ant.OS.GUI.tag[tag] o = new Ant.OS.GUI.tag[tag](@, observable) - return o.uify() - ### else + return o.root + else $(@).children().each () -> - @uify(observable) ### + @mkui(observable) return @ + +Element.prototype.mount = () -> + return @sync() if @sync + $(@).children().each () -> @mount() + @ + +Element.prototype.uify = (observable) -> + @mkui(observable) + @sync() + Ant.OS.GUI.define = (name, cls) -> Ant.OS.GUI.tag[name] = cls diff --git a/src/packages/ShowCase/coffees/main.coffee b/src/packages/ShowCase/coffees/main.coffee index 505223f..f1cdda5 100644 --- a/src/packages/ShowCase/coffees/main.coffee +++ b/src/packages/ShowCase/coffees/main.coffee @@ -38,35 +38,42 @@ class ShowCase extends this.OS.GUI.BaseApplication - - - - - - - - - - - - - - - - - - - - - - -
box 3
-
box 4 - - + + + + + + + + + + + + + + + + + + + + + + + +
box 3
+
box 4
+ + + + +
desktop
+ + + """ @@ -89,12 +96,6 @@ class ShowCase extends this.OS.GUI.BaseApplication me.subwin.observable.on "menuselect", (e) -> console.log e.id - - tab = $ "[data-id='tab']", scheme[0] - tab[0].set "items", [ - { text: "data.txt" }, - { text: "antos.conf", closable: true } - ] list = $ "[data-id='list']", scheme[0] diff --git a/src/themes/antos/afx-resizer.css b/src/themes/antos/afx-resizer.css index 357220e..ac19aa1 100644 --- a/src/themes/antos/afx-resizer.css +++ b/src/themes/antos/afx-resizer.css @@ -1,4 +1,3 @@ afx-resizer { - display: block; background-color: #a6a6a6; } \ No newline at end of file