diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/tools-properties/text-properties.reel/text-properties.html | 4 | ||||
-rwxr-xr-x | js/components/tools-properties/text-properties.reel/text-properties.js | 82 | ||||
-rwxr-xr-x | js/tools/TextTool.js | 27 |
3 files changed, 99 insertions, 14 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 | ||
37 | exports.TextProperties = Montage.create(ToolProperties, { | 37 | exports.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 | } |
228 | } | 288 | } |