From fe366938794735582ddc6566675dbc21cc008038 Mon Sep 17 00:00:00 2001 From: mrsang Date: Tue, 28 Apr 2020 15:59:18 +0200 Subject: [PATCH] calendar, color picker, tabcontainer --- Makefile | 6 +- src/core/tags/CalendarTag.coffee | 126 +++++++++++++++++- src/core/tags/ColorPickerTag.coffee | 117 ++++++++++++++++ src/core/tags/FileViewTag.coffee | 54 ++++++++ src/core/tags/FloatListTag.coffee | 17 +-- .../{GridView.coffee => GridViewTag.coffee} | 15 ++- ...ontainer.coffee => TabContainerTag.coffee} | 4 +- src/packages/ShowCase/coffees/main.coffee | 22 ++- src/themes/antos/afx-float-list.css | 3 +- 9 files changed, 335 insertions(+), 29 deletions(-) create mode 100644 src/core/tags/ColorPickerTag.coffee create mode 100644 src/core/tags/FileViewTag.coffee rename src/core/tags/{GridView.coffee => GridViewTag.coffee} (95%) rename src/core/tags/{TabContainer.coffee => TabContainerTag.coffee} (94%) diff --git a/Makefile b/Makefile index 5645eaa..d293645 100644 --- a/Makefile +++ b/Makefile @@ -35,12 +35,14 @@ coffees= src/core/core.coffee \ src/core/tags/SwitchTag.coffee \ src/core/tags/NSpinnerTag.coffee \ src/core/tags/MenuTag.coffee \ - src/core/tags/GridView.coffee \ + src/core/tags/GridViewTag.coffee \ src/core/tags/TabBarTag.coffee \ - src/core/tags/TabContainer.coffee \ + src/core/tags/TabContainerTag.coffee \ src/core/tags/TreeViewTag.coffee \ src/core/tags/SliderTag.coffee \ src/core/tags/FloatListTag.coffee \ + src/core/tags/CalendarTag.coffee \ + src/core/tags/ColorPickerTag.coffee \ src/antos.coffee diff --git a/src/core/tags/CalendarTag.coffee b/src/core/tags/CalendarTag.coffee index dbc18e8..4bbf768 100644 --- a/src/core/tags/CalendarTag.coffee +++ b/src/core/tags/CalendarTag.coffee @@ -1,14 +1,128 @@ class CalendarTag extends Ant.OS.GUI.BaseTag constructor: (r, o) -> super r, o - + @setopt "day", 0 + @setopt "ondateselect", () -> + @setopt "selectedDate", undefined + @day = 0 + @month = 0 + @year = 0 + + mount: () -> + me = @ + $(@root).css "height", "100%" + $(@refs.grid).css "width", "100%" + $(@refs.prev).click (e) -> me.prevmonth() + $(@refs.next).click (e) -> me.nextmonth() + @refs.grid.set "header", [ + { text: "__(Sun)" }, + { text: "__(Mon)" }, + { text: "__(Tue)" }, + { text: "__(Wed)" }, + { text: "__(Thu)" }, + { text: "__(Fri)" }, + { text: "__(Sat)" } + ] + @refs.grid.set "oncellselect", (e) -> + me.dateselect(e) + + @observable.on "resize", (e) -> me.calibrate() + @calibrate() + @calendar null + + dateselect: (e) -> + return unless e.data.item + value = e.data.item.get("data").text + return if value is "" + evt = { id: @aid() , data: new Date(@year, @month, value) } + @get("ondateselect") evt + @set "selectedDate", evt.data + @observable.trigger "dateselect", evt + + calibrate: () -> + $(@refs.grid) + .css "height", "#{$(@root).height() - $(@refs.ctrl).height()}px" + prevmonth: () -> + @set "selectedDate", undefined + @month-- + if @month < 0 + @month = 11 + @year-- + @calendar(new Date(@year, @month, 1)) + + nextmonth: () -> + @set "selectedDate", undefined + @month++ + if @month > 11 + @month = 0 + @year++ + @calendar(new Date(this.year, this.month, 1)) + + calendar: (date) -> + date = new Date() unless date + @day = date.getDate() + @month = date.getMonth() + @year = date.getFullYear() + + now = { + d: (new Date()).getDate(), + m: (new Date()).getMonth(), + y: (new Date()).getFullYear() + } + months = [ + __("January"), + __("February"), + __("March"), + __("April"), + __("May"), + __("June"), + __("July"), + __("August"), + __("September"), + __("October"), + __("November"), + __("December") + ] + this_month = new Date(@year, @month, 1) + next_month = new Date(@year, @month + 1, 1) + # Find out when this month starts and ends. + first_week_day = this_month.getDay() + days_in_this_month = Math.round( + (next_month.getTime() - this_month.getTime()) / (1000 * 60 * 60 * 24)) + #self.mtext = months[self.month] + rows = [] + row = [] + # Fill the first week of the month with the appropriate number of blanks. + row.push { text: "" } for week_day in [ 0..first_week_day - 1 ] + week_day = first_week_day + for day_counter in [ 1..days_in_this_month ] + week_day %= 7 + if week_day == 0 + rows.push(row) + row = [] + # Do something different for the current day. + if now.d is day_counter and @month is now.m and @year is now.y + row.push { text: day_counter, selected: true } + else + row.push { text: day_counter } + week_day++ + for i in [ 0..7 - row.length ] + row.push { text: "" } + rows.push(row) + console.log rows + @refs.grid.set "rows", rows + @refs.mlbl.set "text", "#{months[@month]} #{@year}" + + layout: () -> [{ - el: "div", children: [ + el: "div", ref: "ctrl", children: [ { el: "i", class: "prevmonth", ref: "prev" }, { el: "afx-label", ref: "mlbl" }, - { el: "afx-label", ref: "ylbl" }, - { el: "i", class: "nextmonth", ref: "next" }, - { el: "afx-grid-view", ref: "grid" } + { el: "i", class: "nextmonth", ref: "next" } ] - }] \ No newline at end of file + }, + { el: "afx-grid-view", ref: "grid" } + ] + +Ant.OS.GUI.define "afx-calendar-view", CalendarTag \ No newline at end of file diff --git a/src/core/tags/ColorPickerTag.coffee b/src/core/tags/ColorPickerTag.coffee new file mode 100644 index 0000000..059105a --- /dev/null +++ b/src/core/tags/ColorPickerTag.coffee @@ -0,0 +1,117 @@ +class ColorPickerTag extends Ant.OS.GUI.BaseTag + constructor: (r, o) -> + super r, o + @colorctx = undefined + @setopt "oncolorselect", (e) -> + @setopt "selectedColor", undefined + + mount: () -> + $(@refs.wrapper) + .css "width", "310px" + .css "height", "190px" + .css "display", "block" + .css "padding", "3px" + $(@refs.palette) + .css "width", "284px" + .css "height", "155px" + .css "float", "left" + $(@refs.colorval) + .css "width", "15px" + .css "height", "155px" + .css "text-align", "center" + .css "margin-left", "3px" + .css "display", "block" + .css "float", "left" + + $(@refs.inputwrp) + .css "margin-top", "3px" + + $(@refs.hextext) + .css "width", "70px" + .css "margin-left", "3px" + .css "margin-right", "5px" + + @build_palette() + + build_palette: () -> + me = @ + colorctx = $(@refs.palette).get(0).getContext('2d') + gradient = colorctx.createLinearGradient(0, 0, $(@refs.palette).width(), 0) + # fill color + gradient.addColorStop(0, "rgb(255, 0, 0)") + gradient.addColorStop(0.15, "rgb(255, 0, 255)") + gradient.addColorStop(0.33, "rgb(0, 0, 255)") + gradient.addColorStop(0.49, "rgb(0, 255, 255)") + gradient.addColorStop(0.67, "rgb(0, 255, 0)") + gradient.addColorStop(0.84, "rgb(255, 255, 0)") + gradient.addColorStop(1, "rgb(255, 0, 0)") + gradient.addColorStop(0, "rgb(0, 0, 0)") + # Apply gradient to canvas + colorctx.fillStyle = gradient + colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height) + + # Create semi transparent gradient (white -> trans. -> black) + gradient = colorctx.createLinearGradient(0, 0, 0, $(@refs.palette).width()) + gradient.addColorStop(0, "rgba(255, 255, 255, 1)") + gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)") + gradient.addColorStop(0.5, "rgba(0, 0, 0, 0)") + gradient.addColorStop(1, "rgba(0, 0, 0, 1)") + # Apply gradient to canvas + colorctx.fillStyle = gradient + colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height) + # now add mouse move event + getHex = (c) -> + s = c.toString(16) + s = "0" + s if s.length is 1 + s + + pick_color = (e) -> + $(me.refs.palette).css("cursor", "crosshair") + offset = $(me.refs.palette).offset() + x = e.pageX - offset.left + y = e.pageY - offset.top + color = colorctx.getImageData(x, y, 1, 1) + data = { + r: color.data[0], + g: color.data[1], + b: color.data[2], + text: 'rgb(' + color.data[0] + ', ' + color.data[1] + ', ' + color.data[2] + ')', + hex: '#' + getHex(color.data[0]) + getHex(color.data[1]) + getHex(color.data[2]) + } + data + + mouse_move_h = (e) -> + data = pick_color(e) + $(me.refs.colorval).css("background-color", data.text) + + $(me.refs.palette).mouseenter (e) -> + $(me.refs.palette).on("mousemove", mouse_move_h) + + $(me.refs.palette).mouseout (e) -> + $(me.refs.palette).unbind("mousemove", mouse_move_h) + if me.get "selectedColor" + $(me.refs.colorval).css("background-color", me.get("selectedColor").text) + + $(@refs.palette).on "click", (e) -> + data = pick_color(e) + $(me.refs.rgbtext).html(data.text) + $(me.refs.hextext).val(data.hex) + me.set "selectedColor", data + evt = { id: me.aid(), data: data } + me.get("oncolorselect") evt + me.observable.trigger "colorselect", data + + layout: () -> + [{ + el: "div", ref: "wrapper", children: [ + { el: "canvas", class: "color-palette", ref: "palette" }, + { el: "color-sample", ref: "colorval" }, + { el: "div", class: "afx-clear" }, + { el: "div", ref: "inputwrp", children: [ + { el: "input", ref: "hextext" }, + { el: "span", ref: "rgbtext" } + ] } + ] + }] + +Ant.OS.GUI.define "afx-color-picker", ColorPickerTag \ No newline at end of file diff --git a/src/core/tags/FileViewTag.coffee b/src/core/tags/FileViewTag.coffee new file mode 100644 index 0000000..474ed71 --- /dev/null +++ b/src/core/tags/FileViewTag.coffee @@ -0,0 +1,54 @@ +class FileViewTag extends Ant.OS.GUI.BaseTag + constructor: (r, o) -> + super r, o + @setopt "onfileselect", ()-> + @setopt "onfileopen", () -> + @setopt "selectedFile", undefined + @setopt "view", "list" + @setopt "data", [] + @setopt "path", "home:///" + @setopt "status", true + @setopt "showhidden", false + @setopt "fetch", undefined + @setopt "chdir", undefined + @preventUpdate = false + @header = [ + { text: "__(File name)" }, + { text: "__(Type)", width: 150 }, + { text: "__(Size)", width: 70 } + ] + + view: () -> @get "view" + + + sortByType: (a, b) -> + if a.type < b.type + -1 + else if a.type > b.type + 1 + else + 0 + + calibrate: () -> + h = $(@root).outerHeight() + w = $(@root).width() + h -= ($(@refs.status).height() + 10) if @get("status") + $(@refs.listview).css("height", h + "px") + $(@refs.gridview).css("height", h + "px") + $(@refs.treecontainer).css("height", h + "px") + $(@refs.listview).css("width", w + "px") + $(@refs.gridview).css("width", w + "px") + $(@refs.treecontainer).css("width", w + "px") + + switchView: () -> + + + layout: () -> + [ + { el: "afx-list-view", ref: "listview" }, + { el: "afx-grid-view", ref: "gridview" }, + { el: "div", class: "treecontainer", ref: "treecontainer", children: [ + { el: "afx-tree-view", ref: "treeview" } + ] }, + { el: "afx-label", class: "status", ref: "status" } + ] \ No newline at end of file diff --git a/src/core/tags/FloatListTag.coffee b/src/core/tags/FloatListTag.coffee index 7e7e19a..e4760f1 100644 --- a/src/core/tags/FloatListTag.coffee +++ b/src/core/tags/FloatListTag.coffee @@ -3,7 +3,7 @@ class FloatListTag extends ListViewTag super r, o me = @ @setopt "dir", "horizontal" - @root.refresh = () -> me.refresh() + @root.refresh = () -> me.calibrate() @root.push = (e) -> me.refs.mlist.push(e) @root.unshift = (e) -> me.refs.mlist.unshift(e) @root.remove = (e) -> me.refs.mlist.remove(e) @@ -15,11 +15,11 @@ class FloatListTag extends ListViewTag dropoff: (e) -> __data__: (v) -> super.__data__(v) - @refresh() + @calibrate() __dir__: (v) -> - @refresh() - calibrate: (e) -> @refresh() + @calibrate() mount: () -> + me = @ $(@refs.container) .css "width", "100%" .css "height", "100%" @@ -27,27 +27,28 @@ class FloatListTag extends ListViewTag .css "position", "absolute" .css "display", "block" .css "width", "100%" - + @observable.on "resize", (e) -> me.calibrate() push: (v) -> el = super.push(v) @enable_drag el el enable_drag: (el) -> - globalof = $(@refs.mlist).offset() + me = @ $(el) .css "user-select", "none" .css "cursor", "default" .css "display", "block" .css "position", "absolute" .on "mousedown", (evt) -> + globalof = $(me.refs.mlist).offset() evt.preventDefault() offset = $(el).offset() offset.top = evt.clientY - offset.top offset.left = evt.clientX - offset.left mouse_move = (e) -> top = e.clientY - offset.top - globalof.top - left = e.clientX - globalof.top - offset.left + left = e.clientX - globalof.left - offset.left left = if left < 0 then 0 else left top = if top < 0 then 0 else top $(el) @@ -60,7 +61,7 @@ class FloatListTag extends ListViewTag $(window).on "mousemove", mouse_move $(window).on "mouseup", mouse_up - refresh: () -> + calibrate: () -> ctop = 20 cleft = 20 $(@refs.mlist) diff --git a/src/core/tags/GridView.coffee b/src/core/tags/GridViewTag.coffee similarity index 95% rename from src/core/tags/GridView.coffee rename to src/core/tags/GridViewTag.coffee index 4bc3318..8e1ed7e 100644 --- a/src/core/tags/GridView.coffee +++ b/src/core/tags/GridViewTag.coffee @@ -5,7 +5,17 @@ class GridCellPrototype extends Ant.OS.GUI.BaseTag @setopt "oncellselect", (e) -> @setopt "oncelldbclick", (e) -> @setopt "data", {} + @setopt "selected", false + __data__: (v) -> + return unless v.selected + @set "selected", v.selected + delete v.selected + + __selected__: (v) -> + return unless v + @cellseleck {}, false + mount: () -> me = @ $(@root).css "display", "block" @@ -32,7 +42,7 @@ class SimpleGridCell extends GridCellPrototype __header__: (v) -> - __data__: (d) -> + __data: (d) -> @refs.cell.set k, v for k, v of d layout: () -> @@ -76,10 +86,10 @@ class GridViewTag extends Ant.OS.GUI.BaseTag for cell in row el = $("<#{@get("cellitem")}>").appendTo div el[0].uify undefined - el[0].set "data", cell cell.domel = el[0] el[0].set "oncellselect", (e) -> me.cellselect e, false el[0].set "oncelldbclick", (e) -> me.cellselect e, true + el[0].set "data", cell multiselect: () -> @get "multiselect" @@ -172,6 +182,7 @@ class GridViewTag extends Ant.OS.GUI.BaseTag .css "width", "100%" .css "overflow-x", "hidden" .css "overflow-y", "auto" + @calibrate() layout: () -> [ diff --git a/src/core/tags/TabContainer.coffee b/src/core/tags/TabContainerTag.coffee similarity index 94% rename from src/core/tags/TabContainer.coffee rename to src/core/tags/TabContainerTag.coffee index d5b9465..14a16ab 100644 --- a/src/core/tags/TabContainer.coffee +++ b/src/core/tags/TabContainerTag.coffee @@ -1,4 +1,4 @@ -class TabContainer extends Ant.OS.GUI.BaseTag +class TabContainerTag extends Ant.OS.GUI.BaseTag constructor: (r, o) -> super r, o @setopt "dir", "column" # or row @@ -58,4 +58,4 @@ class TabContainer extends Ant.OS.GUI.BaseTag ] }] -Ant.OS.GUI.define "afx-tab-container", TabContainer \ No newline at end of file +Ant.OS.GUI.define "afx-tab-container", TabContainerTag \ No newline at end of file diff --git a/src/packages/ShowCase/coffees/main.coffee b/src/packages/ShowCase/coffees/main.coffee index 849f11d..6676ace 100644 --- a/src/packages/ShowCase/coffees/main.coffee +++ b/src/packages/ShowCase/coffees/main.coffee @@ -60,19 +60,19 @@ class ShowCase extends this.OS.GUI.BaseApplication - + - -
box 3
-
box 4
- - - + + + + + + @@ -206,6 +206,14 @@ class ShowCase extends this.OS.GUI.BaseApplication { text: "Data.doc", iconclass: "fa fa-camera-retro fa-lg" } ] + cal = $ "[data-id='cal']", scheme[0] + cal[0].set "ondateselect", (e) -> + console.log e + + pk = $ "[data-id='cpk']", scheme[0] + pk[0].set "oncolorselect", (e) -> + console.log e + mnFile: () -> #console.log file me = @ diff --git a/src/themes/antos/afx-float-list.css b/src/themes/antos/afx-float-list.css index c03ceda..d15c00d 100644 --- a/src/themes/antos/afx-float-list.css +++ b/src/themes/antos/afx-float-list.css @@ -5,10 +5,9 @@ afx-float-list1 div.list-container > ul{ background-color: transparent; } - afx-float-list1 div.list-container > ul li{ padding: 0; + margin: 0; background-color: transparent; list-style: none; - max-width: 100px; } \ No newline at end of file