More Absolute vs Relative changes and cleanup

Signed-off-by: Jonathan Duran <jduran@motorola.com>

2 files changed, 40 insertions, 56 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index eabe1a7a..55c7162d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -355,9 +355,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     
     draw: {
         value: function() {
-                
-
-                
                 // Drag and Drop:
                 // Do we have a helper to append?
             if (this._appendHelper === true) {
@@ -393,8 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 this._dragAndDropHelper = null;
                                 this._deleteHelper = false;
                         }
-                    } 
-                    
+                    }
                 }
         }
     },
@@ -619,7 +615,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.selectedTweens = [];
             this._captureSelection = false;
             this._openDoc = false;
-//            this._firstTimeLoaded = true;
             this.end_hottext.value = 25;
             this.updateTrackContainerWidth();
             this.masterDuration = 0;
@@ -645,7 +640,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if (this.application.ninja.documentController._documents.length > 0) {
                 this.enablePanel(true);
                 this.initTimelineForDocument();
-
             } else {
                 this.enablePanel(false);
             }
@@ -689,9 +683,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             var clickedPosition = event.target.offsetLeft + event.offsetX;
             this.playhead.style.left = (clickedPosition - 2) + "px";
             this.playheadmarker.style.left = clickedPosition + "px";
-            
-
-                
             var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickedPosition;
             this.updateTimeText(currentMillisec);
@@ -793,50 +784,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 thingToPush.layerData.layerPosition = myIndex;
                 thingToPush.layerData.trackPosition = myIndex;
                 this.arrLayers.splice(myIndex, 0, thingToPush);
-
             } else {
                 thingToPush.layerData.layerPosition = myIndex;
                 this.arrLayers.splice(myIndex, 0, thingToPush);
 
             }
-
             this.selectLayer(myIndex);
-
         }
     },
 
     restoreLayer:{
         value:function (ele) {
 
-                var newLayerName, thingToPush = this.createLayerTemplate();
+            var newLayerName, thingToPush = this.createLayerTemplate();
 
-                this.currentLayerNumber = this.currentLayerNumber + 1;
-                newLayerName = "Layer " + this.currentLayerNumber;
+            this.currentLayerNumber = this.currentLayerNumber + 1;
+            newLayerName = "Layer " + this.currentLayerNumber;
 
-                if(ele.dataset.storedLayerName){
-                    newLayerName = ele.dataset.storedLayerName;
-                }
-                thingToPush.layerData.layerName = newLayerName;
-                thingToPush.layerData.layerID = this.currentLayerNumber;
-                thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
-                thingToPush.parentElementUUID = this.hashKey;
-                thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
-                
-                // Are there styles to add?
-                thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
-                thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
+            if (ele.dataset.storedLayerName) {
+                newLayerName = ele.dataset.storedLayerName;
+            }
+            thingToPush.layerData.layerName = newLayerName;
+            thingToPush.layerData.layerID = this.currentLayerNumber;
+            thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
+            thingToPush.parentElementUUID = this.hashKey;
+            thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
 
-                if (this._openDoc) {
-                    thingToPush.layerData.elementsList.push(ele);
-                }
+            // Are there styles to add?
+            thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
+            thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
 
-                this.temparrLayers.splice(0, 0, thingToPush);
-                thingToPush.layerData.trackPosition = this.temparrLayers.length - 1;
-                thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
+            if (this._openDoc) {
+                thingToPush.layerData.elementsList.push(ele);
+            }
 
-                this._openDoc = false;
+            this.temparrLayers.splice(0, 0, thingToPush);
+            thingToPush.layerData.trackPosition = this.temparrLayers.length - 1;
+            thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
 
-//            }
+            this._openDoc = false;
         }
     },
 
@@ -862,22 +848,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
 
     searchHighestTrackDuration:{
-        value:function(){
+        value:function () {
 
             var trackDuration;
             var length = this.arrLayers.length;
-            if(length > 0){
-                trackDuration = this.arrLayers[length-1].layerData.trackDuration;
+            if (length > 0) {
+                trackDuration = this.arrLayers[length - 1].layerData.trackDuration;
                 length--;
-                while(length >=0){
-                    if(this.arrLayers[length].layerData.trackDuration > trackDuration){
+                while (length >= 0) {
+                    if (this.arrLayers[length].layerData.trackDuration > trackDuration) {
                         trackDuration = this.arrLayers[length].layerData.trackDuration;
                     }
                     length--;
                 }
                 this.masterDuration = trackDuration;
-            }else{
-                this.masterDuration = 0 ;
+            } else {
+                this.masterDuration = 0;
             }
         }
     },
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 0a67df43..e4fb42b3 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -166,29 +166,27 @@ var Tween = exports.Tween = Montage.create(Component, {
 
     handleElementChange:{
         value:function (event) {
-                
+            // temp - testing var
+                var useAbsolute = true;
+
             if (event.detail.source && event.detail.source !== "tween") {
                 // check for correct element selection
-                if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) {
+                if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
                     console.log("Wrong element selected for this keyframe track");
                 } else {
-                    // update tweenedProperties and tell containing track to update CSS rule
-                    // temp read only top and left.  need to change to loop over event details for prop changes generically
-                    if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
-                        this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
-                        this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
-                        this.parentComponent.parentComponent.updateKeyframeRule();
+                    if(useAbsolute){
+                        this.setAbsoluteTweenProperties(event.detail);
+                    } else {
+                        this.setRelativeTweenProperties(event.detail);