From 82b0c1b8ee197e23fbd5184cbb0522ca76e651c8 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Thu, 31 May 2012 14:27:51 -0700
Subject: Color Chip

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/controllers/elements/element-controller.js |  10 +-
 js/mediators/element-mediator.js              |  11 +-
 js/panels/Timeline/Layer.reel/Layer.js        |   2 +
 js/panels/Timeline/Style.reel/Style.html      |   7 +-
 js/panels/Timeline/Style.reel/Style.js        | 662 +++++++++++++++-----------
 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, {
     },
 
     setColor: {
-        value: function(el, color, isFill) {
+        value: function(el, color, isFill,borderSide) {
             var mode = color.mode;
 
             if(isFill) {
@@ -191,8 +191,12 @@ exports.ElementController = Montage.create(Component, {
                             }
                             break;
                         default:
-                            this.setProperty(el, "border-image", "none");
-                            this.setProperty(el, "border-color", color.color.css);
+                            if(borderSide){
+                                this.setProperty(el,"border-"+borderSide+"-color",color.color.css);
+                            }else{
+                                this.setProperty(el, "border-image", "none");
+                                this.setProperty(el, "border-color", color.color.css);
+                            }
                             if(color.borderInfo) {
                                 if(color.borderInfo.borderWidth) {
                                     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, {
      @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline
      */
     setColor: {
-        value: function(els, value, isFill, eventType, source, currentValue) {
+        value: function(els, value, isFill, eventType, source, currentValue,borderSide) {
 
             if(eventType === "Changing") {
-                this._setColor(els, value, isFill, eventType, source);
+                this._setColor(els, value, isFill, eventType, source,borderSide);
             } else {
                 // Calculate currentValue if not found for each element
                 if(!currentValue) {
@@ -337,11 +337,12 @@ exports.ElementMediator = Montage.create(Component, {
                     _source:            { value: "undo-redo"},
                     description:        { value: "Set Color"},
                     receiver:           { value: this},
+                    _borderSide:         { value: borderSide},
 
                     execute: {
                         value: function(senderObject) {
                             if(senderObject) this._source = senderObject;
-                            this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source);
+                            this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source,this._borderSide);
                             this._source = "undo-redo";
                             return "";
                         }
@@ -363,9 +364,9 @@ exports.ElementMediator = Montage.create(Component, {
     },
 
     _setColor: {
-        value: function(els, value, isFill, eventType, source) {
+        value: function(els, value, isFill, eventType, source,borderSide) {
             for(var i=0, item; item = els[i]; i++) {
-                item.elementModel.controller["setColor"](item, value, isFill);
+                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});
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, {
                 newStyle.editorProperty = styleProperty;
                 newEvent.layerEventType = "restoreStyle";
                 newEvent.trackEditorProperty = styleProperty;
+                newEvent.trackEditorProperty = styleProperty;
             }
 			newStyle.editorValue = "";
 			newStyle.ruleTweener = false;
@@ -744,6 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 			this.triggerOutgoingBinding();
 
 			this.addStyle();
+
 		}
 	},
 	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 @@
                         "styleProperty" : {"#": "container-property"},
                         "valueEditorHottext" : {"@":"hottextunit"},
                         "dtextProperty" : {"@":"dtext1"},
-                        "myHintable" : {"@" :"hintable"}
+                        "myHintable" : {"@" :"hintable"},
+                        "_fillColorCtrl": {"#": "fillColorCtrl"}
                     }
                 },
 	            "dtext1" : {
@@ -78,7 +79,9 @@
 						<div data-montage-id="value-editor-hottext"></div>
 					</div>
 					<div class="cell-value value-editor editor-color hidden">
-						<div data-montage-id="value-editor-color">[&nbsp;]</div>
+						<div data-montage-id="value-editor-color">
+                            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+						</div>
 					</div>
 					<div class="cell-value value-editor editor-input hidden">
 						<!-- <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 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator =  	require("js/mediators/element-mediator").ElementMediator
+
 
 var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
@@ -169,7 +171,27 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
  			this.needsDraw = true;
  		}
  	},
- 	
+
+    addedColorChips:
+        { value: false },
+
+    _fill: {
+        enumerable: false,
+        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] }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+
  	handleMousedown: {
  		value: function(event) {
  			this.isActive = true;
@@ -196,6 +218,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     		} else {
     			this.element.classList.remove("style-selected");
     		}
+
+
     	}
     },
     didDraw: {
@@ -311,6 +335,38 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 				this.editorInputContainer.classList.add("hidden");
 				this.editorColorContainer.classList.remove("hidden");
 				this.editorHottextContainer.classList.add("hidden");
+
+                if(tweenable.colorType === "fill"){
+                                    this._isFill = true;
+                                }else{
+                                    if(tweenable.colorType === "stroke"){
+                                        this._isFill = false;
+                                        this._borderSide = tweenable.strokePosition
+                                    }
+
+                                }
+
+                if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                    // 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);
+
+    //                setup stroke color
+    //                this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+    //                this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
+
+                    this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+
+                    this.addedColorChips = true;
+                }
+
+                if (this.addedColorChips) {
+                    this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+    //                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+                }
+
+
+
 				// TODO: set up color chip here.
 			} else if (tweenable.tweener === "input"){
 				this.editorInputContainer.classList.remove("hidden");
@@ -327,295 +383,321 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 	/* === END: Controllers === */
     
     _myTweenables: {
-    	value: [
-    		{
-    			"property" : "background-color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"min" : "",
-    			"max" : "",
-    			"default" :"#FFFFFF"
-    		},
-    		{
-    			"property" : "background-position-x",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "background-position-y",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "border-color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"min" : "",
-    			"max" : "",
-    			"default" : "#FFFFFF"
-    		},
-    		{
-    			"property" : "border-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "border-bottom-color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"default" : "#FFFFFF"
-    		},
-    		{
-    			"property" : "border-bottom-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "border-left-color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"default" : "#FFFFFF"
-    		},
-    		{
-    			"property" : "border-left-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "border-top-color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"default" : "#FFFFFF"
-    		},
-    		{
-    			"property" : "border-top-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "border-right-color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"default" : "#FFFFFF"
-    		},
-    		{
-    			"property" : "border-right-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "border-radius",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "bottom",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "color",
-    			"tweener" : "color",
-    			"units" : "",
-    			"default" : "#FFFFFF"
-    		},
-    		{
-    			"property" : "margin",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "margin-left",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "margin-right",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "margin-top",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "margin-bottom",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "padding",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "padding-left",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "padding-right",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "padding-top",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "padding-bottom",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "max-height",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "max-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "min-height",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "min-width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "opacity",
-    			"tweener" : "hottext",
-    			"units" : "",
-    			"min" : 0,
-    			"max" : 100,
-    			"default" : 100
-    		},
-    		{
-    			"property" : "text-indent",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "top",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "right",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "left",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : -9999,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "width",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		},
-    		{
-    			"property" : "height",
-    			"tweener" : "hottext",
-    			"units" : "px",
-    			"min" : 0,
-    			"max" : 9999,
-    			"default" : 0
-    		}
-    	]
-    	
+        value: [
+            {
+                "property" : "background-color",
+                "tweener" : "color",
+                "units" : "",
+                "min" : "",
+                "max" : "",
+                "default" :"#FFFFFF",
+                "colorType" :"fill"
+            },
+            {
+                "property" : "background-position-x",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "background-position-y",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-color",
+                "tweener" : "color",
+                "units" : "",
+                "min" : "",
+                "max" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : false
+            },
+            {
+                "property" : "border-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-bottom-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "bottom"
+
+            },
+            {
+                "property" : "border-bottom-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-left-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "left"
+
+            },
+            {
+                "property" : "border-left-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-top-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "top"
+
+            },
+            {
+                "property" : "border-top-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-right-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "right"
+
+            },
+            {
+                "property" : "border-right-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-radius",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "bottom",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF"
+            },
+            {
+                "property" : "margin",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "margin-left",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "margin-right",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "margin-top",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "margin-bottom",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "padding",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "padding-left",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "padding-right",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "padding-top",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "padding-bottom",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "max-height",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "max-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "min-height",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "min-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "opacity",
+                "tweener" : "hottext",
+                "units" : "%",
+                "min" : 0,
+                "max" : 100,
+                "default" : 100
+            },
+            {
+                "property" : "text-indent",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "top",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "right",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "left",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "height",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            }
+        ]
+
+    },
+
+    handleFillColorChange: {
+        value: function (event) {
+debugger;
+
+            var fillColorObject={};
+            fillColorObject.color=event._event.color;
+            fillColorObject.mode=event._event.colorMode;
+            ElementsMediator.setColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
+        }
     },
 
     handleHottextChange:{
-- 
cgit v1.2.3