aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-06-19 18:04:06 -0700
committerJon Reid2012-06-19 18:04:06 -0700
commit0da75e4de7373ed361b5d76be4ee192453146dde (patch)
treeb1ffd39b63e0934e55c38543830546ae619af3d5 /js
parent53a49f49ce5cd72fbb21e2840bb9622d5952d953 (diff)
downloadninja-0da75e4de7373ed361b5d76be4ee192453146dde.tar.gz
Timeline: Re-enable drag-and-drop of layers, now with bonus DOM
manipulation!
Diffstat (limited to 'js')
-rwxr-xr-xjs/mediators/element-mediator.js43
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js115
2 files changed, 87 insertions, 71 deletions
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index bd0ae3cb..99d2f822 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -483,30 +483,25 @@ exports.ElementMediator = Montage.create(Component, {
483 }, 483 },
484 484
485 reArrangeDOM:{ 485 reArrangeDOM:{
486 value: function(layersDraggedArray, layerDroppedAfter) { 486 value: function(arrLayersDragged, dropTargetElement) {
487 var documentRoot,length; 487 var i = 0,
488 488 arrLayersDraggedLength = arrLayersDragged.length,
489 documentRoot = this.application.ninja.currentDocument.model.documentRoot; 489 targetParentNode,
490 length = layersDraggedArray.length; 490 targetElement;
491 491
492 for(var i=0; documentRoot.children[i]; i++) { 492 if (arrLayersDraggedLength === 0) {
493 if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) { 493 // Nothing was dragged, so return.
494 if(length >0){ 494 return;
495 documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]); 495 }
496 } 496
497 497 // Get the target parent node (this will be the parentNode of any of the dragging items)
498 /* Will require for Multiple Drag n Drop */ 498 targetParentNode = arrLayersDragged[0].parentNode;
499 //length = length-1; 499
500 //index = i; 500
501 //if(length>0) { 501 // Loop through arrLayersDragged and insertBefore the drop target element
502 //while(layersDraggedArray[length]) { 502 for (i = 0; i < arrLayersDraggedLength; i++) {
503 //documentRoot.children[index].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0],documentRoot.children[k].nextSibling); 503 targetParentNode.insertBefore(arrLayersDragged[i], dropTargetElement);
504 //length--; 504 }
505 //index++;
506 //}
507 //}
508 }
509 }
510 } 505 }
511 } 506 }
512}); \ No newline at end of file 507}); \ No newline at end of file
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 339ca5a4..092176dc 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -459,10 +459,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
459 this._draggingType = newVal; 459 this._draggingType = newVal;
460 } 460 }
461 }, 461 },
462 462
463 layersDragged:{ 463 _elementsDragged: {
464 value:[], 464 value: []
465 writable:true 465 },
466 elementsDragged: {
467 get: function() {
468 return this._elementsDragged;
469 },
470 set: function(newVal) {
471 this._elementsDragged = newVal;
472 }
466 }, 473 },
467 474
468 dragLayerID : { 475 dragLayerID : {
@@ -475,9 +482,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
475 } 482 }
476 } 483 }
477 }, 484 },
478 _dragLayerIndexes: { 485
479 value: []
480 },
481 _dropLayerID : { 486 _dropLayerID : {
482 value: null 487 value: null
483 }, 488 },
@@ -489,39 +494,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
489 if (newVal !== this._dropLayerID) { 494 if (newVal !== this._dropLayerID) {
490 this._dropLayerID = newVal; 495 this._dropLayerID = newVal;
491 496
492 var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), 497 var dropLayerIndex = this.getLayerIndexByID(newVal),
493 arrDragLayers = [],
494 i = 0, 498 i = 0,
495 dragLayerIndexesLength = this._dragLayerIndexes.length; 499 dragLayerIndexesLength = this.currentLayersSelected.length,
500 dragAndDropDirection = 0,
501 targetIndex;
496 502
503 if (dragLayerIndexesLength === 0) {
504 // Nothing was dragged, so do nothing.
505 return;
506 }
507
508 // Is this a move up or down?
509 if (this.currentLayersSelected[0] > dropLayerIndex) {
510 dragAndDropDirection = -1;
511 }
512 targetIndex = dropLayerIndex + dragAndDropDirection;
513
497 // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? 514 // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order?
498 515
516 // Get the target DOM element.
517 if (typeof(this.arrLayers[targetIndex]) !== "undefined") {
518 this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement;
519 } else {
520 this._layerDroppedInPlace = null;
521 }
522
523 // Splice
499 for (i = 0; i < dragLayerIndexesLength; i++) { 524 for (i = 0; i < dragLayerIndexesLength; i++) {
500 var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; 525 var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]];
501 arrDragLayers.push(myDraggingLayer);
502 // Splice arrLayers 526 // Splice arrLayers
503 this.arrLayers.splice(this._dragLayerIndexes[i], 1); 527 this.arrLayers.splice(this.currentLayersSelected[i], 1);
504 this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); 528 this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
505 } 529 }
506 this.layersDragged = arrDragLayers; 530 this.elementsDragged = this.currentElementsSelected;
507 this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
508 531
509 // Cache the new info 532 // Cache the new info
510 this.cacheTimeline(); 533 this.cacheTimeline();
511 534
512 // Clear drag and drop variables for future re-use 535 // Clear drag and drop variables for future re-use
513 this._dropLayerID = null; 536 this._dropLayerID = null;
514 this.dragLayerIndexes = [];
515 this._dragLayerIndexes = [];
516 this.lastLayerClicked = 0; 537 this.lastLayerClicked = 0;
517 538
518 // Sometimes, just to be fun, the drop and dragend events don't fire. 539 // Sometimes, just to be fun, the drop and dragend events don't fire.
519 // So just in case, set the draw routine to delete the helper. 540 // So just in case, set the draw routine to delete the helper.
520 this._deleteHelper = true; 541 this._deleteHelper = true;
542 this._needsDOMManipulation = true;
521 this.needsDraw = true; 543 this.needsDraw = true;
522 } 544 }
523 } 545 }
524 }, 546 },
547 _needsDOMManipulation: {
548 value: false
549 },
525 _appendHelper: { 550 _appendHelper: {
526 value: false 551 value: false
527 }, 552 },
@@ -571,30 +596,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
571 value:function () { 596 value:function () {
572 this.initTimeline(); 597 this.initTimeline();
573 598
574 // Bind drag and drop event handlers
575 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
576 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
577 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
578 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
579
580 // Bind the handlers for the config menu
581 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
582 this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
583 document.addEventListener("click", this.handleDocumentClick.bind(this), false);
584
585 this.addPropertyChangeListener("currentDocument.model.domContainer", this);
586
587 // Bind some bindings
588 Object.defineBinding(this, "currentSelectedContainer", {
589 boundObject:this.application.ninja,
590 boundObjectPropertyPath:"currentSelectedContainer",
591 oneway:true
592 });
593
594 // Create the easing menu for future use.
595 this.easingMenu = EasingMenuPopup;
596 //this.easingMenu.show();
597
598 } 599 }
599 }, 600 },
600 601
@@ -639,8 +640,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
639 this._deleteHelper = false; 640 this._deleteHelper = false;
640 } 641 }
641 } 642 }
642 this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); 643