2 files changed, 210 insertions, 1 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 44ad9abb..d416de5f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -16,6 +16,7 @@
                           "element": {"#": "track"},
                           "tweenRepetition" : {"@" : "tweenRepetition"},
                           "styleTracksRepetition" : {"@" : "styleTracksRepetition"},
+                           "track_lanes" : {"#" : "track_lanes"},
                           "tween": {"@" : "tween"},
                           "_mainCollapser" : {"@" : "mainCollapser"},
                           "_positionCollapser" : {"@" : "positionCollapser"},
@@ -215,7 +216,7 @@
        <body>
        <div data-montage-id="track" class="timeline-track">
-            <div data-montage-id="track_lanes" class="tracklane">
+            <div data-montage-id="track_lanes" class="tracklane" style="position: relative;">
                <div data-montage-id="track_lane"></div>
            </div>
            <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index efeeba00..d5571c3c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                }
        }
    },
+    
+    _isFirstDraw: {
+        value: true
+    },
+    
    _isVisible:{
        value: true
    },
@@ -343,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        value:null
    },
+        // Drag and Drop properties
+    _dragAndDropHelper : {
+        value: false
+    },
+    _dragAndDropHelperCoords: {
+        value: false
+    },
+    _dragAndDropHelperOffset : {
+        value: false
+    },
+    _appendHelper: {
+        value: false
+    },
+    _deleteHelper: {
+        value: false
+    },
    _trackData:{
                value: false
    },
@@ -419,6 +441,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
            this.ninjaStylesContoller = this.application.ninja.stylesController;
            this.element.addEventListener("click", this, false);
            this.eventManager.addEventListener("tlZoomSlider", this, false);
+            
+            // Drag and Drop event handlers 
+                        this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+                        this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
+                        this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
+                        this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
        }
    },
@@ -431,6 +459,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                        this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
                    }
            }
+            
+            
+            
+            
+            
+            
+            
+            
+                // Drag and Drop:
+                // Do we have a helper to append?
+            if (this._appendHelper === true) {
+                this.track_lanes.appendChild(this._dragAndDropHelper);
+                this._appendHelper = false;
+            }
+            // Do we need to move the helper?
+                if (this._dragAndDropHelperCoords !== false) {
+                        if (this._dragAndDropHelper !== null) {
+                                if (typeof(this._dragAndDropHelper.style) !== "undefined") {
+                                        this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
+                                }
+                        }
+                        this._dragAndDropHelperCoords = false;
+                }
+                // Do we have a helper to delete?
+                if (this._deleteHelper === true) {
+                        if (this._dragAndDropHelper === null) {
+                                // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
+                                // Try and recover the helper so we can delete it.
+                                var myHelper = this.element.querySelector(".track-dnd-helper");
+                                if (myHelper != null) {
+                                        this._dragAndDropHelper = myHelper;
+                                }
+                        }
+                    if (this._dragAndDropHelper !== null) {
+                        // We need to delete the helper.  Can we delete it from track_lanes?
+                        if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
+                                this.track_lanes.removeChild(this._dragAndDropHelper);
+                                this._dragAndDropHelper = null;
+                                this._deleteHelper = false;
+                        }
+                    }
+                }
+            
+            
+            
+            
+            
        }
    },
@@ -448,6 +523,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                    }
                }
            }
+            
+            
+                if (this._isFirstDraw === true) {
+                        
+                        if (this.isMainCollapsed === false) {
+                                        this._mainCollapser.myContent.style.height = "auto";
+                                        this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
+                                        this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
+                        }
+                        if (this.isPositionCollapsed === false) {
+                                        this._positionCollapser.myContent.style.height = "auto";
+                                        this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
+                                        this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
+                        }
+                        if (this.isTransformCollapsed === false) {
+                                        this._transformCollapser.myContent.style.height = "auto";
+                                        this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
+                                        this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
+                        }
+                        if (this.isStyleCollapsed === false) {
+                                        this._styleCollapser.myContent.style.height = "auto";
+                                        this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
+                                        this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
+                        }
+                        this._isFirstDraw = false;
+                }
+            
        }
    },
@@ -730,6 +832,112 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                        return returnVal;
        }
    },
+    
+    // Drag and drop event handlers
+    handleKeyframeDragstart : {
+        value: function(event) {
+            var dragIcon = document.createElement("img");
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('Text', this.identifier);
+            dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
+            dragIcon.width = 1;
+            event.dataTransfer.setDragImage(dragIcon, 0, 0);
+            
+            // Clone the element we're dragging
+            this._dragAndDropHelper = event.target.cloneNode(true);
+            this._dragAndDropHelper.style.opacity = 0.8;
+            this._dragAndDropHelper.style.position = "absolute";
+            this._dragAndDropHelper.style.top = "2px";
+            this._dragAndDropHelper.style.left = "0px";
+            this._dragAndDropHelper.style.zIndex = 700;
+            
+            //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
+            this._dragAndDropHelper.classList.add("track-dnd-helper");
+            
+            // Get the offset 
+                var findYOffset = function(obj) {

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..d416de5f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -16,6 +16,7 @@
16	"element": {"#": "track"},	16	"element": {"#": "track"},
17	"tweenRepetition" : {"@" : "tweenRepetition"},	17	"tweenRepetition" : {"@" : "tweenRepetition"},
18	"styleTracksRepetition" : {"@" : "styleTracksRepetition"},	18	"styleTracksRepetition" : {"@" : "styleTracksRepetition"},
		19	"track_lanes" : {"#" : "track_lanes"},
19	"tween": {"@" : "tween"},	20	"tween": {"@" : "tween"},
20	"_mainCollapser" : {"@" : "mainCollapser"},	21	"_mainCollapser" : {"@" : "mainCollapser"},
21	"_positionCollapser" : {"@" : "positionCollapser"},	22	"_positionCollapser" : {"@" : "positionCollapser"},
@@ -215,7 +216,7 @@
215	<body>	216	<body>
216		217
217	<div data-montage-id="track" class="timeline-track">	218	<div data-montage-id="track" class="timeline-track">
218	<div data-montage-id="track_lanes" class="tracklane">	219	<div data-montage-id="track_lanes" class="tracklane" style="position: relative;">
219	<div data-montage-id="track_lane"></div>	220	<div data-montage-id="track_lane"></div>
220	</div>	221	</div>
221	<div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>	222	<div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..d5571c3c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
31	}	31	}
32	}	32	}
33	},	33	},
		34
		35	_isFirstDraw: {
		36	value: true
		37	},
		38
