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.js175
2 files changed, 179 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..03e3b01e 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,31 @@ 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 dragAndDropHelperCoords: {
359 get: function() {
360 return this._dragAndDropHelperCoords;
361 },
362 set: function(newVal) {
363 this._dragAndDropHelperCoords = newVal;
364 }
365 },
366 _dragAndDropHelperOffset : {
367 value: false
368 },
369 _appendHelper: {
370 value: false
371 },
372 _deleteHelper: {
373 value: false
374 },
375
346 _trackData:{ 376 _trackData:{
347 value: false 377 value: false
348 }, 378 },
@@ -419,6 +449,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
419 this.ninjaStylesContoller = this.application.ninja.stylesController; 449 this.ninjaStylesContoller = this.application.ninja.stylesController;
420 this.element.addEventListener("click", this, false); 450 this.element.addEventListener("click", this, false);
421 this.eventManager.addEventListener("tlZoomSlider", this, false); 451 this.eventManager.addEventListener("tlZoomSlider", this, false);
452
453 // Drag and Drop event handlers
454 //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
455 this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
456 this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
457 //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
422 } 458 }
423 }, 459 },
424 460
@@ -431,6 +467,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
431 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 467 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
432 } 468 }
433 } 469 }
470
471
472
473
474
475
476
477
478 // Drag and Drop:
479 // Do we have a helper to append?
480 if (this._appendHelper === true) {
481 this.track_lanes.appendChild(this._dragAndDropHelper);
482 this._appendHelper = false;
483 }
484 // Do we need to move the helper?
485 if (this._dragAndDropHelperCoords !== false) {
486 if (this._dragAndDropHelper !== null) {
487 if (typeof(this._dragAndDropHelper.style) !== "undefined") {
488 this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
489 }
490 }
491 this._dragAndDropHelperCoords = false;
492 }
493 // Do we have a helper to delete?
494 if (this._deleteHelper === true) {
495 if (this._dragAndDropHelper === null) {
496 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
497 // Try and recover the helper so we can delete it.
498 var myHelper = this.element.querySelector(".track-dnd-helper");
499 if (myHelper != null) {
500 this._dragAndDropHelper = myHelper;
501 }
502 }
503 if (this._dragAndDropHelper !== null) {
504 // We need to delete the helper. Can we delete it from track_lanes?
505 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
506 this.track_lanes.removeChild(this._dragAndDropHelper);
507 this._dragAndDropHelper = null;
508 this._deleteHelper = false;
509 }
510 }
511 }
512
513
514
515
516
434 517
435 } 518 }
436 }, 519 },
@@ -448,6 +531,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
448 } 531 }
449 } 532 }
450 } 533 }
534
535
536 if (this._isFirstDraw === true) {
537
538 if (this.isMainCollapsed === false) {
539 this._mainCollapser.myContent.style.height = "auto";
540 this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
541 this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
542 }
543 if (this.isPositionCollapsed === false) {
544 this._positionCollapser.myContent.style.height = "auto";
545 this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
546 this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
547 }
548 if (this.isTransformCollapsed === false) {
549 this._transformCollapser.myContent.style.height = "auto";
550 this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
551 this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
552 }
553 if (this.isStyleCollapsed === false) {
554 this._styleCollapser.myContent.style.height = "auto";
555 this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
556 this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
557 }
558 this._isFirstDraw = false;
559 }
560
451 } 561 }
452 }, 562 },
453 563
@@ -730,6 +840,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
730 return returnVal; 840 return returnVal;
731 } 841 }
732 }, 842 },
843
844 // Drag and drop event handlers
845 handleKeyframeDragstart : {
846 value: function(event) {
847 var dragIcon = document.createElement("img"),
848 minPosition = 0,
849 maxPosition = 100000000000;
850
851 event.dataTransfer.effectAllowed = 'move';
852