aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKruti Shah2012-05-31 14:27:51 -0700
committerKruti Shah2012-05-31 14:27:51 -0700
commit82b0c1b8ee197e23fbd5184cbb0522ca76e651c8 (patch)
tree1efad1d6b5c7e82ca1adcf2f18e8aa12931206ec
parentc350cc1c060fdf17357ddadce024267943784593 (diff)
downloadninja-82b0c1b8ee197e23fbd5184cbb0522ca76e651c8.tar.gz
Color Chip
Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
-rwxr-xr-xjs/controllers/elements/element-controller.js10
-rwxr-xr-xjs/mediators/element-mediator.js11
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js2
-rw-r--r--js/panels/Timeline/Style.reel/Style.html7
-rw-r--r--js/panels/Timeline/Style.reel/Style.js662
5 files changed, 392 insertions, 300 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 675176e9..db1d5e49 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -148,7 +148,7 @@ exports.ElementController = Montage.create(Component, {
148 }, 148 },
149 149
150 setColor: { 150 setColor: {
151 value: function(el, color, isFill) { 151 value: function(el, color, isFill,borderSide) {
152 var mode = color.mode; 152 var mode = color.mode;
153 153
154 if(isFill) { 154 if(isFill) {
@@ -191,8 +191,12 @@ exports.ElementController = Montage.create(Component, {
191 } 191 }
192 break; 192 break;
193 default: 193 default:
194 this.setProperty(el, "border-image", "none"); 194 if(borderSide){
195 this.setProperty(el, "border-color", color.color.css); 195 this.setProperty(el,"border-"+borderSide+"-color",color.color.css);
196 }else{
197 this.setProperty(el, "border-image", "none");
198 this.setProperty(el, "border-color", color.color.css);
199 }
196 if(color.borderInfo) { 200 if(color.borderInfo) {
197 if(color.borderInfo.borderWidth) { 201 if(color.borderInfo.borderWidth) {
198 this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); 202 this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 7d5040ef..6449a625 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -315,10 +315,10 @@ exports.ElementMediator = Montage.create(Component, {
315 @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline 315 @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline
316 */ 316 */
317 setColor: { 317 setColor: {
318 value: function(els, value, isFill, eventType, source, currentValue) { 318 value: function(els, value, isFill, eventType, source, currentValue,borderSide) {
319 319
320 if(eventType === "Changing") { 320 if(eventType === "Changing") {
321 this._setColor(els, value, isFill, eventType, source); 321 this._setColor(els, value, isFill, eventType, source,borderSide);
322 } else { 322 } else {
323 // Calculate currentValue if not found for each element 323 // Calculate currentValue if not found for each element
324 if(!currentValue) { 324 if(!currentValue) {
@@ -337,11 +337,12 @@ exports.ElementMediator = Montage.create(Component, {
337 _source: { value: "undo-redo"}, 337 _source: { value: "undo-redo"},
338 description: { value: "Set Color"}, 338 description: { value: "Set Color"},
339 receiver: { value: this}, 339 receiver: { value: this},
340 _borderSide: { value: borderSide},
340 341
341 execute: { 342 execute: {
342 value: function(senderObject) { 343 value: function(senderObject) {
343 if(senderObject) this._source = senderObject; 344 if(senderObject) this._source = senderObject;
344 this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source); 345 this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source,this._borderSide);
345 this._source = "undo-redo"; 346 this._source = "undo-redo";
346 return ""; 347 return "";
347 } 348 }
@@ -363,9 +364,9 @@ exports.ElementMediator = Montage.create(Component, {
363 }, 364 },
364 365
365 _setColor: { 366 _setColor: {
366 value: function(els, value, isFill, eventType, source) { 367 value: function(els, value, isFill, eventType, source,borderSide) {
367 for(var i=0, item; item = els[i]; i++) { 368 for(var i=0, item; item = els[i]; i++) {
368 item.elementModel.controller["setColor"](item, value, isFill); 369 item.elementModel.controller["setColor"](item, value, isFill,borderSide);
369 } 370 }
370 371
371 NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null}); 372 NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null});
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 77db9b64..a96b206f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -625,6 +625,7 @@ var Layer = exports.Layer = Montage.create(Component, {
625 newStyle.editorProperty = styleProperty; 625 newStyle.editorProperty = styleProperty;
626 newEvent.layerEventType = "restoreStyle"; 626 newEvent.layerEventType = "restoreStyle";
627 newEvent.trackEditorProperty = styleProperty; 627 newEvent.trackEditorProperty = styleProperty;
628 newEvent.trackEditorProperty = styleProperty;
628 } 629 }
629 newStyle.editorValue = ""; 630 newStyle.editorValue = "";
630 newStyle.ruleTweener = false; 631 newStyle.ruleTweener = false;
@@ -744,6 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, {
744 this.triggerOutgoingBinding(); 745 this.triggerOutgoingBinding();
745 746
746 this.addStyle(); 747 this.addStyle();
748
747 } 749 }
748 }, 750 },
749 handleDeleteStyleClick: { 751 handleDeleteStyleClick: {
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html
index 5be159c3..cdc355e7 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -19,7 +19,8 @@
19 "styleProperty" : {"#": "container-property"}, 19 "styleProperty" : {"#": "container-property"},
20 "valueEditorHottext" : {"@":"hottextunit"}, 20 "valueEditorHottext" : {"@":"hottextunit"},
21 "dtextProperty" : {"@":"dtext1"}, 21 "dtextProperty" : {"@":"dtext1"},
22 "myHintable" : {"@" :"hintable"} 22 "myHintable" : {"@" :"hintable"},
23 "_fillColorCtrl": {"#": "fillColorCtrl"}
23 } 24 }
24 }, 25 },
25 "dtext1" : { 26 "dtext1" : {
@@ -78,7 +79,9 @@
78 <div data-montage-id="value-editor-hottext"></div> 79 <div data-montage-id="value-editor-hottext"></div>
79 </div> 80 </div>
80 <div class="cell-value value-editor editor-color hidden"> 81 <div class="cell-value value-editor editor-color hidden">
81 <div data-montage-id="value-editor-color">[&nbsp;]</div> 82 <div data-montage-id="value-editor-color">
83 <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
84 </div>
82 </div> 85 </div>
83 <div class="cell-value value-editor editor-input hidden"> 86 <div class="cell-value value-editor editor-input hidden">
84 <!-- <div data-montage-id="value-editor-input"></div> --> 87 <!-- <div data-montage-id="value-editor-input"></div> -->
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index fa848cc0..102e9f25 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -17,6 +17,8 @@
17 17
18var Montage = require("montage/core/core").Montage; 18var Montage = require("montage/core/core").Montage;
19var Component = require("montage/ui/component").Component; 19var Component = require("montage/ui/component").Component;
20var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
21
20 22
21var LayerStyle = exports.LayerStyle = Montage.create(Component, { 23var LayerStyle = exports.LayerStyle = Montage.create(Component, {
22 24
@@ -169,7 +171,27 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
169 this.needsDraw = true; 171 this.needsDraw = true;
170 } 172 }
171 }, 173 },
172 174
175 addedColorChips:
176 { value: false },
177
178 _fill: {
179 enumerable: false,
180 value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
181 },
182
183 fill: {
184 enumerable: true,
185 get: function () {
186 return this._fill;
187 },
188 set: function (value) {
189 if (value !== this._fill) {
190 this._fill = value;
191 }
192 }
193 },
194
173 handleMousedown: { 195 handleMousedown: {
174 value: function(event) { 196 value: function(event) {
175 this.isActive = true; 197 this.isActive = true;
@@ -196,6 +218,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
196 } else { 218 } else {
197 this.element.classList.remove("style-selected"); 219 this.element.classList.remove("style-selected");
198 } 220 }
221
222
199 } 223 }
200 }, 224 },
201 didDraw: { 225 didDraw: {
@@ -311,6 +335,38 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
311 this.editorInputContainer.classList.add("hidden"); 335 this.editorInputContainer.classList.add("hidden");
312 this.editorColorContainer.classList.remove("hidden"); 336 this.editorColorContainer.classList.remove("hidden");
313 this.editorHottextContainer.classList.add("hidden"); 337 this.editorHottextContainer.classList.add("hidden");
338
339 if(tweenable.colorType === "fill"){
340 this._isFill = true;
341 }else{
342 if(tweenable.colorType === "stroke"){
343 this._isFill = false;
344 this._borderSide = tweenable.strokePosition
345 }
346
347 }
348
349 if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
350 // setup fill color
351 this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
352 this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
353