From 7d3bdf39e6d1534de1848ca2744aed66dfeb5d2a Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 5 Jun 2012 23:13:03 -0700 Subject: Initial Text Tool Changes Signed-off-by: Armen Kesablyan --- .../text-properties.reel/text-properties.html | 9 +- .../text-properties.reel/text-properties.js | 154 +++++++++------------ js/stage/stage.reel/stage.css | 10 +- js/stage/stage.reel/stage.html | 2 +- js/tools/TextTool.js | 29 ++-- 5 files changed, 96 insertions(+), 108 deletions(-) diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html index 725e1d22..a3477e99 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -93,14 +93,9 @@ "identifier": "btnBold", "pressedLabel": "B", "unpressedLabel": "B" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + } }, + "btnItalic": { "prototype": "montage/ui/toggle-button.reel", "properties": { 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 fa2ec066..35d46cc7 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -72,7 +72,7 @@ exports.TextProperties = Montage.create(ToolProperties, { handleEditorSelect: { value: function(e) { - this.application.ninja.stage.textTool.updateStates(); + //this.application.ninja.stage.textTool.updateStates(); // this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname; // // for( var i = 0; i < this.fontSize.items.length; i++) { @@ -96,30 +96,6 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - - handleBtnBoldAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("bold"); - } - }, - - handleBtnItalicAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("italic"); - } - }, - - handleBtnUnderlineAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("underline"); - } - }, - - handleBtnStrikethroughAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("strikethrough"); - } - }, handleAlignLeftAction: { value: function(e) { @@ -211,87 +187,83 @@ exports.TextProperties = Montage.create(ToolProperties, { Object.defineBinding(this.btnBold, "pressed", { boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.bold", - boundValueMutator: this.validatePressed, - oneway: true + boundObjectPropertyPath: "bold", + oneway: false }); Object.defineBinding(this.btnItalic, "pressed", { boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.italic", - boundValueMutator: this.validatePressed, - oneway: true + boundObjectPropertyPath: "italic", + oneway: false }); Object.defineBinding(this.btnUnderline, "pressed", { boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.underline", - boundValueMutator: this.validatePressed, - oneway: true + boundObjectPropertyPath: "underline", + oneway: false }); Object.defineBinding(this.btnStrikethrough, "pressed", { boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.strikethrough", - boundValueMutator: this.validatePressed, - oneway: true + boundObjectPropertyPath: "strikeThrough", + oneway: false }); 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 - }); - - Object.defineBinding(this.numberedList, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.insertorderedlist", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.bulletedList, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.insertunorderedlist", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.fontSelection, "value", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.fontname", - boundValueMutator: this.validateFont, - oneway: true - }); - - Object.defineBinding(this.fontSize, "value", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.fontsize", - boundValueMutator: this.validateFontSize.bind(this), - oneway: true + boundObjectPropertyPath: "justify", + boundValueMutator: this.validateJustify, + oneway: false }); +// +// Object.defineBinding(this.alignCenter, "pressed", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "justifycenter", +// boundValueMutator: this.validatePressed, +// oneway: true +// }); +// +// Object.defineBinding(this.alignRight, "pressed", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "justifyright", +// boundValueMutator: this.validatePressed, +// oneway: true +// }); +// +// Object.defineBinding(this.alignJustify, "pressed", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "justifyfull", +// boundValueMutator: this.validatePressed, +// oneway: true +// }); +// +// Object.defineBinding(this.numberedList, "pressed", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "insertorderedlist", +// boundValueMutator: this.validatePressed, +// oneway: true +// }); +// +// Object.defineBinding(this.bulletedList, "pressed", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "insertunorderedlist", +// boundValueMutator: this.validatePressed, +// oneway: true +// }); +// +// Object.defineBinding(this.fontSelection, "value", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "fontname", +// boundValueMutator: this.validateFont, +// oneway: true +// }); +// +// Object.defineBinding(this.fontSize, "value", { +// boundObject: this.application.ninja.stage.textTool, +// boundObjectPropertyPath: "states.fontsize", +// boundValueMutator: this.validateFontSize.bind(this), +// oneway: true +// }); this.initialized = true; } @@ -331,8 +303,8 @@ exports.TextProperties = Montage.create(ToolProperties, { handleFontColorChange: { value: function(e) { - this.application.ninja.stage.textTool.element.firstChild.style.color = e._event.color.css; - this.application.ninja.stage.textTool.element.firstChild.focus(); + 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); } diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css index 13537ba1..2271cd8a 100755 --- a/js/stage/stage.reel/stage.css +++ b/js/stage/stage.reel/stage.css @@ -12,6 +12,14 @@ overflow: hidden; } +.montage-editor-container { + z-index: 8; +} + +.stageAndScenesContainer .montage-editor { + -webkit-user-select:text; +} + .codeViewContainer { position: absolute; top: 0px; @@ -55,4 +63,4 @@ div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;backgroun .cm-s-monokai .activeline {background: #8da6ce; !important} .cm-s-rubyblue .activeline {background: #3E7087; !important} .cm-s-lesser-dark .activeline {background: #8da6ce; !important} -.cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file +.cm-s-xq-dark .activeline {background: #8da6ce; !important} diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 7a9619cd..2ed596f3 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -31,7 +31,7 @@ }, "textTool": { - "prototype": "node_modules/labs/rich-text-editor.reel", + "prototype": "montage/ui/rich-text-editor/rich-text-editor.reel", "properties": { "element" : {"#": "textToolObject"} } diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 024a92ce..cff3b6e3 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -27,7 +27,7 @@ exports.TextTool = Montage.create(DrawingTool, { this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; this.application.ninja.stage.textTool.value = ""; this.application.ninja.stage.textTool.element.style.display = "none"; - ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool"); + ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element)["color"]], "Change", "textTool"); } //Set Selected Element this._selectedElement = val; @@ -96,6 +96,22 @@ exports.TextTool = Montage.create(DrawingTool, { } }, + getSelectedElement: { + value: function(editor) { + var element = editor._selectedRange.startContainer; + if (element.nodeType == 3) { + element = element.parentNode; + } + return element; + } + }, + + getStyleOfSelectedElement: { + value: function(editor) { + return window.getComputedStyle(this.getSelectedElement(editor)); + } + }, + applyElementStyles : { value: function(fromElement, toElement, styles) { styles.forEach(function(style) { @@ -108,11 +124,11 @@ exports.TextTool = Montage.create(DrawingTool, { drawTextTool: { value: function() { var self = this; - this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } this.selectedElement.innerHTML = ""; + //Styling Options for text tool to look identical to the text you are manipulating. this.application.ninja.stage.textTool.element.style.display = "block"; this.application.ninja.stage.textTool.element.style.position = "absolute"; @@ -124,14 +140,11 @@ exports.TextTool = Montage.create(DrawingTool, { // Set font styling (Size, Style, Weight) this.application.ninja.stage.textTool.didDraw = function() { self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]); - self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); - var range = document.createRange(), - sel = window.getSelection(); - sel.removeAllRanges(); - range.selectNodeContents(self.application.ninja.stage.textTool.element.firstChild); - sel.addRange(range); + self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); + this.selectAll(); this.didDraw = function() {}; } + } }, -- cgit v1.2.3