aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html6
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js248
2 files changed, 252 insertions, 2 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 5c5a8b76..9de703f9 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright> 2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/> 3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -15,6 +15,8 @@
15 "properties": { 15 "properties": {
16 "element": {"#": "track"}, 16 "element": {"#": "track"},
17 "tweenRepetition" : {"@" : "tweenRepetition"}, 17 "tweenRepetition" : {"@" : "tweenRepetition"},
18 "styleTracksRepetition" : {"@" : "styleTracksRepetition"},
19 "track_lanes" : {"#" : "track_lanes"},
18 "tween": {"@" : "tween"}, 20 "tween": {"@" : "tween"},
19 "_mainCollapser" : {"@" : "mainCollapser"}, 21 "_mainCollapser" : {"@" : "mainCollapser"},
20 "_positionCollapser" : {"@" : "positionCollapser"}, 22 "_positionCollapser" : {"@" : "positionCollapser"},
@@ -214,7 +216,7 @@
214 <body> 216 <body>
215 217
216 <div data-montage-id="track" class="timeline-track"> 218 <div data-montage-id="track" class="timeline-track">
217 <div data-montage-id="track_lanes" class="tracklane"> 219 <div data-montage-id="track_lanes" class="tracklane" style="position: relative;">
218 <div data-montage-id="track_lane"></div> 220 <div data-montage-id="track_lane"></div>
219 </div> 221 </div>
220 <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..836bb60f 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,152 @@ 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 minPosition = 0,
841 maxPosition = 100000000000;
842
843 event.dataTransfer.effectAllowed = 'move';
844 event.dataTransfer.setData('Text', this.identifier);
845 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
846 dragIcon.width = 1;
847 event.dataTransfer.setDragImage(dragIcon, 0, 0);
848
849 // Clone the element we're dragging
850 this._dragAndDropHelper = event.target.cloneNode(true);
851 this._dragAndDropHelper.style.opacity = 0.8;