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.js249
1 files changed, 249 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 8bb00990..63f2f957 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,54 @@ 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
509
434 } 510 }
435 }, 511 },
436 512
@@ -446,6 +522,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
446 } 522 }
447 } 523 }
448 } 524 }
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._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
533 }
534 if (this.isPositionCollapsed === false) {
535 this._positionCollapser.myContent.style.height = "auto";
536 this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
537 this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
538 }
539 if (this.isTransformCollapsed === false) {
540 this._transformCollapser.myContent.style.height = "auto";
541 this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
542 this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
543 }
544 if (this.isStyleCollapsed === false) {
545 this._styleCollapser.myContent.style.height = "auto";
546 this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
547 this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
548 }
549 this._isFirstDraw = false;
550 }
551
449 } 552 }
450 }, 553 },
451 554
@@ -739,6 +842,152 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
739 return returnVal; 842 return returnVal;
740 } 843 }
741 }, 844 },
845
846 // Drag and drop event handlers
847 handleKeyframeDragstart : {
848 value: function(event) {
849 var dragIcon = document.createElement("img"),
850 minPosition = 0,
851 maxPosition = 100000000000;
852
853 event.dataTransfer.effectAllowed = 'move';
854 event.dataTransfer.setData('Text', this.identifier);
855 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
856 dragIcon.width = 1;
857 event.dataTransfer.setDragImage(dragIcon, 0, 0);
858
859 // Clone the element we're dragging
860 this._dragAndDropHelper = event.target.cloneNode(true);
861 this._dragAndDropHelper.style.opacity = 0.8;
862 this._dragAndDropHelper.style.position = "absolute";
863 this._dragAndDropHelper.style.top = "2px";
864 this._dragAndDropHelper.style.left = "0px";
865 this._dragAndDropHelper.style.zIndex = 700;
866
867 //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
868 this._dragAndDropHelper.classList.add("track-dnd-helper");
869
870 // Get the offset
871 var findYOffset = function(obj) {
872 var curleft = curtop = 0;
873
874 if (obj.offsetParent) {
875 do {
876 curleft += obj.offsetLeft;
877 curtop += obj.offsetTop;
878
879 } while (obj = obj.offsetParent);
880 }
881 return curtop;
882 }
883 //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
884 if (this.draggingIndex !== (this.tweens.length -1)) {
885 maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition;
886 }
887 if (this.draggingIndex > 1) {
888 minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition;
889 }
890 this._keyframeMinPosition = minPosition+2;
891 this._keyframeMaxPosition = maxPosition-9;
892 this._appendHelper = true;
893 this._deleteHelper = false;
894 }
895 },
896 handleKeyframeDragover: {
897