From bedb38e14887b29eae3cdf1c8d435259c920257c Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Tue, 12 Jun 2012 13:05:12 -0700
Subject: Sub Props

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/controllers/elements/element-controller.js |  12 +--
 js/mediators/element-mediator.js              |   2 +-
 js/panels/Timeline/Keyframe.reel/Keyframe.js  |   5 +-
 js/panels/Timeline/Layer.reel/Layer.html      |   4 +-
 js/panels/Timeline/Layer.reel/Layer.js        | 122 +++++++++++++++++++++-----
 js/panels/Timeline/Style.reel/Style.js        |  25 +++---
 js/panels/Timeline/Tween.reel/Tween.js        |   3 +-
 7 files changed, 128 insertions(+), 45 deletions(-)

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index f37a9249..da8afbaa 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -99,9 +99,9 @@ exports.ElementController = Montage.create(Component, {
 
             // Return cached value if one exists
             if(isFill) {
-                if(el.elementModel.fill) {
-                    return el.elementModel.fill;
-                }
+//                if(el.elementModel.fill) {
+//                    return el.elementModel.fill;
+//                }
                 //TODO: Once logic for color and gradient is established, this needs to be revised
                 color = this.getProperty(el, "background-color");
                 image = this.getProperty(el, "background-image");
@@ -114,9 +114,9 @@ exports.ElementController = Montage.create(Component, {
 
                 // If no color was found, look up the shared border color
                 if(!color && !image) {
-                    if(el.elementModel.stroke) {
-                        return el.elementModel.stroke;
-                    }
+//                    if(el.elementModel.stroke) {
+//                        return el.elementModel.stroke;
+//                    }
 
                     color = this.getProperty(el, "border-color");
                     image = this.getProperty(el, "border-image");
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 6449a625..67f2a562 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -369,7 +369,7 @@ exports.ElementMediator = Montage.create(Component, {
                 item.elementModel.controller["setColor"](item, value, isFill,borderSide);
             }
 
-            NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null});
+            NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill, "borderSide":borderSide}, redraw: null});
         }
     },
 
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c8255cc0..f450dd8a 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -60,6 +60,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             if(this.isSelected){
                 this.element.classList.add("keyframeSelected");
                 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
+                console.log(this.application.ninja.timeline.selectedStyle)
             }else{
                 this.element.classList.remove("keyframeSelected");
                 this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty);
@@ -70,17 +71,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     deselectKeyframe:{
         value:function(){
-            debugger;
             this.isSelected=false;
             this.element.style.left = (this.position - 5) + "px";
+            this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty)
         }
     },
 
     selectKeyframe:{
         value:function(){
-            debugger;
             this.isSelected=true;
             this.element.style.left = (this.position - 6) + "px";
+            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
             this.parentComponent.selectTween();
         }
     },
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index fe3f49d2..3648cbbb 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -111,9 +111,9 @@
 	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
 	            			"oneway" : false
 	            		},
-                        "abcelement" : {
+                        "colorelement" : {
                             "boundObject" : {"@": "repetition1"},
-                            "boundObjectPropertyPath" : "objectAtCurrentIteration.abcelement",
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.colorelement",
                             "oneway" : false
                         }
 	            	}
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 23ba1ef9..629b118c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -654,7 +654,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 			newStyle.editorValue = "";
 			newStyle.ruleTweener = false;
 			newStyle.isSelected = false;
-            newStyle.abcelement = "";
+            newStyle.colorelement = "";
             this.arrLayerStyles.push(newStyle);
 
 			// Set up the event info and dispatch the event
@@ -920,7 +920,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-                        this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition);
+                        this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
                         this.savedPosition = null;
                 }
 
@@ -935,7 +935,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition);
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
                     this.savedPosition = null;
                 }
             }
@@ -949,7 +949,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "pi", prevPosition);
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
                     this.savedPosition = null;
                 }
             }
@@ -963,7 +963,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "pi", prevPosition);
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition);
                     this.savedPosition = null;
                 }
             }
