diff options
Diffstat (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js')
-rwxr-xr-x | js/components/tools-properties/text-properties.reel/text-properties.js | 261 |
1 files changed, 55 insertions, 206 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 c5729e98..4f944adf 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js | |||
@@ -8,13 +8,15 @@ var Montage = require("montage/core/core").Montage; | |||
8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
9 | var ArrayController = require("montage/ui/controller/array-controller").ArrayController; | 9 | var ArrayController = require("montage/ui/controller/array-controller").ArrayController; |
10 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 10 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
11 | var Converter = require("montage/core/converter/converter").Converter; | ||
11 | 12 | ||
12 | exports.TextProperties = Montage.create(ToolProperties, { | 13 | exports.TextProperties = Montage.create(ToolProperties, { |
13 | className: {value: null, serializable: true}, | 14 | |
14 | tagType: {value: null, serializable: true}, | 15 | fontName: {value: null, serializable: true}, |
15 | fontSelection: {value: null, serializable: true}, | ||
16 | fontSettings: {value: null, serializable: true}, | ||
17 | fontSize: {value: null, serializable: true}, | 16 | fontSize: {value: null, serializable: true}, |
17 | |||
18 | fontSettings: {value: null, serializable: true}, // Note: Isn't used currently will need fontSettings Popup | ||
19 | |||
18 | fontColor: {value: null, serializable: true}, | 20 | fontColor: {value: null, serializable: true}, |
19 | btnBold: {value: null, serializable: true}, | 21 | btnBold: {value: null, serializable: true}, |
20 | btnItalic: {value: null, serializable: true}, | 22 | btnItalic: {value: null, serializable: true}, |
@@ -33,66 +35,59 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
33 | fontTypes: {value: null, serializable: true}, | 35 | fontTypes: {value: null, serializable: true}, |
34 | fontSizes: {value: null, serializable: true}, | 36 | fontSizes: {value: null, serializable: true}, |
35 | 37 | ||
38 | // Draw Cycle | ||
36 | prepareForDraw: { | 39 | prepareForDraw: { |
37 | value: function() { | 40 | 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 | |||
67 | this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; | ||
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"]; | ||
70 | } | ||
71 | }, | ||
72 | 41 | ||
42 | this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; | ||
43 | this.application.ninja.colorController.addButton("chip", this.fontColor); | ||
44 | this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); | ||
45 | this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); | ||
46 | |||
47 | this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false); | ||
48 | |||
49 | //Bind to Rich Text editor that lives on the stage component | ||
50 | Object.defineBinding(this.application.ninja.stage.textTool, "fontName", { | ||
51 | boundObject: this.fontName, | ||
52 | boundObjectPropertyPath: "value", | ||
53 | oneway: false | ||
54 | }); | ||
55 | |||
56 | Object.defineBinding(this.application.ninja.stage.textTool, "fontSize", { | ||
57 | boundObject: this.fontSize, | ||
58 | boundObjectPropertyPath: "value", | ||
59 | oneway: false | ||
60 | }); | ||
61 | |||
62 | Object.defineBinding(this.btnBold, "pressed", { | ||
63 | boundObject: this.application.ninja.stage.textTool, | ||
64 | boundObjectPropertyPath: "bold", | ||
65 | oneway: false | ||
66 | }); | ||
67 | |||
68 | Object.defineBinding(this.btnItalic, "pressed", { | ||
69 | boundObject: this.application.ninja.stage.textTool, | ||
70 | boundObjectPropertyPath: "italic", | ||
71 | oneway: false | ||
72 | }); | ||
73 | |||
74 | Object.defineBinding(this.btnUnderline, "pressed", { | ||
75 | boundObject: this.application.ninja.stage.textTool, | ||
76 | boundObjectPropertyPath: "underline", | ||
77 | oneway: false | ||
78 | }); | ||
79 | |||
80 | Object.defineBinding(this.btnStrikethrough, "pressed", { | ||
81 | boundObject: this.application.ninja.stage.textTool, | ||
82 | boundObjectPropertyPath: "strikeThrough", | ||
83 | oneway: false | ||
84 | }); | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | // Events | ||
73 | handleEditorSelect: { | 89 | handleEditorSelect: { |
74 | value: function(e) { | 90 | value: function(e) { |
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 | // } | ||
84 | } | ||
85 | }, | ||
86 | |||
87 | _subPrepare: { | ||
88 | value: function() { | ||
89 | //this.divElement.addEventListener("click", this, false); | ||
90 | } | ||
91 | }, | ||
92 | |||
93 | handleClick: { | ||
94 | value: function(event) { | ||
95 | // this.selectedElement = event._event.target.id; | ||
96 | 91 | ||
97 | } | 92 | } |
98 | }, | 93 | }, |
@@ -161,158 +156,12 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
161 | } | 156 | } |
162 | }, | 157 | }, |
163 | 158 | ||
164 | handleFontSizeChange: { | ||
165 | value: function(e) { | ||
166 | //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. | ||
167 | for( var i = 0; i < this.fontSize.items.length; i++) { | ||
168 | if (this.fontSize.value === this.fontSize.items[i]) { | ||
169 | this.application.ninja.stage.textTool.doAction("fontsize", (i +1)); | ||
170 | break; | ||
171 | } | ||
172 | } | ||
173 | } | ||
174 | }, | ||
175 | |||
176 | defineInitialProperties: { | ||
177 | value: function() { | ||
178 | if (!this.initialized) { | ||
179 | |||
180 | //Setup Font Selection tool | ||
181 | this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; | ||
182 | this.application.ninja.colorController.addButton("chip", this.fontColor); | ||
183 | this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); | ||
184 | this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); | ||
185 | |||
186 | this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); | ||
187 | |||
188 | Object.defineBinding(this.btnBold, "pressed", { | ||
189 | boundObject: this.application.ninja.stage.textTool, | ||
190 | boundObjectPropertyPath: "bold", | ||
191 | oneway: false | ||
192 | }); | ||
193 | |||
194 | Object.defineBinding(this.btnItalic, "pressed", { | ||
195 | boundObject: this.application.ninja.stage.textTool, | ||
196 | boundObjectPropertyPath: "italic", | ||
197 | oneway: false | ||
198 | }); | ||
199 | |||
200 | Object.defineBinding(this.btnUnderline, "pressed", { | ||
201 | boundObject: this.application.ninja.stage.textTool, | ||
202 | boundObjectPropertyPath: "underline", | ||
203 | oneway: false | ||
204 | }); | ||
205 | |||
206 | Object.defineBinding(this.btnStrikethrough, "pressed", { | ||
207 | boundObject: this.application.ninja.stage.textTool, | ||
208 | boundObjectPropertyPath: "strikeThrough", | ||
209 | oneway: |