diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 152 |
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 | }, | ||
894 | /* === END: Controllers === */ | 1046 | /* === END: Controllers === */ |
895 | 1047 | ||
896 | /* === BEGIN: Logging routines === */ |