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.js208
1 files changed, 208 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index efeeba00..d5571c3c 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 },
@@ -343,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
343 value:null 348 value:null
344 }, 349 },
345 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
346 _trackData:{ 368 _trackData:{
347 value: false 369 value: false
348 }, 370 },
@@ -419,6 +441,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
419 this.ninjaStylesContoller = this.application.ninja.stylesController; 441 this.ninjaStylesContoller = this.application.ninja.stylesController;
420 this.element.addEventListener("click", this, false); 442 this.element.addEventListener("click", this, false);
421 this.eventManager.addEventListener("tlZoomSlider", this, false); 443 this.eventManager.addEventListener("tlZoomSlider", this, false);
444
445 // Drag and Drop event handlers
446 this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
447 this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
448 this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
449 this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
422 } 450 }
423 }, 451 },
424 452
@@ -431,6 +459,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
431 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 459 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
432 } 460 }
433 } 461 }
462
463
464
465
466
467
468
469
470 // Drag and Drop:
471 // Do we have a helper to append?
472 if (this._appendHelper === true) {
473 this.track_lanes.appendChild(this._dragAndDropHelper);
474 this._appendHelper = false;
475 }
476 // Do we need to move the helper?
477 if (this._dragAndDropHelperCoords !== false) {
478 if (this._dragAndDropHelper !== null) {
479 if (typeof(this._dragAndDropHelper.style) !== "undefined") {
480 this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
481 }
482 }
483 this._dragAndDropHelperCoords = false;
484 }
485 // Do we have a helper to delete?
486 if (this._deleteHelper === true) {
487 if (this._dragAndDropHelper === null) {
488 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
489 // Try and recover the helper so we can delete it.
490 var myHelper = this.element.querySelector(".track-dnd-helper");
491 if (myHelper != null) {
492 this._dragAndDropHelper = myHelper;
493 }
494 }
495 if (this._dragAndDropHelper !== null) {
496 // We need to delete the helper. Can we delete it from track_lanes?
497 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
498 this.track_lanes.removeChild(this._dragAndDropHelper);
499 this._dragAndDropHelper = null;
500 this._deleteHelper = false;
501 }
502 }
503 }
504
505
506
507
508
434 509
435 } 510 }
436 }, 511 },
@@ -448,6 +523,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
448 } 523 }
449 } 524 }
450 } 525 }
526
527
528 if (this._isFirstDraw === true) {
529
530 if (this.isMainCollapsed === false) {
531 this._mainCollapser.myContent.style.height = "auto";
532 this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
533 this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
534 }
535 if (this.isPositionCollapsed === false) {
536 this._positionCollapser.myContent.style.height = "auto";
537 this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
538 this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
539 }
540 if (this.isTransformCollapsed === false) {
541 this._transformCollapser.myContent.style.height = "auto";
542 this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
543 this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
544 }
545 if (this.isStyleCollapsed === false) {
546 this._styleCollapser.myContent.style.height = "auto";
547 this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
548 this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
549 }
550 this._isFirstDraw = false;
551 }
552
451 } 553 }
452 }, 554 },
453 555
@@ -730,6 +832,112 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
730 return returnVal; 832 return returnVal;
731 } 833 }
732 }, 834 },
835
836 // Drag and drop event handlers
837 handleKeyframeDragstart : {
838 value: function(event) {
839 var dragIcon = document.createElement("img");
840 event.dataTransfer.effectAllowed = 'move';
841 event.dataTransfer.setData('Text', this.identifier);
842 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
843 dragIcon.width = 1;
844 event.dataTransfer.setDragImage(dragIcon, 0, 0);
845
846 // Clone the element we're dragging
847 this._dragAndDropHelper = event.target.cloneNode(true);
848 this._dragAndDropHelper.style.opacity = 0.8;
849 this._dragAndDropHelper.style.position = "absolute";
850 this._dragAndDropHelper.style.top = "2px";
851 this._dragAndDropHelper.style.left = "0px";
852 this._dragAndDropHelper.style.zIndex = 700;
853
854 //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
855 this._dragAndDropHelper.classList.add("track-dnd-helper");
856
857 // Get the offset
858 var findYOffset = function(obj) {
859 var curleft = curtop = 0;
860
861 if (obj.offsetParent) {
862 do {
863 curleft += obj.offsetLeft;
864 curtop += obj.offsetTop;
865
866 } while (obj = obj.offsetParent);
867 }
868 return curtop;
869 }
870 //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
871 this._appendHelper = true;
872 this._deleteHelper = false;
873 }
874 },
875 handleKeyframeDragover: {
876 value: function(event) {
877 event.preventDefault();
878 var currPos = 0;
879 /*
880 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
881 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
882 this._scrollTracks = (this.user_layers.scrollTop - 10)
883 }
884 if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
885 this._scrollTracks = (this.user