aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties/text-properties.reel/text-properties.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js')
-rwxr-xr-x[-rw-r--r--]js/components/tools-properties/text-properties.reel/text-properties.js116
1 files changed, 95 insertions, 21 deletions
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 55274322..88d38ffe 100644..100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -6,6 +6,7 @@ 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;
8var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
9var ArrayController = require("montage/ui/controller/array-controller").ArrayController;
9var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; 10var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
10 11
11exports.TextProperties = Montage.create(ToolProperties, { 12exports.TextProperties = Montage.create(ToolProperties, {
@@ -29,18 +30,57 @@ exports.TextProperties = Montage.create(ToolProperties, {
29 outdent: {value: null}, 30 outdent: {value: null},
30 numberedList: {value: null}, 31 numberedList: {value: null},
31 bulletedList: {value: null}, 32 bulletedList: {value: null},
33 fontTypes: {value: null},
34 fontSizes: {value: null},
32 35
33 prepareForDraw: { 36 prepareForDraw: {
34 value: function() { 37 value: function() {
38 // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component
39// this.fontTypes = Montage.create(ArrayController);
40// this.fontTypes.content = [
41// { value: "Arial", text: "Arial" },
42// { value: "Arial Black", text: "Arial Black" },
43// { value: "Courier New", text: "Courier New" },
44// { value: "Garamond", text: "Garamond" },
45// { value: "Georgia", text: "Georgia" },
46// { value: "Open Sans", text: "Open Sans" },
47// { value: "Tahoma", text: "Tahoma" },
48// { value: "Times New Roman", text: "Times New Roman" },
49// { value: "Trebuchet MS", text: "Trebuchet MS" },
50// { value: "Verdana", text: "Verdana" }
51// ];
52
53 //this.fontSelection.contentController = this.fontTypes;
54//
55// this.fontSizes = Montage.create(ArrayController);
56// this.fontSizes.content = [
57// { value: 1, text: "8pt" },
58// { value: 2, text: "10pt" },
59// { value: 3, text: "12pt" },
60// { value: 4, text: "14pt" },
61// { value: 5, text: "18pt" },
62// { value: 6, text: "24pt" },
63// { value: 7, text: "36pt" }
64// ];
65// this.fontSize.contentController = this.fontSizes;
66
35 this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; 67 this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
36 this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
37 this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; 68 this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
69 this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
38 } 70 }
39 }, 71 },
40 72
41 handleEditorSelect: { 73 handleEditorSelect: {
42 value: function(e) { 74 value: function(e) {
43 this.application.ninja.stage.textTool.updateStates(); 75 this.application.ninja.stage.textTool.updateStates();
76// this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname;
77//
78// for( var i = 0; i < this.fontSize.items.length; i++) {
79// if (this.application.ninja.stage.textTool.states.fontsize == i + 1) {
80// this.fontSize.value = this.fontSize.items[i]
81// break;
82// }
83// }
44 } 84 }
45 }, 85 },
46 86
@@ -133,6 +173,18 @@ exports.TextProperties = Montage.create(ToolProperties, {
133 } 173 }
134 }, 174 },
135 175
176 handleBulletedListAction: {
177 value: function(e) {
178 this.application.ninja.stage.textTool.doAction("insertunorderedlist");
179 }
180 },
181
182 handleNumberedListAction: {
183 value: function(e) {
184 this.application.ninja.stage.textTool.doAction("insertorderedlist");
185 }
186 },
187
136 handleFontSizeChange: { 188 handleFontSizeChange: {
137 value: function(e) { 189 value: function(e) {
138 //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. 190 //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size.
@@ -214,6 +266,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
214 oneway: true 266 oneway: true
215 }); 267 });
216 268
269 Object.defineBinding(this.numberedList, "pressed", {
270 boundObject: this.application.ninja.stage.textTool,
271 boundObjectPropertyPath: "states.insertorderedlist",
272 boundValueMutator: this.validatePressed,
273 oneway: true
274 });
275
276 Object.defineBinding(this.bulletedList, "pressed", {
277 boundObject: this.application.ninja.stage.textTool,
278 boundObjectPropertyPath: "states.insertunorderedlist",
279 boundValueMutator: this.validatePressed,
280 oneway: true
281 });
282
283 Object.defineBinding(this.fontSelection, "value", {
284 boundObject: this.application.ninja.stage.textTool,
285 boundObjectPropertyPath: "states.fontname",
286 boundValueMutator: this.validateFont,
287 oneway: true
288 });
289
290 Object.defineBinding(this.fontSize, "value", {
291 boundObject: this.application.ninja.stage.textTool,
292 boundObjectPropertyPath: "states.fontsize",
293 boundValueMutator: this.validateFontSize.bind(this),
294 oneway: true
295 });
296
217 this.initialized = true; 297 this.initialized = true;
218 } 298 }
219 299
@@ -226,40 +306,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
226 } 306 }
227 }, 307 },
228 308
229 initialized: { 309 validateFont: {
230 value: false 310 value: function(val) {
311 return val;
312 }
231 }, 313 },
232 314
233 handleFontSelectionChange: { 315 validateFontSize: {
234 value: function() { 316 value: function(val) {
235 this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); 317 val = parseInt(val);
236 this.application.ninja.stage.textTool.element.focus(); 318 return this.fontSize.items[val - 1];
237 } 319 }
238 }, 320 },
239 321
240 handleNumberedListAction: { 322 initialized: {
241 value: function(e) { 323 value: false
242 //this.numberedList.value = false;
243 this.bulletedList.value = false;
244 this.application.ninja.stage.textTool.doAction("insertorderedlist");
245 this.application.ninja.stage.textTool.element.focus();
246 }
247 }, 324 },
248 325
249 handleBulletedListAction: { 326 handleFontSelectionChange: {
250 value: function(e) { 327 value: function(e) {
251 this.numberedList.value = false; 328 this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
252 //this.bulletedList.value = false;
253 this.application.ninja.stage.textTool.doAction("insertunorderedlist");
254 this.application.ninja.stage.textTool.element.focus(); 329 this.application.ninja.stage.textTool.element.focus();
255 } 330 }
256 }, 331 },
257 332
258 handleFontColorChange: { 333 handleFontColorChange: {
259 value: function(e) { 334 value: function(e) {
260 this.application.ninja.stage.textTool.element.style.color = e._event.color.css; 335 this.application.ninja.stage.textTool.element.firstChild.style.color = e._event.color.css;
261 this.application.ninja.stage.textTool.element.focus();