aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
authorJonathan Duran2012-05-09 09:59:34 -0700
committerJonathan Duran2012-05-09 09:59:34 -0700
commit1514f976119a9e5180a84a6afdf148bb25196bf8 (patch)
tree0cf4520d863d34f1601074139ba11a39ce70e648 /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
parent48a2a800155fd2d608fb7191c0180cd8f625cd44 (diff)
parent88c7e0abba3349531450efbcecfa1b71fbf5134a (diff)
downloadninja-1514f976119a9e5180a84a6afdf148bb25196bf8.tar.gz
Merge branch 'refs/heads/timeline-local' into TimelineUber
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js222
1 files changed, 180 insertions, 42 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 1ce627b7..3a961b51 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
259 timeMarkerHolder:{ 259 timeMarkerHolder:{
260 value:null 260 value:null
261 }, 261 },
262
263 // Drag and Drop properties
262 _dragAndDropHelper : { 264 _dragAndDropHelper : {
263 value: false 265 value: false
264 }, 266 },
@@ -271,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
271 _dragLayerID : { 273 _dragLayerID : {
272 value: null 274 value: null
273 }, 275 },
276 _draggingType: {
277 value: false
278 },
279 draggingType: {
280 get: function() {
281 return this._draggingType;
282 },
283 set: function(newVal) {
284 this._draggingType = newVal;
285 }
286 },
274 287
275 layersDragged:{ 288 layersDragged:{
276 value:[], 289 value:[],
@@ -328,6 +341,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
328 _scrollTracks: { 341 _scrollTracks: {
329 value: false 342 value: false
330 }, 343 },
344
345 // Keyframe drag and drop properties
346 _draggingTrackId: {
347 value: false
348 },
349 draggingTrackId: {
350 get: function() {
351 return this._draggingTrackId;
352 },
353 set: function(newVal) {
354 this._draggingTrackId = newVal;
355 }
356 },
357
358
331 useAbsolutePosition:{ 359 useAbsolutePosition:{
332 value:true 360 value:true
333 }, 361 },
@@ -352,8 +380,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
352 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); 380 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
353 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); 381 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
354 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); 382 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
355 //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
356 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); 383 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
384 this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
385 this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
357 386
358 // Bind the handlers for the config menu 387 // Bind the handlers for the config menu
359 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); 388 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
@@ -375,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
375 404
376 draw: { 405 draw: {
377 value: function() { 406 value: function() {
407
378 // Drag and Drop: 408 // Drag and Drop:
379 // Do we have a helper to append? 409 if (this.draggingType === "layer") {
380 if (this._appendHelper === true) { 410
381 this.container_layers.appendChild(this._dragAndDropHelper); 411 // Do we have a helper to append?
382 this._appendHelper = false; 412 if (this._appendHelper === true) {
383 } 413 this.container_layers.appendChild(this._dragAndDropHelper);
384 // Do we need to move the helper? 414 this._appendHelper = false;
385 if (this._dragAndDropHelperCoords !== false) {
386 if (this._dragAndDropHelper !== null) {
387 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
388 }
389 this._dragAndDropHelperCoords = false;
390 }
391 // Do we need to scroll the tracks?
392 if (this._scrollTracks !== false) {
393 this.layout_tracks.scrollTop = this._scrollTracks;
394 this._scrollTracks = false;
395 }
396 // Do we have a helper to delete?
397 if (this._deleteHelper === true) {
398 if (this._dragAndDropHelper === null) {
399 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
400 // Try and recover the helper so we can delete it.
401 var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
402 if (myHelper != null) {
403 this._dragAndDropHelper = myHelper;
404 }
405 }
406 if (this._dragAndDropHelper !== null) {
407 // We need to delete the helper. Can we delete it from container_layers?
408 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
409 this.container_layers.removeChild(this._dragAndDropHelper);
410 this._dragAndDropHelper = null;
411 this._deleteHelper = false;
412 }
413 } 415 }
414 this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); 416 // Do we need to move the helper?
415 this.layersDragged =[]; 417 if (this._dragAndDropHelperCoords !== false) {
418 if (this._dragAndDropHelper !== null) {
419 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
420 }
421 this._dragAndDropHelperCoords = false;
422 }
423 // Do we need to scroll the tracks?
424 if (this._scrollTracks !== false) {
425 this.layout_tracks.scrollTop = this._scrollTracks;
426 this._scrollTracks = false;
427 }
428 // Do we have a helper to delete?
429 if (this._deleteHelper === true) {
430 if (this._dragAndDropHelper === null) {
431 // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
432 // Try and recover the helper so we can delete it.
433 var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
434 if (myHelper != null) {
435 this._dragAndDropHelper = myHelper;
436 }
437 }
438 if (this._dragAndDropHelper !== null) {
439 // We need to delete the helper. Can we delete it from container_layers?
440 if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
441 this.container_layers.removeChild(this._dragAndDropHelper);
442 this._dragAndDropHelper = null;
443 this._deleteHelper = false;
444 }
445 }
446 this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
447 this.layersDragged =[];
448 }
449 } else if (this.draggingType === "keyframe") {
450 // Do we need to scroll the tracks?
451 if (this._scrollTracks !== false) {
452 this.layout_tracks.scrollLeft = this._scrollTracks;
453 this._scrollTracks = false;
454 }
416 } 455 }
456
417 } 457 }
418 }, 458 },
419 /* === END: Draw cycle === */ 459 /* === END: Draw cycle === */
@@ -1481,6 +1521,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1481 }, 1521 },
1482 handleLayerDragover: { 1522 handleLayerDragover: {
1483 value: function(event) { 1523 value: function(event) {
1524
1525 // If this isn't a layer event we don't do anything.
1526 if (this.draggingType !== "layer") {
1527 return;
1528 }
1484 var currPos = 0, 1529 var currPos = 0,
1485 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; 1530 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
1486 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { 1531 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
@@ -1501,13 +1546,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1501 this.needsDraw = true; 1546 this.needsDraw = true;
1502 } 1547 }
1503 }, 1548 },
1504 handleKeyframeDragover: {
1505 value: function(event) {
1506
1507 }
1508 },
1509 handleLayerDragEnd : { 1549 handleLayerDragEnd : {
1510 value: function(event) { 1550 value: function(event) {
1551
1552 // If this isn't a layer event we don't do anything.
1553