aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
authorJonathan Duran2012-05-04 22:32:38 -0700
committerJonathan Duran2012-05-04 22:32:38 -0700
commit9f71f7804bd649dbfb9078cc0bef562530738e6f (patch)
treeda5d4aa2f894e840dd044d890e0d0cae6c7c2843 /js/panels/Timeline/TimelineTrack.reel
parenteaef072648eb539e648aabf7bc1aea8d02c21085 (diff)
parent2ea8a62835f4c20efff2623306e7205e6f5bf0ba (diff)
downloadninja-9f71f7804bd649dbfb9078cc0bef562530738e6f.tar.gz
Merge branch 'refs/heads/TimelineUber' into TimelineProps
Conflicts: js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js249
2 files changed, 251 insertions, 1 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index ed013505..dc32d44d 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"},
@@ -227,7 +228,7 @@
227 <body> 228 <body>
228 229
229 <div data-montage-id="track" class="timeline-track"> 230 <div data-montage-id="track" class="timeline-track">
230 <div data-montage-id="track_lanes" class="tracklane"> 231 <div data-montage-id="track_lanes" class="tracklane" style="position: relative;">
231 <div data-montage-id="track_lane"></div> 232 <div data-montage-id="track_lane"></div>
232 </div> 233 </div>
233 <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> 234 <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 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";