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 | 236 |
1 files changed, 223 insertions, 13 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 313693b1..55274322 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js | |||
@@ -25,26 +25,25 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
25 | alignCenter: {value: null}, | 25 | alignCenter: {value: null}, |
26 | alignRight: {value: null}, | 26 | alignRight: {value: null}, |
27 | alignJustify: {value: null}, | 27 | alignJustify: {value: null}, |
28 | indentRight: {value: null}, | 28 | indent: {value: null}, |
29 | indentLeft: {value: null}, | 29 | outdent: {value: null}, |
30 | numberedList: {value: null}, | 30 | numberedList: {value: null}, |
31 | bulletedList: {value: null}, | 31 | bulletedList: {value: null}, |
32 | 32 | ||
33 | prepareForDraw: { | 33 | prepareForDraw: { |
34 | value: function() { | 34 | value: function() { |
35 | this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"]; | 35 | this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; |
36 | this.fontSettings.label = "Settings"; | 36 | this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; |
37 | this.btnBold.label = "Bold"; | 37 | this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; |
38 | this.btnItalic.label = "Italic"; | ||
39 | this.btnUnderline.label = "Underline"; | ||
40 | this.btnStrikethrough.label = "Strikethrough"; | ||
41 | this.alignLeft.label = "Left"; | ||
42 | this.alignCenter.label = "Center"; | ||
43 | this.alignRight.label = "Right"; | ||
44 | this.alignJustify.label = "Justify"; | ||
45 | } | 38 | } |
46 | }, | 39 | }, |
47 | 40 | ||
41 | handleEditorSelect: { | ||
42 | value: function(e) { | ||
43 | this.application.ninja.stage.textTool.updateStates(); | ||
44 | } | ||
45 | }, | ||
46 | |||
48 | _subPrepare: { | 47 | _subPrepare: { |
49 | value: function() { | 48 | value: function() { |
50 | //this.divElement.addEventListener("click", this, false); | 49 | //this.divElement.addEventListener("click", this, false); |
@@ -54,6 +53,217 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
54 | handleClick: { | 53 | handleClick: { |
55 | value: function(event) { | 54 | value: function(event) { |
56 | // this.selectedElement = event._event.target.id; | 55 | // this.selectedElement = event._event.target.id; |
56 | |||
57 | } | ||
58 | }, | ||
59 | |||
60 | handleBtnBoldAction: { | ||
61 | value: function(e) { | ||
62 | this.application.ninja.stage.textTool.doAction("bold"); | ||
63 | } | ||
64 | }, | ||
65 | |||
66 | handleBtnItalicAction: { | ||
67 | value: function(e) { | ||
68 | this.application.ninja.stage.textTool.doAction("italic"); | ||
69 | } | ||
70 | }, | ||
71 | |||
72 | handleBtnUnderlineAction: { | ||
73 | value: function(e) { | ||
74 | this.application.ninja.stage.textTool.doAction("underline"); | ||
75 | } | ||
76 | }, | ||
77 | |||
78 | handleBtnStrikethroughAction: { | ||
79 | value: function(e) { | ||
80 | this.application.ninja.stage.textTool.doAction("strikethrough"); | ||
81 | } | ||
82 | }, | ||
83 | |||
84 | handleAlignLeftAction: { | ||
85 | value: function(e) { | ||
86 | //this.alignLeft.value = false; | ||
87 | this.alignCenter.value = false; | ||
88 | this.alignRight.value = false; | ||
89 | this.alignJustify.value = false; | ||
90 | this.application.ninja.stage.textTool.doAction("justifyleft"); | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | handleAlignCenterAction: { | ||
95 | value: function(e) { | ||
96 | this.alignLeft.value = false; | ||
97 | //this.alignCenter.value = false; | ||
98 | this.alignRight.value = false; | ||
99 | this.alignJustify.value = false; | ||
100 | this.application.ninja.stage.textTool.doAction("justifycenter"); | ||
101 | } | ||
102 | }, | ||
103 | |||
104 | handleAlignRightAction: { | ||
105 | value: function(e) { | ||
106 | this.alignLeft.value = false; | ||
107 | this.alignCenter.value = false; | ||
108 | //this.alignRight.value = false; | ||
109 | this.alignJustify.value = false; | ||
110 | this.application.ninja.stage.textTool.doAction("justifyright"); | ||
111 | } | ||
112 | }, | ||
113 | |||
114 | handleAlignJustifyAction: { | ||
115 | value: function(e) { | ||
116 | this.alignLeft.value = false; | ||
117 | this.alignCenter.value = false; | ||
118 | this.alignRight.value = false; | ||
119 | //this.alignJustify.value = false; | ||
120 | this.application.ninja.stage.textTool.doAction("justifyfull"); | ||
121 | } | ||
122 | }, | ||
123 | |||
124 | handleIndentAction: { | ||
125 | value: function(e) { | ||
126 | this.application.ninja.stage.textTool.doAction("indent"); | ||
127 | } | ||
128 | }, | ||
129 | |||
130 | handleOutdentAction: { | ||
131 | value: function(e) { | ||
132 | this.application.ninja.stage.textTool.doAction("outdent"); | ||
133 | } | ||
134 | }, | ||
135 | |||
136 | handleFontSizeChange: { | ||
137 | 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. | ||
139 | for( var i = 0; i < this.fontSize.items.length; i++) { | ||
140 | if (this.fontSize.value === this.fontSize.items[i]) { | ||
141 | this.application.ninja.stage.textTool.doAction("fontsize", (i +1)); | ||
142 | break; | ||
143 | } | ||
144 | } | ||
145 | } | ||
146 | }, | ||
147 | |||
148 | defineInitialProperties: { | ||
149 | value: function() { | ||
150 | if (!this.initialized) { | ||
151 | |||
152 | //Setup Font Selection tool | ||
153 | this.fontColor = this.element.getElementsByClassName("fontColor")[0]; | ||
154 | this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; | ||
155 | this.application.ninja.colorController.addButton("chip", this.fontColor); | ||
156 | this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); | ||
157 | this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); | ||
158 | |||
159 | this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); | ||
160 | |||
161 | Object.defineBinding(this.btnBold, "pressed", { | ||
162 | boundObject: this.application.ninja.stage.textTool, | ||
163 | boundObjectPropertyPath: "states.bold", | ||
164 | boundValueMutator: this.validatePressed, | ||
165 | oneway: true | ||
166 | }); | ||
167 | |||
168 | Object.defineBinding(this.btnItalic, "pressed", { | ||
169 | boundObject: this.application.ninja.stage.textTool, | ||
170 | boundObjectPropertyPath: "states.italic", | ||
171 | boundValueMutator: this.validatePressed, | ||
172 | oneway: true | ||
173 | }); | ||
174 | |||
175 | Object.defineBinding(this.btnUnderline, "pressed", { | ||
176 | boundObject: this.application.ninja.stage.textTool, | ||
177 | boundObjectPropertyPath: "states.underline", | ||
178 | boundValueMutator: this.validatePressed, | ||
179 | oneway: true | ||
180 | }); | ||
181 | |||
182 | Object.defineBinding(this.btnStrikethrough, "pressed", { | ||
183 | boundObject: this.application.ninja.stage.textTool, | ||
184 | boundObjectPropertyPath: "states.strikethrough", | ||
185 | boundValueMutator: this.validatePressed, | ||
186 | oneway: true | ||
187 | }); | ||
188 | |||
189 | Object.defineBinding(this.alignLeft, "pressed", { | ||
190 | boundObject: this.application.ninja.stage.textTool, | ||
191 | boundObjectPropertyPath: "states.justifyleft", | ||
192 | boundValueMutator: this.validatePressed, | ||
193 | oneway: true | ||
194 | }); | ||
195 | |||
196 | Object.defineBinding(this.alignCenter, "pressed", { | ||
197 | boundObject: this.application.ninja.stage.textTool, | ||
198 | boundObjectPropertyPath: "states.justifycenter", | ||
199 | boundValueMutator: this.validatePressed, | ||
200 | oneway: true | ||
201 | }); | ||
202 | |||
203 | Object.defineBinding(this.alignRight, "pressed", { | ||
204 | boundObject: this.application.ninja.stage.textTool, | ||
205 | boundObjectPropertyPath: "states.justifyright", | ||
206 | boundValueMutator: this.validatePressed, | ||
207 | oneway: true | ||
208 | }); | ||