aboutsummaryrefslogtreecommitdiff
path: root/js/tools/TextTool.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-06-26 13:15:26 -0700
committerValerio Virgillito2012-06-26 13:15:26 -0700
commit87a8b62f71bb72274c3dd1fa389e88c12d482ebb (patch)
treebf9f995e2972c0a61355f24e64231cdf0b2c86b5 /js/tools/TextTool.js
parent8821e662484aedb027e26a873883e6ca3fb55a51 (diff)
parenta95bba25c3ba6e31784a452e9b94748cc870ba5d (diff)
downloadninja-87a8b62f71bb72274c3dd1fa389e88c12d482ebb.tar.gz
Merge pull request #323 from dhg637/binding
Binding View - Binding Tool & Binding Panel
Diffstat (limited to 'js/tools/TextTool.js')
-rwxr-xr-xjs/tools/TextTool.js48
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
7var Montage = require("montage/core/core").Montage, 7var 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
12exports.TextTool = Montage.create(DrawingTool, { 11exports.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