From f1b94435c5f1e79679f19c6aae503106c2348593 Mon Sep 17 00:00:00 2001 From: Xuan Sang LE Date: Fri, 14 Sep 2018 19:35:01 +0200 Subject: [PATCH] new feature in OpenPage --- OpenPage/assets/scheme.html | 13 +- OpenPage/build/debug/main.css | 42 +++- OpenPage/build/debug/main.js | 321 +++++++++++++++++++++++++++++-- OpenPage/build/debug/scheme.html | 13 +- OpenPage/coffees/dialogs.coffee | 228 +++++++++++++++++++++- OpenPage/coffees/main.coffee | 74 ++++++- OpenPage/css/dialog.css | 31 +++ OpenPage/css/main.css | 11 +- OpenPage/project.apj | 2 +- 9 files changed, 704 insertions(+), 31 deletions(-) create mode 100644 OpenPage/css/dialog.css diff --git a/OpenPage/assets/scheme.html b/OpenPage/assets/scheme.html index b8deaa3..3f16689 100644 --- a/OpenPage/assets/scheme.html +++ b/OpenPage/assets/scheme.html @@ -19,7 +19,8 @@ - + +
@@ -30,6 +31,16 @@
+
+ +
+ +
+ +
+ + + diff --git a/OpenPage/build/debug/main.css b/OpenPage/build/debug/main.css index 77073ce..5340c8d 100644 --- a/OpenPage/build/debug/main.css +++ b/OpenPage/build/debug/main.css @@ -23,21 +23,55 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] border: 1px solid #eaeaea; box-shadow: 3px 3px 3px #9f9F9F; } -afx-app-window[data-id="HyperLinkDialog"] afx-label.header span +afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"] { - font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #eaeaea; + box-shadow: -3px -3px 3px #9f9F9F; } -afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button{ +afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button +{ border: 1px solid #f5f5f5; background-color: transparent; width:100%; height: 100%; } -afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive +afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover { border: 1px solid #759DC0; background-color: transparent; border-radius:5px; color:#759DC0; +} +afx-app-window[data-id="HyperLinkDialog"] afx-label.header span +{ + font-weight: bold; +} +afx-app-window[data-id="FormatDialog"] afx-label.header +{ + padding-left: 5px; + border-bottom: 1px solid #a6a6a6; +} +afx-app-window[data-id="FormatDialog"] afx-label.header span +{ + font-weight: bold; +} +afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span, +afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span, +afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span +{ + display: block; + padding-top: 7px; +} + +afx-app-window[data-id="FormatDialog"] div[data-id="preview"] +{ + border: 1px solid #a6a6a6; +} +afx-app-window[data-id="FormatDialog"] div[data-id="txtcolor"], +afx-app-window[data-id="FormatDialog"] div[data-id="bgcolor"] +{ + border:1px solid #a6a6a6; + display: block; } \ No newline at end of file diff --git a/OpenPage/build/debug/main.js b/OpenPage/build/debug/main.js index f21837b..76dbf10 100644 --- a/OpenPage/build/debug/main.js +++ b/OpenPage/build/debug/main.js @@ -1,5 +1,5 @@ (function() { - var HyperLinkDialog, OpenPage; + var FormatDialog, HyperLinkDialog, OpenPage; OpenPage = class OpenPage extends this.OS.GUI.BaseApplication { constructor(args) { @@ -13,14 +13,20 @@ return OpenPage.EditorSession = ES; }); } + this.userid = this.systemsetting.user.username; this.eventSubscriptions = new core.EventSubscriptions(); this.initToolbox(); this.initCanvas(); - return this.canvas.load(`${this._api.handler.get}/home://welcome.odt`); + this.canvas.load(`${this._api.handler.get}/home://welcome.odt`); + this.currentStyle = ""; + return this.resource = { + fonts: [], + formats: [] + }; } initToolbox() { - var el, fn, me, name, ref, results; + var el, fn, me, name, ref; me = this; this.basictool = { undo: this.find("btundo"), @@ -40,13 +46,16 @@ indent: this.find("btindent"), outdent: this.find("btoutdent"), fonts: this.find("font-list"), - fontsize: this.find("font-size") + fontsize: this.find("font-size"), + styles: this.find("format-list"), + zoom: this.find("slzoom"), + format: this.find("btformat") }; fn = function(name, el) { var act; - if (name === "fonts") { + if (name === "fonts" || name === "styles") { act = "onlistselect"; - } else if (name === "fontsize") { + } else if (name === "fontsize" || name === "zoom") { act = "onchange"; } else { act = "onbtclick"; @@ -63,12 +72,18 @@ }); }; ref = this.basictool; - results = []; for (name in ref) { el = ref[name]; - results.push(fn(name, el)); + fn(name, el); } - return results; + (this.find("btzoomfix")).set("onbtclick", function(e) { + return me.zoom(100); + }); + return this.basictool.zoom.set("onchanging", function(e) { + var zlb; + zlb = me.find("lbzoom"); + return zlb.set("text", Math.floor(e) + "%"); + }); } initCanvas() { @@ -77,7 +92,6 @@ me = this; el.setAttribute("translate", "no"); el.classList.add("notranslate"); - this.userid = "localuser"; this.canvas = new odf.OdfCanvas(el); this.documentChanged = function(e) {}; //console.log e @@ -86,6 +100,29 @@ this.textStylingChanged = function(e) { return me.updateToolbar(e); }; + this.paragrahStyleChanged = function(e) { + var i, item, items, j, len, v; + if (e.type !== "style") { + return; + } + items = me.basictool.styles.get("items"); + for (i = j = 0, len = items.length; j < len; i = ++j) { + v = items[i]; + if (v.name === e.styleName) { + item = i; + } + } + me.currentStyle = e.styleName; + return me.basictool.styles.set("selected", item); + }; + this.updateSlider = function(v) { + var value, zlb; + value = Math.floor(v * 100); + me.basictool.zoom.set("value", value); + zlb = me.find("lbzoom"); + return zlb.set("text", value + "%"); + }; + //@canvas.enableAnnotations(true, true) return this.canvas.addListener("statereadychange", function() { var op, viewOptions; @@ -111,6 +148,8 @@ me.directFormattingCtl = me.editorSession.sessionController.getDirectFormattingController(); me.directFormattingCtl.subscribe(gui.DirectFormattingController.textStylingChanged, me.textStylingChanged); me.directFormattingCtl.subscribe(gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged); + me.editorSession.subscribe(OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged); + // hyper link controller me.hyperlinkController = me.editorSession.sessionController.getHyperlinkController(); me.eventSubscriptions.addFrameSubscription(me.editorSession, OpenPage.EditorSession.signalCursorMoved, function() { @@ -129,6 +168,11 @@ //text controller me.textController = me.editorSession.sessionController.getTextController(); + + // zoom controller + me.zoomHelper = me.editorSession.getOdfCanvas().getZoomHelper(); + me.zoomHelper.subscribe(gui.ZoomHelper.signalZoomChanged, me.updateSlider); + me.updateSlider(me.zoomHelper.getZoomLevel()); me.editorSession.sessionController.setUndoManager(new gui.TrivialUndoManager()); me.editorSession.sessionController.getUndoManager().subscribe(gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged); me.editorSession.sessionController.getMetadataController().subscribe(gui.MetadataController.signalMetadataChanged, me.metaChanged); @@ -136,12 +180,13 @@ op.init({ memberid: me.userid, setProperties: { - "fullName": "Xuan Sang LE", + "fullName": me.userid, "color": "blue" } }); me.session.enqueue([op]); me.initFontList(me.editorSession.getDeclaredFonts()); + me.initStyles(me.editorSession.getAvailableParagraphStyles()); me.editorSession.sessionController.insertLocalCursor(); return me.editorSession.sessionController.startEditing(); }); @@ -150,14 +195,38 @@ //console.log me.editorSession.getDeclaredFonts() initFontList(list) { - var j, len, v; + var j, l, len, len1, v; for (j = 0, len = list.length; j < len; j++) { v = list[j]; v.text = v.name; } + for (l = 0, len1 = list.length; l < len1; l++) { + v = list[l]; + this.resource.fonts.push({ + text: v.text, + name: v.family + }); + } return this.basictool.fonts.set("items", list); } + initStyles(list) { + var j, l, len, len1, v; + for (j = 0, len = list.length; j < len; j++) { + v = list[j]; + v.text = v.displayName; + } + for (l = 0, len1 = list.length; l < len1; l++) { + v = list[l]; + this.resource.formats.push({ + text: v.text, + name: v.name, + el: this.editorSession.getParagraphStyleElement(v.name) + }); + } + return this.basictool.styles.set("items", list); + } + updateToolbar(changes) { if (changes.hasOwnProperty('isBold')) { // basic style @@ -363,6 +432,24 @@ }); } + styles(e) { + if (e.data.name === this.currentStyle) { + return; + } + return this.editorSession.setCurrentParagraphStyle(e.data.name); + } + + zoom(e) { + //console.log "zooming", e + return this.zoomHelper.setZoomLevel(e / 100.0); + } + + format(e) { + return this.openDialog(new FormatDialog(), function(d) { + return console.log(d); + }, __("Add/Modify paragraph format"), this.resource); + } + closeDocument() { var me, op; // finish editing @@ -388,6 +475,8 @@ me.editorSession.sessionController.getUndoManager().unsubscribe(gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged); me.directFormattingCtl.unsubscribe(gui.DirectFormattingController.textStylingChanged, me.textStylingChanged); me.directFormattingCtl.unsubscribe(gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged); + me.editorSession.unsubscribe(OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged); + me.zoomHelper.unsubscribe(gui.ZoomHelper.signalZoomChanged, me.updateSlider); // destry editorSession return me.editorSession.destroy(function(e) { if (e) { @@ -408,7 +497,13 @@ me.session = void 0; me.directFormattingCtl = void 0; me.textController = void 0; - return me.imageController = void 0; + me.imageController = void 0; + me.ZoomHelper = void 0; + me.metaChanged = void 0; + me.documentChanged = void 0; + me.textStylingChanged = void 0; + me.paragrahStyleChanged = void 0; + return me.updateSlider = void 0; }); }); }); @@ -488,6 +583,206 @@ }; + FormatDialog = class FormatDialog extends this.OS.GUI.BaseDialog { + constructor() { + super("FormatDialog"); + } + + init() { + return this._gui.htmlToScheme(FormatDialog.scheme, this, this.host); + } + + main() { + this.ui = { + aligment: { + left: this.find("swleft"), + right: this.find("swright"), + center: this.find("swcenter"), + justify: this.find("swjustify") + }, + spacing: { + left: this.find("spnleft"), + right: this.find("spnright"), + top: this.find("spntop"), + bottom: this.find("spnbottom") + }, + style: { + bold: this.find("swbold"), + italic: this.find("switalic"), + underline: this.find("swunderline"), + color: this.find("txtcolor"), + bgcolor: this.find("bgcolor") + }, + font: { + family: this.find("lstfont"), + size: this.find("spnfsize") + }, + formats: this.find("lstformats") + }; + // init the format object + this.currentStyle = { + aligment: this._api.switcher("left", "right", "center", "justify"), + spacing: { + left: 0, + top: 0, + right: 0, + bottom: 0 + }, + style: { + bold: false, + italic: false, + underline: false, + color: void 0, + bgcolor: void 0 + }, + font: { + family: void 0, + size: 12 + } + }; + this.preview = ($(this.find("preview")).find("p"))[0]; + $(this.preview).css("padding", "0").css("margin", "0"); + this.initUIEvent(); + return this.previewStyle(); + } + + initUIEvent() { + var k, me, ref, ref1, ref2, set, v; + me = this; + set = function(e, o, k, f) { + return me.ui[o][k].set(e, function(r) { + var v; + v = r; + if (f) { + v = f(r); + } + me.currentStyle[o][k] = v; + return me.previewStyle(); + }); + }; + ref = this.ui.aligment; + for (k in ref) { + v = ref[k]; + set("onchange", "aligment", k, (function(e) { + return e.data; + })); + } + ref1 = this.ui.spacing; + for (k in ref1) { + v = ref1[k]; + set("onchange", "spacing", k); + } + ref2 = this.ui.style; + for (k in ref2) { + v = ref2[k]; + if (k !== "color" && k !== "bgcolor") { + set("onchange", "style", k, (function(e) { + return e.data; + })); + } + } + set("onchange", "font", "size"); + $(this.ui.style.color).click(function(e) { + return me.openDialog("ColorPickerDialog", function(d) { + me.currentStyle.style.color = d; + return me.previewStyle(); + }); + }); + $(this.ui.style.bgcolor).click(function(e) { + return me.openDialog("ColorPickerDialog", function(d) { + me.currentStyle.style.bgcolor = d; + return me.previewStyle(); + }); + }); + if (this.data && this.data.fonts) { + //font + this.ui.font.family.set("items", this.data.fonts); + } + set("onlistselect", "font", "family", (function(e) { + return e.data; + })); + //format list + this.ui.formats.set("selected", -1); + if (this.data && this.data.formats) { + this.ui.formats.set("items", this.data.formats); + } + this.ui.formats.set("onlistselect", function(e) { + return me.fromODFStyleFormat(e.data); + }); + return this.ui.formats.set("selected", 0); + } + + //@currentStyle = + fromODFStyleFormat(odfs) { + console.log("change style"); + return console.log(odfs); + } + + previewStyle() { + var el, i, item, items, j, len, v; + console.log("previewing"); + // reset ui + this.ui.aligment.left.set("swon", this.currentStyle.aligment.left); + this.ui.aligment.right.set("swon", this.currentStyle.aligment.right); + this.ui.aligment.center.set("swon", this.currentStyle.aligment.center); + this.ui.aligment.justify.set("swon", this.currentStyle.aligment.justify); + this.ui.spacing.left.set("value", this.currentStyle.spacing.left); + this.ui.spacing.right.set("value", this.currentStyle.spacing.right); + this.ui.spacing.top.set("value", this.currentStyle.spacing.top); + this.ui.spacing.bottom.set("value", this.currentStyle.spacing.bottom); + this.ui.style.bold.set("swon", this.currentStyle.style.bold); + this.ui.style.italic.set("swon", this.currentStyle.style.italic); + this.ui.style.underline.set("swon", this.currentStyle.style.underline); + this.ui.font.size.set("value", this.currentStyle.font.size); + items = this.ui.font.family.get("items"); + for (i = j = 0, len = items.length; j < len; i = ++j) { + v = items[i]; + if (v.name === name) { + item = i; + } + } + if (item >= 0) { + this.ui.font.family.set("selected", item); + } + if (this.currentStyle.style.color) { + $(this.ui.style.color).css("background-color", this.currentStyle.style.color.hex); + } + if (this.currentStyle.style.bgcolor) { + $(this.ui.style.bgcolor).css("background-color", this.currentStyle.style.bgcolor.hex); + } + // set the preview css + el = $(this.preview); + el.css("text-align", this.currentStyle.aligment.selected); + el.css("padding-left", this.currentStyle.spacing.left + "mm"); + el.css("padding-right", this.currentStyle.spacing.right + "mm"); + el.css("padding-top", this.currentStyle.spacing.top + "mm"); + el.css("padding-bottom", this.currentStyle.spacing.bottom + "mm"); + el.css("font-weight", "normal").css("font-style", "normal").css("text-decoration", "none"); + if (this.currentStyle.style.bold) { + el.css("font-weight", "bold"); + } + if (this.currentStyle.style.italic) { + el.css("font-style", "italic"); + } + if (this.currentStyle.style.underline) { + el.css("text-decoration", "underline"); + } + if (this.currentStyle.style.color) { + el.css("color", this.currentStyle.style.color.hex); + } + if (this.currentStyle.style.bgcolor) { + el.css("background-color", this.currentStyle.style.bgcolor.hex); + } + el.css("font-size", this.currentStyle.font.size + "pt"); + if (this.currentStyle.font.family) { + return el.css("font-family", this.currentStyle.font.family.name); + } + } + + }; + + FormatDialog.scheme = "\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet diam vestibulum massa malesuada quis dignissim libero blandit. Duis sit amet volutpat nisl.

