aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
authorJonathan Duran2012-05-11 14:13:07 -0700
committerJonathan Duran2012-05-11 14:13:07 -0700
commit1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2 (patch)
tree2563aa7694c3caaf813ca71ef3250b2a76ee0041 /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
parent32257ac142f872d3c1f6c07504bae77ae884ed93 (diff)
parent6fcaa4e923a19672b5860b4c6f67d836680e7e99 (diff)
downloadninja-1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2.tar.gz
Merge branch 'refs/heads/TimelineUber' into TimelineProps
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js232
1 files changed, 188 insertions, 44 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 03db7880..8859e115 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
259 timeMarkerHolder:{ 259 timeMarkerHolder:{
260 value:null 260 value:null
261 }, 261 },
262
263 // Drag and Drop properties
262 _dragAndDropHelper : { 264 _dragAndDropHelper : {
263 value: false 265 value: false
264 }, 266 },
@@ -271,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
271 _dragLayerID : { 273 _dragLayerID : {
272 value: null 274 value: null
273 }, 275 },
276 _draggingType: {
277 value: false
278 },
279 draggingType: {
280 get: function() {
281 return this._draggingType;
282 },
283 set: function(newVal) {
284 this._draggingType = newVal;
285 }
286 },
274 287
275 layersDragged:{ 288 layersDragged:{
276 value:[], 289 value:[],
@@ -328,6 +341,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
328 _scrollTracks: { 341 _scrollTracks: {
329 value: false 342 value: false
330 }, 343 },
344
345 // Keyframe drag and drop properties
346 _draggingTrackId: {
347 value: false
348 },
349 draggingTrackId: {
350 get: function() {
351 return this._draggingTrackId;
352 },
353 set: function(newVal) {
354 this._draggingTrackId = newVal;
355 }
356 },
357
358
331 useAbsolutePosition:{ 359 useAbsolutePosition:{
332 value:true 360 value:true
333 }, 361 },
@@ -352,8 +380,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
352 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); 380 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
353 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); 381 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
354 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); 382 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
355 //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
356 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); 383 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
384 this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
385 this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
357 386
358 // Bind the handlers for the config menu 387 // Bind the handlers for the config menu
359 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); 388 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
@@ -375,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
375 404
376 draw: { 405 draw: {
377 value: function() { 406 value: function() {
407
378 // Drag and Drop: 408 // Drag and Drop:
379 // Do we have a helper to append? 409 if (this.draggingType === "layer") {
380 if (this._appendHelper === true) { 410
381 this.container_layers.appendChild(this._dragAndDropHelper); 411 // Do we have a helper to append?
382 this._appendHelper = false; 412 if (this._appendHelper === true) {
383 } 413 this.container_layers.appendChild(this._dragAndDropHelper);
384 // Do we need to move the helper? 414 this._appendHelper = false;
385 if (this._dragAndDropHelperCoords !== false) {
386 if (this._dragAndDropHelper !== null) {
387 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
388 }
389 this._dragAndDropHelperCoords = false;
390 }
391 // Do we need to scroll the tracks?
392 if (this._scrollTracks !== false) {
393 this.layout_tracks.scrollTop = this._scrollTracks;
394 this._scrollTracks = false;
395 }
396 // Do we have a helper to delete?
397 if (this._deleteHelper === true) {
398 if (this._dragAndDropHelper === null) {
399 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
400 // Try and recover the helper so we can delete it.
401 var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
402 if (myHelper != null) {
403 this._dragAndDropHelper = myHelper;
404 }
405 }
406 if (this._dragAndDropHelper !== null) {
407 // We need to delete the helper. Can we delete it from container_layers?
408 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
409 this.container_layers.removeChild(this._dragAndDropHelper);
410 this._dragAndDropHelper = null;
411 this._deleteHelper = false;
412 }
413 } 415 }
414 this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); 416 // Do we need to move the helper?
415 this.layersDragged =[]; 417 if (this._dragAndDropHelperCoords !== false) {
418 if (this._dragAndDropHelper !== null) {
419 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
420 }
421 this._dragAndDropHelperCoords = false;
422 }
423 // Do we need to scroll the tracks?
424 if (this._scrollTracks !== false) {
425 this.layout_tracks.scrollTop = this._scrollTracks;
426 this._scrollTracks = false;
427 }
428 // Do we have a helper to delete?
429 if (this._deleteHelper === true) {
430 if (this._dragAndDropHelper === null) {
431 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
432 // Try and recover the helper so we can delete it.
433 var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
434 if (myHelper != null) {
435 this._dragAndDropHelper = myHelper;
436 }
437 }
438 if (this._dragAndDropHelper !== null) {
439 // We need to delete the helper. Can we delete it from container_layers?
440 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
441 this.container_layers.removeChild(this._dragAndDropHelper);
442 this._dragAndDropHelper = null;
443 this._deleteHelper = false;
444 }
445 }
446 this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
447 this.layersDragged =[];
448 }
449 } else if (this.draggingType === "keyframe") {
450 // Do we need to scroll the tracks?
451 if (this._scrollTracks !== false) {
452 this.layout_tracks.scrollLeft = this._scrollTracks;
453 this._scrollTracks = false;
454 }
416 } 455 }
456
417 } 457 }
418 }, 458 },
419 /* === END: Draw cycle === */ 459 /* === END: Draw cycle === */
@@ -668,7 +708,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
668 708
669 //debugger; 709 //debugger;
670 if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { 710 if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
671 this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; 711// this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer;
672 } 712 }
673 713
674 // Are we only showing animated layers? 714 // Are we only showing animated layers?
@@ -1481,6 +1521,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1481 }, 1521 },
1482 handleLayerDragover: { 1522 handleLayerDragover: {
1483 value: function(event) { 1523 value: function(event) {
1524
1525 // If this isn't a layer event we don't do anything.
1526 if (this.draggingType !== "layer") {
1527 return;
1528 }
1484 var currPos = 0, 1529 var currPos = 0,
1485 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; 1530 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
1486 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { 1531 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
@@ -1501,13 +1546,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1501 this.needsDraw = true; 1546 this.needsDraw = true;
1502 }