34	_isVisible:{	39	_isVisible:{
35	value: true	40	value: true
36	},	41	},
@@ -343,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
343	value:null	348	value:null
344	},	349	},
345		350
		351	// Drag and Drop properties
		352	_dragAndDropHelper : {
		353	value: false
		354	},
		355	_dragAndDropHelperCoords: {
		356	value: false
		357	},
		358	_dragAndDropHelperOffset : {
		359	value: false
		360	},
		361	_appendHelper: {
		362	value: false
		363	},
		364	_deleteHelper: {
		365	value: false
		366	},
		367
346	_trackData:{	368	_trackData:{
347	value: false	369	value: false
348	},	370	},
@@ -419,6 +441,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
419	this.ninjaStylesContoller = this.application.ninja.stylesController;	441	this.ninjaStylesContoller = this.application.ninja.stylesController;
420	this.element.addEventListener("click", this, false);	442	this.element.addEventListener("click", this, false);
421	this.eventManager.addEventListener("tlZoomSlider", this, false);	443	this.eventManager.addEventListener("tlZoomSlider", this, false);
		444
		445	// Drag and Drop event handlers
		446	this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
		447	this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
		448	this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
		449	this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
422	}	450	}
423	},	451	},
424		452
@@ -431,6 +459,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
431	this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];	459	this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
432	}	460	}
433	}	461	}
		462
		463
		464
		465
		466
		467
		468
		469
		470	// Drag and Drop:
		471	// Do we have a helper to append?
		472	if (this._appendHelper === true) {
		473	this.track_lanes.appendChild(this._dragAndDropHelper);
		474	this._appendHelper = false;
		475	}
		476	// Do we need to move the helper?
		477	if (this._dragAndDropHelperCoords !== false) {
		478	if (this._dragAndDropHelper !== null) {
		479	if (typeof(this._dragAndDropHelper.style) !== "undefined") {
		480	this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
		481	}
		482	}
		483	this._dragAndDropHelperCoords = false;
		484	}
		485	// Do we have a helper to delete?
		486	if (this._deleteHelper === true) {
		487	if (this._dragAndDropHelper === null) {
		488	// Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
		489	// Try and recover the helper so we can delete it.
		490	var myHelper = this.element.querySelector(".track-dnd-helper");
		491	if (myHelper != null) {
		492	this._dragAndDropHelper = myHelper;
		493	}
		494	}
		495	if (this._dragAndDropHelper !== null) {
		496	// We need to delete the helper. Can we delete it from track_lanes?
		497	if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
		498	this.track_lanes.removeChild(this._dragAndDropHelper);
		499	this._dragAndDropHelper = null;
		500	this._deleteHelper = false;
		501	}
		502	}
		503	}
		504
		505
		506
		507
		508
434		509
435	}	510	}
436	},	511	},
@@ -448,6 +523,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
448	}	523	}
449	}	524	}
450	}	525	}
		526
		527
		528	if (this._isFirstDraw === true) {
		529
		530	if (this.isMainCollapsed === false) {
		531	this._mainCollapser.myContent.style.height = "auto";
		532	this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
		533	this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
		534	}
		535	if (this.isPositionCollapsed === false) {
		536	this._positionCollapser.myContent.style.height = "auto";
		537	this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
		538	this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
		539	}
		540	if (this.isTransformCollapsed === false) {
		541	this._transformCollapser.myContent.style.height = "auto";
		542	this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
		543	this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
		544	}
		545	if (this.isStyleCollapsed === false) {
		546	this._styleCollapser.myContent.style.height = "auto";
		547	this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
		548	this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
		549	}
		550	this._isFirstDraw = false;
		551	}
		552
451	}	553	}
452	},	554	},
453		555
@@ -730,6 +832,112 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
730	return returnVal;	832	return returnVal;
731	}	833	}
732	},	834	},
		835
		836	// Drag and drop event handlers
		837	handleKeyframeDragstart : {
		838	value: function(event) {
		839	var dragIcon = document.createElement("img");
		840	event.dataTransfer.effectAllowed = 'move';
		841	event.dataTransfer.setData('Text', this.identifier);
		842	dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
		843	dragIcon.width = 1;
		844	event.dataTransfer.setDragImage(dragIcon, 0, 0);
		845
		846	// Clone the element we're dragging
		847	this._dragAndDropHelper = event.target.cloneNode(true);
		848	this._dragAndDropHelper.style.opacity = 0.8;
		849	this._dragAndDropHelper.style.position = "absolute";
		850	this._dragAndDropHelper.style.top = "2px";
		851	this._dragAndDropHelper.style.left = "0px";
		852	this._dragAndDropHelper.style.zIndex = 700;
		853
		854	//this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
		855	this._dragAndDropHelper.classList.add("track-dnd-helper");
		856
		857	// Get the offset
		858	var findYOffset = function(obj) {