\n
\n
\n \n \n
\n \n
\n \n
\n \n \n
\n \n"; + }).call(this); /* diff --git a/OpenPage/build/debug/scheme.html b/OpenPage/build/debug/scheme.html index b8deaa3..3f16689 100644 --- a/OpenPage/build/debug/scheme.html +++ b/OpenPage/build/debug/scheme.html @@ -19,7 +19,8 @@ - + +
@@ -30,6 +31,16 @@
+
+ +
+ +
+ +
+ + + diff --git a/OpenPage/coffees/dialogs.coffee b/OpenPage/coffees/dialogs.coffee index f842605..164bf1a 100644 --- a/OpenPage/coffees/dialogs.coffee +++ b/OpenPage/coffees/dialogs.coffee @@ -29,4 +29,230 @@ class HyperLinkDialog extends this.OS.GUI.BasicDialog (d.find "content1").value = d.data.text (d.find "content3").value = d.data.link $(d.find "content1").prop('disabled', d.data.readonly) - } \ No newline at end of file + } + +class FormatDialog extends this.OS.GUI.BaseDialog + constructor: () -> + super "FormatDialog" + init: () -> + @_gui.htmlToScheme FormatDialog.scheme, @, @host + + main: () -> + @ui = + aligment: + left:@find("swleft"), + right:@find("swright"), + center:@find("swcenter"), + justify:@find("swjustify") + spacing: + left: @find("spnleft"), + right: @find("spnright"), + top: @find("spntop"), + bottom: @find("spnbottom"), + style: + bold: @find("swbold"), + italic: @find("switalic"), + underline: @find("swunderline"), + color: @find("txtcolor"), + bgcolor: @find("bgcolor") + font: + family: @find("lstfont"), + size: @find("spnfsize") + formats: @find("lstformats") + # init the format object + @currentStyle = + aligment: @_api.switcher("left", "right", "center", "justify"), + spacing: + left:0 + top:0, + right:0, + bottom:0 + style: + bold:false, + italic: false, + underline: false, + color: undefined, + bgcolor: undefined + font: + family: undefined, + size: 12 + @preview = ($(@find "preview").find "p")[0] + $(@preview) + .css "padding", "0" + .css "margin", "0" + @initUIEvent() + @previewStyle() + + initUIEvent: () -> + me = @ + set = (e, o, k ,f) -> + me.ui[o][k].set e, (r) -> + v = r + v = f r if f + me.currentStyle[o][k] = v + me.previewStyle() + + for k,v of @ui.aligment + set "onchange", "aligment", k, ((e) -> e.data) + for k,v of @ui.spacing + set "onchange", "spacing", k + for k,v of @ui.style + set "onchange", "style", k, ((e) -> e.data) if k isnt "color" and k isnt "bgcolor" + set "onchange", "font", "size" + $(@ui.style.color).click (e) -> + me.openDialog "ColorPickerDialog", (d) -> + me.currentStyle.style.color = d + me.previewStyle() + $(@ui.style.bgcolor).click (e) -> + me.openDialog "ColorPickerDialog", (d) -> + me.currentStyle.style.bgcolor = d + me.previewStyle() + #font + @ui.font.family.set "items", @data.fonts if @data and @data.fonts + set "onlistselect", "font", "family", ( (e) -> e.data) + #format list + @ui.formats.set "selected", -1 + @ui.formats.set "items", @data.formats if @data and @data.formats + @ui.formats.set "onlistselect", (e) -> + me.fromODFStyleFormat e.data + @ui.formats.set "selected", 0 + #@currentStyle = + + fromODFStyleFormat: (odfs) -> + console.log "change style" + console.log odfs + + previewStyle: () -> + console.log "previewing" + # reset ui + @ui.aligment.left.set "swon", @currentStyle.aligment.left + @ui.aligment.right.set "swon", @currentStyle.aligment.right + @ui.aligment.center.set "swon", @currentStyle.aligment.center + @ui.aligment.justify.set "swon", @currentStyle.aligment.justify + @ui.spacing.left.set "value", @currentStyle.spacing.left + @ui.spacing.right.set "value", @currentStyle.spacing.right + @ui.spacing.top.set "value", @currentStyle.spacing.top + @ui.spacing.bottom.set "value", @currentStyle.spacing.bottom + @ui.style.bold.set "swon", @currentStyle.style.bold + @ui.style.italic.set "swon", @currentStyle.style.italic + @ui.style.underline.set "swon", @currentStyle.style.underline + @ui.font.size.set "value", @currentStyle.font.size + + items = @ui.font.family.get "items" + item = i for v, i in items when v.name is name + @ui.font.family.set "selected", item if item >= 0 + + $(@ui.style.color).css "background-color", @currentStyle.style.color.hex if @currentStyle.style.color + $(@ui.style.bgcolor).css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor + # set the preview css + el = $ @preview + el.css "text-align", @currentStyle.aligment.selected + el.css "padding-left", @currentStyle.spacing.left + "mm" + el.css "padding-right", @currentStyle.spacing.right + "mm" + el.css "padding-top", @currentStyle.spacing.top + "mm" + el.css "padding-bottom", @currentStyle.spacing.bottom + "mm" + el + .css "font-weight", "normal" + .css "font-style", "normal" + .css "text-decoration", "none" + el.css "font-weight", "bold" if @currentStyle.style.bold + el.css "font-style", "italic" if @currentStyle.style.italic + el.css "text-decoration", "underline" if @currentStyle.style.underline + el.css "color", @currentStyle.style.color.hex if @currentStyle.style.color + el.css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor + el.css "font-size", @currentStyle.font.size + "pt" + el.css "font-family", @currentStyle.font.family.name if @currentStyle.font.family + +FormatDialog.scheme = """ + + +
+ +
+ +
+ +
+ + + +
+ + + + + + + + +
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ + +
+ +
+ +
+ +
+ + + + + + + +
+
+ +
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet diam vestibulum massa malesuada quis dignissim libero blandit. Duis sit amet volutpat nisl.

