handle style changes on keyframes

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

2 files changed, 28 insertions, 4 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index f44afcec..03287df9 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -101,6 +101,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         value:null
     },
 
+    trackDuration:{
+        value:0
+    },
+
     _trackID:{
         value:null
     },
@@ -209,6 +213,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickPos;
+            this.trackDuration = currentMillisec;
 
             var newTween = {};
             newTween.tweenData = {};
@@ -242,7 +247,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     updatePropKeyframeRule:{
         value:function(){
-
+            // delete the current rule
+            this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule);
+
+            // build the new keyframe string
+            var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
+
+            for (var i = 0; i < this.propTweens.length; i++) {
+                var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
+                // TODO - trackDur should be parseFloat rounded to significant digits
+                var trackDur = parseInt(this.trackDuration);
+                var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
+                var keyframePropertyString = " " + keyframePercent + " {";
+                for(var prop in this.propTweens[i].tweenData.tweenedProperties){
+                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop];
+                }
+                keyframePropertyString += "}";
+                keyframeString += keyframePropertyString;
+            }
+            keyframeString += " }";
+            // set the keyframe string as the new rule
+            this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
+            this.application.ninja.documentController.activeDocument.needsSave = true;
         }
     },
 
@@ -269,9 +295,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             //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);
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index b8cc4a07..bcd3d75f 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -254,6 +254,7 @@ var Tween = exports.Tween = Montage.create(Component, {
                 var prop = this.parentComponent.parentComponent.trackEditorProperty;
                 this.tweenedProperties[prop] = eventDetail.data.value.color.css;
                 console.log(this.tweenedProperties[prop]);
+                this.parentComponent.parentComponent.updatePropKeyframeRule();
 
             } else if(eventDetail.type == "setProperty"){
                 // ignore top, left, width, and height