aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js55
1 files changed, 23 insertions, 32 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 8fd62187..835fc785 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -747,12 +747,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
747 // check for multiple animation names 747 // check for multiple animation names
748 var animationNameList = this.animationName.split(","); 748 var animationNameList = this.animationName.split(",");
749 if(animationNameList.length > 1){ 749 if(animationNameList.length > 1){
750 this.animationNamesString = this.animationName;
750 this.animationName = animationNameList[0]; 751 this.animationName = animationNameList[0];
751 this.getAllAnimationRules(animationNameList); 752 this.getAllAnimationRules(animationNameList);
753 } else {
754 this.animationNamesString = this.animationName;
752 } 755 }
753 756
754 this.animationNamesString = this.animationName;
755
756 // build tweens for this tracks's keyframe rule 757 // build tweens for this tracks's keyframe rule
757 if(this.animationName){ 758 if(this.animationName){
758 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 759 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
@@ -764,17 +765,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
764 var newTween = {}; 765 var newTween = {};
765 newTween.tweenData = {}; 766 newTween.tweenData = {};
766 767
767 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); 768 var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = [];
768 769
769 topOffSetAttribute = offsetAttribute[3].split("px"); 770 for(j=0; j<styleLength; j++){
770 leftOffsetAttribute = offsetAttribute[5].split("px"); 771 // check for vendor prefixes and skip them for now
771 widthOffsetAttribute = offsetAttribute[7].split("px"); 772 var firstChar = this.currentKeyframeRule[i].style[j].charAt(0);
772 heightOffsetAttribute = offsetAttribute[9].split("px"); 773 if(firstChar === "-"){
774 break;
775 } else {
776 var currProp = this.currentKeyframeRule[i].style[j];
777 var propVal = this.currentKeyframeRule[i].style[currProp];
778 keyframeStyles.push([currProp, propVal]);
779 }
780 }
773 781
774 var tempTopOffset = parseInt(topOffSetAttribute[0]); 782 // recreate tween properties array for timeline tween
775 var tempLeftOffset = parseInt(leftOffsetAttribute[0]); 783 newTween.tweenData.tweenedProperties = [];
776 var tempWidthOffset = parseInt(widthOffsetAttribute[0]); 784 for(var k in keyframeStyles){
777 var tempHeightOffset = parseInt(heightOffsetAttribute[0]); 785 newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1];
786 }
778 787
779 if (this.currentKeyframeRule[i].keyText === "0%") { 788 if (this.currentKeyframeRule[i].keyText === "0%") {
780 newTween.tweenData.spanWidth = 0; 789 newTween.tweenData.spanWidth = 0;
@@ -782,11 +791,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
782 newTween.tweenData.keyFrameMillisec = 0; 791 newTween.tweenData.keyFrameMillisec = 0;
783 newTween.tweenData.tweenID = 0; 792 newTween.tweenData.tweenID = 0;
784 newTween.tweenData.spanPosition = 0; 793 newTween.tweenData.spanPosition = 0;
785 newTween.tweenData.tweenedProperties = [];
786 newTween.tweenData.tweenedProperties["top"] = tempTopOffset + "px";
787 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset + "px";
788 newTween.tweenData.tweenedProperties["width"] = tempWidthOffset + "px";
789 newTween.tweenData.tweenedProperties["height"] = tempHeightOffset + "px";
790 this.tweens.push(newTween); 794 this.tweens.push(newTween);
791 } 795 }
792 else { 796 else {
@@ -804,11 +808,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
804 newTween.tweenData.keyFrameMillisec = currentMilliSec; 808 newTween.tweenData.keyFrameMillisec = currentMilliSec;
805 newTween.tweenData.tweenID = this.nextKeyframe; 809 newTween.tweenData.tweenID = this.nextKeyframe;
806 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; 810 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth;
807 newTween.tweenData.tweenedProperties=[];
808 newTween.tweenData.tweenedProperties["top"] = tempTopOffset + "px";
809 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset + "px";
810 newTween.tweenData.tweenedProperties["width"] = tempWidthOffset + "px";
811 newTween.tweenData.tweenedProperties["height"] = tempHeightOffset + "px";
812 this.tweens.push(newTween); 811 this.tweens.push(newTween);
813 } 812 }
814 this.nextKeyframe += 1; 813 this.nextKeyframe += 1;
@@ -821,7 +820,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
821 820
822 getAllAnimationRules:{ 821 getAllAnimationRules:{
823 value:function(ruleNames){ 822 value:function(ruleNames){
824 //console.log(ruleNames);
825 823
826 for(var i in ruleNames){ 824 for(var i in ruleNames){
827 var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace 825 var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace
@@ -835,17 +833,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
835 recreatePropertyTracks:{ 833 recreatePropertyTracks:{
836 value:function(ruleSet){ 834 value:function(ruleSet){
837 835
838 //var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
839 //var test = this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle();
840 //console.log(test);
841
842 for(var i in ruleSet){ 836 for(var i in ruleSet){
843 console.log(i);
844 //console.log(ruleSet[i]);
845 var styleProp = ruleSet[i][0].style[0]; 837 var styleProp = ruleSet[i][0].style[0];
846 console.log(styleProp);
847 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp); 838 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp);
848 } 839 }
840
849 } 841 }
850 }, 842 },
851 843
@@ -883,14 +875,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
883 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 875 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
884 var keyframePropertyString = " " + keyframePercent + " {"; 876 var keyframePropertyString = " " + keyframePercent + " {";
885 for(var prop in this.tweens[i].tweenData.tweenedProperties){ 877 for(var prop in this.tweens[i].tweenData.tweenedProperties){
886 console.log(prop + " - " + this.tweens[i].tweenData.tweenedProperties[prop]); 878 //console.log(prop + " - " + this.tweens[i].tweenData.tweenedProperties[prop]);
887 keyframePropertyString += prop + ": " + this.tweens[i].tweenData.tweenedProperties[prop] + ";"; 879 keyframePropertyString += prop + ": " + this.tweens[i].tweenData.tweenedProperties[prop] + ";";
888 } 880 }
889 keyframePropertyString += "}"; 881 keyframePropertyString += "}";
890 keyframeString += keyframePropertyString; 882 keyframeString += keyframePropertyString;
891 } 883 }
892 keyframeString += " }"; 884 keyframeString += " }";
893 console.log(keyframeString);
894 // set the keyframe string as the new rule 885 // set the keyframe string as the new rule
895 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); 886 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
896 this.application.ninja.documentController.activeDocument.needsSave = true; 887 this.application.ninja.documentController.activeDocument.needsSave = true;