From cf671b4855ecca0278128e82459691292a3d3dc9 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Thu, 23 Feb 2012 08:08:30 -0800
Subject: Timeline: Create new PropertyTrack subcomponent, and use it in the
 TimelineTrack component.

Cherry pick commit from jreid/Timeline-jreid

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 .../Timeline/TimelineTrack.reel/TimelineTrack.html | 60 +++++++++++++++----
 .../Timeline/TimelineTrack.reel/TimelineTrack.js   | 69 ++++++++++++++++++++++
 .../TimelineTrack.reel/css/TimelineTrack.css       | 11 ----
 .../TimelineTrack.reel/scss/TimelineTrack.scss     |  8 ---
 4 files changed, 118 insertions(+), 30 deletions(-)

(limited to 'js/panels/Timeline/TimelineTrack.reel')

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 4808e4d8..cabd92c0 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -91,7 +91,51 @@
                    	           "oneway": false
                    	       }
                    	   }
-                   }
+                   },
+                   "positionTracksRepetition": {
+                       "module": "montage/ui/repetition.reel",
+                   	   "name": "Repetition",
+                   	   "properties": {
+                   	       "element": {"#": "content-position-tracks"},
+                   	       "isSelectionEnabled" : false
+                   	   },
+                   	   "bindings": {
+                   	       "objects": {
+                   	           "boundObject": {"@": "owner"},
+                   	           "boundObjectPropertyPath": "arrPositionTracks",
+                   	           "oneway": false
+                   	       }
+                   	   }
+                   },
+					"positionPropertyTrack" : {
+						"module" : "js/panels/Timeline/PropertyTrack.reel",
+						"name" : "PropertyTrack",
+						"properties" : {
+							"element":{"#": "position-track-base"}
+						}
+					},
+                   "transformTracksRepetition": {
+                       "module": "montage/ui/repetition.reel",
+                   	   "name": "Repetition",
+                   	   "properties": {
+                   	       "element": {"#": "content-transform-tracks"},
+                   	       "isSelectionEnabled" : false
+                   	   },
+                   	   "bindings": {
+                   	       "objects": {
+                   	           "boundObject": {"@": "owner"},
+                   	           "boundObjectPropertyPath": "arrTransformTracks",
+                   	           "oneway": false
+                   	       }
+                   	   }
+                   },
+					"transformPropertyTrack" : {
+						"module" : "js/panels/Timeline/PropertyTrack.reel",
+						"name" : "PropertyTrack",
+						"properties" : {
+							"element":{"#": "transform-track-base"}
+						}
+					}
                    
                    
                }
@@ -108,20 +152,14 @@
             	<div class="label-position collapsible-label collapsible-collapsed">
             		
             	</div>
-            	<div class="content-position collapsible-content collapsible-collapsed">
-            		<div class="timeline-track"></div>
-            		<div class="timeline-track"></div>
-            		<div class="timeline-track"></div>
+            	<div class="content-position collapsible-content collapsible-collapsed" id="content-position-tracks">
+            		<div id="position-track-base"></div>
             	</div>
             	<div class="label-transform collapsible-label collapsible-collapsed">
             		
             	</div>
-            	<div class="content-transform collapsible-content collapsible-collapsed">
-            		<div class="timeline-track"></div>
-            		<div class="timeline-track"></div>
-            		<div class="timeline-track"></div>
-            		<div class="timeline-track"></div>
-            		<div class="timeline-track"></div>
+            	<div class="content-transform collapsible-content collapsible-collapsed" id="content-transform-tracks">
+            		<div id="transform-track-base"></div>
             	</div>
             	<div class="label-styles collapsible-label collapsible-collapsed">
             		
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 1c33a040..de2c75c7 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -114,6 +114,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     		this.needsDraw = true;
     	}
     },
+    
+    /* Position Property Tracks */
+    _arrPositionTracks : {
+        serializable:true,
+        enumerable:true,
+    	value: []
+    },
+    arrPositionTracks: {
+        serializable:true,
+        enumerable:true,
+    	get: function() {
+    		return this._arrPositionTracks;
+    	},
+    	set: function(newVal) {
+    		this._arrPositionTracks = newVal;
+    		this.needsDraw = true;
+    	}
+    },
+    _positionTracksRepetition: {
+    	serializable: true,
+    	value: null
+    },
+    positionTracksRepetition : {
+    	serializable: true,
+    	get: function() {
+    		return this._positionTracksRepetition;
+    	},
+    	set: function(newVal) {
+    		this._positionTracksRepetition = newVal;
+    		this.needsDraw = true;
+    	}
+    },
+    
+    
+    /* Transform Property Tracks */
+    _arrTransformTracks : {
+        serializable:true,
+        enumerable:true,
+    	value: []
+    },
+    arrTransformTracks: {
+        serializable:true,
+        enumerable:true,
+    	get: function() {
+    		return this._arrTransformTracks;
+    	},
+    	set: function(newVal) {
+    		this._arrTransformTracks = newVal;
+    		this.needsDraw = true;
+    	}
+    },
+    _transformTracksRepetition: {
+    	serializable: true,
+    	value: null
+    },
+    transformTracksRepetition : {
+    	serializable: true,
+    	get: function() {
+    		return this._transformTracksRepetition;
+    	},
+    	set: function(newVal) {
+    		this._transformTracksRepetition = newVal;
+    		this.needsDraw = true;
+    	}
+    },
 
     _tweens:{
         enumerable: false,
@@ -414,6 +479,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     init:{
         value:function () {
             var that = this;
+            
+            this.arrPositionTracks = [0, 1, 2];
+            this.arrTransformTracks = [0, 1, 2, 3, 4];
+            
             this.label = this.element.querySelector(".label-main");
             this.myContent = this.element.querySelector(".content-main");
             this.labelPosition = this.element.querySelector(".label-position");
diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
index 842015e9..7a778e25 100644
--- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
+++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
@@ -53,14 +53,3 @@
   background-color: #474747;
   color: white;
 }
-
-/* line 63, ../scss/TimelineTrack.scss */
-.tl_layertracks .collapsible-content .timeline-track {
-  height: 20px;
-  border-bottom: 1px solid #505050;
-}
-
-/* line 69, ../scss/TimelineTrack.scss */
-.timeline-track .content-main {
-  background-color: #474747;
-}
diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
index 01dd948c..43d5f438 100644
--- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
+++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
@@ -60,12 +60,4 @@
 	color: $color-panel-text;
 
 }
- .tl_layertracks .collapsible-content .timeline-track {
- 	height: 20px;
-	border-bottom: 1px solid $color-menu-divider;
- }
 
-
-.timeline-track .content-main {
-	background-color: $color-menu-bg;
-}
-- 
cgit v1.2.3