aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
authorJon Reid2012-06-19 18:05:10 -0700
committerJon Reid2012-06-19 18:05:10 -0700
commit8069a7626339f5076ba5cb433f1e7376660e11eb (patch)
treef6ee3352218996da8d91c0a6977a28c3f4b83d56 /js/panels/Timeline/TimelineTrack.reel
parent0da75e4de7373ed361b5d76be4ee192453146dde (diff)
parent8e2dda460526735b4db2949656aa2e8ac041ad3c (diff)
downloadninja-8069a7626339f5076ba5cb433f1e7376660e11eb.tar.gz
Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html23
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js35
2 files changed, 42 insertions, 16 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 502c455b..79014ae6 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -17,6 +17,8 @@
17 "tweenRepetition" : {"@" : "tweenRepetition"}, 17 "tweenRepetition" : {"@" : "tweenRepetition"},
18 "track_lanes" : {"#" : "track_lanes"}, 18 "track_lanes" : {"#" : "track_lanes"},
19 "tween": {"@" : "tween"}, 19 "tween": {"@" : "tween"},
20 "positionTracksRepetition" : {"@" : "positionTracksRepetition"},
21 "positionPropertyTrack" : {"@" : "positionPropertyTrack"},
20 "mainCollapser" : {"@" : "mainCollapser"}, 22 "mainCollapser" : {"@" : "mainCollapser"},
21 "positionCollapser" : {"@" : "positionCollapser"}, 23 "positionCollapser" : {"@" : "positionCollapser"},
22 "styleCollapser" : {"@" : "styleCollapser"} 24 "styleCollapser" : {"@" : "styleCollapser"}
@@ -81,7 +83,7 @@
81 "positionTracksRepetition": { 83 "positionTracksRepetition": {
82 "prototype": "montage/ui/repetition.reel", 84 "prototype": "montage/ui/repetition.reel",
83 "properties": { 85 "properties": {
84 "element": {"#": "content-position-tracks"}, 86 "element": {"#": "content_position_tracks"},
85 "isSelectionEnabled" : false 87 "isSelectionEnabled" : false
86 }, 88 },
87 "bindings": { 89 "bindings": {
@@ -95,7 +97,7 @@
95 "positionPropertyTrack" : { 97 "positionPropertyTrack" : {
96 "prototype" : "js/panels/Timeline/PropertyTrack.reel", 98 "prototype" : "js/panels/Timeline/PropertyTrack.reel",
97 "properties" : { 99 "properties" : {
98 "element":{"#": "position-track-base"} 100 "element":{"#": "position_track_base"}
99 }, 101 },
100 "bindings" : { 102 "bindings" : {
101 "propTrackData" : { 103 "propTrackData" : {
@@ -134,8 +136,8 @@
134 "positionCollapser" : { 136 "positionCollapser" : {
135 "prototype" : "js/panels/timeline/Collapser", 137 "prototype" : "js/panels/timeline/Collapser",
136 "properties" : { 138 "properties" : {
137 "element" : {"#" : "content-position-tracks"}, 139 "element" : {"#" : "content_position_collapser"},
138 "myContent" : {"#":"content-position-tracks"}, 140 "myContent" : {"#":"content_position_collapser"},
139 "contentHeight" : 40, 141 "contentHeight" : 40,
140 "isLabelClickable" : false, 142 "isLabelClickable" : false,
141 "clicker" : {"#" : "label-position"}, 143 "clicker" : {"#" : "label-position"},
@@ -194,11 +196,14 @@
194 <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>
195 <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">
196 <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position"> 198 <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position">
197 199
198 </div> 200 </div>
199 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position-tracks"> 201 <div class="content-position collapsible-content collapsible-collapsed"
200 <div data-montage-id="position-track-base"></div> 202 data-montage-id="content_position_collapser">
201 </div> 203 <div data-montage-id="content_position_tracks">
204 <div data-montage-id="position_track_base"></div>
205 </div>
206 </div>
202 207
203 <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"> 208 <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles">
204 209
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 84bac2cb..1a8b6f4e 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -41,6 +41,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
41 this._tween = newVal; 41 this._tween = newVal;
42 } 42 }
43 }, 43 },
44
45 positionPropertyTrack:{
46 value:null
47 },
44 48
45 _isFirstDraw: { 49 _isFirstDraw: {
46 value: true 50 value: true
@@ -171,9 +175,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
171 }, 175 },
172 set: function(newVal) { 176 set: function(newVal) {
173 this._arrPositionTracks = newVal; 177 this._arrPositionTracks = newVal;
174 if (typeof(this.trackData) === "undefined") {
175 //this.createTrackData();
176 }
177 this.trackData.arrPositionTracks = newVal; 178 this.trackData.arrPositionTracks = newVal;
178 179
179 } 180 }
@@ -189,8 +190,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
189 this._positionTracksRepetition = newVal; 190 this._positionTracksRepetition = newVal;
190 } 191 }
191 }, 192 },
192 193
193 194
194 /* Transform Property Tracks */ 195 /* Transform Property Tracks */
195 _arrTransformTracks : { 196 _arrTransformTracks : {
196 value: [] 197 value: []
@@ -470,6 +471,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
470 this.bypassAnimation = this.trackData.bypassAnimation; 471 this.bypassAnimation = this.trackData.bypassAnimation;
471 this.trackID = this.trackData.layerID; 472 this.trackID = this.trackData.layerID;
472 this.tweens = this.trackData.tweens; 473 this.tweens = this.trackData.tweens;
474 this.arrPositionTracks = this.trackData.arrPositionTracks;
473 this.animatedElement = this.trackData.animatedElement; 475 this.animatedElement = this.trackData.animatedElement;
474 this.arrStyleTracks = this.trackData.arrStyleTracks; 476 this.arrStyleTracks = this.trackData.arrStyleTracks;
475 this.isTrackAnimated = this.trackData.isTrackAnimated; 477 this.isTrackAnimated = this.trackData.isTrackAnimated;
@@ -486,6 +488,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
486 this.needsDraw = true; 488 this.needsDraw = true;
487 } 489 }
488 }, 490 },
491
489 createTrackData: { 492 createTrackData: {
490 value: function() { 493 value: function() {
491 tempData = {}; 494 tempData = {};
@@ -494,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
494 tempData.tweens = this.tweens; 497 tempData.tweens = this.tweens;
495 tempData.animatedElement = this.animatedElement; 498 tempData.animatedElement = this.animatedElement;
496 tempData.arrStyleTracks = this.arrStyleTracks; 499 tempData.arrStyleTracks = this.arrStyleTracks;
500 tempData.arrPositionTracks = this.arrPositionTracks;
497 tempData.isTrackAnimated = this.isTrackAnimated; 501 tempData.isTrackAnimated = this.isTrackAnimated;
498 tempData.trackDuration = this.trackDuration; 502 tempData.trackDuration = this.trackDuration;
499 tempData.animationName = this.animationName; 503 tempData.animationName = this.animationName;
@@ -759,12 +763,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
759 newTween.tweenData.keyFrameMillisec = 0; 763 newTween.tweenData.keyFrameMillisec = 0;
760 newTween.tweenData.tweenID = 0; 764 newTween.tweenData.tweenID = 0;
761 newTween.tweenData.spanPosition = 0; 765 newTween.tweenData.spanPosition = 0;
766 newTween.tweenData.easing = "none";
762 newTween.tweenData.tweenedProperties = []; 767 newTween.tweenData.tweenedProperties = [];
763 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; 768 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
764 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; 769 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
765 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; 770 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
766 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; 771 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
767 this.tweens.push(newTween); 772 this.tweens.push(newTween);
773
774 this.createMatchingPositionSizeTween(newTween);
775
768 } else { 776 } else {
769 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; 777 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
770 newTween.tweenData.keyFramePosition = clickPos; 778 newTween.tweenData.keyFramePosition = clickPos;
@@ -783,20 +791,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
783 var animationDuration = (this.trackDuration / 1000) + "s"; 791 var animationDuration = (this.trackDuration / 1000) + "s";
784 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 792 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
785 this.nextKeyframe += 1; 793 this.nextKeyframe += 1;
794
795 this.createMatchingPositionSizeTween(newTween);
786 } 796 }
787 797
798
799
788 this.application.ninja.currentDocument.model.needsSave = true; 800 this.application.ninja.currentDocument.model.needsSave = true;
789 } 801 }
790 }, 802 },
791 803
804 createMatchingPositionSizeTween:{
805 value:function (newTween) {
806 var i;
807 var posTracks = this.positionTracksRepetition.childComponents.length;
808