aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.html3
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.js17
-rw-r--r--js/panels/Timeline/Span.reel/Span.js4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js7
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js106
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js7
6 files changed, 126 insertions, 18 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
index 82218b45..1c8f808f 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -23,8 +23,9 @@
23 <body> 23 <body>
24 <div data-montage-id="container-easing-menu" class="container-easing-choices"> 24 <div data-montage-id="container-easing-menu" class="container-easing-choices">
25 <ul data-montage-id="easing_choices" class="easing-choices"> 25 <ul data-montage-id="easing_choices" class="easing-choices">
26 <li data-ninja-ease="none">none</li>
26 <li data-ninja-ease="ease">ease</li> 27 <li data-ninja-ease="ease">ease</li>
27 <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li> 28 <li data-ninja-ease="ease-out">ease-out</li>
28 <li data-ninja-ease="ease-in">ease-in</li> 29 <li data-ninja-ease="ease-in">ease-in</li>
29 <li data-ninja-ease="ease-in-out">ease-in-out</li> 30 <li data-ninja-ease="ease-in-out">ease-in-out</li>
30 <li data-ninja-ease="linear">linear</li> 31 <li data-ninja-ease="linear">linear</li>
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index f0547e31..ced3ae6a 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
81 81
82 // currentChoice: The data attribute of the current choice 82 // currentChoice: The data attribute of the current choice
83 _currentChoice: { 83 _currentChoice: {
84 value: null 84 value: "none"
85 }, 85 },
86 currentChoice: { 86 currentChoice: {
87 get: function() { 87 get: function() {
@@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
109 draw: { 109 draw: {
110 value: function() { 110 value: function() {
111 // Update the selection classes. 111 // Update the selection classes.
112 this.element.querySelector(".easing-selected").classList.remove("easing-selected"); 112 var easingSelected = this.element.querySelector(".easing-selected");
113 this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected"); 113 if (easingSelected !== null) {
114 easingSelected.classList.remove("easing-selected");
115 }
116 var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
117 if (dataEl !== null) {
118 dataEl.classList.add("easing-selected");
119 }
114 } 120 }
115 }, 121 },
116 didDraw: { 122 didDraw: {
@@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
147 event.stopPropagation(); 153 event.stopPropagation();
148 154
149 // Un-highlight the old choice and highlight the new choice 155 // Un-highlight the old choice and highlight the new choice
150 this.element.querySelector(".easing-selected").classList.remove("easing-selected"); 156 var easingSelected = this.element.querySelector(".easing-selected");
157 if (easingSelected !== null) {
158 easingSelected.classList.remove("easing-selected");
159 }
151 event.target.classList.add("easing-selected"); 160 event.target.classList.add("easing-selected");
152 161
153 // Set the easing in the span that called us 162 // Set the easing in the span that called us
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 59cd13ed..91ce1cfb 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -59,7 +59,7 @@ var Span = exports.Span = Montage.create(Component, {
59 }, 59 },
60 60
61 _easing: { 61 _easing: {
62 value: "ease-in" 62 value: "none"
63 }, 63 },
64 easing: { 64 easing: {
65 get: function() { 65 get: function() {
@@ -68,7 +68,7 @@ var Span = exports.Span = Montage.create(Component, {
68 set: function(newVal) { 68 set: function(newVal) {
69 if (newVal !== this._easing) { 69 if (newVal !== this._easing) {
70 if (typeof(newVal) === "undefined") { 70 if (typeof(newVal) === "undefined") {
71 newVal = "ease-in"; 71 newVal = "none";
72 } 72 }
73 this._easing = newVal; 73 this._easing = newVal;
74 this.parentComponent.setKeyframeEase(newVal); 74 this.parentComponent.setKeyframeEase(newVal);
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 27b3537c..339ca5a4 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1016,7 +1016,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1016 //console.log(this.trackRepetition); 1016 //console.log(this.trackRepetition);
1017 var tempEv = {}; 1017 var tempEv = {};
1018 tempEv.offsetX = this.playheadmarker.offsetLeft; 1018 tempEv.offsetX = this.playheadmarker.offsetLeft;
1019 this.trackRepetition.childComponents[this.currentLayersSelected[0]].handleKeyboardShortcut(tempEv); 1019 if (typeof(this.trackRepetition.childComponents[this.currentLayersSelected[0]]) !== "undefined") {
1020 this.trackRepetition.childComponents[this.currentLayersSelected[0]].handleKeyboardShortcut(tempEv);
1021 } else {
1022 // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently.
1023 }
1024
1020 } 1025 }
1021 }, 1026 },
1022 1027
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3db57a3a..84bac2cb 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
687 if (ev.target.className === "tracklane") { 687 if (ev.target.className === "tracklane") {
688 this.handleNewTween(ev); 688 this.handleNewTween(ev);
689 this.updateKeyframeRule(); 689 this.updateKeyframeRule();
690 } else if (ev.target.className === "tween_span" && ev.target.parentElement.parentElement.className === "tracklane") { 690 } else if (ev.target.className === "tween_span_bar" && ev.target.parentElement.parentElement.parentElement.className === "tracklane") {
691 this.handleNewTween(ev); 691 this.handleNewTween(ev);
692 this.updateKeyframeRule(); 692 this.updateKeyframeRule();
693 } 693 }
@@ -703,7 +703,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
703 this.addAnimationRuleToElement(ev); 703 this.addAnimationRuleToElement(ev);
704 this.updateKeyframeRule(); 704 this.updateKeyframeRule();
705 } else { 705 } else {
706 this.handleNewTween(ev); 706 //this.handleNewTween(ev);
707
708 // Split a tween!
709 this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft)
707 this.updateKeyframeRule(); 710 this.updateKeyframeRule();
708 } 711 }
709 } 712 }
@@ -716,7 +719,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
716 this.application.ninja.timeline.selectLayer(selectedIndex, false); 719 this.application.ninja.timeline.selectLayer(selectedIndex, false);
717 this.insertTween(ev.offsetX); 720 this.insertTween(ev.offsetX);
718 } else { 721 } else {
719 this.splitTween(ev); 722 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
723 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
724
725 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
726 var findXOffset = function(obj) {
727 var curleft = 0;
728 if (obj.offsetParent) {
729 do {
730 curleft += (obj.offsetLeft-obj.scrollLeft);
731
732 } while (obj = obj.offsetParent);
733 }
734 return curleft;
735 }
736 var targetElementOffset = findXOffset(ev.currentTarget),
737 position = event.pageX - targetElementOffset;
738
739 this.splitTweenAt(position-18);
720 } 740 }
721 } 741 }
722 }, 742 },
@@ -751,7 +771,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
751 newTween.tweenData.keyFrameMillisec = currentMillisec; 771 newTween.tweenData.keyFrameMillisec = currentMillisec;
752 newTween.tweenData.tweenID = this.nextKeyframe; 772 newTween.tweenData.tweenID = this.nextKeyframe;
753 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; 773 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
754 newTween.tweenData.easing = "ease-in"; 774 newTween.tweenData.easing = "none";
755 newTween.tweenData.tweenedProperties = []; 775 newTween.tweenData.tweenedProperties = [];
756 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; 776 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
757 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; 777 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
@@ -771,10 +791,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
771 791
772 splitTween:{ 792 splitTween:{
773 value:function (ev) { 793 value:function (ev) {
774 var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; 794 var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX,
775 var i; 795 i,
776 var tweensLength = this.tweens.length-1; 796 tweensLength = this.tweens.length-1,
777 var prevTween, nextTween, splitTweenIndex; 797 prevTween, nextTween, splitTweenIndex;
798
799 consol.log(ev.target.className)
778 for(i=0; i<tweensLength; i++){ 800 for(i=0; i<tweensLength; i++){
779 prevTween = this.tweens[i].tweenData.keyFramePosition; 801 prevTween = this.tweens[i].tweenData.keyFramePosition;
780 nextTween = this.tweens[i+1].tweenData.keyFramePosition; 802 nextTween = this.tweens[i+1].tweenData.keyFramePosition;
@@ -810,6 +832,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
810 } 832 }
811 }, 833 },
812 834
835 // splitTweenAt: Split a tween at a particular position (x coordinate)
836 splitTweenAt: {
837 value:function (position) {