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.js88
1 files changed, 67 insertions, 21 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 68ea928a..26ce526f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -72,6 +72,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
72 this.trackData.isVisible = value; 72 this.trackData.isVisible = value;
73 } 73 }
74 }, 74 },
75
76 _stageElement: {
77 value: null
78 },
79 stageElement: {
80 get: function() {
81 return this._stageElement;
82 },
83 set: function(newVal) {
84 this._stageElement = newVal;
85 this.trackData.stageElement = newVal;
86 }
87 },
75 88
76 // Are the various collapsers collapsed or not 89 // Are the various collapsers collapsed or not
77 _isMainCollapsed:{ 90 _isMainCollapsed:{
@@ -484,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
484 this.isStyleCollapsed = this.trackData.isStyleCollapsed; 497 this.isStyleCollapsed = this.trackData.isStyleCollapsed;
485 this.trackPosition = this.trackData.trackPosition; 498 this.trackPosition = this.trackData.trackPosition;
486 this.isVisible = this.trackData.isVisible; 499 this.isVisible = this.trackData.isVisible;
500 this.stageElement = this.trackData.stageElement;
487 this.trackEditorProperty = "master"; 501 this.trackEditorProperty = "master";
488 this.needsDraw = true; 502 this.needsDraw = true;
489 } 503 }
@@ -682,7 +696,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
682 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span 696 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
683 // This needs to move to a keyboard shortcut that is TBD 697 // This needs to move to a keyboard shortcut that is TBD
684 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 698 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
699
700 var targetElementOffset = this.findXOffset(ev.currentTarget),
701 position = (event.pageX - targetElementOffset) - 18;
702
703 this.application.ninja.timeline.playheadmarker.style.left = position + "px";
704 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
705 var currentMillisec = currentMillisecPerPixel * position;
706 this.application.ninja.timeline.updateTimeText(currentMillisec);
707
685 if (ev.shiftKey) { 708 if (ev.shiftKey) {
709 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
710 this.application.ninja.timeline.selectLayer(selectedIndex, true);
686 if (this.tweens.length < 1) { 711 if (this.tweens.length < 1) {
687 this.insertTween(0); 712 this.insertTween(0);
688 this.addAnimationRuleToElement(ev); 713 this.addAnimationRuleToElement(ev);
@@ -720,6 +745,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
720 745
721 handleNewTween:{ 746 handleNewTween:{
722 value:function (ev) { 747 value:function (ev) {
748
723 if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { 749 if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) {
724 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 750 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
725 this.application.ninja.timeline.selectLayer(selectedIndex, false); 751 this.application.ninja.timeline.selectLayer(selectedIndex, false);
@@ -727,31 +753,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
727 } else { 753 } else {
728 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. 754 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
729 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. 755 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
756 if (typeof(ev.currentTarget) === "undefined") {
757 this.splitTweenAt(ev.offsetX);
758 } else {
759 var targetElementOffset = this.findXOffset(ev.currentTarget),
760 position = event.pageX - targetElementOffset;
761 this.splitTweenAt(position-18);
762 }
763 }
764 }
765 },
766
767 findXOffset:{
768 value:function (obj) {
769 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
770 var curleft = 0;
771 if (typeof(obj) === "undefined") {
772 //debugger;
773 }
774 if (obj.offsetParent) {
775 do {
776 curleft += (obj.offsetLeft - obj.scrollLeft);
730 777
731 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element 778 } while (obj = obj.offsetParent);
732 var findXOffset = function(obj) {
733 var curleft = 0;
734 if (obj.offsetParent) {
735 do {
736 curleft += (obj.offsetLeft-obj.scrollLeft);
737
738 } while (obj = obj.offsetParent);
739 }
740 return curleft;
741 }
742 var targetElementOffset = findXOffset(ev.currentTarget),
743 position = event.pageX - targetElementOffset;
744
745 this.splitTweenAt(position-18);
746 } 779 }
780 return curleft;
747 } 781 }
748 }, 782 },
749 783
750 insertTween:{ 784 insertTween:{
751 value:function (clickPos) { 785 value:function (clickPos) {
752 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
753 this.application.ninja.timeline.selectLayer(selectedIndex, true);
754
755 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 786 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
756 var currentMillisec = currentMillisecPerPixel * clickPos; 787 var currentMillisec = currentMillisecPerPixel * clickPos;
757 this.trackDuration = currentMillisec; 788 this.trackDuration = currentMillisec;
@@ -969,6 +1000,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
969 newTween.tweenData.tweenID = 0; 1000 newTween.tweenData.tweenID = 0;
970 newTween.tweenData.spanPosition = 0; 1001 newTween.tweenData.spanPosition = 0;
971 this.tweens.push(newTween); 1002 this.tweens.push(newTween);
1003 this.createMatchingPositionSizeTween(newTween);
972 } 1004 }
973 else { 1005 else {
974 tempTiming = trackTiming.split("s"); 1006 tempTiming = trackTiming.split("s");
@@ -1027,16 +1059,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1027 value:function (tweenEvent) { 1059 value:function (tweenEvent) {
1028 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; 1060 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
1029 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; 1061 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
1062 this.tweens[0].tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
1063 this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
1030 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 1064 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
1031 this.animationName = this.animatedElement.classList[0] + "_PositionSize"; 1065 this.animationName = this.animatedElement.classList[0] + "_PositionSize";
1032 this.animationNamesString = this.animationName; 1066 if(this.animationNamesString.length == 0){
1033 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 1067 this.animationNamesString = this.animationName;
1068 } else {
1069 this.animationNamesString = this.animationName + ", " + this.animationNamesString;
1070 }
1071 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationNamesString);
1034 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 1072 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
1073 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
1035 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); 1074 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
1075
1036 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;} }"; 1076 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;} }";
1037 1077
1038 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 1078 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
1039
1040 this.insertTween(tweenEvent.offsetX); 1079 this.insertTween(tweenEvent.offsetX);
1041 this.isTrackAnimated = true; 1080 this.isTrackAnimated = true;
1042 } 1081 }
@@ -1050,6 +1089,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1050 // build the new keyframe string 1089 // build the new keyframe string
1051 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 1090 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
1052 1091
1092 //console.log(this.animationName);
1093
1053 for (var i = 0; i < this.tweens.length; i++) { 1094 for (var i = 0; i < this.tweens.length; i++) {
1054 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); 1095 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec);
1055 // TODO - trackDur should be parseFloat rounded to significant digits 1096 // TODO - trackDur should be parseFloat rounded to significant digits
@@ -1085,6 +1126,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1085 createPositionTracks:{ 1126 createPositionTracks:{
1086 value:function(){ 1127 value:function(){
1087 // create track objects for position and transform tracks and push into arrays 1128 // create track objects for position and transform tracks and push into arrays
1129
1130 // ... but only do it if we haven't already.
1131 if (this.arrPositionTracks.length > 0) {
1132 return;
1133 }
1088 1134
1089 // create 'left' track 1135<