@@ -972,10 +972,11 @@ var Layer = exports.Layer = Montage.create(Component, {
 
     handleLeftChanging: {
         value: function(event) {
+
             if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.leftPosition;
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "pi");
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline");
                 }
             }
 
@@ -987,7 +988,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.topPosition;
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "pi");
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline");
                 }
             }
 
@@ -999,7 +1000,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.dtextScaleX;
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "pi");
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
                 }
             }
 
@@ -1011,7 +1012,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.dtextScaleY;
-                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "pi");
+                    this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
                 }
             }
 
@@ -1022,33 +1023,110 @@ var Layer = exports.Layer = Montage.create(Component, {
     handleElementChange:{
         value:function(event){
             var el =this.layerData.stageElement;
-            var length = this.arrLayerStyles.length , i;
+            var length = this.arrLayerStyles.length , i , k=0;
 
                 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
                 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
 
+
                 for(i=0; i<length; i++){
-                    if(event.detail.data.prop === "background-color"){
-                        var currentValue = ElementsMediator.getColor(this.layerData.stageElement,true);
-                        this.arrLayerStyles[0].abcelement.color(currentValue.colorMode, currentValue.color);
+                    if (event.detail.data.prop === "color"){
+                        var currentValue1 = ElementsMediator.getColor(this.layerData.stageElement,event.detail.data.isFill,event.detail.data.borderSide);
+                        if(event.detail.data.isFill){
+                            while(k <length){
+                                if(this.arrLayerStyles[k].editorProperty === "background-color"){
+                                    this.arrLayerStyles[k].colorelement.color(currentValue1.colorMode, currentValue1.color);
+                                    this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
+                                    break;
+                                }
+                                k++;
+                            }
+                        }else if (event.detail.data.borderSide === "bottom"){
+                            k=0;
+                                while(k <length){
+                                    if(this.arrLayerStyles[k].editorProperty  === "bottom-border-color"){
+                                    this.arrLayerStyles[k].colorelement.color(currentValue1.colorMode, currentValue1.color);
+                                    this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
+                                    break;
+                                    }
+                                k++;
+                                }
+                            }else if (event.detail.data.borderSide === "top"){
+                                k=0;
+                                while(k <length){
+                                    if(this.arrLayerStyles[k].editorProperty  === "top-border-color"){
+                                    this.arrLayerStyles[k].colorelement.color(currentValue1.colorMode, currentValue1.color);
+                                    this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
+                                    break;
+                                    }
+                                k++;
+                                }
+                            }else if(event.detail.data.borderSide === "left"){
+                                k=0;
+                                while(k <length){
+                                    if(this.arrLayerStyles[k].editorProperty  === "left-border-color"){
+                                    this.arrLayerStyles[k].colorelement.color(currentValue1.colorMode, currentValue1.color);
+                                    this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
+                                    break;
+                                    }
+                                k++;
+                                }
+                            }else if(event.detail.data.borderSide === "right"){
+                                k=0;
+                                while(k <length){
+                                    if(this.arrLayerStyles[k].editorProperty  === "right-border-color"){
+                                    this.arrLayerStyles[k].colorelement.color(currentValue1.colorMode, currentValue1.color);
+                                    this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
+                                    break;
+                                    }
+                                k++;
+                                }
+                            }
                         break;
+                    }else if (event.detail.source === "tween" || event.detail.data.prop === "background-color" ||event.detail.data.prop === "border-top-color"|| event.detail.data.prop === "border-right-color"|| event.detail.data.prop === "border-left-color" || event.detail.data.prop === "border-bottom-color" ){
+
+                        k=0;
+                        while(k <length){
+                            if(this.arrLayerStyles[k].editorProperty === event.detail.data.prop){
+                               var tempElement = this.arrLayerStyles[k];
+
+                            break;
+                            }
+                        k++;
+                        }
+                        if(event.detail.data.prop === "background-color"){
+
+                            var currentValue = ElementsMediator.getColor(this.layerData.stageElement,true);
+                            tempElement.colorelement.color(currentValue.colorMode, currentValue.color);
+                            this.application.ninja.timeline.selectedStyle = event.detail.data.prop;
+                        }else {
+                            if(event.detail.data.prop === "border-bottom-color"){
+                                currentValue = ElementsMediator.getColor(this.layerData.stageElement,false,"bottom");
+                                tempElement.colorelement.color(currentValue.colorMode, currentValue.color);
+                                this.application.ninja.timeline.selectedStyle = event.detail.data.prop;
+                            }else if(event.detail.data.prop === "border-top-color"){
+                                currentValue = ElementsMediator.getColor(this.layerData.stageElement,false,"top");
+                                tempElement.colorelement.color(currentValue.colorMode, currentValue.color);
+                                this.application.ninja.timeline.selectedStyle = event.detail.data.prop;
+                            }else if (event.detail.data.prop === "border-left-color"){
+                                 currentValue = ElementsMediator.getColor(this.layerData.stageElement,false,"left");
+                                 tempElement.colorelement.color(currentValue.colorMode, currentValue.color);
+                                 this.application.ninja.timeline.selectedStyle = event.detail.data.prop;
+                            }else if (event.detail.data.prop === "border-right-color"){
+                                 currentValue = ElementsMediator.getColor(this.layerData.stageElement,false,"right");
+                                 tempElement.colorelement.color(currentValue.colorMode, currentValue.color);
+                                 this.application.ninja.timeline.selectedStyle = event.detail.data.prop;
+                            }
+                        }
                     }else{
                         this.arrLayerStyles[i].editorValue = parseFloat(ElementsMediator.getProperty(el, this.arrLayerStyles[i].editorProperty))
+                        this.application.ninja.timeline.selectedStyle = this.arrLayerStyles[k].editorProperty;
                     }
                 }
         }
     },
-    handleFillColorChange: {
-        value: function (event) {
-            var fillColorObject={};
-
-            fillColorObject.color=event._event.color;
-            fillColorObject.mode=event._event.colorMode;
-            ElementsMediator.setColor([this.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
-        }
-    },
 
     handleUpdatedID:{
         value:function(event){
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index a0dc7c6b..37f970c0 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -175,20 +175,19 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     addedColorChips:
         { value: false },
 
-    _abcelement: {
+    _colorelement: {
         writable:true
     },
 
-    abcelement: {
+    colorelement: {
         enumerable: true,
         get: function () {
-            return this._abcelement;
+            return this._colorelement;
         },
         set: function (value) {
-            if (value !== this._abcelement) {
-                this._abcelement = value;
+            if (value !== this._colorelement) {
+                this._colorelement = value;
             }
-            console.log(this._abcelement)
         }
     },
 
@@ -375,13 +374,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                     // setup fill color
                     this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
                     this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
-                    this.abcelement = this._fillColorCtrl;
+                    this.colorelement = this._fillColorCtrl;
                     var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
+                    this.application.ninja.timeline.selectedStyle = this.editorProperty;
                     this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
                     this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
                     this.addedColorChips = true;
                 }
-
 				// TODO: set up color chip here.
 			} else if (tweenable.tweener === "input"){
 				this.editorInputContainer.classList.remove("hidden");
@@ -706,26 +705,30 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
     handleFillColorChange: {
         value: function (event) {
+
+                if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
                 var fillColorObject={};
                 fillColorObject.color=event._event.color;
                 fillColorObject.mode=event._event.colorMode;
                 ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
-
+                }
         }
     },
 
     handleHottextChange:{
         value:function(event){
+            console.log(this.application.ninja.timeline.selectedStyle)
             if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
-                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "pi");
+                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "timeline");
             }
         }
     },
 
     handleHottextChanging:{
         value:function(event){
+            console.log(this.application.ninja.timeline.selectedStyle)
             if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
-               this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Changing", "pi");
+               this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Changing", "timeline");
              }
         }
     },
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index e5288ad9..e2d152e9 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,6 +6,8 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
 
 var Tween = exports.Tween = Montage.create(Component, {
 
@@ -275,7 +277,6 @@ var Tween = exports.Tween = Montage.create(Component, {
                 // set property specific style on element
                 var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty];
                 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween");
-                console.log(currentValue);
             } else {
                 // move animated element to correct position on stage
                 var currentTop = this.tweenedProperties["top"];
-- 
cgit v1.2.3