+
+
+ + +
+ +
+ +
+ + +
+ + +""" \ No newline at end of file diff --git a/OpenPage/coffees/main.coffee b/OpenPage/coffees/main.coffee index 70cbf75..0618e9d 100644 --- a/OpenPage/coffees/main.coffee +++ b/OpenPage/coffees/main.coffee @@ -7,11 +7,16 @@ class OpenPage extends this.OS.GUI.BaseApplication if not OpenPage.EditorSession require ["webodf/editor/EditorSession"], (ES) -> OpenPage.EditorSession = ES + @userid = @systemsetting.user.username @eventSubscriptions = new core.EventSubscriptions() @initToolbox() @initCanvas() @canvas.load "#{@_api.handler.get}/home://welcome.odt" - + @currentStyle = "" + @resource = + fonts: [] + formats: [] + initToolbox: () -> me = @ @basictool = @@ -32,11 +37,15 @@ class OpenPage extends this.OS.GUI.BaseApplication indent: @find("btindent"), outdent: @find("btoutdent"), fonts: @find("font-list"), - fontsize: @find("font-size") + fontsize: @find("font-size"), + styles: @find("format-list"), + zoom: @find("slzoom") + format: @find("btformat") + fn = (name, el) -> - if name is "fonts" + if name is "fonts" or name is "styles" act = "onlistselect" - else if name is "fontsize" + else if name is "fontsize" or name is "zoom" act = "onchange" else act = "onbtclick" @@ -48,12 +57,16 @@ class OpenPage extends this.OS.GUI.BaseApplication for name, el of @basictool fn name, el + (@find "btzoomfix").set "onbtclick", (e) -> me.zoom 100 + @basictool.zoom.set "onchanging", (e) -> + zlb = me.find "lbzoom" + zlb.set "text", Math.floor(e) + "%" + initCanvas: () -> el = @find "odfcanvas" me = @ el.setAttribute "translate", "no" el.classList.add "notranslate" - @userid = "localuser" @canvas = new odf.OdfCanvas(el) @documentChanged = (e) -> #console.log e @@ -61,6 +74,19 @@ class OpenPage extends this.OS.GUI.BaseApplication #console.log e @textStylingChanged = (e) -> me.updateToolbar e + @paragrahStyleChanged = (e) -> + return unless e.type is "style" + items = me.basictool.styles.get "items" + item = i for v, i in items when v.name is e.styleName + me.currentStyle = e.styleName + me.basictool.styles.set "selected", item + + @updateSlider = (v) -> + value = Math.floor v*100 + me.basictool.zoom.set "value", value + zlb = me.find "lbzoom" + zlb.set "text", value+"%" + #@canvas.enableAnnotations(true, true) @canvas.addListener "statereadychange", ()-> me.session = new ops.Session(me.canvas) @@ -85,12 +111,15 @@ class OpenPage extends this.OS.GUI.BaseApplication me.directFormattingCtl = me.editorSession.sessionController.getDirectFormattingController() me.directFormattingCtl.subscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged me.directFormattingCtl.subscribe gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged + me.editorSession.subscribe OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged + # hyper link controller me.hyperlinkController = me.editorSession.sessionController.getHyperlinkController() me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalCursorMoved, ()-> me.updateHyperlinkButtons() me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphChanged, ()-> me.updateHyperlinkButtons() me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphStyleModified, ()-> me.updateHyperlinkButtons() + #image controller me.imageController = me.editorSession.sessionController.getImageController() #imageController.subscribe(gui.ImageController.enabledChanged, enableButtons) @@ -98,6 +127,11 @@ class OpenPage extends this.OS.GUI.BaseApplication #text controller me.textController = me.editorSession.sessionController.getTextController() + # zoom controller + me.zoomHelper = me.editorSession.getOdfCanvas().getZoomHelper() + me.zoomHelper.subscribe gui.ZoomHelper.signalZoomChanged, me.updateSlider + me.updateSlider me.zoomHelper.getZoomLevel() + me.editorSession.sessionController.setUndoManager new gui.TrivialUndoManager() me.editorSession.sessionController.getUndoManager().subscribe gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged me.editorSession.sessionController.getMetadataController().subscribe gui.MetadataController.signalMetadataChanged, me.metaChanged @@ -105,12 +139,13 @@ class OpenPage extends this.OS.GUI.BaseApplication op.init { memberid: me.userid, setProperties:{ - "fullName": "Xuan Sang LE", + "fullName": me.userid, "color": "blue" } } me.session.enqueue([op]) me.initFontList me.editorSession.getDeclaredFonts() + me.initStyles me.editorSession.getAvailableParagraphStyles() me.editorSession.sessionController.insertLocalCursor() me.editorSession.sessionController.startEditing() #console.log me.editorSession.getDeclaredFonts() @@ -118,8 +153,14 @@ class OpenPage extends this.OS.GUI.BaseApplication initFontList: (list) -> v.text = v.name for v in list + @resource.fonts.push { text: v.text, name: v.family } for v in list @basictool.fonts.set "items", list + initStyles: (list) -> + v.text = v.displayName for v in list + @resource.formats.push { text: v.text, name: v.name, el: @editorSession.getParagraphStyleElement(v.name) } for v in list + @basictool.styles.set "items", list + updateToolbar: (changes) -> # basic style (@basictool.bold.set "selected", changes.isBold) if changes.hasOwnProperty 'isBold' @@ -259,6 +300,19 @@ class OpenPage extends this.OS.GUI.BaseApplication , "binary" , __("Select image file"), { mimes: ["image/.*"] } + styles: (e) -> + return if e.data.name is @currentStyle + @editorSession.setCurrentParagraphStyle e.data.name + + zoom: (e) -> + #console.log "zooming", e + @zoomHelper.setZoomLevel e/100.0 + + format: (e) -> + @openDialog new FormatDialog(), (d) -> + console.log d + , __("Add/Modify paragraph format"), @resource + closeDocument: () -> # finish editing return unless @editorSession and @session @@ -279,6 +333,8 @@ class OpenPage extends this.OS.GUI.BaseApplication me.editorSession.sessionController.getUndoManager().unsubscribe gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged me.directFormattingCtl.unsubscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged me.directFormattingCtl.unsubscribe gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged + me.editorSession.unsubscribe OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged + me.zoomHelper.unsubscribe gui.ZoomHelper.signalZoomChanged, me.updateSlider # destry editorSession me.editorSession.destroy (e) -> return me.error __("Cannot destroy editor session {0}", e) if e @@ -293,6 +349,12 @@ class OpenPage extends this.OS.GUI.BaseApplication me.directFormattingCtl = undefined me.textController = undefined me.imageController = undefined + me.ZoomHelper = undefined + me.metaChanged = undefined + me.documentChanged = undefined + me.textStylingChanged = undefined + me.paragrahStyleChanged = undefined + me.updateSlider = undefined # diff --git a/OpenPage/css/dialog.css b/OpenPage/css/dialog.css new file mode 100644 index 0000000..2ebc292 --- /dev/null +++ b/OpenPage/css/dialog.css @@ -0,0 +1,31 @@ +afx-app-window[data-id="HyperLinkDialog"] afx-label.header span +{ + font-weight: bold; +} +afx-app-window[data-id="FormatDialog"] afx-label.header +{ + padding-left: 5px; + border-bottom: 1px solid #a6a6a6; +} +afx-app-window[data-id="FormatDialog"] afx-label.header span +{ + font-weight: bold; +} +afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span, +afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span, +afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span +{ + display: block; + padding-top: 7px; +} + +afx-app-window[data-id="FormatDialog"] div[data-id="preview"] +{ + border: 1px solid #a6a6a6; +} +afx-app-window[data-id="FormatDialog"] div[data-id="txtcolor"], +afx-app-window[data-id="FormatDialog"] div[data-id="bgcolor"] +{ + border:1px solid #a6a6a6; + display: block; +} \ No newline at end of file diff --git a/OpenPage/css/main.css b/OpenPage/css/main.css index bbb69d4..0946369 100644 --- a/OpenPage/css/main.css +++ b/OpenPage/css/main.css @@ -22,18 +22,21 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] border: 1px solid #eaeaea; box-shadow: 3px 3px 3px #9f9F9F; } -afx-app-window[data-id="HyperLinkDialog"] afx-label.header span +afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"] { - font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #eaeaea; + box-shadow: -3px -3px 3px #9f9F9F; } -afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button{ +afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button +{ border: 1px solid #f5f5f5; background-color: transparent; width:100%; height: 100%; } -afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive +afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover { border: 1px solid #759DC0; background-color: transparent; diff --git a/OpenPage/project.apj b/OpenPage/project.apj index dd58840..55c2ed8 100644 --- a/OpenPage/project.apj +++ b/OpenPage/project.apj @@ -1 +1 @@ -{"name":"OpenPage","root":"home://myws/antosdk-apps/OpenPage","css":["css/main.css"],"javascripts":["javascripts/webodf.js","javascripts/EditorSession.js"],"coffees":["coffees/main.coffee","coffees/dialogs.coffee"],"copies":["assets/scheme.html","package.json","README.md"]} \ No newline at end of file +{"name":"OpenPage","root":"home://myws/antosdk-apps/OpenPage","css":["css/main.css","css/dialog.css"],"javascripts":["javascripts/webodf.js","javascripts/EditorSession.js"],"coffees":["coffees/main.coffee","coffees/dialogs.coffee"],"copies":["assets/scheme.html","package.json","README.md"]} \ No newline at end of file