Refactoring PropertyTrack.js & Span.js

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

5 files changed, 124 insertions, 219 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 72d26e78..752340bb 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -13,41 +13,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         value: true
     },
 
-    prepareForDraw:{
-        value:function(){
-            this.element.addEventListener("click", this, false);
-            this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
-            this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
-            this.ninjaStylesContoller = this.application.ninja.stylesController;
-        }
-    },
-
-    draw:{
-        value:function(){
-
-        }
-    },
-
-    didDraw:{
-        value:function () {
-            if(this.currentKeyframeRule){
-                this.retrieveStoredStyleTweens();
-            }
-        }
-    },
-
-    trackEditorProperty:{
-        value:""
-    },
-
-    animatedElement:{
-        value:null
-    },
-
-    isSubproperty:{
-        value:true
-    },
-
     _propTweenRepetition:{
         value:null
     },
@@ -91,27 +56,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             }
         }
     },
-
-    nextKeyframe:{
-        value:1
-    },
-
-    ninjaStylesContoller:{
-        value:null
-    },
-
-    animationName:{
-        value:null
-    },
-
-    currentKeyframeRule:{
-        value:null
-    },
-
-    trackDuration:{
-        value:0
-    },
-
     _trackID:{
         value:null
     },
@@ -160,6 +104,42 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
+    trackEditorProperty:{
+        value:""
+    },
+
+    animatedElement:{
+        value:null
+    },
+
+    isSubproperty:{
+        value:true
+    },
+
+    nextKeyframe:{
+        value:1
+    },
+
+    ninjaStylesContoller:{
+        value:null
+    },
+
+    animationName:{
+        value:null
+    },
+
+    currentKeyframeRule:{
+        value:null
+    },
+
+    trackDuration:{
+        value:0
+    },
+
+    timelineTrack:{
+        value:null
+    },
+
     setData:{
         value:function () {
             if (typeof(this.propTrackData) === "undefined") {
@@ -175,35 +155,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
+    prepareForDraw:{
+        value:function(){
+            this.element.addEventListener("click", this, false);
+            this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent;
+            this.trackID = this.timelineTrack.trackID;
+            this.animatedElement = this.timelineTrack.animatedElement;
+            this.ninjaStylesContoller = this.application.ninja.stylesController;
+        }
+    },
+
+    didDraw:{
+        value:function () {
+            if(this.currentKeyframeRule){
+                this.retrieveStoredStyleTweens();
+            }
+        }
+    },
+
     handleClick:{
         value:function (ev) {
+
+            var selectIndex , currentSelectedStyleIndex;
             if (ev.shiftKey) {
 
                 if (this.trackType == "position") {
-                    this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
+                    this.timelineTrack.handleNewTween(ev);
                 }
 
                 if (this.propTweens.length < 1) {
 
-                    // check if there is an editor property assigned yet
-                    // get this property track's editor prop name from layer data arrays
-                    var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID),
-                        currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex);
+                    selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID),
+                    currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex);
 
                     if (this.trackType == "style") {
-                        //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex)
                         if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) {
                             console.log("Please enter a style property for this track before adding keyframes.");
                             return;
                         } else {
                             this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty;
-                            //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                         }
                         this.insertPropTween(0);
                         this.addPropAnimationRuleToElement(ev);
                         this.updatePropKeyframeRule();
                     } else if (this.trackType == "position") {
-                        //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                     }
                 } else {
                     this.handleNewPropTween(ev);
@@ -214,32 +209,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             }
         }
     },
-    
-    getCurrentSelectedStyleIndex: {
-        value: function(layerIndex) {
-                var returnVal = false,
-                        i = 0,
-                        arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length;
-                for (i = 0; i < arrLayerStylesLength; i++) {
-                        var currItem =  this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i];
-                        if (currItem.isSelected === true) {
-                                returnVal = i;
-                        }