aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js1
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js128
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html5
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js8
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js16
6 files changed, 132 insertions, 31 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e75b4d0f..d50360e6 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -509,7 +509,6 @@ var Layer = exports.Layer = Montage.create(Component, {
509 this.styleCollapser.bypassAnimation = true; 509 this.styleCollapser.bypassAnimation = true;
510 this.styleCollapser.toggle(); 510 this.styleCollapser.toggle();
511 } 511 }
512
513 if (this.isSelected) { 512 if (this.isSelected) {
514 this.element.classList.add("selected"); 513 this.element.classList.add("selected");
515 } else { 514 } else {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 92adee05..1aa9a725 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -32,7 +32,8 @@
32 "timetext" : {"#": "time_text"}, 32 "timetext" : {"#": "time_text"},
33 "timebar" : {"#": "time_bar"}, 33 "timebar" : {"#": "time_bar"},
34 "container_tracks" : {"#" : "container-tracks"}, 34 "container_tracks" : {"#" : "container-tracks"},
35 "end_hottext" : {"@" : "endHottext"} 35 "end_hottext" : {"@" : "endHottext"},
36 "getme" : {"#" : "getme"}
36 } 37 }
37 }, 38 },
38 39
@@ -284,7 +285,7 @@
284 285
285 <div id="user_layers" class="userlayers"> 286 <div id="user_layers" class="userlayers">
286 <div id="master_layer" class="masterlayer"> 287 <div id="master_layer" class="masterlayer">
287 <div>Master Layer</div> 288 <div id="getme">Master Layer</div>
288 </div> 289 </div>
289 <div id="container-layers"> 290 <div id="container-layers">
290 <div id="container-layer"></div> 291 <div id="container-layer"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d7d5328e..01b03531 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -28,6 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
28 }, 28 },
29 set:function (newVal) { 29 set:function (newVal) {
30 this._arrLayers = newVal; 30 this._arrLayers = newVal;
31 this.application.ninja.currentDocument.tlArrLayers = newVal;
31 } 32 }
32 }, 33 },
33 34
@@ -99,6 +100,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
99 }, 100 },
100 set:function (newVal) { 101 set:function (newVal) {
101 this._arrTracks = newVal; 102 this._arrTracks = newVal;
103 this.application.ninja.currentDocument.tlArrTracks = newVal;
102 } 104 }
103 }, 105 },
104 106
@@ -171,12 +173,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
171 /* === BEGIN: Draw cycle === */ 173 /* === BEGIN: Draw cycle === */
172 prepareForDraw:{ 174 prepareForDraw:{
173 value:function () { 175 value:function () {
174 this.eventManager.addEventListener( "onOpenDocument", this, false); 176 this.initTimeline();
177 this.eventManager.addEventListener("onOpenDocument", this, false);
178 this.eventManager.addEventListener("closeDocument", this, false);
179 this.eventManager.addEventListener("switchDocument", this, false);
175 } 180 }
176 }, 181 },
177 182
178 handleOnOpenDocument:{ 183 handleOnOpenDocument:{
179 value:function(){ 184 value:function(){
185 this.clearTimelinePanel();
180 this.eventManager.addEventListener("deleteLayerClick", this, false); 186 this.eventManager.addEventListener("deleteLayerClick", this, false);
181 this.eventManager.addEventListener("newLayer", this, false); 187 this.eventManager.addEventListener("newLayer", this, false);
182 this.eventManager.addEventListener("deleteLayer", this, false); 188 this.eventManager.addEventListener("deleteLayer", this, false);
@@ -194,6 +200,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
194 200
195 } 201 }
196 }, 202 },
203
204 handleCloseDocument: {
205 value: function(event) {
206 this.clearTimelinePanel();
207 }
208 },
209
210 handleSwitchDocument : {
211 value: function(event) {
212 // Handle document change.
213 this.handleOnOpenDocument();
214 }
215 },
216
197 willDraw:{ 217 willDraw:{
198 value:function () { 218 value:function () {
199 if (this._isLayer) { 219 if (this._isLayer) {
@@ -205,10 +225,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
205 /* === END: Draw cycle === */ 225 /* === END: Draw cycle === */
206 226
207 /* === BEGIN: Controllers === */ 227 /* === BEGIN: Controllers === */
208 initTimelineView:{ 228 initTimeline : {
209 value:function () { 229 value: function() {
210 var myIndex; 230 // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once.
211 this.layout_tracks = this.element.querySelector(".layout-tracks"); 231 this.layout_tracks = this.element.querySelector(".layout-tracks");
212 this.layout_markers = this.element.querySelector(".layout_markers"); 232 this.layout_markers = this.element.querySelector(".layout_markers");
213 233
214 this.newlayer_button.identifier = "addLayer"; 234 this.newlayer_button.identifier = "addLayer";
@@ -219,8 +239,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
219 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 239 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
220 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 240 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
221 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); 241 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
222 242
223 this.drawTimeMarkers(); 243 }
244 },
245 initTimelineView:{
246 value:function () {
247 var myIndex;
248
249 this.drawTimeMarkers();
224 250
225 this._hashKey = "123"; 251 this._hashKey = "123";
226 _firstLayerDraw = false; 252 _firstLayerDraw = false;
@@ -249,18 +275,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
249 275
250 clearTimelinePanel : { 276 clearTimelinePanel : {
251 value: function() { 277 value: function() {
252 console.log('clearing timeline...') 278 // Remove events
253 this.arrTracks = null; 279 this.eventManager.removeEventListener("deleteLayerClick", this, false);
254 this.arrLayers = null; 280 this.eventManager.removeEventListener("newLayer", this, false);
281 this.eventManager.removeEventListener("deleteLayer", this, false);
282 this.eventManager.removeEventListener("layerBinding", this, false);
283 this.eventManager.removeEventListener("elementAdded", this, false);
284 this.eventManager.removeEventListener("elementDeleted", this, false);
285 this.eventManager.removeEventListener("deleteSelection", this, false);
286 this.eventManager.removeEventListener("selectionChange", this, true);
287
288 // Remove every event listener for every tween in TimelineTrack
289 this.deselectTweens();
290
291 // Reset visual appearance
292 this.application.ninja.timeline.playhead.style.left = "-2px";
293 this.application.ninja.timeline.playheadmarker.style.left = "0px";
294 this.application.ninja.timeline.updateTimeText(0.00);
295 this.timebar.style.width = "0px";
296
297 // Clear variables--including repetitions.
298 this.hashInstance = null;
299 this.hashTrackInstance = null;
300 this.hashLayerNumber = null;
301 this.hashElementMapToLayer = null;
302 this.arrTracks = [];
303 this.arrLayers = [];
255 this.currentLayerNumber = 0; 304 this.currentLayerNumber = 0;
256 this.currentLayerSelected = null; 305 this.currentLayerSelected = false;
257 this.currentTrackSelected = null; 306 this.currentTrackSelected = false;
258 this.selectedKeyframes = []; 307 this.selectedKeyframes = [];
259 this.selectedTweens = []; 308 this.selectedTweens = [];
260 this._captureSelection = false; 309 this._captureSelection = false;
261 this._openDoc = false; 310 this._openDoc = false;
262 this.end_hottext.value = 25; 311 this.end_hottext.value = 25;
263 this.updateTrackContainerWidth(); 312 this.updateTrackContainerWidth();
313
314 // Redraw all the things
315 this.layerRepetition.needsDraw = true;
316 this.trackRepetition.needsDraw = true;
264 this.needsDraw = true; 317 this.needsDraw = true;
265 } 318 }
266 }, 319 },
@@ -270,7 +323,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
270 this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; 323 this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";