diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 208 |
2 files changed, 210 insertions, 1 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..d416de5f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -16,6 +16,7 @@ | |||
16 | "element": {"#": "track"}, | 16 | "element": {"#": "track"}, |
17 | "tweenRepetition" : {"@" : "tweenRepetition"}, | 17 | "tweenRepetition" : {"@" : "tweenRepetition"}, |
18 | "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, | 18 | "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, |
19 | "track_lanes" : {"#" : "track_lanes"}, | ||
19 | "tween": {"@" : "tween"}, | 20 | "tween": {"@" : "tween"}, |
20 | "_mainCollapser" : {"@" : "mainCollapser"}, | 21 | "_mainCollapser" : {"@" : "mainCollapser"}, |
21 | "_positionCollapser" : {"@" : "positionCollapser"}, | 22 | "_positionCollapser" : {"@" : "positionCollapser"}, |
@@ -215,7 +216,7 @@ | |||
215 | <body> | 216 | <body> |
216 | 217 | ||
217 | <div data-montage-id="track" class="timeline-track"> | 218 | <div data-montage-id="track" class="timeline-track"> |
218 | <div data-montage-id="track_lanes" class="tracklane"> | 219 | <div data-montage-id="track_lanes" class="tracklane" style="position: relative;"> |
219 | <div data-montage-id="track_lane"></div> | 220 | <div data-montage-id="track_lane"></div> |
220 | </div> | 221 | </div> |
221 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> | 222 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> |
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 findYOff |