aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-05-01 17:46:09 -0700
committerJon Reid2012-05-01 17:46:09 -0700
commit73c4f7f449ba58e70f7335ef932b23dd450c925b (patch)
treeacfb5d8004c2c11c994d6ee81f48c9f4a0109949 /js
parent8c1fda5e59b9d88b69e0b4a2bd57590ef451643c (diff)
downloadninja-73c4f7f449ba58e70f7335ef932b23dd450c925b.tar.gz
Timeline: Initial keyframe drag-and-drop interaction.
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js30
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html1
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js6
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js155
5 files changed, 193 insertions, 2 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..df5bdd67 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
31 prepareForDraw:{ 31 prepareForDraw:{
32 value:function(){ 32 value:function(){
33 this.element.addEventListener("click", this, false); 33 this.element.addEventListener("click", this, false);
34
35 // Drag and drop event handlers
36 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
37 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
38 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
39
40
41
42
43
34 } 44 }
35 }, 45 },
36 46
@@ -57,5 +67,23 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
57 value:function(ev){ 67 value:function(ev){
58 this.selectKeyframe(); 68 this.selectKeyframe();
59 } 69 }
60 } 70 },
71
72 handleMouseover: {
73 value: function(event) {
74 this.element.draggable = true;
75 }
76 },
77 handleMouseout: {
78 value: function(event) {
79 this.element.draggable = false;
80 }
81 },
82 handleDragstart: {
83 value: function(event) {
84 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
85 event.dataTransfer.setData('Text', 'Keyframe');
86 }
87 },
88
61}); 89});
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..8ddc81cd 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -31,6 +31,7 @@
31 "container_tracks" : {"#" : "container-tracks"}, 31 "container_tracks" : {"#" : "container-tracks"},
32 "end_hottext" : {"@" : "endHottext"}, 32 "end_hottext" : {"@" : "endHottext"},
33 "container_layers" : {"#" : "container-layers"}, 33 "container_layers" : {"#" : "container-layers"},
34 "container_tracks" : {"#" : "container-tracks"},
34 "timeline_disabler" : {"#" : "timeline-disabler"}, 35 "timeline_disabler" : {"#" : "timeline-disabler"},
35 "checkable_relative" : {"#" : "checkable_relative"}, 36 "checkable_relative" : {"#" : "checkable_relative"},
36 "checkable_absolute" : {"#" : "checkable_absolute"}, 37 "checkable_absolute" : {"#" : "checkable_absolute"},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 6e64cde0..80baffc8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -336,6 +336,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
336 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); 336 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
337 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); 337 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
338 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); 338 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
339 //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
339 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); 340 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
340 341
341 // Bind the handlers for the config menu 342 // Bind the handlers for the config menu
@@ -1471,6 +1472,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1471 this.needsDraw = true; 1472 this.needsDraw = true;
1472 } 1473 }
1473 }, 1474 },
1475 handleKeyframeDragover: {
1476 value: function(event) {
1477
1478 }
1479 },
1474 handleLayerDragEnd : { 1480 handleLayerDragEnd : {
1475 value: function(event) { 1481 value: function(event) {
1476 this._deleteHelper = true; 1482 this._deleteHelper = true;
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 f32592ed..09378e65 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -348,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
348 value:null 348 value:null
349 }, 349 },
350 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
351 _trackData:{ 368 _trackData:{
352 value: false 369 value: false
353 }, 370 },
@@ -424,6 +441,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
424 this.ninjaStylesContoller = this.application.ninja.stylesController; 441 this.ninjaStylesContoller = this.application.ninja.stylesController;
425 this.element.addEventListener("click", this, false); 442 this.element.addEventListener("click", this, false);
426 this.eventManager.addEventListener("tlZoomSlider", this, false); 443 this.eventManager.addEventListener("tlZoomSlider", this, false);
444
445 this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
446 this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
447 this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
448 this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
427 } 449 }
428 }, 450 },
429 451
@@ -436,6 +458,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
436 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 458 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
437 } 459 }
438 } 460 }
461
462
463
464
465
466
467
468
469 // Drag and Drop:
470 // Do we have a helper to append?
471 if (this._appendHelper === true) {
472 this.track_lanes.appendChild(this._dragAndDropHelper);
473 this._appendHelper = false;
474 }
475 // Do we need to move the helper?
476 if (this._dragAndDropHelperCoords !== false) {
477 if (this._dragAndDropHelper !== null) {
478 if (typeof(this._dragAndDropHelper.style) !== "undefined") {
479 this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
480 }
481 }
482 this._dragAndDropHelperCoords = false;
483 }
484 // Do we have a helper to delete?
485 if (this._deleteHelper === true) {
486 if (this._dragAndDropHelper === null) {
487 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
488 // Try and recover the helper so we can delete it.
489 var myHelper = this.element.querySelector(".track-dnd-helper");
490 if (myHelper != null) {
491 this._dragAndDropHelper = myHelper;
492 }
493 }
494 if (this._dragAndDropHelper !== null) {
495 // We need to delete the helper. Can we delete it from track_lanes?
496 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
497 this.track_lanes.removeChild(this._dragAndDropHelper);
498 this._dragAndDropHelper = null;
499 this._deleteHelper = false;
500</