aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js152
1 files changed, 152 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index bc474a46..ffcd6686 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -238,6 +238,57 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
238 timeMarkerHolder:{ 238 timeMarkerHolder:{
239 value:null 239 value:null
240 }, 240 },
241 _dragAndDropHelper : {
242 value: false
243 },
244 _dragAndDropHelperCoords: {
245 value: false
246 },
247 _dragAndDropHelperOffset : {
248 value: false
249 },
250 _dragLayerID : {
251 value: null
252 },
253 dragLayerID : {
254 get: function() {
255 return this._dragLayerID;
256 },
257 set: function(newVal) {
258 if (newVal !== this._dragLayerID) {
259 this._dragLayerID = newVal;
260 }
261 }
262 },
263 _dropLayerID : {
264 value: null
265 },
266 dropLayerID : {
267 get: function() {
268 return this._dropLayerID;
269 },
270 set: function(newVal) {
271 if (newVal !== this._dropLayerID) {
272 this._dropLayerID = newVal;
273
274 // Create a snapshot of arrLayers so we can manipulate it safely
275 var arrLayers = this.arrLayers,
276 dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
277 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
278 dragLayer = arrLayers[dragLayerIndex];
279
280 arrLayers.splice(dragLayerIndex, 1);
281 arrLayers.splice(dropLayerIndex, 0, dragLayer);
282
283 // Update the repetition!
284 this.arrLayers = arrLayers;
285
286 // Clear for future DnD
287 this._dropLayerID = null;
288 this._dragLayerID = null;
289 }
290 }
291 },
241 /* === END: Models === */ 292 /* === END: Models === */
242 /* === BEGIN: Draw cycle === */ 293 /* === BEGIN: Draw cycle === */
243 prepareForDraw:{ 294 prepareForDraw:{
@@ -247,6 +298,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
247 this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); 298 this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
248 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); 299 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
249 this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); 300 this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
301
302 // Bind drag and drop event handlers
303 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
304 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
305 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
306 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
250 } 307 }
251 }, 308 },
252 309
@@ -258,6 +315,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
258 } 315 }
259 } 316 }
260 }, 317 },
318
319 draw: {
320 value: function() {
321
322 // Drag and Drop:
323 // Do we have a helper to append?
324 if (this._appendHelper === true) {
325 this.container_layers.appendChild(this._dragAndDropHelper);
326 this._appendHelper = false;
327 }
328 // Do we need to move the helper?
329 if (this._dragAndDropHelperCoords !== false) {
330 if (this._dragAndDropHelper !== null) {
331 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
332 }
333 this._dragAndDropHelperCoords = false;
334 }
335 }
336 },
261 /* === END: Draw cycle === */ 337 /* === END: Draw cycle === */
262 /* === BEGIN: Controllers === */ 338 /* === BEGIN: Controllers === */
263 // Create an empty layer template object with minimal defaults and return it for use 339 // Create an empty layer template object with minimal defaults and return it for use
@@ -365,6 +441,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
365 this.layout_tracks = this.element.querySelector(".layout-tracks"); 441 this.layout_tracks = this.element.querySelector(".layout-tracks");
366 this.layout_markers = this.element.querySelector(".layout_markers"); 442 this.layout_markers = this.element.querySelector(".layout_markers");
367 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); 443 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
444 this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
368 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 445 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
369 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 446 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
370 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); 447 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
@@ -586,6 +663,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
586 var myIndex = this.getActiveLayerIndex(); 663 var myIndex = this.getActiveLayerIndex();
587 this.selectLayer(myIndex, true); 664 this.selectLayer(myIndex, true);
588 } 665 }
666 this._isMousedown = true;
667 }
668 },
669
670 timelineLeftPaneMouseup:{
671 value:function (event) {
672 this._isMousedown = false;
589 } 673 }
590 }, 674 },
591 675
@@ -891,6 +975,74 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
891 } 975 }
892 } 976 }
893 }, 977 },
978
979 handleLayerDragStart : {
980 value: function(event) {
981 var dragIcon = document.createElement("img");
982 event.dataTransfer.effectAllowed = 'move';
983 event.dataTransfer.setData('Text', this.identifier);
984 dragIcon.src = "/images/transparent.png";
985 dragIcon.width = 1;
986 event.dataTransfer.setDragImage(dragIcon, 0, 0);
987
988 // Clone the element we're dragging
989 this._dragAndDropHelper = event.target.cloneNode(true);
990 this._dragAndDropHelper.style.opacity = 0.8;
991 this._dragAndDropHelper.style.position = "absolute";
992 this._dragAndDropHelper.style.top = "0px";
993 this._dragAndDropHelper.style.left = "0px";
994 this._dragAndDropHelper.style.zIndex = 700;
995
996 this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
997 this._dragAndDropHelper.classList.add("timeline-dnd-helper");
998
999 // Get the offset
1000 var findYOffset = function(obj) {
1001 var curleft = curtop = 0;
1002 if (obj.offsetParent) {
1003 do {
1004 curleft += obj.offsetLeft;
1005 curtop += obj.offsetTop;
1006
1007 } while (obj = obj.offsetParent);
1008 }
1009 return curtop;
1010 }
1011 this._dragAndDropHelperOffset = findYOffset(this.container_layers);
1012 this._appendHelper = true;
1013 // this.container_layers.appendChild(this._dragAndDropHelper);
1014 }
1015 },
1016 handleLayerDragover: {
1017 value: function(event) {
1018 var currPos = 0;
1019 currPos = event.y - this._dragAndDropHelperOffset -28;
1020 this._dragAndDropHelperCoords = currPos + "px";
1021 this.needsDraw = true;
1022 }
1023 },
1024 handleLayerDragEnd : {
1025 value: function(event) {
1026 // Delete the helper and clean up
1027 if (this._dragAndDropHelper !== null) {
1028 this.container_layers.removeChild(this._dragAndDropHelper);
1029 this._dragAndDropHelper = null;
1030 }
1031 }
1032 },
1033 handleLayerDrop : {
1034 value: function(event) {
1035 event.stopPropagation();
1036 event.preventDefault();
1037 // Usually drop fires after dragend, but sometimes
1038 // dragend doesn't fire. So if we're here in drop
1039 // and there's still a helper, we need to manually fire dragend.
1040 if (this._dragAndDropHelper !== null) {
1041 this.container_layers.removeChild(this._dragAndDropHelper);
1042 this._dragAndDropHelper = null;
1043 }
1044 }
1045 },
89