aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js143
2 files changed, 122 insertions, 26 deletions
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..81415951 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;
@@ -230,6 +256,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
230 while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) 256 while(this.application.ninja.currentDocument.documentRoot.children[myIndex])
231 { 257 {
232 this._openDoc=true; 258 this._openDoc=true;
259 this._captureSelection=true;
233 NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) 260 NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]})
234 myIndex++; 261 myIndex++;
235 } 262 }
@@ -249,18 +276,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
249 276
250 clearTimelinePanel : { 277 clearTimelinePanel : {
251 value: function() { 278 value: function() {
252 console.log('clearing timeline...') 279 // Remove events
253 this.arrTracks = null; 280 this.eventManager.removeEventListener("deleteLayerClick", this, false);
254 this.arrLayers = null; 281 this.eventManager.removeEventListener("newLayer", this, false);
282 this.eventManager.removeEventListener("deleteLayer", this, false);
283 this.eventManager.removeEventListener("layerBinding", this, false);
284 this.eventManager.removeEventListener("elementAdded", this, false);
285 this.eventManager.removeEventListener("elementDeleted", this, false);
286 this.eventManager.removeEventListener("deleteSelection", this, false);
287 this.eventManager.removeEventListener("selectionChange", this, true);
288
289 // Remove every event listener for every tween in TimelineTrack
290 this.deselectTweens();
291
292 // Reset visual appearance
293 this.application.ninja.timeline.playhead.style.left = "-2px";
294 this.application.ninja.timeline.playheadmarker.style.left = "0px";
295 this.application.ninja.timeline.updateTimeText(0.00);
296 this.timebar.style.width = "0px";
297
298 // Clear variables--including repetitions.
299 this.hashInstance = null;
300 this.hashTrackInstance = null;
301 this.hashLayerNumber = null;
302 this.hashElementMapToLayer = null;
303 this.arrTracks = [];
304 this.arrLayers = [];
255 this.currentLayerNumber = 0; 305 this.currentLayerNumber = 0;
256 this.currentLayerSelected = null; 306 this.currentLayerSelected = false;
257 this.currentTrackSelected = null; 307 this.currentTrackSelected = false;
258 this.selectedKeyframes = []; 308 this.selectedKeyframes = [];
259 this.selectedTweens = []; 309 this.selectedTweens = [];
260 this._captureSelection = false; 310 this._captureSelection = false;
261 this._openDoc = false; 311 this._openDoc = false;
262 this.end_hottext.value = 25; 312 this.end_hottext.value = 25;
263 this.updateTrackContainerWidth(); 313 this.updateTrackContainerWidth();
314
315 // Redraw all the things
316 this.layerRepetition.needsDraw = true;
317 this.trackRepetition.needsDraw = true;
264 this.needsDraw = true; 318 this.needsDraw = true;
265 } 319 }
266 }, 320 },
@@ -270,7 +324,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
270 this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; 324 this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
271 this.master_track.style.width = (this.end_hottext.value * 80) + "px"; 325 this.master_track.style.width = (this.end_hottext.value * 80) + "px";
272 this.time_markers.style.width = (this.end_hottext.value * 80) + "px";