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>

4 files changed, 118 insertions, 30 deletions

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;