diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Color/colortoolbar.reel/colortoolbar.js | 64 | ||||
-rw-r--r-- | js/panels/properties/content.reel/content.js | 119 |
2 files changed, 56 insertions, 127 deletions
diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 19fe7b85..10ae8b6e 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js | |||
@@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { | |||
20 | //Storing stroke (stores color in mode use to select color) | 20 | //Storing stroke (stores color in mode use to select color) |
21 | _stroke: { | 21 | _stroke: { |
22 | enumerable: false, | 22 | enumerable: false, |
23 | value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]} | 23 | value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} |
24 | }, | 24 | }, |
25 | //////////////////////////////////////////////////////////////////// | 25 | //////////////////////////////////////////////////////////////////// |
26 | // | 26 | // |
@@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { | |||
39 | //Storing fill (stores color in mode use to select color) | 39 | //Storing fill (stores color in mode use to select color) |
40 | _fill: { | 40 | _fill: { |
41 | enumerable: false, | 41 | enumerable: false, |
42 | value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]} | 42 | value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} |
43 | }, | 43 | }, |
44 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
45 | // | 45 | // |
@@ -95,76 +95,38 @@ exports.ColorToolbar = Montage.create(Component, { | |||
95 | didDraw: { | 95 | didDraw: { |
96 | enumerable: false, | 96 | enumerable: false, |
97 | value: function() { | 97 | value: function() { |
98 | // | 98 | |
99 | this.fill_btn.addEventListener('change', function (e) { | 99 | this.fill_btn.addEventListener('change', function (e) { |
100 | // | 100 | this.fill = e._event; |
101 | var temp; | 101 | this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); |
102 | // | ||
103 | this.fill = e._event; | ||
104 | // | ||
105 | if (e._event.color && e._event.color.l) { | ||
106 | temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); | ||
107 | temp.a = e._event.color.a; | ||
108 | } else if (e._event.color && e._event.color.r){ | ||
109 | temp = e._event.color; | ||
110 | temp.a = e._event.color.a; | ||
111 | } else { | ||
112 | temp = null; | ||
113 | } | ||
114 | //WebGL uses array | ||
115 | if (temp) { | ||
116 | this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; | ||
117 | } else { | ||
118 | this.fill.webGlColor = null; | ||
119 | } | ||
120 | // | ||
121 | this.application.ninja.colorController.colorModel.input = 'fill'; | 102 | this.application.ninja.colorController.colorModel.input = 'fill'; |
122 | // | 103 | |
123 | var color = e._event.color; | 104 | var color = e._event.color; |
124 | if (e._event.colorMode !== 'nocolor' && color) { | 105 | if (e._event.colorMode !== 'nocolor' && color) { |
125 | color.wasSetByCode = false; | 106 | color.wasSetByCode = false; |
126 | color.type = 'change'; | 107 | color.type = 'change'; |
108 | color.mode = e._event.colorMode; | ||
127 | this.application.ninja.colorController.colorModel[e._event.colorMode] = color; | 109 | this.application.ninja.colorController.colorModel[e._event.colorMode] = color; |
128 | } else { | 110 | } else { |
129 | this.application.ninja.colorController.colorModel.applyNoColor(); | 111 | this.application.ninja.colorController.colorModel.applyNoColor(); |
130 | } | 112 | } |
131 | // | ||
132 | this.application.ninja.colorController.colorModel.input = 'chip'; | 113 | this.application.ninja.colorController.colorModel.input = 'chip'; |
133 | }.bind(this)); | 114 | }.bind(this)); |
134 | // | 115 | |
135 | this.stroke_btn.addEventListener('change', function (e) { | 116 | this.stroke_btn.addEventListener('change', function (e) { |
136 | // | ||
137 | var temp; | ||
138 | // | ||
139 | this.stroke = e._event; | 117 | this.stroke = e._event; |
140 | // | 118 | this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); |
141 | if (e._event.color && e._event.color.l) { | ||
142 | temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); | ||
143 | temp.a = e._event.color.a; | ||
144 | } else if (e._event.color && e._event.color.r){ | ||
145 | temp = e._event.color; | ||
146 | temp.a = e._event.color.a; | ||
147 | } else { | ||
148 | temp = null; | ||
149 | } | ||
150 | //WebGL uses array | ||
151 | if (temp) { | ||
152 | this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; | ||
153 | } else { | ||
154 | this.stroke.webGlColor = null; | ||
155 | } | ||
156 | // | ||
157 | this.application.ninja.colorController.colorModel.input = 'stroke'; | 119 | this.application.ninja.colorController.colorModel.input = 'stroke'; |
158 | // | 120 | |
159 | var color = e._event.color; | 121 | var color = e._event.color; |
160 | if (e._event.colorMode !== 'nocolor' && color) { | 122 | if (e._event.colorMode !== 'nocolor' && color) { |
161 | color.wasSetByCode = false; | 123 | color.wasSetByCode = false; |
162 | color.type = 'change'; | 124 | color.type = 'change'; |
125 | color.mode = e._event.colorMode; | ||
163 | this.application.ninja.colorController.colorModel[e._event.colorMode] = color; | 126 | this.application.ninja.colorController.colorModel[e._event.colorMode] = color; |
164 | } else { | 127 | } else { |
165 | this.application.ninja.colorController.colorModel.applyNoColor(); | 128 | this.application.ninja.colorController.colorModel.applyNoColor(); |
166 | } | 129 | } |
167 | // | ||
168 | this.application.ninja.colorController.colorModel.input = 'chip'; | 130 | this.application.ninja.colorController.colorModel.input = 'chip'; |
169 | }.bind(this)); | 131 | }.bind(this)); |
170 | } | 132 | } |
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index fe6faef8..34c38e70 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js | |||
@@ -141,7 +141,8 @@ exports.Content = Montage.create(Component, { | |||
141 | 141 | ||
142 | displayElementProperties: { | 142 | displayElementProperties: { |
143 | value: function (el) { | 143 | value: function (el) { |
144 | var customPI; | 144 | var customPI, |
145 | currentValue; | ||
145 | 146 | ||
146 | this.elementName = el.elementModel.selection; | 147 | this.elementName = el.elementModel.selection; |
147 | this.elementId.value = el.getAttribute("id") || ""; | 148 | this.elementId.value = el.getAttribute("id") || ""; |
@@ -180,87 +181,50 @@ exports.Content = Montage.create(Component, { | |||
180 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { | 181 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { |
181 | for(var k = 0, control; control = fields[k]; k++) { | 182 | for(var k = 0, control; control = fields[k]; k++) { |
182 | 183 | ||
183 | if(control.prop !== "border-color" && control.prop !== "background-color") { | 184 | if(control.type !== "color") { |
184 | var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 185 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
185 | currentValue ? currentValue = currentValue : currentValue = control.defaultValue; | 186 | currentValue ? currentValue = currentValue : currentValue = control.defaultValue; |
186 | this.customSections[0].content.controls[control.id] = currentValue; | 187 | this.customSections[0].content.controls[control.id] = currentValue; |
187 | } | 188 | } |
189 | else | ||
190 | { | ||
191 | currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); | ||
192 | if(control.prop === "border") | ||
193 | { | ||
194 | this.application.ninja.colorController.colorModel.input = "stroke"; | ||
195 | } | ||
196 | else if(control.prop === "background") | ||
197 | { | ||
198 | this.application.ninja.colorController.colorModel.input = "fill"; | ||
199 | } | ||
200 | |||
201 | debugger; | ||
202 | if(currentValue) | ||
203 | { | ||
204 | if(currentValue.mode === "gradient") | ||
205 | { | ||
206 | this.application.ninja.colorController.colorModel["gradient"] = | ||
207 | {value: currentValue.color, wasSetByCode: true, type: 'change'}; | ||
208 | } | ||
209 | else | ||
210 | { | ||
211 | if (currentValue.color.a !== undefined) | ||
212 | { | ||
213 | this.application.ninja.colorController.colorModel.alpha = | ||
214 | {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; | ||
215 | } | ||
216 | this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; | ||
217 | } | ||
218 | } | ||
219 | else | ||
220 | { | ||
221 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
222 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
223 | } | ||
224 | } | ||
188 | } | 225 | } |
189 | } | 226 | } |
190 | } | 227 | } |
191 | |||
192 | |||
193 | //TODO: Once logic for color and gradient is established, this needs to be revised | ||
194 | |||
195 | var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image"); | ||
196 | this.application.ninja.colorController.colorModel.input = "stroke"; | ||
197 | if(borderColor || borderImage) { | ||
198 | if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) { | ||
199 | //Gradient | ||
200 | color = this.application.ninja.colorController.getColorObjFromCss(borderImage); | ||
201 | if (color && color.value) { | ||
202 | this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; | ||
203 | } else { | ||
204 | this.appl |