aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-02-01 17:05:07 -0800
committerNivesh Rajbhandari2012-02-01 17:05:07 -0800
commit830b011d94d728882286d72e129f7405134957c7 (patch)
tree72a4fb831d74c5d3f28ddca731431c59fb516bd8 /js/panels
parentaffafafc4db16e5f918c74dfc919025d4c563cc6 (diff)
downloadninja-830b011d94d728882286d72e129f7405134957c7.tar.gz
Updated color code in the PI to go through element mediator.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Color/colortoolbar.reel/colortoolbar.js64
-rw-r--r--js/panels/properties/content.reel/content.js119
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