diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 10 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 222 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 103 |
4 files changed, 207 insertions, 131 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 34c300df..c213cb70 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -868,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
868 | }, | 868 | }, |
869 | handleDragleave: { | 869 | handleDragleave: { |
870 | value: function(event) { | 870 | value: function(event) { |
871 | if (this.parentComponent.parentComponent.draggingType !== "layer") { | ||
872 | return; | ||
873 | } | ||
871 | this.element.classList.remove("dragOver"); | 874 | this.element.classList.remove("dragOver"); |
872 | } | 875 | } |
873 | }, | 876 | }, |
@@ -875,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
875 | value: function(event) { | 878 | value: function(event) { |
876 | this.parentComponent.parentComponent.dragLayerID = this.layerID; | 879 | this.parentComponent.parentComponent.dragLayerID = this.layerID; |
877 | event.dataTransfer.setData('Text', 'Layer'); | 880 | event.dataTransfer.setData('Text', 'Layer'); |
881 | this.parentComponent.parentComponent.draggingType = "layer"; | ||
878 | } | 882 | } |
879 | }, | 883 | }, |
880 | handleDragover: { | 884 | handleDragover: { |
881 | value: function(event) { | 885 | value: function(event) { |
886 | if (this.parentComponent.parentComponent.draggingType !== "layer") { | ||
887 | return; | ||
888 | } | ||
882 | event.preventDefault(); | 889 | event.preventDefault(); |
883 | this.element.classList.add("dragOver"); | 890 | this.element.classList.add("dragOver"); |
884 | event.dataTransfer.dropEffect = "move"; | 891 | event.dataTransfer.dropEffect = "move"; |
@@ -888,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
888 | 895 | ||
889 | handleDrop : { | 896 | handleDrop : { |
890 | value: function(event) { | 897 | value: function(event) { |
898 | if (this.parentComponent.parentComponent.draggingType !== "layer") { | ||
899 | return; | ||
900 | } | ||
891 | event.stopPropagation(); | 901 | event.stopPropagation(); |
892 | this.element.classList.remove("dragOver"); | 902 | this.element.classList.remove("dragOver"); |
893 | if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { | 903 | if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { |
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< |