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.js153
1 files changed, 153 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 66c77072..cb133f58 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -261,6 +261,57 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
261 timeMarkerHolder:{ 261 timeMarkerHolder:{
262 value:null 262 value:null
263 }, 263 },
264 _dragAndDropHelper : {
265 value: false
266 },
267 _dragAndDropHelperCoords: {
268 value: false
269 },
270 _dragAndDropHelperOffset : {
271 value: false
272 },
273 _dragLayerID : {
274 value: null
275 },
276 dragLayerID : {
277 get: function() {
278 return this._dragLayerID;
279 },
280 set: function(newVal) {
281 if (newVal !== this._dragLayerID) {
282 this._dragLayerID = newVal;
283 }
284 }
285 },
286 _dropLayerID : {
287 value: null
288 },
289 dropLayerID : {
290 get: function() {
291 return this._dropLayerID;
292 },
293 set: function(newVal) {
294 if (newVal !== this._dropLayerID) {
295 this._dropLayerID = newVal;
296
297 // Create a snapshot of arrLayers so we can manipulate it safely
298 var arrLayers = this.arrLayers,
299 dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
300 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
301 dragLayer = arrLayers[dragLayerIndex];
302
303 arrLayers.splice(dragLayerIndex, 1);
304 arrLayers.splice(dropLayerIndex, 0, dragLayer);
305
306 // Update the repetition!
307 this.arrLayers = arrLayers;
308
309 // Clear for future DnD
310 this._dropLayerID = null;
311 this._dragLayerID = null;
312 }
313 }
314 },
264 /* === END: Models === */ 315 /* === END: Models === */
265 /* === BEGIN: Draw cycle === */ 316 /* === BEGIN: Draw cycle === */
266 prepareForDraw:{ 317 prepareForDraw:{
@@ -270,6 +321,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
270 this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); 321 this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
271 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); 322 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
272 this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); 323 this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
324
325 // Bind drag and drop event handlers
326 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
327 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
328 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
329 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
273 } 330 }
274 }, 331 },
275 332
@@ -281,6 +338,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
281 } 338 }
282 } 339 }
283 }, 340 },
341
342 draw: {
343 value: function() {
344
345 // Drag and Drop:
346 // Do we have a helper to append?
347 if (this._appendHelper === true) {
348 this.container_layers.appendChild(this._dragAndDropHelper);
349 this._appendHelper = false;
350 }
351 // Do we need to move the helper?
352 if (this._dragAndDropHelperCoords !== false) {
353 if (this._dragAndDropHelper !== null) {
354 this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
355 }
356 this._dragAndDropHelperCoords = false;
357 }
358 }
359 },
284 /* === END: Draw cycle === */ 360 /* === END: Draw cycle === */
285 /* === BEGIN: Controllers === */ 361 /* === BEGIN: Controllers === */
286 // Create an empty layer template object with minimal defaults and return it for use 362 // Create an empty layer template object with minimal defaults and return it for use
@@ -388,6 +464,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
388 this.layout_tracks = this.element.querySelector(".layout-tracks"); 464 this.layout_tracks = this.element.querySelector(".layout-tracks");
389 this.layout_markers = this.element.querySelector(".layout_markers"); 465 this.layout_markers = this.element.querySelector(".layout_markers");
390 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); 466 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
467 this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
391 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 468 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
392 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 469 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
393 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); 470 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
@@ -617,6 +694,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
617 var myIndex = this.getActiveLayerIndex(); 694 var myIndex = this.getActiveLayerIndex();
618 this.selectLayer(myIndex, true); 695 this.selectLayer(myIndex, true);
619 } 696 }
697 this._isMousedown = true;
698 }
699 },
700
701 timelineLeftPaneMouseup:{
702 value:function (event) {
703 this._isMousedown = false;
620 } 704 }
621 }, 705 },
622 706
@@ -927,6 +1011,75 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
927 } 1011 }
928 } 1012 }
929 }, 1013 },
1014
1015 handleLayerDragStart : {
1016 value: function(event) {
1017 var dragIcon = document.createElement("img");
1018 event.dataTransfer.effectAllowed = 'move';
1019 event.dataTransfer.setData('Text', this.identifier);
1020 // dragIcon.src = "/images/transparent.png";
1021 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
1022 dragIcon.width = 1;
1023 event.dataTransfer.setDragImage(dragIcon, 0, 0);
1024
1025 // Clone the element we're dragging
1026 this._dragAndDropHelper = event.target.cloneNode(true);
1027 this._dragAndDropHelper.style.opacity = 0.8;
1028 this._dragAndDropHelper.style.position = "absolute";
1029 this._dragAndDropHelper.style.top = "0px";
1030 this._dragAndDropHelper.style.left = "0px";
1031 this._dragAndDropHelper.style.zIndex = 700;
1032
1033 this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
1034 this._dragAndDropHelper.classList.add("timeline-dnd-helper");
1035
1036 // Get the offset
1037 var findYOffset = function(obj) {
1038 var curleft = curtop = 0;
1039 if (obj.offsetParent) {
1040 do {
1041 curleft += obj.offsetLeft;
1042 curtop += obj.offsetTop;
1043
1044 } while (obj = obj.offsetParent);
1045 }
1046 return curtop;
1047 }
1048 this._dragAndDropHelperOffset = findYOffset(this.container_layers);
1049 this._appendHelper = true;
1050 // this.container_layers.appendChild(this._dragAndDropHelper);
1051 }
1052 },
1053 handleLayerDragover: {
1054 value: function(event) {
1055 var currPos = 0;
1056 currPos = event.y - this._dragAndDropHelperOffset -28;
1057 this._dragAndDropHelperCoords = currPos + "px";
1058 this.needsDraw = true;
1059 }
1060 },
1061 handleLayerDragEnd : {
1062 value: function(event) {
1063 // Delete the helper and clean up
1064 if (this._dragAndDropHelper !== null) {
1065 this.container_layers.removeChild(this._dragAndDropHelper);
1066 this._dragAndDropHelper = null;
1067 }
1068 }
1069 },
1070 handleLayerDrop : {
1071 value: function(event) {
1072 event.stopPropagation();
1073 event.preventDefault();
1074 // Usually drop fires after dragend, but sometimes
1075 // dragend doesn't fire. So if we're here in drop
1076 // and there's still a helper, we need to manually fire dragend.
1077 if (this._dragAndDropHelper !== null) {
1078 this.container_layers.removeChild(this._dragAndDropHelper);
1079 this._dragAndDropHelper = null;
1080 }