From 710491bc66d391902fecbf5de3098773c0d7c66e Mon Sep 17 00:00:00 2001 From: lxsang Date: Tue, 5 May 2020 17:52:54 +0200 Subject: [PATCH] add more tags --- Makefile | 10 +- src/core/tags/AppDockTag.coffee | 29 +++ src/core/tags/FileViewTag.coffee | 215 +++++++++++++++++++++- src/core/tags/GridViewTag.coffee | 2 +- src/core/tags/ListViewTag.coffee | 11 +- src/core/tags/OverlayTag.coffee | 34 ++++ src/core/tags/TabContainerTag.coffee | 2 +- src/core/tags/TreeViewTag.coffee | 20 +- src/core/tags/afx-apps-dock.tag | 2 +- src/packages/ShowCase/coffees/main.coffee | 40 +++- src/themes/antos/afx-file-view.css | 21 +-- 11 files changed, 345 insertions(+), 41 deletions(-) create mode 100644 src/core/tags/AppDockTag.coffee create mode 100644 src/core/tags/OverlayTag.coffee diff --git a/Makefile b/Makefile index d293645..5ea309c 100644 --- a/Makefile +++ b/Makefile @@ -43,6 +43,8 @@ coffees= src/core/core.coffee \ src/core/tags/FloatListTag.coffee \ src/core/tags/CalendarTag.coffee \ src/core/tags/ColorPickerTag.coffee \ + src/core/tags/FileViewTag.coffee \ + src/core/tags/OverlayTag.coffee \ src/antos.coffee @@ -85,13 +87,13 @@ testdata: cp src/core/handlers/jsons/* $(BUILDDIR)/resources/jsons build_tags: @echo "$(BLUE)Building tag files$(NC)" - -mkdir $(BUILDDIR)/resources + -mkdir -p $(BUILDDIR)/resources -rm $(BUILDDIR)/resources/antos_tags.js for f in src/core/tags/*.tag; do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/antos_tags.js; done languages: - -mkdir $(BUILDDIR)/resources - -mkdir $(BUILDDIR)/resources/languages + -mkdir -p $(BUILDDIR)/resources + -mkdir -p $(BUILDDIR)/resources/languages cp src/core/languages/*.json $(BUILDDIR)/resources/languages/ genlang: @@ -111,7 +113,7 @@ antos_themes_build: build_packages: - - mkdir $(BUILDDIR)/packages + - mkdir -p $(BUILDDIR)/packages - for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d && rm -rf $(BUILDDIR)/packages/$$d/* ); done for d in $(packages); do (cd src/packages/$$d; make);done for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done diff --git a/src/core/tags/AppDockTag.coffee b/src/core/tags/AppDockTag.coffee new file mode 100644 index 0000000..f232a10 --- /dev/null +++ b/src/core/tags/AppDockTag.coffee @@ -0,0 +1,29 @@ +class AppDockTag extends Ant.OS.GUI.BaseTag + constructor: (r, o) -> + super r, o + @setopt "selectedApp" + @setopt "onappselect", (e) -> + @setopt "items", [] + me = @ + @root.newapp = (a) -> me.addApp a + + addApp: (item) -> + @items.push item + @set "selectedApp", item.app + el = $("") + el.appendTo @root + el[0].uify @observable + el[0].set "*", item + el.attr "tooltip", "cr:#{item.app.title()}" + me = @ + el[0].set "onbtclick", (e) -> + e.id = me.aid() + e.data.app = item + me.get("onappselect") e + for v in self.items + v.app.blur() + + removeApp: (a) -> + + mount: () -> + Ant.OS.announcer.trigger "sysdockloaded" diff --git a/src/core/tags/FileViewTag.coffee b/src/core/tags/FileViewTag.coffee index 474ed71..84a3a5b 100644 --- a/src/core/tags/FileViewTag.coffee +++ b/src/core/tags/FileViewTag.coffee @@ -6,11 +6,10 @@ class FileViewTag extends Ant.OS.GUI.BaseTag @setopt "selectedFile", undefined @setopt "view", "list" @setopt "data", [] - @setopt "path", "home:///" @setopt "status", true @setopt "showhidden", false @setopt "fetch", undefined - @setopt "chdir", undefined + @setopt "path", undefined @preventUpdate = false @header = [ { text: "__(File name)" }, @@ -20,7 +19,25 @@ class FileViewTag extends Ant.OS.GUI.BaseTag view: () -> @get "view" + __view__: (v) -> + @switchView() + __path__: (v) -> + return unless v + me = @ + return unless @get "fetch" + @get("fetch")(v) + .then (data) -> + me.set "data", data + me.refs.status.set("text", " ") if me.get "status" + .catch (e) -> + # this should be handled by the OS + console.error e + + __data__: (v) -> + return unless v + @refreshData() + sortByType: (a, b) -> if a.type < b.type -1 @@ -40,8 +57,196 @@ class FileViewTag extends Ant.OS.GUI.BaseTag $(@refs.gridview).css("width", w + "px") $(@refs.treecontainer).css("width", w + "px") + refreshList: () -> + items = [] + me = @ + $.each @get("data"), (i, v) -> + return if v.filename[0] is '.' and not me.get("showhidden") + v.text = v.filename + v.text = v.text.substring(0, 9) + "..." if v.text.length > 10 + v.iconclass = if v.iconclass then v.iconclass else v.type + v.icon = v.icon + items.push(v) + @refs.listview.set "data", items + + refreshGrid: () -> + rows = [] + me = @ + $.each @get("data"), (i, v) -> + return if v.filename[0] is '.' and not me.get("showhidden") + v.text = v.filename + v.iconclass = if v.iconclass then v.iconclass else v.type + row = [ + v, + { + text: v.mime, + data: v + }, + { + text: v.size, + data: v + } + ] + rows.push(row) + @refs.gridview.set "rows", rows + + refreshTree: () -> + #@treeview.root.set("selectedItem", null) + tdata = {} + tdata.name = @get "path" + tdata.path = tdata.name + tdata.open = true + tdata.nodes = @getTreeData( @get("data")) + @refs.treeview.set("data", tdata) + + getTreeData: (data) -> + nodes = [] + me = @ + $.each data, (i, v) -> + return if v.filename[0] is '.' and not me.get("showhidden") + v.name = v.filename + if v.type is 'dir' + v.nodes = [] + v.open = false + v.iconclass = if v.iconclass then v.iconclass else v.type + v.icon = v.icon + nodes.push(v) + return nodes + + refreshData: () -> + return unless @get("data") + @get("data").sort(@sortByType) + switch @get("view") + when "icon" + @refreshList() + when "list" + @refreshGrid() + else + @refreshTree() + switchView: () -> - + $(@refs.listview).hide() + $(@refs.gridview).hide() + $(@refs.treecontainer).hide() + @set "selectedFile", undefined + switch @get "view" + when 'icon' + $(@refs.listview).show() + when 'list' + $(@refs.gridview).show() + else + $(@refs.treecontainer).show() + @refreshData() + @calibrate() + @refs.status.set("text", " ") if @get "status" + + fileselect: (e) -> + if @get "status" + @refs.status.set "text", __( + "Selected: {0} ({1} bytes)", + e.filename, + if e.size then e.size else "0" ) + evt = { id: @aid(), data: e } + @get("onfileselect") evt + @observable.trigger "fileselect", evt + + filedbclick: (e) -> + if e.type is "dir" + @set "path", e.path + else + evt = { id: @aid(), data: e } + @get("onfileopen") evt + @observable.trigger "fileopen", evt + + mount: () -> + me = @ + @observable.on "resize", (e) -> me.calibrate() + @refs.treeview.set "fetch", (v) -> + new Promise (resolve, reject) -> + return resolve undefined unless me.get("fetch") + me.get("fetch")(v.get("data").path) + .then (d) -> resolve me.getTreeData(d.sort me.sortByType) + .catch (e) -> reject e + @refs.gridview.set "header", @header + # even handles + @refs.listview.set "onlistselect", (e) -> + me.fileselect e.data.item.get("data") + @refs.gridview.set "onrowselect", (e) -> + me.fileselect $(e.data.item).children()[0].get("data") + @refs.treeview.set "ontreeselect", (e) -> + me.fileselect e.data.item.get("data") + # dblclick + @refs.listview.set "onlistdbclick", (e) -> + me.filedbclick e.data.item.get("data") + @refs.gridview.set "oncelldbclick", (e) -> + me.filedbclick e.data.item.get("data") + @refs.treeview.set "ontreedbclick", (e) -> + me.filedbclick e.data.item.get("data") + @switchView() + ### self.refs.listview.onlistselect = function(data) + { + data.id = self.rid + self.root.observable.trigger("fileselect",data) + } + self.refs.listview.onlistdbclick = function(data) + { + data.id = self.rid + self.root.observable.trigger("filedbclick",data) + } + self.refs.gridview.root.observable = self.root.observable + self.refs.gridview.ongridselect = function(d) + { + var data = {id:self.rid, data:self.data[d.data.child[3].idx], idx:d.data.child[3].idx} + self.root.observable.trigger("fileselect",data) + } + self.refs.gridview.ongriddbclick = function(d) + { + var data = {id:self.rid, data:self.data[d.data.child[3].idx], idx:d.data.child[3].idx} + self.root.observable.trigger("filedbclick",data) + } + self.refs.treeview.ontreeselect = function(d) + { + if(!d) return; + var data; + var el = d; + if(d.treepath == 0)// select the root + { + el = self.path.asFileHandler() + el.size = 0 + el.filename = el.path + } + var data = {id:self.rid, data:el} + self.root.observable.trigger("fileselect",data) + } + self.refs.treeview.ontreedbclick = function(d) + { + if(!d || d.treepath == 0) return; + var data = {id:self.rid, data:d} + self.root.observable.trigger("filedbclick",data) + } + self.root.observable.on("fileselect", function(e){ + if(e.id != self.rid) return + self.selectedFile = e.data + if(self.onfileselect) + self.onfileselect(e.data) + if(self.refs.stbar) + self.refs.stbar.root.set("text", __("Selected: {0} ({1} bytes)", e.data.filename, e.data.size?e.data.size:"0"))//.html() + }) + self.root.observable.on("filedbclick", function(e){ + if(e.id != self.rid ) return + if(e.data.type != "dir" && self.onfileopen) + self.onfileopen(e.data) + else if(self.chdir && e.data.type == "dir") + self.chdir(e.data.path) + }) + calibre_size() + self.root.observable.on("resize", function(e){ + calibre_size() + }) + self.root.observable.on("calibrate", function(e){ + calibre_size() + }) + }) ### layout: () -> [ @@ -51,4 +256,6 @@ class FileViewTag extends Ant.OS.GUI.BaseTag { el: "afx-tree-view", ref: "treeview" } ] }, { el: "afx-label", class: "status", ref: "status" } - ] \ No newline at end of file + ] + +Ant.OS.GUI.define "afx-file-view", FileViewTag \ No newline at end of file diff --git a/src/core/tags/GridViewTag.coffee b/src/core/tags/GridViewTag.coffee index 8e1ed7e..86a87c2 100644 --- a/src/core/tags/GridViewTag.coffee +++ b/src/core/tags/GridViewTag.coffee @@ -186,7 +186,7 @@ class GridViewTag extends Ant.OS.GUI.BaseTag layout: () -> [ - { el: "div", ref: "header" }, + { el: "div", ref: "header", class: "grid_row_header" }, { el: "div", ref: "container", children: [ { el: "div", ref: "grid" } ] } diff --git a/src/core/tags/ListViewTag.coffee b/src/core/tags/ListViewTag.coffee index f788541..98b14a7 100644 --- a/src/core/tags/ListViewTag.coffee +++ b/src/core/tags/ListViewTag.coffee @@ -170,6 +170,11 @@ class ListViewTag extends Ant.OS.GUI.BaseTag @get("onlistselect") evt @observable.trigger "listselect", evt + mount: () -> + me = @ + @observable.on "resize", (e) -> me.calibrate() + @calibrate() + iclose: (e) -> return unless e.item evt = { id: @aid(), data: e } @@ -188,13 +193,9 @@ class ListViewTag extends Ant.OS.GUI.BaseTag me.dropoff e show = (e) -> me.showlist e - calib = (e) -> - me.calibrate e if v $(@root).addClass "dropdown" $(@refs.current).show() - @observable.on "calibrate", calib - @observable.on "resize", calib $(document).on "click", drop $(@refs.current).on "click", show $(@refs.container) @@ -208,8 +209,6 @@ class ListViewTag extends Ant.OS.GUI.BaseTag @calibrate() else $(@refs.current).hide() - @observable.off "calibrate", calib - @observable.off "resize", calib $(document).off "click", drop $(@refs.current).off "click", show diff --git a/src/core/tags/OverlayTag.coffee b/src/core/tags/OverlayTag.coffee new file mode 100644 index 0000000..c3e1d38 --- /dev/null +++ b/src/core/tags/OverlayTag.coffee @@ -0,0 +1,34 @@ +class OverlayTag extends Ant.OS.GUI.BaseTag + constructor: (r, o) -> + super r, o + @setopt "width", 200 + @setopt "height", 400 + + __width__: (v) -> + @calibrate() + + __height__: (v) -> + @calibrate() + + mount: () -> + $(@root) + .css("position", "absolute") + @calibrate() + + calibrate: () -> + $(@root) + .css("width", @get("width") + "px") + .css("height", @get("height") + "px") + @observable.trigger "resize", { + id: @aid(), + data: { + w: @get("width"), + h: @get("height") + } + } + + layout: () -> + [{ + el: "div", ref: "yield" + }] +Ant.OS.GUI.define "afx-overlay", OverlayTag \ No newline at end of file diff --git a/src/core/tags/TabContainerTag.coffee b/src/core/tags/TabContainerTag.coffee index 14a16ab..990da7f 100644 --- a/src/core/tags/TabContainerTag.coffee +++ b/src/core/tags/TabContainerTag.coffee @@ -35,7 +35,7 @@ class TabContainerTag extends Ant.OS.GUI.BaseTag me = @ $(@children).each () -> item = {} - item.text = $(@).attr "title" if $(@).attr "title" + item.text = $(@).attr "tabname" if $(@).attr "tabname" item.icon = $(@).attr "icon" if $(@).attr "icon" item.iconclass = $(@).attr "iconclass" if $(@).attr "iconclass" item.container = @ diff --git a/src/core/tags/TreeViewTag.coffee b/src/core/tags/TreeViewTag.coffee index d1f786c..61aad83 100644 --- a/src/core/tags/TreeViewTag.coffee +++ b/src/core/tags/TreeViewTag.coffee @@ -2,7 +2,7 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag constructor: (r, o) -> super r, o @setopt "data", undefined - @setopt "nodes", [] + @setopt "nodes", undefined @setopt "treeroot", undefined @setopt "indent", 0 @setopt "toggle", false @@ -15,6 +15,7 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag __data__: (v) -> return unless v @set "nodes", v.nodes if v.nodes + @set "open", v.open __selected__: (v) -> $(@refs.wrapper).removeClass() @@ -22,13 +23,13 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag __open__: (v) -> me = @ + return unless @is_folder() $(@refs.toggle) .removeClass() - return unless @is_folder() if(v) if @get("fetch") - @get("fetch") @root, (d) -> - me.set "data", d + @get("fetch")(@root).then (d) -> + me.set "nodes", d $(@refs.childnodes).show() else $(@refs.childnodes).hide() @@ -50,11 +51,12 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag .css("width", v * 15 + "px" ) is_folder: () -> - return @get("nodes") and @get("nodes").length > 0 + if @get("nodes") then true else false __nodes__: (nodes) -> - return unless @get("nodes") and @get("nodes").length > 0 + return unless nodes + # return unless @get("nodes") and @get("nodes").length > 0 $(@refs.childnodes).empty() $(@refs.wrapper).addClass("afx_folder_item") root = @get("treeroot") @@ -66,6 +68,7 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag root.indexcounter++ el[0].set "itemindex", root.indexcounter el[0].set "treepath", "#{@get("treepath")}/#{el[0].aid()}" + el[0].set "fetch", @get("fetch") el[0].set "data", v @@ -90,6 +93,7 @@ class TreeViewItemPrototype extends Ant.OS.GUI.BaseTag $(@refs.toggle) .css "display", "inline-block" .css "width", "15px" + .addClass "afx-tree-view-item" .click (e) -> me.set "open", not me.get("open") e.preventDefault() @@ -144,6 +148,7 @@ class TreeViewTag extends Ant.OS.GUI.BaseTag @setopt "ontreeselect", () -> @setopt "ontreedbclick", () -> @setopt "selectedItem", undefined + @setopt "fetch", undefined @setopt "treepath", @aid() @indexcounter = 0 @@ -176,8 +181,9 @@ class TreeViewTag extends Ant.OS.GUI.BaseTag el[0].set "indent", @get("indent") el[0].set "itemindex", @get "itemindex" el[0].set "treepath", @get("treepath") - el[0].set "data", v el[0].set "open", @get("open") + el[0].set "fetch", @get("fetch") + el[0].set "data", v Ant.OS.GUI.define "afx-tree-view", TreeViewTag Ant.OS.GUI.define "afx-tree-view-item-proto", TreeViewItemPrototype diff --git a/src/core/tags/afx-apps-dock.tag b/src/core/tags/afx-apps-dock.tag index 698e9d0..93de406 100644 --- a/src/core/tags/afx-apps-dock.tag +++ b/src/core/tags/afx-apps-dock.tag @@ -60,7 +60,7 @@ window.OS.announcer.trigger("sysdockloaded") }) - self.root.contextmenuHandler = function(e, m) + self.root.contextmenuHandle = function(e, m) { if(e.target == self.root) return; var appidx = $(e.target).closest( "afx-button" ).attr("appindex") diff --git a/src/packages/ShowCase/coffees/main.coffee b/src/packages/ShowCase/coffees/main.coffee index 6676ace..59cb097 100644 --- a/src/packages/ShowCase/coffees/main.coffee +++ b/src/packages/ShowCase/coffees/main.coffee @@ -40,7 +40,7 @@ class ShowCase extends this.OS.GUI.BaseApplication - + @@ -64,15 +64,21 @@ class ShowCase extends this.OS.GUI.BaseApplication - + - + - + + + + + + + @@ -213,6 +219,32 @@ class ShowCase extends this.OS.GUI.BaseApplication pk = $ "[data-id='cpk']", scheme[0] pk[0].set "oncolorselect", (e) -> console.log e + pk[0].set "oncolorselect", (e) -> + console.log e + + fileview = $("[data-id='fileview']", scheme[0])[0] + fileview.set "fetch", (path) -> + new Promise (resolve, reject) -> + dir = path.asFileHandle() + dir.read (d) -> + p = dir.parent().asFileHandle() + p.filename = "[..]" + p.type = "dir" + return reject d.error if d.error + d.result.unshift p + resolve d.result + fileview.set "path", "home:///" + + viewoption = $("[data-id='viewoption']", scheme[0])[0] + viewoption.set "data", [ + { text: "icon" }, + { text: "list" }, + { text: "tree" } + ] + viewoption.set "onlistselect", (e) -> + console.log e.data.item.get("data").text + fileview.set "view", e.data.item.get("data").text + mnFile: () -> #console.log file diff --git a/src/themes/antos/afx-file-view.css b/src/themes/antos/afx-file-view.css index b0d2f38..ed0adaa 100644 --- a/src/themes/antos/afx-file-view.css +++ b/src/themes/antos/afx-file-view.css @@ -13,7 +13,7 @@ afx-file-view afx-label.status{ color:#414339; transform: translateZ(0); } -afx-file-view afx-list-view > div.list-container > ul > li{ +afx-file-view afx-list-view > div.list-container > ul li{ float:left; display: block; width:70px; @@ -24,7 +24,7 @@ afx-file-view afx-list-view > div.list-container > ul > li{ margin-right: 5px; margin-bottom: 5px; } -afx-file-view afx-list-view > div.list-container > ul > li:nth-child(odd){ +afx-file-view afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li { background-color: transparent; } afx-file-view afx-list-view i.dir:before{ @@ -52,7 +52,7 @@ afx-file-view afx-list-view i.file:before{ font-weight: normal; } -afx-file-view afx-list-view > div.list-container > ul > li.selected, afx-file-view afx-list-view div.list-container > ul li.selected i:before { +afx-file-view afx-list-view > div.list-container > ul > afx-list-item > li.selected, afx-file-view afx-list-view div.list-container > ul li.selected i:before { background-color: #116cd6; color:white; border-radius: 6px; @@ -83,10 +83,10 @@ afx-file-view afx-grid-view i{ afx-file-view afx-grid-view afx-grid-row.selected i:before{ color:white; } -afx-file-view afx-grid-view afx-grid-row.grid_row_header{ +afx-file-view afx-grid-view .grid_row_header{ background-color: #dfdfdf; } -afx-file-view afx-grid-view afx-grid-row.grid_row_header div{ +afx-file-view afx-grid-view .grid_row_header afx-grid-cell{ border-top: 1px solid #a6a6a6; border-right: 1px solid #a6a6a6; } @@ -101,18 +101,17 @@ afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ content: "\f07c"; font-family: "FontAwesome"; color:#76D2F9; - font-size: 16px; + font-size: 16px; } afx-file-view afx-tree-view{ margin:0; overflow: hidden; - display: inline-block; background-color: transparent; } afx-file-view afx-tree-view .afx_tree_item_odd{ background-color: transparent; } -afx-file-view afx-tree-view i.file:before{ +afx-file-view afx-tree-view .afx-tree-view-item:before{ content: "\f016"; font-family: "FontAwesome"; font-size: 16px; @@ -153,8 +152,4 @@ afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{ afx-file-view afx-tree-view .afx_folder_item{ font-weight: normal; -} - -afx-file-view afx-tree-view afx-tree-view{ - display: inline-block; -} +} \ No newline at end of file