aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorKruti Shah2012-06-26 13:10:50 -0700
committerKruti Shah2012-06-26 13:10:50 -0700
commit0217858c93c54c9b65da4c4c52730a5221664ea8 (patch)
tree696ba23b6c66237eae5c98b0c3fee62909841708 /js/panels/Timeline
parenta2047a565aa5ef8643c5d71de3cc484191d6c671 (diff)
parentd9170ea8ac54aa2aefd43de15defb439e65fa1f3 (diff)
downloadninja-0217858c93c54c9b65da4c4c52730a5221664ea8.tar.gz
Merge branch 'refs/heads/TimelineUberJD' into Timeline-local-kruti
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js10
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js8
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js7
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js1
4 files changed, 18 insertions, 8 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index ba6952aa..95a94b36 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,9 +76,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
76 76
77 selectKeyframe:{ 77 selectKeyframe:{
78 value:function(){ 78 value:function(){
79
80 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
81 var tweenID = this.parentComponent.tweenID;
82 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
83 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
84 return;
85 }
86
79 this.isSelected=true; 87 this.isSelected=true;
80 this.element.style.left = (this.position - 6) + "px"; 88 this.element.style.left = (this.position - 6) + "px";
81 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty 89 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
82 this.parentComponent.selectTween(); 90 this.parentComponent.selectTween();
83 } 91 }
84 }, 92 },
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index c18d6eff..31ba8253 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
442 442
443 for (var i = 0; i < this.propTweens.length; i++) { 443 for (var i = 0; i < this.propTweens.length; i++) {
444 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); 444 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
445 // TODO - trackDur should be parseFloat rounded to significant digits 445 // trackDur should be parseFloat rounded to significant digits
446 var trackDur = parseInt(this.trackDuration); 446 var trackDur = parseInt(this.trackDuration);
447 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 447 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
448 var keyframePropertyString = " " + keyframePercent + " {"; 448 var keyframePropertyString = " " + keyframePercent + " {";
449 for(var prop in this.propTweens[i].tweenData.tweenedProperties){ 449 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
450 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop]; 450 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";";
451 } 451 }
452 keyframePropertyString += "}"; 452 keyframePropertyString += "}";
453 keyframeString += keyframePropertyString; 453 keyframeString += keyframePropertyString;
@@ -469,7 +469,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
469 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; 469 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
470 470
471 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; 471 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
472 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; 472 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString;
473 var newAnimationNames = currentAnimationNameString + "," + this.animationName; 473 var newAnimationNames = currentAnimationNameString + "," + this.animationName;
474 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 474 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
475 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; 475 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
@@ -479,8 +479,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
479 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; 479 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
480 480
481 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); 481 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
482
483 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); 482 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
483 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
484 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); 484 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
485 485
486 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; 486 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3a8d1ff3..98989022 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -1039,16 +1039,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1039 value:function (tweenEvent) { 1039 value:function (tweenEvent) {
1040 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; 1040 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
1041 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; 1041 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
1042 this.tweens[0].tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
1043 this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
1042 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 1044 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
1043 this.animationName = this.animatedElement.classList[0] + "_PositionSize"; 1045 this.animationName = this.animatedElement.classList[0] + "_PositionSize";
1044 this.animationNamesString = this.animationName; 1046 this.animationNamesString = this.animationName;
1045 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 1047 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
1046 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 1048 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
1049 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
1047 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); 1050 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
1051
1048 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; 1052 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }";
1049 1053
1050 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 1054 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
1051
1052 this.insertTween(tweenEvent.offsetX); 1055 this.insertTween(tweenEvent.offsetX);
1053 this.isTrackAnimated = true; 1056 this.isTrackAnimated = true;
1054 } 1057 }
@@ -1062,7 +1065,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1062 // build the new keyframe string 1065 // build the new keyframe string
1063 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 1066 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
1064 1067
1065 console.log(this.animationName); 1068 //console.log(this.animationName);
1066 1069
1067 for (var i = 0; i < this.tweens.length; i++) { 1070 for (var i = 0; i < this.tweens.length; i++) {
1068 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); 1071 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec);
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 682a8619..2d4ae75d 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -206,7 +206,6 @@ var Tween = exports.Tween = Montage.create(Component, {
206 if (event.detail.source && event.detail.source !== "tween") { 206 if (event.detail.source && event.detail.source !== "tween") {
207 207
208 if(this.parentComponent.parentComponent.isSubproperty){ 208 if(this.parentComponent.parentComponent.isSubproperty){
209 console.log("setting style tween property")
210 this.setStyleTweenProperty(event.detail); 209 this.setStyleTweenProperty(event.detail);
211 } else { 210 } else {
212 // check for correct element selection 211 // check for correct element selection