diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 222 |
2 files changed, 182 insertions, 43 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 8ddc81cd..5c957619 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -20,6 +20,7 @@ | |||
20 | "track_container": {"#": "right_inside"}, | 20 | "track_container": {"#": "right_inside"}, |
21 | "timeline_leftpane" : {"#" : "leftpane_inside"}, | 21 | "timeline_leftpane" : {"#" : "leftpane_inside"}, |
22 | "layer_tracks": {"#": "layer_tracks"}, | 22 | "layer_tracks": {"#": "layer_tracks"}, |
23 | "layout_tracks": {"#": "layout_tracks"}, | ||
23 | "master_track": {"#": "master_track"}, | 24 | "master_track": {"#": "master_track"}, |
24 | "time_markers" : {"#": "timeline_markers"}, | 25 | "time_markers" : {"#": "timeline_markers"}, |
25 | "layerRepetition" : {"@": "repetition1"}, | 26 | "layerRepetition" : {"@": "repetition1"}, |
@@ -211,7 +212,7 @@ | |||
211 | 212 | ||
212 | 213 | ||
213 | <div data-montage-id="layer_tracks" class="tl_layertracks"> | 214 | <div data-montage-id="layer_tracks" class="tl_layertracks"> |
214 | <div class="layout-tracks"> | 215 | <div class="layout-tracks" data-montage-id="layout_tracks"> |
215 | <div data-montage-id="playhead_marker" class="playheadmarker"></div> | 216 | <div data-montage-id="playhead_marker" class="playheadmarker"></div> |
216 | <div data-montage-id="master_track" class="mastertrack"> | 217 | <div data-montage-id="master_track" class="mastertrack"> |
217 | <div data-montage-id="time_bar" class="timebar"></div> | 218 | <div data-montage-id="time_bar" class="timebar"></div> |
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 |