aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js10
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html3
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js222
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js103
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