diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 208 |
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_layers.scrollTop - 20) | ||
886 | } | ||