aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html21
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js50
2 files changed, 47 insertions, 24 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..98989022 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);
@@ -727,19 +736,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
727 } else { 736 } else {
728 // 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.
729 // 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.
730 739 var targetElementOffset = this.findXOffset(ev.currentTarget),
731 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
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; 740 position = event.pageX - targetElementOffset;
744 741
745 this.splitTweenAt(position-18); 742 this.splitTweenAt(position-18);
@@ -747,6 +744,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
747 } 744 }
748 }, 745 },
749 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
750 insertTween:{ 761 insertTween:{
751 value:function (clickPos) { 762 value:function (clickPos) {
752 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 763 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
@@ -969,6 +980,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
969 newTween.tweenData.tweenID = 0; 980 newTween.tweenData.tweenID = 0;
970 newTween.tweenData.spanPosition = 0; 981 newTween.tweenData.spanPosition = 0;
971 this.tweens.push(newTween); 982 this.tweens.push(newTween);
983 this.createMatchingPositionSizeTween(newTween);
972 } 984 }
973 else { 985 else {
974 tempTiming = trackTiming.split("s"); 986 tempTiming = trackTiming.split("s");
@@ -1027,16 +1039,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1027 value:function (tweenEvent) { 1039 value:function (tweenEvent) {
1028 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; 1040 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
1029 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; 1041 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
1042 this.tweens[0].tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
1043 this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
1030 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 1044 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
1031 this.animationName = this.animatedElement.classList[0] + "_PositionSize"; 1045 this.animationName = this.animatedElement.classList[0] + "_PositionSize";
1032 this.animationNamesString = this.animationName; 1046 this.animationNamesString = this.animationName;
1033 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 1047 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
1034 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 1048 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
1049 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
1035 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); 1050 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
1051
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;} }"; 1052 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 1053
1038 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 1054 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
1039
1040 this.insertTween(tweenEvent.offsetX); 1055 this.insertTween(tweenEvent.offsetX);
1041 this.isTrackAnimated = true; 1056 this.isTrackAnimated = true;
1042 } 1057 }
@@ -1050,6 +1065,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1050 // build the new keyframe string 1065 // build the new keyframe string
1051 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 1066 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
1052 1067
1068 //console.log(this.animationName);
1069
1053 for (var i = 0; i < this.tweens.length; i++) { 1070 for (var i = 0; i < this.tweens.length; i++) {
1054 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); 1071 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec);
1055 // TODO - trackDur should be parseFloat rounded to significant digits 1072 // TODO - trackDur should be parseFloat rounded to significant digits
@@ -1085,6 +1102,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1085 createPositionTracks:{ 1102 createPositionTracks:{
1086 value:function(){ 1103 value:function(){
1087 // create track objects for position and transform tracks and push into arrays 1104 // create track objects for position and transform tracks and push into arrays
1105
1106 // ... but only do it if we haven't already.
1107 if (this.arrPositionTracks.length > 0) {
1108 return;
1109 }
1088 1110
1089 // create 'left' track 1111 // create 'left' track
1090 var newLeftTrack = {}; 1112 var newLeftTrack = {};