diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 21 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 88 |
2 files changed, 78 insertions, 31 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 79014ae6..658764c8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -56,7 +56,7 @@ | |||
56 | "styleTrackRepetition": { | 56 | "styleTrackRepetition": { |
57 | "prototype": "montage/ui/repetition.reel", | 57 | "prototype": "montage/ui/repetition.reel", |
58 | "properties": { | 58 | "properties": { |
59 | "element": {"#": "content-styles"}, | 59 | "element": {"#": "content_style_tracks"}, |
60 | "isSelectionEnabled" : false | 60 | "isSelectionEnabled" : false |
61 | }, | 61 | }, |
62 | "bindings": { | 62 | "bindings": { |
@@ -195,22 +195,23 @@ | |||
195 | </div> | 195 | </div> |
196 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> | 196 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> |
197 | <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main"> | 197 | <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main"> |
198 | <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position"> | ||
199 | 198 | ||
200 | </div> | 199 | <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position"></div> |
201 | <div class="content-position collapsible-content collapsible-collapsed" | 200 | |
202 | data-montage-id="content_position_collapser"> | 201 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content_position_collapser"> |
203 | <div data-montage-id="content_position_tracks"> | 202 | <div data-montage-id="content_position_tracks"> |
204 | <div data-montage-id="position_track_base"></div> | 203 | <div data-montage-id="position_track_base"></div> |
205 | </div> | 204 | </div> |
206 | </div> | 205 | </div> |
207 | 206 | ||
208 | <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"> | 207 | <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"></div> |
209 | 208 | ||
210 | </div> | 209 | <div class="content-styles collapsible-content collapsible-collapsed" data-montage-id="content-styles"> |
211 | <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> | 210 | <div data-montage-id="content_style_tracks"> |
212 | <div data-montage-id="style-track-base"></div> | 211 | <div data-montage-id="style-track-base"></div> |
212 | </div> | ||
213 | </div> | 213 | </div> |
214 | |||
214 | </div> | 215 | </div> |
215 | </div> | 216 | </div> |
216 | 217 | ||
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"; |