diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 343 |
1 files changed, 314 insertions, 29 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..6066066a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
31 | } | 31 | } |
32 | } | 32 | } |
33 | }, | 33 | }, |
34 | |||
35 | _isFirstDraw: { | ||
36 | value: true | ||
37 | }, | ||
38 | |||
34 | _isVisible:{ | 39 | _isVisible:{ |
35 | value: true | 40 | value: true |
36 | }, | 41 | }, |
@@ -136,6 +141,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
136 | value: null | 141 | value: null |
137 | }, | 142 | }, |
138 | styleTracksRepetition : { | 143 | styleTracksRepetition : { |
144 | serializable:true, | ||
139 | get: function() { | 145 | get: function() { |
140 | return this._styleTracksRepetition; | 146 | return this._styleTracksRepetition; |
141 | }, | 147 | }, |
@@ -185,17 +191,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
185 | this.trackData.arrTransformTracks = newVal; | 191 | this.trackData.arrTransformTracks = newVal; |
186 | } | 192 | } |
187 | }, | 193 | }, |
188 | _transformTracksRepetition: { | ||
189 | value: null | ||
190 | }, | ||
191 | transformTracksRepetition : { | ||
192 | get: function() { | ||
193 | return this._transformTracksRepetition; | ||
194 | }, | ||
195 | set: function(newVal) { | ||
196 | this._transformTracksRepetition = newVal; | ||
197 | } | ||
198 | }, | ||
199 | 194 | ||
200 | _tweens:{ | 195 | _tweens:{ |
201 | value:[] | 196 | value:[] |
@@ -218,10 +213,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
218 | 213 | ||
219 | tweenRepetition:{ | 214 | tweenRepetition:{ |
220 | get:function () { | 215 | get:function () { |
221 | return this._spanRepetition; | 216 | return this._tweenRepetition; |
222 | }, | 217 | }, |
223 | set:function (newVal) { | 218 | set:function (newVal) { |
224 | this._spanRepetition = newVal; | 219 | this._tweenRepetition = newVal; |
225 | } | 220 | } |
226 | }, | 221 | }, |
227 | 222 | ||
@@ -326,6 +321,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
326 | } | 321 | } |
327 | }, | 322 | }, |
328 | 323 | ||
324 | animationNamesString:{ | ||
325 | value:"" | ||
326 | }, | ||
327 | |||
329 | ninjaStylesContoller:{ | 328 | ninjaStylesContoller:{ |
330 | value:null | 329 | value:null |
331 | }, | 330 | }, |
@@ -343,6 +342,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
343 | value:null | 342 | value:null |
344 | }, | 343 | }, |
345 | 344 | ||
345 | // Drag and Drop properties | ||
346 | _dragAndDropHelper : { | ||
347 | value: false | ||
348 | }, | ||
349 | _dragAndDropHelperCoords: { | ||
350 | value: false | ||
351 | }, | ||
352 | dragAndDropHelperCoords: { | ||
353 | get: function() { | ||
354 | return this._dragAndDropHelperCoords; | ||
355 | }, | ||
356 | set: function(newVal) { | ||
357 | this._dragAndDropHelperCoords = newVal; | ||
358 | } | ||
359 | }, | ||
360 | _draggingIndex: { | ||
361 | value: false | ||
362 | }, | ||
363 | draggingIndex: { | ||
364 | get: function() { | ||
365 | return this._draggingIndex; | ||
366 | }, | ||
367 | set: function(newVal) { | ||
368 | this._draggingIndex = newVal; | ||
369 | } | ||
370 | }, | ||
371 | _dragAndDropHelperOffset : { | ||
372 | value: false | ||
373 | }, | ||
374 | _appendHelper: { | ||
375 | value: false | ||
376 | }, | ||
377 | _deleteHelper: { | ||
378 | value: false | ||
379 | }, | ||
380 | |||
346 | _trackData:{ | 381 | _trackData:{ |
347 | value: false | 382 | value: false |
348 | }, | 383 | }, |
@@ -371,7 +406,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
371 | this.bypassAnimation = this.trackData.bypassAnimation; | 406 | this.bypassAnimation = this.trackData.bypassAnimation; |
372 | this.trackID = this.trackData.layerID; | 407 | this.trackID = this.trackData.layerID; |
373 | this.tweens = this.trackData.tweens; | 408 | this.tweens = this.trackData.tweens; |
374 | this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction | 409 | this.animatedElement = this.trackData.animatedElement; |
375 | this.arrStyleTracks = this.trackData.arrStyleTracks; | 410 | this.arrStyleTracks = this.trackData.arrStyleTracks; |
376 | this.isTrackAnimated = this.trackData.isTrackAnimated; | 411 | this.isTrackAnimated = this.trackData.isTrackAnimated; |
377 | this.trackDuration = this.trackData.trackDuration; | 412 | this.trackDuration = this.trackData.trackDuration; |
@@ -419,6 +454,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
419 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 454 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
420 | this.element.addEventListener("click", this, false); | 455 | this.element.addEventListener("click", this, false); |
421 | this.eventManager.addEventListener("tlZoomSlider", this, false); | 456 | this.eventManager.addEventListener("tlZoomSlider", this, false); |
457 | |||
458 | // Drag and Drop event handlers | ||
459 | //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
460 | this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); | ||
461 | this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); | ||
462 | //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
422 | } | 463 | } |
423 | }, | 464 | }, |
424 | 465 | ||
@@ -432,6 +473,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
432 | } | 473 | } |
433 | } | 474 | } |
434 | 475 | ||
476 | // Drag and Drop: | ||
477 | // Do we have a helper to append? | ||
478 | if (this._appendHelper === true) { | ||
479 | this.track_lanes.appendChild(this._dragAndDropHelper); | ||
480 | this._appendHelper = false; | ||
481 | } | ||
482 | // Do we need to move the helper? | ||
483 | if (this._dragAndDropHelperCoords !== false) { | ||
484 | if (this._dragAndDropHelper !== null) { | ||
485 | if (typeof(this._dragAndDropHelper.style) !== "undefined") { | ||
486 | this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords; | ||
487 | } | ||
488 | } | ||
489 | this._dragAndDropHelperCoords = false; | ||
490 | } | ||
491 | // Do we have a helper to delete? | ||
492 | if (this._deleteHelper === true) { | ||
493 | if (this._dragAndDropHelper === null) { | ||
494 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
495 | // Try and recover the helper so we can delete it. | ||
496 | var myHelper = this.element.querySelector(".track-dnd-helper"); | ||
497 | if (myHelper != null) { | ||
498 | this._dragAndDropHelper = myHelper; | ||
499 | } | ||
500 | } | ||
501 | if (this._dragAndDropHelper !== null) { | ||
502 | // We need to delete the helper. Can we delete it from track_lanes? | ||
503 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) { | ||
504 | this.track_lanes.removeChild(this._dragAndDropHelper); | ||
505 | this._dragAndDropHelper = null; | ||
506 | this._deleteHelper = false; | ||
507 | } | ||
508 | } | ||
509 | } | ||
510 | |||
435 | } | 511 | } |
436 | }, | 512 | }, |
437 | 513 | ||
@@ -443,11 +519,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
443 | if (selectedIndex !== false) { | 519 | if (selectedIndex !== false) { |
444 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { | 520 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { |
445 | this.retrieveStoredTweens(); | 521 | this.retrieveStoredTweens(); |
446 | |||
447 | } | 522 | } |
448 | } | 523 | } |
449 | } | 524 | } |
450 | } | 525 | } |
526 | |||
527 | if (this._isFirstDraw === true) { | ||
528 | |||
529 | if (this.isMainCollapsed === false) { | ||
530 | this._mainCollapser.myContent.style.height = "auto"; | ||
531 | this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass); | ||
532 | this._ |