aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js12
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html4
-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.js232
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js143
7 files changed, 252 insertions, 154 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 2d3ab72f..a4f957cf 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -80,7 +80,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
80 value: function(event) { 80 value: function(event) {
81 //this.parentComponent.parentComponent.dragLayerID = this.layerID; 81 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
82 event.dataTransfer.setData('Text', 'Keyframe'); 82 event.dataTransfer.setData('Text', 'Keyframe');
83 this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID; 83
84 // Get my index in my track's tween array
85 var i = 0,
86 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
87 myIndex = null;
88 for (i = 0; i < tweenRepetitionLength; i++) {
89 if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
90 myIndex = i;
91 }
92 }
93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
84 } 94 }
85 }, 95 },
86 handleDragend: { 96 handleDragend: {
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index ba7c18c3..c7e7b575 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,13 +17,11 @@
17 "styleRepetition" : {"@":"repetition1"}, 17 "styleRepetition" : {"@":"repetition1"},
18 "dynamicLayerName" : {"@":"dtext1"}, 18 "dynamicLayerName" : {"@":"dtext1"},
19 "dynamicLayerTag" : {"@": "dtext2"}, 19 "dynamicLayerTag" : {"@": "dtext2"},
20 "slotStyle" : {"@":"slot1"},
21 "mainCollapser" : {"@" : "mainCollapser"}, 20 "mainCollapser" : {"@" : "mainCollapser"},
22 "positionCollapser" : {"@" : "positionCollapser"}, 21 "positionCollapser" : {"@" : "positionCollapser"},
23 "styleCollapser" : {"@" : "styleCollapser"}, 22 "styleCollapser" : {"@" : "styleCollapser"},
24 "clickerMain" : {"#" : "clicker-main"}, 23 "clickerMain" : {"#" : "clicker-main"},
25 "myLabel" : {"#" : "myLabel"}, 24 "myLabel" : {"#" : "myLabel"}
26 "dragDrop" : {"@" : "DragDrop"}
27 } 25 }
28 }, 26 },
29 "dtext1" : { 27 "dtext1" : {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 245aabd4..130dd044 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -777,6 +777,9 @@ var Layer = exports.Layer = Montage.create(Component, {
777 }, 777 },
778 handleDragleave: { 778 handleDragleave: {
779 value: function(event) { 779 value: function(event) {
780 if (this.parentComponent.parentComponent.draggingType !== "layer") {
781 return;
782 }
780 this.element.classList.remove("dragOver"); 783 this.element.classList.remove("dragOver");
781 } 784 }
782 }, 785 },
@@ -784,10 +787,14 @@ var Layer = exports.Layer = Montage.create(Component, {
784 value: function(event) { 787 value: function(event) {
785 this.parentComponent.parentComponent.dragLayerID = this.layerID; 788 this.parentComponent.parentComponent.dragLayerID = this.layerID;
786 event.dataTransfer.setData('Text', 'Layer'); 789 event.dataTransfer.setData('Text', 'Layer');
790 this.parentComponent.parentComponent.draggingType = "layer";
787 } 791 }
788 }, 792 },
789 handleDragover: { 793 handleDragover: {
790 value: function(event) { 794 value: function(event) {
795 if (this.parentComponent.parentComponent.draggingType !== "layer") {
796 return;
797 }
791 event.preventDefault(); 798 event.preventDefault();
792 this.element.classList.add("dragOver"); 799 this.element.classList.add("dragOver");
793 event.dataTransfer.dropEffect = "move"; 800 event.dataTransfer.dropEffect = "move";
@@ -797,6 +804,9 @@ var Layer = exports.Layer = Montage.create(Component, {
797 804
798 handleDrop : { 805 handleDrop : {
799 value: function(event) { 806 value: function(event) {
807 if (this.parentComponent.parentComponent.draggingType !== "layer") {
808 return;
809 }
800 event.stopPropagation(); 810 event.stopPropagation();
801 this.element.classList.remove("dragOver"); 811 this.element.classList.remove("dragOver");
802 if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { 812 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 03db7880..8859e115 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