diff options
author | Jonathan Duran | 2012-06-19 08:40:44 -0700 |
---|---|---|
committer | Jonathan Duran | 2012-06-19 08:40:44 -0700 |
commit | 53a49f49ce5cd72fbb21e2840bb9622d5952d953 (patch) | |
tree | f1af9c311e7a72a03e3e521a88410fd75aca05e8 /js | |
parent | 6f25a2e70079de6bcbb8c3411ddef88c2ed1ea39 (diff) | |
parent | e600253fa8e6027c4bac7ebb69e0d4ce12a76ff8 (diff) | |
download | ninja-53a49f49ce5cd72fbb21e2840bb9622d5952d953.tar.gz |
Merge branch 'refs/heads/timeline-local' into TimelineUber
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 17 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 4 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 7 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 106 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 7 |
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< |