diff options
author | Kruti Shah | 2012-06-26 09:46:59 -0700 |
---|---|---|
committer | Kruti Shah | 2012-06-26 09:46:59 -0700 |
commit | 4b4a95140d52e191e5e637371dfc369e50e7f9c8 (patch) | |
tree | 274b55f66527a9925032c5d6da4baa6f12be8ada /js/panels/Timeline/TimelineTrack.reel | |
parent | 4bf8e4cdc179c3b388fc06f26008808aa4b77eb0 (diff) | |
parent | f0d4d89d856b99da1ca8dd3366c48bb76ba6b1f6 (diff) | |
download | ninja-4b4a95140d52e191e5e637371dfc369e50e7f9c8.tar.gz |
Merge branch 'refs/heads/TimelineUberJD' into Timeline-local-kruti
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 | 55 |
2 files changed, 45 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 85fce1ec..3a8d1ff3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -682,6 +682,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
682 | // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span | 682 | // 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 | 683 | // This needs to move to a keyboard shortcut that is TBD |
684 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 684 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
685 | |||
686 | var targetElementOffset = this.findXOffset(ev.currentTarget), | ||
687 | position = (event.pageX - targetElementOffset) - 18; | ||
688 | |||
689 | this.application.ninja.timeline.playheadmarker.style.left = position + "px"; | ||
690 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
691 | var currentMillisec = currentMillisecPerPixel * position; | ||
692 | this.application.ninja.timeline.updateTimeText(currentMillisec); | ||
693 | |||
685 | if (ev.shiftKey) { | 694 | if (ev.shiftKey) { |
686 | if (this.tweens.length < 1) { | 695 | if (this.tweens.length < 1) { |
687 | this.insertTween(0); | 696 | this.insertTween(0); |
@@ -709,15 +718,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
709 | this.updateKeyframeRule(); | 718 | this.updateKeyframeRule(); |
710 | } else { | 719 | } else { |
711 | this.handleNewTween(ev); | 720 | this.handleNewTween(ev); |
712 | |||
713 | // Split a tween! | ||
714 | //this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft); | ||
715 | this.updateKeyframeRule(); | 721 | this.updateKeyframeRule(); |
716 | } | 722 | } |
717 | } else if(ev.actionType == "remove"){ | 723 | } else if(ev.actionType == "remove"){ |
718 | this.removeTween(); | 724 | this.removeTween(); |
725 | this.updateKeyframeRule(); | ||
719 | } | 726 | } |
720 | |||
721 | } | 727 | } |
722 | }, | 728 | }, |
723 | 729 | ||
@@ -730,19 +736,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
730 | } else { | 736 | } else { |
731 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. | 737 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. |
732 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. | 738 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. |
733 | 739 | var targetElementOffset = this.findXOffset(ev.currentTarget), | |
734 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
735 | var findXOffset = function(obj) { | ||
736 | var curleft = 0; | ||
737 | if (obj.offsetParent) { | ||
738 | do { | ||
739 | curleft += (obj.offsetLeft-obj.scrollLeft); | ||
740 | |||
741 | } while (obj = obj.offsetParent); | ||
742 | } | ||
743 | return curleft; | ||
744 | } | ||
745 | var targetElementOffset = findXOffset(ev.currentTarget), | ||
746 | position = event.pageX - targetElementOffset; | 740 | position = event.pageX - targetElementOffset; |
747 | 741 | ||
748 | this.splitTweenAt(position-18); | 742 | this.splitTweenAt(position-18); |
@@ -750,6 +744,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
750 | } | 744 | } |
751 | }, | 745 | }, |
752 | 746 | ||
747 | findXOffset:{ | ||
748 | value:function (obj) { | ||
749 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
750 | var curleft = 0; | ||
751 | if (obj.offsetParent) { | ||
752 | do { | ||
753 | curleft += (obj.offsetLeft - obj.scrollLeft); | ||
754 | |||
755 | } while (obj = obj.offsetParent); | ||
756 | } | ||
757 | return curleft; | ||
758 | } | ||
759 | }, | ||
760 | |||
753 | insertTween:{ | 761 | insertTween:{ |
754 | value:function (clickPos) { | 762 | value:function (clickPos) { |
755 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 763 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
@@ -800,8 +808,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
800 | this.createMatchingPositionSizeTween(newTween); | 808 | this.createMatchingPositionSizeTween(newTween); |
801 | } | 809 | } |
802 | 810 | ||
803 | |||
804 | |||
805 | this.application.ninja.currentDocument.model.needsSave = true; | 811 | this.application.ninja.currentDocument.model.needsSave = true; |
806 | } | 812 | } |
807 | }, | 813 | }, |
@@ -974,6 +980,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
974 | newTween.tweenData.tweenID = 0; | 980 | newTween.tweenData.tweenID = 0; |
975 | newTween.tweenData.spanPosition = 0; | 981 | newTween.tweenData.spanPosition = 0; |
976 | this.tweens.push(newTween); | 982 | this.tweens.push(newTween); |
983 | this.createMatchingPositionSizeTween(newTween); | ||
977 | } | 984 | } |
978 | else { | 985 | else { |
979 | tempTiming = trackTiming.split("s"); | 986 | tempTiming = trackTiming.split("s"); |
@@ -995,6 +1002,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
995 | newTween.tweenData.easing = "none"; | 1002 | newTween.tweenData.easing = "none"; |
996 | } | 1003 | } |
997 | this.tweens.push(newTween); | 1004 | this.tweens.push(newTween); |
1005 | this.createMatchingPositionSizeTween(newTween); | ||
998 | } | 1006 | } |
999 | this.nextKeyframe += 1; | 1007 | this.nextKeyframe += 1; |
1000 | } | 1008 | } |
@@ -1022,8 +1030,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
1022 | value:function(ruleSet){ | 1030 | value:function(ruleSet){ |
1023 | for(var i in ruleSet){ | 1031 | for(var i in ruleSet){ |
1024 | var styleProp = ruleSet[i][0].style[0]; | 1032 | var styleProp = ruleSet[i][0].style[0]; |
1025 | //console.log(styleProp); | ||
1026 | //console.log(ruleSet[i]); | ||
1027 | this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]); | 1033 | this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]); |
1028 | } | 1034 | } |
1029 | } | 1035 | } |
@@ -1056,6 +1062,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
1056 | // build the new keyframe string | 1062 | // build the new keyframe string |
1057 | var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; | 1063 | var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; |
1058 | 1064 | ||
1065 | console.log(this.animationName); | ||
1066 | |||
1059 | for (var i = 0; i < this.tweens.length; i++) { | 1067 | for (var i = 0; i < this.tweens.length; i++) { |
1060 | var keyMill = parseIn |