diff options
Diffstat (limited to 'js/tools/TextTool.js')
-rwxr-xr-x | js/tools/TextTool.js | 48 |
1 files changed, 34 insertions, 14 deletions
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 0aef6c1c..aa79b8bc 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js | |||
@@ -6,7 +6,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | DrawingTool = require("js/tools/drawing-tool").DrawingTool, | 8 | DrawingTool = require("js/tools/drawing-tool").DrawingTool, |
9 | //RichTextEditor = ("node_modules/labs/rich-text-editor.reel").RichTextEditor, | ||
10 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | 9 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator; |
11 | 10 | ||
12 | exports.TextTool = Montage.create(DrawingTool, { | 11 | exports.TextTool = Montage.create(DrawingTool, { |
@@ -23,24 +22,32 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
23 | return this._selectedElement; | 22 | return this._selectedElement; |
24 | }, | 23 | }, |
25 | set: function(val) { | 24 | set: function(val) { |
25 | //Set Selected Element | ||
26 | if (this._selectedElement !== null) { | 26 | if (this._selectedElement !== null) { |
27 | this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; | 27 | this.applyStyle(); |
28 | this.application.ninja.stage.textTool.value = ""; | ||
29 | this.application.ninja.stage.textTool.element.style.display = "none"; | ||
30 | ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool"); | ||
31 | } | 28 | } |
32 | //Set Selected Element | ||
33 | this._selectedElement = val; | 29 | this._selectedElement = val; |
34 | if(val !== null) { | 30 | if(this._selectedElement !== null) { |
35 | this.drawTextTool(); | 31 | this.drawTextTool(); |
36 | this.handleScroll(); | 32 | this.handleScroll(); |
37 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); | 33 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); |
38 | } else { | 34 | } else { |
39 | this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); | 35 | this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); |
40 | } | 36 | } |
37 | |||
41 | } | 38 | } |
42 | }, | 39 | }, |
43 | 40 | ||
41 | applyStyle: { | ||
42 | value: function() { | ||
43 | this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; | ||
44 | this.application.ninja.stage.textTool.value = ""; | ||
45 | this.application.ninja.stage.textTool.element.style.display = "none"; | ||
46 | //ElementsMediator.setProperty([this.selectedElement], "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element)["color"]], "Change", "textTool"); | ||
47 | } | ||
48 | |||
49 | }, | ||
50 | |||
44 | HandleLeftButtonDown: { | 51 | HandleLeftButtonDown: { |
45 | value: function(event) { | 52 | value: function(event) { |
46 | this.selectedElement = null; | 53 | this.selectedElement = null; |
@@ -96,6 +103,22 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
96 | } | 103 | } |
97 | }, | 104 | }, |
98 | 105 | ||
106 | getSelectedElement: { | ||
107 | value: function(editor) { | ||
108 | var element = editor._selectedRange.startContainer; | ||
109 | if (element.nodeType == 3) { | ||
110 | element = element.parentNode; | ||
111 | } | ||
112 | return element; | ||
113 | } | ||
114 | }, | ||
115 | |||
116 | getStyleOfSelectedElement: { | ||
117 | value: function(editor) { | ||
118 | return window.getComputedStyle(this.getSelectedElement(editor)); | ||
119 | } | ||
120 | }, | ||
121 | |||
99 | applyElementStyles : { | 122 | applyElementStyles : { |
100 | value: function(fromElement, toElement, styles) { | 123 | value: function(fromElement, toElement, styles) { |
101 | styles.forEach(function(style) { | 124 | styles.forEach(function(style) { |
@@ -108,11 +131,11 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
108 | drawTextTool: { | 131 | drawTextTool: { |
109 | value: function() { | 132 | value: function() { |
110 | var self = this; | 133 | var self = this; |
111 | |||
112 | this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; | 134 | this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; |
113 | if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } | 135 | if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } |
114 | this.selectedElement.innerHTML = ""; | 136 | this.selectedElement.innerHTML = ""; |
115 | 137 | ||
138 | |||
116 | //Styling Options for text tool to look identical to the text you are manipulating. | 139 | //Styling Options for text tool to look identical to the text you are manipulating. |
117 | this.application.ninja.stage.textTool.element.style.display = "block"; | 140 | this.application.ninja.stage.textTool.element.style.display = "block"; |
118 | this.application.ninja.stage.textTool.element.style.position = "absolute"; | 141 | this.application.ninja.stage.textTool.element.style.position = "absolute"; |
@@ -124,14 +147,11 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
124 | // Set font styling (Size, Style, Weight) | 147 | // Set font styling (Size, Style, Weight) |
125 | this.application.ninja.stage.textTool.didDraw = function() { | 148 | this.application.ninja.stage.textTool.didDraw = function() { |
126 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]); | 149 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]); |
127 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); | 150 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); |
128 | var range = document.createRange(), | 151 | this.selectAll(); |
129 | sel = window.getSelection(); | ||
130 | sel.removeAllRanges(); | ||
131 | range.selectNodeContents(self.application.ninja.stage.textTool.element.firstChild); | ||
132 | sel.addRange(range); | ||
133 | this.didDraw = function() {}; | 152 | this.didDraw = function() {}; |
134 | } | 153 | } |
154 | |||
135 | } | 155 | } |
136 | }, | 156 | }, |
137 | 157 | ||