diff options
Diffstat (limited to 'js/components/tools-properties/text-properties.reel/text-properties.js')
-rw-r--r-- | js/components/tools-properties/text-properties.reel/text-properties.js | 162 |
1 files changed, 116 insertions, 46 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 dac30da0..55274322 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js | |||
@@ -32,30 +32,9 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
32 | 32 | ||
33 | prepareForDraw: { | 33 | prepareForDraw: { |
34 | value: function() { | 34 | value: function() { |
35 | this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"]; | ||
36 | this.fontSettings.label = "Settings"; | ||
37 | this.btnBold.label = "Bold"; | ||
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 | this.indent.label = "-->" | ||
46 | this.outdent.label = "<--"; | ||
47 | this.numberedList.label = "1 2 3"; | ||
48 | this.bulletedList.label = "• • •"; | ||
49 | this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; | 35 | this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; |
50 | this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; | 36 | this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; |
51 | 37 | this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; | |
52 | |||
53 | this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false); | ||
54 | Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", { | ||
55 | boundObject: this.btnBold, | ||
56 | boundObjectPropertyPath: "value" | ||
57 | }); | ||
58 | |||
59 | } | 38 | } |
60 | }, | 39 | }, |
61 | 40 | ||
@@ -65,10 +44,6 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
65 | } | 44 | } |
66 | }, | 45 | }, |
67 | 46 | ||
68 | defaultFontSize: { | ||
69 | value: "12px" | ||
70 | }, | ||
71 | |||
72 | _subPrepare: { | 47 | _subPrepare: { |
73 | value: function() { | 48 | value: function() { |
74 | //this.divElement.addEventListener("click", this, false); | 49 | //this.divElement.addEventListener("click", this, false); |
@@ -82,31 +57,27 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
82 | } | 57 | } |
83 | }, | 58 | }, |
84 | 59 | ||
85 | handleFontSizeChange: { | ||
86 | |||
87 | }, | ||
88 | |||
89 | handleBtnBoldAction: { | 60 | handleBtnBoldAction: { |
90 | value: function(e) { | 61 | value: function(e) { |
91 | this.application.ninja.stage.textTool.doAction("bold", true); | 62 | this.application.ninja.stage.textTool.doAction("bold"); |
92 | } | 63 | } |
93 | }, | 64 | }, |
94 | 65 | ||
95 | handleBtnItalicAction: { | 66 | handleBtnItalicAction: { |
96 | value: function(e) { | 67 | value: function(e) { |
97 | this.application.ninja.stage.textTool.doAction("italic", true); | 68 | this.application.ninja.stage.textTool.doAction("italic"); |
98 | } | 69 | } |
99 | }, | 70 | }, |
100 | 71 | ||
101 | handleBtnUnderlineAction: { | 72 | handleBtnUnderlineAction: { |
102 | value: function(e) { | 73 | value: function(e) { |
103 | this.application.ninja.stage.textTool.doAction("underline", true); | 74 | this.application.ninja.stage.textTool.doAction("underline"); |
104 | } | 75 | } |
105 | }, | 76 | }, |
106 | 77 | ||
107 | handleBtnStrikethroughAction: { | 78 | handleBtnStrikethroughAction: { |
108 | value: function(e) { | 79 | value: function(e) { |
109 | this.application.ninja.stage.textTool.doAction("strikethrough", true); | 80 | this.application.ninja.stage.textTool.doAction("strikethrough"); |
110 | } | 81 | } |
111 | }, | 82 | }, |
112 | 83 | ||
@@ -116,7 +87,7 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
116 | this.alignCenter.value = false; | 87 | this.alignCenter.value = false; |
117 | this.alignRight.value = false; | 88 | this.alignRight.value = false; |
118 | this.alignJustify.value = false; | 89 | this.alignJustify.value = false; |
119 | this.application.ninja.stage.textTool.doAction("justifyLeft", true); | 90 | this.application.ninja.stage.textTool.doAction("justifyleft"); |
120 | } | 91 | } |
121 | }, | 92 | }, |
122 | 93 | ||
@@ -126,7 +97,7 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
126 | //this.alignCenter.value = false; | 97 | //this.alignCenter.value = false; |
127 | this.alignRight.value = false; | 98 | this.alignRight.value = false; |
128 | this.alignJustify.value = false; | 99 | this.alignJustify.value = false; |
129 | this.application.ninja.stage.textTool.doAction("justifyCenter", true); | 100 | this.application.ninja.stage.textTool.doAction("justifycenter"); |
130 | } | 101 | } |
131 | }, | 102 | }, |
132 | 103 | ||
@@ -136,7 +107,7 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
136 | this.alignCenter.value = false; | 107 | this.alignCenter.value = false; |
137 | //this.alignRight.value = false; | 108 | //this.alignRight.value = false; |
138 | this.alignJustify.value = false; | 109 | this.alignJustify.value = false; |
139 | this.application.ninja.stage.textTool.doAction("justifyRight", true); | 110 | this.application.ninja.stage.textTool.doAction("justifyright"); |
140 | } | 111 | } |
141 | }, | 112 | }, |
142 | 113 | ||
@@ -146,37 +117,123 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
146 | this.alignCenter.value = false; | 117 | this.alignCenter.value = false; |
147 | this.alignRight.value = false; | 118 | this.alignRight.value = false; |
148 | //this.alignJustify.value = false; | 119 | //this.alignJustify.value = false; |
149 | this.application.ninja.stage.textTool.doAction("strikethrough", null); | 120 | this.application.ninja.stage.textTool.doAction("justifyfull"); |
150 | } | 121 | } |
151 | }, | 122 | }, |
152 | 123 | ||
153 | handleIndentAction: { | 124 | handleIndentAction: { |
154 | value: function(e) { | 125 | value: function(e) { |
155 | this.application.ninja.stage.textTool.doAction("indent", null); | 126 | this.application.ninja.stage.textTool.doAction("indent"); |
156 | } | 127 | } |
157 | }, | 128 | }, |
158 | 129 | ||
159 | handleOutdentAction: { | 130 | handleOutdentAction: { |
160 | value: function(e) { | 131 | value: function(e) { |
161 | this.application.ninja.stage.textTool.doAction("outdent", null); | 132 | this.application.ninja.stage.textTool.doAction("outdent"); |
162 | } | 133 | } |
163 | }, | 134 | }, |
164 | 135 | ||
165 | handleFontSizeChange: { | 136 | handleFontSizeChange: { |
166 | value: function(e) { | 137 | value: function(e) { |
167 | 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 | } | ||
168 | } | 145 | } |
169 | }, | 146 | }, |
170 | 147 | ||
171 | handleFontSizeChanging: { | 148 | defineInitialProperties: { |
172 | value: function(e) { | 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 | }); | ||