aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/tools-properties')
-rwxr-xr-xjs/components/tools-properties/text-properties.reel/text-properties.html4
-rwxr-xr-xjs/components/tools-properties/text-properties.reel/text-properties.js82
2 files changed, 73 insertions, 13 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 e84e1646..0840e6a6 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -287,8 +287,8 @@ POSSIBILITY OF SUCH DAMAGE.
287 <button data-montage-id="alignJustify" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignJustified.png" class="unselectable"/></button> 287 <button data-montage-id="alignJustify" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignJustified.png" class="unselectable"/></button>
288 </div> 288 </div>
289 <div class="btnGroup toolOptionsFloatChildren"> 289 <div class="btnGroup toolOptionsFloatChildren">
290 <button data-montage-id="indent" class="nj-skinned textButton"><img src="../../../../images/optionsbar/text/IndentMore.png" class="unselectable" style="height:16px" /></button> 290 <button data-montage-id="indent" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/IndentMore.png" class="unselectable" style="height:16px" /></button>
291 <button data-montage-id="outdent" class="nj-skinned textButton"><img src="../../../../images/optionsbar/text/IndentLess.png" class="unselectable" style="height:16px" /></button> 291 <button data-montage-id="outdent" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/IndentLess.png" class="unselectable" style="height:16px" /></button>
292 </div> 292 </div>
293 <div class="btnGroup toolOptionsFloatChildren"> 293 <div class="btnGroup toolOptionsFloatChildren">
294 <button data-montage-id="bulletedList" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/BulletedList.png" /></button> 294 <button data-montage-id="bulletedList" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/BulletedList.png" /></button>
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 36aa3ce8..10285d0f 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -36,6 +36,27 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
36 36
37exports.TextProperties = Montage.create(ToolProperties, { 37exports.TextProperties = Montage.create(ToolProperties, {
38 38
39
40 _keepSelected: {value: false, serializable: false},
41 _addedColorChips: {value: false, serializable: false},
42
43 _setColor: {
44 enumerable: false,
45 value: { colorMode: 'rgb', color: {r:0,g:0,b:0,a:1,css: "rgb(0,0,0)"}, webGlColor: null }
46 },
47
48 setColor: {
49 enumerable: true,
50 get: function () {
51 return this._setColor;
52 },
53 set: function (value) {
54 if (value !== this._setColor) {
55 this._setColor = value;
56 }
57 }
58 },
59
39 fontName: {value: null, serializable: true}, 60 fontName: {value: null, serializable: true},
40 fontSize: {value: null, serializable: true}, 61 fontSize: {value: null, serializable: true},
41 fontColor: {value: null, serializable: true}, 62 fontColor: {value: null, serializable: true},
@@ -55,10 +76,13 @@ exports.TextProperties = Montage.create(ToolProperties, {
55 76
56 numberedList: {value: null, serializable: true}, 77 numberedList: {value: null, serializable: true},
57 bulletedList: {value: null, serializable: true}, 78 bulletedList: {value: null, serializable: true},
79 lastSelection: {value: null, serializable: true},
58 80
59 // Events 81 // Events
60 handleEditorSelect: { 82 handleEditorSelect: {
61 value: function(e) { 83 value: function(e) {
84
85 //Reset Buttons
62 this.alignLeft.pressed = false; 86 this.alignLeft.pressed = false;
63 this.alignCenter.pressed = false; 87 this.alignCenter.pressed = false;
64 this.alignRight.pressed = false; 88 this.alignRight.pressed = false;
@@ -66,7 +90,6 @@ exports.TextProperties = Montage.create(ToolProperties, {
66 this.bulletedList.pressed = false; 90 this.bulletedList.pressed = false;
67 this.numberedList.pressed = false; 91 this.numberedList.pressed = false;
68 92
69
70 switch(this.application.ninja.stage.textTool.justify) { 93 switch(this.application.ninja.stage.textTool.justify) {
71 case "left": 94 case "left":
72 this.alignLeft.pressed = true; 95 this.alignLeft.pressed = true;
@@ -79,7 +102,7 @@ exports.TextProperties = Montage.create(ToolProperties, {
79 break; 102 break;
80 case "full": 103 case "full":
81 this.alignJustify.pressed = true; 104 this.alignJustify.pressed = true;
82 } 105 }
83 106
84 switch(this.application.ninja.stage.textTool.listStyle) { 107 switch(this.application.ninja.stage.textTool.listStyle) {
85 case "ordered": 108 case "ordered":
@@ -87,13 +110,30 @@ exports.TextProperties = Montage.create(ToolProperties, {
87 break; 110 break;
88 case "unordered": 111 case "unordered":
89 this.bulletedList.pressed = true; 112 this.bulletedList.pressed = true;
113 }
114
115 if(!this._keepSelected) {
116 this.lastSelection = e.target._savedSelectedRange;
117 }
118 if(this.application.ninja.stage.textTool.foreColor) {
119 this.setColor.color = this.application.ninja.colorController.parseCssToColor(this.application.ninja.stage.textTool.foreColor);
120 this.fontColor.color(this.setColor.colorMode, this.setColor.color);
121 }
122
90 } 123 }
124 },
125
126 handleEditorClicked: {
127 value: function(e) {
128 this._keepSelected = false;
91 } 129 }
92 }, 130 },
93 131
94 handleEditorBlur: { 132 handleEditorBlur: {
95 value: function(e) { 133 value: function(e) {
96 134 console.log("Editor Blur");
135 window.getSelection().addRange(this.lastSelection);
136 e.target.focus();
97 } 137 }
98 }, 138 },
99 139
@@ -101,14 +141,9 @@ exports.TextProperties = Montage.create(ToolProperties, {
101 // Draw Cycle 141 // Draw Cycle
102 prepareForDraw: { 142 prepareForDraw: {
103 value: function() { 143 value: function() {
104
105 this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80};
106 this.application.ninja.colorController.addButton("chip", this.fontColor);
107 this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
108 this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false);
109
110 this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false); 144 this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false);
111 145 this.application.ninja.stage.textTool.element.addEventListener("blur", this.handleEditorBlur.bind(this), false);
146 this.application.ninja.stage.textTool.element.addEventListener("click", this.handleEditorClicked.bind(this), false);
112 147
113 //Bind to Rich Text editor that lives on the stage component 148 //Bind to Rich Text editor that lives on the stage component
114 Object.defineBinding(this.application.ninja.stage.textTool, "fontName", { 149 Object.defineBinding(this.application.ninja.stage.textTool, "fontName", {
@@ -149,6 +184,23 @@ exports.TextProperties = Montage.create(ToolProperties, {
149 } 184 }
150 }, 185 },
151 186
187 willDraw: {
188 value: function() {
189 if (this._addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
190 this.fontColor.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, offset: -80 };
191 this.application.ninja.colorController.addButton("chip", this.fontColor);
192 this.fontColor.addEventListener("change", this.handleFontColorChange.bind(this), false);
193 this.fontColor.addEventListener("mousedown", this.handleColorChangeClick.bind(this), false);
194 this._addedColorChips = true;
195 }
196
197 if (this._addedColorChips) {
198 this.fontColor.color(this.setColor.colorMode, this.setColor.color);
199 this.application.ninja.stage.textTool.foreColor = this.setColor.color.css;
200 }
201 }
202 },
203
152 // Actions 204 // Actions
153 handleJustifyLeftAction: { 205 handleJustifyLeftAction: {
154 value: function(e) { 206 value: function(e) {
@@ -220,10 +272,18 @@ exports.TextProperties = Montage.create(ToolProperties, {
220 } 272 }
221 }, 273 },
222 274
275 handleColorChangeClick: {
276 value: function(e) {
277 this._keepSelected = true;
278 }
279 },
280
223 281
224 handleFontColorChange: { 282 handleFontColorChange: {
225 value: function(e) { 283 value: function(e) {
226 this.application.ninja.stage.textTool.element.style.color = e._event.color.css; 284 this.setColor = e._event;
285 this.application.ninja.stage.textTool.foreColor = this.setColor.color.css;
286 //this.application.ninja.stage.textTool.element.style.color = e._event.color.css;
227 } 287 }