aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js51
1 files changed, 26 insertions, 25 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index a5722335..9c8b5206 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -664,10 +664,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
664 newTween.tweenData.tweenID = 0; 664 newTween.tweenData.tweenID = 0;
665 newTween.tweenData.spanPosition = 0; 665 newTween.tweenData.spanPosition = 0;
666 newTween.tweenData.tweenedProperties = []; 666 newTween.tweenData.tweenedProperties = [];
667 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; 667 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
668 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; 668 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
669 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; 669 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
670 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; 670 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
671 this.tweens.push(newTween); 671 this.tweens.push(newTween);
672 } else { 672 } else {
673 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; 673 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
@@ -676,10 +676,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
676 newTween.tweenData.tweenID = this.nextKeyframe; 676 newTween.tweenData.tweenID = this.nextKeyframe;
677 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; 677 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
678 newTween.tweenData.tweenedProperties = []; 678 newTween.tweenData.tweenedProperties = [];
679 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; 679 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
680 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; 680 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
681 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; 681 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
682 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; 682 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
683 this.tweens.push(newTween); 683 this.tweens.push(newTween);
684 684
685 // update the animation duration 685 // update the animation duration
@@ -721,10 +721,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
721 newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; 721 newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1;
722 newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; 722 newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth;
723 newTweenToInsert.tweenData.tweenedProperties = []; 723 newTweenToInsert.tweenData.tweenedProperties = [];
724 newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; 724 newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
725 newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; 725 newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
726 newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; 726 newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
727 newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; 727 newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
728 this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); 728 this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
729 break; 729 break;
730 } 730 }
@@ -783,10 +783,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
783 newTween.tweenData.tweenID = 0; 783 newTween.tweenData.tweenID = 0;
784 newTween.tweenData.spanPosition = 0; 784 newTween.tweenData.spanPosition = 0;
785 newTween.tweenData.tweenedProperties = []; 785 newTween.tweenData.tweenedProperties = [];
786 newTween.tweenData.tweenedProperties["top"] = tempTopOffset; 786 newTween.tweenData.tweenedProperties["top"] = tempTopOffset + "px";
787 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; 787 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset + "px";
788 newTween.tweenData.tweenedProperties["width"] = tempWidthOffset; 788 newTween.tweenData.tweenedProperties["width"] = tempWidthOffset + "px";
789 newTween.tweenData.tweenedProperties["height"] = tempHeightOffset; 789 newTween.tweenData.tweenedProperties["height"] = tempHeightOffset + "px";
790 this.tweens.push(newTween); 790 this.tweens.push(newTween);
791 } 791 }
792 else { 792 else {
@@ -805,10 +805,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
805 newTween.tweenData.tweenID = this.nextKeyframe; 805 newTween.tweenData.tweenID = this.nextKeyframe;
806 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; 806 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth;
807 newTween.tweenData.tweenedProperties=[]; 807 newTween.tweenData.tweenedProperties=[];
808 newTween.tweenData.tweenedProperties["top"] = tempTopOffset; 808 newTween.tweenData.tweenedProperties["top"] = tempTopOffset + "px";
809 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; 809 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset + "px";
810 newTween.tweenData.tweenedProperties["width"] = tempWidthOffset; 810 newTween.tweenData.tweenedProperties["width"] = tempWidthOffset + "px";
811 newTween.tweenData.tweenedProperties["height"] = tempHeightOffset; 811 newTween.tweenData.tweenedProperties["height"] = tempHeightOffset + "px";
812 this.tweens.push(newTween); 812 this.tweens.push(newTween);
813 } 813 }
814 this.nextKeyframe += 1; 814 this.nextKeyframe += 1;
@@ -851,16 +851,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
851 851
852 addAnimationRuleToElement:{ 852 addAnimationRuleToElement:{
853 value:function (tweenEvent) { 853 value:function (tweenEvent) {
854 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; 854 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
855 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; 855 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
856 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 856 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
857 this.animationName = this.animatedElement.classList[0] + "_PositionSize"; 857 this.animationName = this.animatedElement.classList[0] + "_PositionSize";
858 this.animationNamesString = this.animationName; 858 this.animationNamesString = this.animationName;
859 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 859 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
860 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 860 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
861 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); 861 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
862 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
863 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
864 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;} }"; 862 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;} }";
865 863
866 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 864 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
@@ -885,12 +883,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
885 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 883 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
886 var keyframePropertyString = " " + keyframePercent + " {"; 884 var keyframePropertyString = " " + keyframePercent + " {";
887 for(var prop in this.tweens[i].tweenData.tweenedProperties){ 885 for(var prop in this.tweens[i].tweenData.tweenedProperties){
888 keyframePropertyString += prop + ": " + this.tweens[i].tweenData.tweenedProperties[prop] + "px;"; 886 console.log(prop + " - " + this.tweens[i].tweenData.tweenedProperties[prop]);
887 keyframePropertyString += prop + ": " + this.tweens[i].tweenData.tweenedProperties[prop] + ";";
889 } 888 }
890 keyframePropertyString += "}"; 889 keyframePropertyString += "}";
891 keyframeString += keyframePropertyString; 890 keyframeString += keyframePropertyString;
892 } 891 }
893 keyframeString += " }"; 892 keyframeString += " }";
893 console.log(keyframeString);
894 // set the keyframe string as the new rule 894 // set the keyframe string as the new rule
895 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); 895 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
896 this.application.ninja.documentController.activeDocument.needsSave = true; 896 this.application.ninja.documentController.activeDocument.needsSave = true;
@@ -978,6 +978,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
978 this.arrStyleTracks.push(restoredStyleTrack); 978 this.arrStyleTracks.push(restoredStyleTrack);
979 979
980 this.isStyleCollapsed = true; 980 this.isStyleCollapsed = true;
981 this.triggerOutgoingBinding();
981 } 982 }
982 else if (layerEvent.layerEventType === "deleteStyle") { 983 else if (layerEvent.layerEventType === "deleteStyle") {
983 // TODO: Delete the right track. Index can be passed in event object, use that for splice(). 984 // TODO: Delete the right track. Index can be passed in event object, use that for splice().