style keyframe rule addition

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

3 files changed, 97 insertions, 29 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 690c912b..f44afcec 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -18,7 +18,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.element.addEventListener("click", this, false);
             this.trackID = this.parentComponent.parentComponent.parentComponent.trackID;
             this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement;
-
+            this.ninjaStylesContoller = this.application.ninja.stylesController;
         }
     },
 
@@ -89,6 +89,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         value:1
     },
 
+    ninjaStylesContoller:{
+        value:null
+    },
+
+    animationName:{
+        value:null
+    },
+
+    currentKeyframeRule:{
+        value:null
+    },
+
     _trackID:{
         value:null
     },
@@ -167,11 +179,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
                             return;
                         } else {
                             this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty;
-                            console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                            //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                         }
                     } else if (this.trackType === "position") {
-                        //console.log("clicking on position track");
-                        //console.log(this.trackEditorProperty);
+                        console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                     }
 
                     this.insertPropTween(0);
@@ -219,7 +230,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
                 newTween.tweenData.tweenID = this.nextKeyframe;
                 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
                 newTween.tweenData.tweenedProperties = [];
-
+                newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
                 this.propTweens.push(newTween);
 
                 this.nextKeyframe += 1;
@@ -237,9 +248,35 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     addPropAnimationRuleToElement:{
         value:function(tweenEvent){
+            var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
+            this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
+
+
+            this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
+            var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString;
+            var newAnimationNames = currentAnimationNameString + "," + this.animationName;
+            var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
+            var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
+            var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count");
+            var newIterationCount = currentIterationCount + ",1";
+
+            this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
+
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
+
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
+            //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
+            //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
+
+
+            console.log(currentStyleValue);
+
+            var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
+            console.log(initRule);
+            this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
+
             this.insertPropTween(tweenEvent.offsetX);
-            this.animationName = this.parentComponent.parentComponent.parentComponent.animationName;
-            //console.log(this.animationName);
         }
     }
 });
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 8b3938f4..0e40e222 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -321,6 +321,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    animationNamesString:{
+        value:""
+    },
+
     ninjaStylesContoller:{
         value:null
     },
@@ -468,14 +472,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
                     }
             }
-            
-            
-            
-            
-            
-            
-            
-            
+
                 // Drag and Drop:
                 // Do we have a helper to append?
             if (this._appendHelper === true) {
@@ -527,7 +524,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 }
             }
             
-            
                 if (this._isFirstDraw === true) {
                         
                         if (this.isMainCollapsed === false) {
@@ -591,11 +587,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
                             this.tweens[i].tweenData = myObj;
                         }
-                        
-
                 }
                 }
         },
+
     handleClick:{
         value:function (ev) {
             // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
@@ -609,7 +604,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         this.updateKeyframeRule();
                     } else {
                         this.handleNewTween(ev);
-                        this.updateKeyframeRule();
+                        if (ev.target.className === "tracklane") {
+                            this.updateKeyframeRule();
+                        }
                     }
                 } else {
                     // TEMP error check
@@ -626,7 +623,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.application.ninja.timeline.selectLayer(selectedIndex, false);
                 this.insertTween(ev.offsetX);
             } else {
-                console.log(ev.target);
                 this.splitTween(ev);
             }
         }
@@ -792,6 +788,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
             var animationDuration = Math.round(this.trackDuration / 1000) + "s";
             this.animationName = this.animatedElement.classList[0] + "_PositionSize";
+            this.animationNamesString = this.animationName;
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);