From d7ead10b566e7de121b2cd2c99fecca8469d63b8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:30:47 -0800 Subject: Initial Text tool completion. --- .../text-properties.reel/text-properties.js | 149 ++++++++++++++++++++- 1 file changed, 145 insertions(+), 4 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js') diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index 313693b1..de0b5fa3 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -25,8 +25,8 @@ exports.TextProperties = Montage.create(ToolProperties, { alignCenter: {value: null}, alignRight: {value: null}, alignJustify: {value: null}, - indentRight: {value: null}, - indentLeft: {value: null}, + indent: {value: null}, + outdent: {value: null}, numberedList: {value: null}, bulletedList: {value: null}, @@ -42,9 +42,34 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.label = "Center"; this.alignRight.label = "Right"; this.alignJustify.label = "Justify"; + this.indent.label = "-->" + this.outdent.label = "<--"; + this.numberedList.label = "1 2 3"; + this.bulletedList.label = "• • •"; + this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; + this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; + + + this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); + Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", { + boundObject: this.btnBold, + boundObjectPropertyPath: "value" + }); + } }, - + + handleEditorSelect: { + value: function(e) { + console.log("hello"); + this.application.ninja.stage.textTool.updateStates(); + } + }, + + defaultFontSize: { + value: "12px" + }, + _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -54,6 +79,122 @@ exports.TextProperties = Montage.create(ToolProperties, { handleClick: { value: function(event) { // this.selectedElement = event._event.target.id; + + } + }, + + handleFontSizeChange: { + + }, + + handleBtnBoldAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("bold", true); + } + }, + + handleBtnItalicAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("italic", true); + } + }, + + handleBtnUnderlineAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("underline", true); + } + }, + + handleBtnStrikethroughAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("strikethrough", true); + } + }, + + handleAlignLeftAction: { + value: function(e) { + //this.alignLeft.value = false; + this.alignCenter.value = false; + this.alignRight.value = false; + this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifyLeft", true); + } + }, + + handleAlignCenterAction: { + value: function(e) { + this.alignLeft.value = false; + //this.alignCenter.value = false; + this.alignRight.value = false; + this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifyCenter", true); } - } + }, + + handleAlignRightAction: { + value: function(e) { + this.alignLeft.value = false; + this.alignCenter.value = false; + //this.alignRight.value = false; + this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("justifyRight", true); + } + }, + + handleAlignJustifyAction: { + value: function(e) { + this.alignLeft.value = false; + this.alignCenter.value = false; + this.alignRight.value = false; + //this.alignJustify.value = false; + this.application.ninja.stage.textTool.doAction("strikethrough", null); + } + }, + + handleIndentAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("indent", null); + } + }, + + handleOutdentAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("outdent", null); + } + }, + + handleFontSizeChange: { + value: function(e) { + + } + }, + + handleFontSizeChanging: { + value: function(e) { + + } + }, + + handleFontSelectionChange: { + value: function() { + this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); + } + }, + + handleNumberedListAction: { + value: function(e) { + //this.numberedList.value = false; + this.bulletedList.value = false; + this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + } + }, + + handleOrderedListAction: { + value: function(e) { + this.numberedList.value = false; + //this.bulletedList.value = false; + this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + } + }, + }); \ No newline at end of file -- cgit v1.2.3 From 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:43:22 -0800 Subject: Refactored rich text editor location --- js/components/tools-properties/text-properties.reel/text-properties.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js') diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index de0b5fa3..dac30da0 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -61,7 +61,6 @@ exports.TextProperties = Montage.create(ToolProperties, { handleEditorSelect: { value: function(e) { - console.log("hello"); this.application.ninja.stage.textTool.updateStates(); } }, -- cgit v1.2.3 From ce963d45cdf2703d2d4eedfa94394b178f86e0f1 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 9 Feb 2012 17:11:38 -0800 Subject: More Text Tool Updates --- .../text-properties.reel/text-properties.js | 162 +++++++++++++++------ 1 file changed, 116 insertions(+), 46 deletions(-) (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js') diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index dac30da0..55274322 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -32,30 +32,9 @@ exports.TextProperties = Montage.create(ToolProperties, { prepareForDraw: { value: function() { - this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"]; - this.fontSettings.label = "Settings"; - this.btnBold.label = "Bold"; - this.btnItalic.label = "Italic"; - this.btnUnderline.label = "Underline"; - this.btnStrikethrough.label = "Strikethrough"; - this.alignLeft.label = "Left"; - this.alignCenter.label = "Center"; - this.alignRight.label = "Right"; - this.alignJustify.label = "Justify"; - this.indent.label = "-->" - this.outdent.label = "<--"; - this.numberedList.label = "1 2 3"; - this.bulletedList.label = "• • •"; this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; - - - this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); - Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", { - boundObject: this.btnBold, - boundObjectPropertyPath: "value" - }); - + this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; } }, @@ -65,10 +44,6 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - defaultFontSize: { - value: "12px" - }, - _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -82,31 +57,27 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - handleFontSizeChange: { - - }, - handleBtnBoldAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("bold", true); + this.application.ninja.stage.textTool.doAction("bold"); } }, handleBtnItalicAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("italic", true); + this.application.ninja.stage.textTool.doAction("italic"); } }, handleBtnUnderlineAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("underline", true); + this.application.ninja.stage.textTool.doAction("underline"); } }, handleBtnStrikethroughAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("strikethrough", true); + this.application.ninja.stage.textTool.doAction("strikethrough"); } }, @@ -116,7 +87,7 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.value = false; this.alignRight.value = false; this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyLeft", true); + this.application.ninja.stage.textTool.doAction("justifyleft"); } }, @@ -126,7 +97,7 @@ exports.TextProperties = Montage.create(ToolProperties, { //this.alignCenter.value = false; this.alignRight.value = false; this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyCenter", true); + this.application.ninja.stage.textTool.doAction("justifycenter"); } }, @@ -136,7 +107,7 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.value = false; //this.alignRight.value = false; this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyRight", true); + this.application.ninja.stage.textTool.doAction("justifyright"); } }, @@ -146,37 +117,123 @@ exports.TextProperties = Montage.create(ToolProperties, { this.alignCenter.value = false; this.alignRight.value = false; //this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("strikethrough", null); + this.application.ninja.stage.textTool.doAction("justifyfull"); } }, handleIndentAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("indent", null); + this.application.ninja.stage.textTool.doAction("indent"); } }, handleOutdentAction: { value: function(e) { - this.application.ninja.stage.textTool.doAction("outdent", null); + this.application.ninja.stage.textTool.doAction("outdent"); } }, handleFontSizeChange: { value: function(e) { - + //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. + for( var i = 0; i < this.fontSize.items.length; i++) { + if (this.fontSize.value === this.fontSize.items[i]) { + this.application.ninja.stage.textTool.doAction("fontsize", (i +1)); + break; + } + } } }, - handleFontSizeChanging: { - value: function(e) { + defineInitialProperties: { + value: function() { + if (!this.initialized) { + + //Setup Font Selection tool + this.fontColor = this.element.getElementsByClassName("fontColor")[0]; + this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; + this.application.ninja.colorController.addButton("chip", this.fontColor); + this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); + + this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); + + Object.defineBinding(this.btnBold, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.bold", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.btnItalic, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.italic", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.btnUnderline, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.underline", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.btnStrikethrough, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.strikethrough", + boundValueMutator: this.validatePressed, + oneway: true + }); + Object.defineBinding(this.alignLeft, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifyleft", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.alignCenter, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifycenter", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.alignRight, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifyright", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.alignJustify, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.justifyfull", + boundValueMutator: this.validatePressed, + oneway: true + }); + + this.initialized = true; + } + + } + }, + + validatePressed: { + value: function(val) { + if (val == "true") return true; else return false } }, + initialized: { + value: false + }, + handleFontSelectionChange: { value: function() { this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); + this.application.ninja.stage.textTool.element.focus(); } }, @@ -184,16 +241,29 @@ exports.TextProperties = Montage.create(ToolProperties, { value: function(e) { //this.numberedList.value = false; this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + this.application.ninja.stage.textTool.doAction("insertorderedlist"); + this.application.ninja.stage.textTool.element.focus(); } }, - handleOrderedListAction: { + handleBulletedListAction: { value: function(e) { this.numberedList.value = false; //this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertnumberedlist", true); + this.application.ninja.stage.textTool.doAction("insertunorderedlist"); + this.application.ninja.stage.textTool.element.focus(); } }, + handleFontColorChange: { + value: function(e) { + this.application.ninja.stage.textTool.element.style.color = e._event.color.css; + this.application.ninja.stage.textTool.element.focus(); + + //this.application.ninja.stage.textTool.doAction("forecolor",e._event.color.css); + + } + } + + }); \ No newline at end of file -- cgit v1.2.3