aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js155
1 files changed, 155 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index f32592ed..09378e65 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -348,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
348 value:null 348 value:null
349 }, 349 },
350 350
351 // Drag and Drop properties
352 _dragAndDropHelper : {
353 value: false
354 },
355 _dragAndDropHelperCoords: {
356 value: false
357 },
358 _dragAndDropHelperOffset : {
359 value: false
360 },
361 _appendHelper: {
362 value: false
363 },
364 _deleteHelper: {
365 value: false
366 },
367
351 _trackData:{ 368 _trackData:{
352 value: false 369 value: false
353 }, 370 },
@@ -424,6 +441,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
424 this.ninjaStylesContoller = this.application.ninja.stylesController; 441 this.ninjaStylesContoller = this.application.ninja.stylesController;
425 this.element.addEventListener("click", this, false); 442 this.element.addEventListener("click", this, false);
426 this.eventManager.addEventListener("tlZoomSlider", this, false); 443 this.eventManager.addEventListener("tlZoomSlider", this, false);
444
445 this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
446 this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
447 this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
448 this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
427 } 449 }
428 }, 450 },
429 451
@@ -436,6 +458,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
436 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 458 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
437 } 459 }
438 } 460 }
461
462
463
464
465
466
467
468
469 // Drag and Drop:
470 // Do we have a helper to append?
471 if (this._appendHelper === true) {
472 this.track_lanes.appendChild(this._dragAndDropHelper);
473 this._appendHelper = false;
474 }
475 // Do we need to move the helper?
476 if (this._dragAndDropHelperCoords !== false) {
477 if (this._dragAndDropHelper !== null) {
478 if (typeof(this._dragAndDropHelper.style) !== "undefined") {
479 this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
480 }
481 }
482 this._dragAndDropHelperCoords = false;
483 }
484 // Do we have a helper to delete?
485 if (this._deleteHelper === true) {
486 if (this._dragAndDropHelper === null) {
487 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
488 // Try and recover the helper so we can delete it.
489 var myHelper = this.element.querySelector(".track-dnd-helper");
490 if (myHelper != null) {
491 this._dragAndDropHelper = myHelper;
492 }
493 }
494 if (this._dragAndDropHelper !== null) {
495 // We need to delete the helper. Can we delete it from track_lanes?
496 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
497 this.track_lanes.removeChild(this._dragAndDropHelper);
498 this._dragAndDropHelper = null;
499 this._deleteHelper = false;
500 }
501 }
502 }
503
504
505
506
507
439 508
440 } 509 }
441 }, 510 },
@@ -762,6 +831,92 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
762 return returnVal; 831 return returnVal;
763 } 832 }
764 }, 833 },
834
835 // Drag and drop event handlers
836 handleKeyframeDragstart : {
837 value: function(event) {
838 var dragIcon = document.createElement("img");
839 event.dataTransfer.effectAllowed = 'move';
840 event.dataTransfer.setData('Text', this.identifier);
841 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
842 dragIcon.width = 1;
843 event.dataTransfer.setDragImage(dragIcon, 0, 0);
844
845 // Clone the element we're dragging
846 this._dragAndDropHelper = event.target.cloneNode(true);
847 this._dragAndDropHelper.style.opacity = 0.8;
848 this._dragAndDropHelper.style.position = "absolute";
849 this._dragAndDropHelper.style.top = "2px";
850 this._dragAndDropHelper.style.left = "0px";
851 this._dragAndDropHelper.style.zIndex = 700;
852
853 //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
854 this._dragAndDropHelper.classList.add("track-dnd-helper");
855
856 // Get the offset
857 var findYOffset = function(obj) {
858 var curleft = curtop = 0;
859
860 if (obj.offsetParent) {
861 do {
862 curleft += obj.offsetLeft;
863 curtop += obj.offsetTop;
864
865 } while (obj = obj.offsetParent);
866 }
867 return curtop;
868 }
869 //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
870 this._appendHelper = true;
871 this._deleteHelper = false;
872 }
873 },
874 handleKeyframeDragover: {
875 value: function(event) {
876 var currPos = 0;
877 /*
878 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
879 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
880 this._scrollTracks = (this.user_layers.scrollTop - 10)
881 }
882 if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
883 this._scrollTracks = (this.user_layers.scrollTop - 20)
884 }
885 if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
886 this._scrollTracks = (this.user_layers.scrollTop + 10)
887 }
888 if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
889 this._scrollTracks = (this.user_layers.scrollTop + 20)
890
891 }
892 */
893 //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
894 currPos = event.x - 280;
895 this._dragAndDropHelperCoords = currPos + "px";
896 this.needsDraw = true;
897 }
898 },
899
900 handleKeyframeDragend : {
901 value: function(event) {
902 this._deleteHelper = true;
903 this.needsDraw = true;
904
905 }
906 },
907
908 handleKeyframeDrop : {
909 value: function(event) {
910 event.stopPropagation();
911 //this.element.classList.remove("dragOver");
912 //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
913 //this.parentComponent.parentComponent.dropLayerID = this.layerID;
914 //}
915 return false;
916 }
917 },
918
919
765 /* Begin: Logging routines */ 920 /* Begin: Logging routines */
766 _boolDebug: { 921 _boolDebug: {
767 enumerable: false, 922 enumerable: false,