2 files changed, 187 insertions, 2 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 5c5a8b76..9de703f9 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -15,6 +15,8 @@
                       "properties": {
                           "element": {"#": "track"},
                           "tweenRepetition" : {"@" : "tweenRepetition"},
+                           "styleTracksRepetition" : {"@" : "styleTracksRepetition"},
+                           "track_lanes" : {"#" : "track_lanes"},
                           "tween": {"@" : "tween"},
                           "_mainCollapser" : {"@" : "mainCollapser"},
                           "_positionCollapser" : {"@" : "positionCollapser"},
@@ -214,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..1e918c6e 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,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        value:null
    },
+        // Drag and Drop properties
+    _dragAndDropHelper : {
+        value: false
+    },
+    _dragAndDropHelperCoords: {
+        value: false
+    },
+    dragAndDropHelperCoords: {
+        get: function() {
+                return this._dragAndDropHelperCoords;
+        },
+        set: function(newVal) {
+                this._dragAndDropHelperCoords = newVal;
+        }
+    },
+    _draggingIndex: {
+        value: false
+    },
+    draggingIndex: {
+        get: function() {
+                return this._draggingIndex;
+        },
+        set: function(newVal) {
+                this._draggingIndex = newVal;
+        }
+    },
+    _dragAndDropHelperOffset : {
+        value: false
+    },
+    _appendHelper: {
+        value: false
+    },
+    _deleteHelper: {
+        value: false
+    },
    _trackData:{
                value: false
    },
@@ -419,6 +460,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 +478,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 +542,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 +851,68 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                        return returnVal;
        }

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 5c5a8b76..9de703f9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -15,6 +15,8 @@
15	"properties": {	15	"properties": {
16	"element": {"#": "track"},	16	"element": {"#": "track"},
17	"tweenRepetition" : {"@" : "tweenRepetition"},	17	"tweenRepetition" : {"@" : "tweenRepetition"},
		18	"styleTracksRepetition" : {"@" : "styleTracksRepetition"},
		19	"track_lanes" : {"#" : "track_lanes"},
18	"tween": {"@" : "tween"},	20	"tween": {"@" : "tween"},
19	"_mainCollapser" : {"@" : "mainCollapser"},	21	"_mainCollapser" : {"@" : "mainCollapser"},
20	"_positionCollapser" : {"@" : "positionCollapser"},	22	"_positionCollapser" : {"@" : "positionCollapser"},
@@ -214,7 +216,7 @@
214	<body>	216	<body>
215		217
216	<div data-montage-id="track" class="timeline-track">	218	<div data-montage-id="track" class="timeline-track">
217	<div data-montage-id="track_lanes" class="tracklane">	219	<div data-montage-id="track_lanes" class="tracklane" style="position: relative;">
218	<div data-montage-id="track_lane"></div>	220	<div data-montage-id="track_lane"></div>
219	</div>	221	</div>
220	<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..1e918c6e 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,42 @@ 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	dragAndDropHelperCoords: {
		359	get: function() {
		360	return this._dragAndDropHelperCoords;
		361	},
		362	set: function(newVal) {
		363	this._dragAndDropHelperCoords = newVal;
		364	}
		365	},
		366	_draggingIndex: {
		367	value: false
		368	},
		369	draggingIndex: {
		370	get: function() {
		371	return this._draggingIndex;
		372	},
		373	set: function(newVal) {
		374	this._draggingIndex = newVal;
		375	}
		376	},
		377	_dragAndDropHelperOffset : {
		378	value: false
		379	},
		380	_appendHelper: {
		381	value: false
		382	},
		383	_deleteHelper: {
		384	value: false
		385	},
		386
346	_trackData:{	387	_trackData:{
347	value: false	388	value: false
348	},	389	},
@@ -419,6 +460,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
419	this.ninjaStylesContoller = this.application.ninja.stylesController;	460	this.ninjaStylesContoller = this.application.ninja.stylesController;
420	this.element.addEventListener("click", this, false);	461	this.element.addEventListener("click", this, false);
421	this.eventManager.addEventListener("tlZoomSlider", this, false);	462	this.eventManager.addEventListener("tlZoomSlider", this, false);
		463
		464	// Drag and Drop event handlers
		465	//this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
		466	this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
		467	this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
		468	//this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
422	}	469	}
423	},	470	},
424		471
@@ -431,6 +478,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
431	this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];	478	this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
432	}	479	}
433	}	480	}
		481
		482
		483
		484
		485
		486
		487
		488
		489	// Drag and Drop:
		490	// Do we have a helper to append?
		491	if (this._appendHelper === true) {
		492	this.track_lanes.appendChild(this._dragAndDropHelper);
		493	this._appendHelper = false;
		494	}
		495	// Do we need to move the helper?
		496	if (this._dragAndDropHelperCoords !== false) {
		497	if (this._dragAndDropHelper !== null) {
		498	if (typeof(this._dragAndDropHelper.style) !== "undefined") {
		499	this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
		500	}
		501	}
		502	this._dragAndDropHelperCoords = false;
		503	}
		504	// Do we have a helper to delete?
		505	if (this._deleteHelper === true) {
		506	if (this._dragAndDropHelper === null) {
		507	// Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
		508	// Try and recover the helper so we can delete it.
		509	var myHelper = this.element.querySelector(".track-dnd-helper");
		510	if (myHelper != null) {
		511	this._dragAndDropHelper = myHelper;
		512	}
		513	}
		514	if (this._dragAndDropHelper !== null) {
		515	// We need to delete the helper. Can we delete it from track_lanes?
		516	if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
		517	this.track_lanes.removeChild(this._dragAndDropHelper);
		518	this._dragAndDropHelper = null;
		519	this._deleteHelper = false;
		520	}
		521	}
		522	}
		523
		524
		525
		526
		527
434		528
435	}	529	}
436	},	530	},
@@ -448,6 +542,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
448	}	542	}
449	}	543	}
450	}	544	}
		545
		546
		547	if (this._isFirstDraw === true) {
		548
		549	if (this.isMainCollapsed === false) {
		550	this._mainCollapser.myContent.style.height = "auto";
		551	this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
		552	this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
		553	}
		554	if (this.isPositionCollapsed === false) {
		555	this._positionCollapser.myContent.style.height = "auto";
		556	this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
		557	this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
		558	}
		559	if (this.isTransformCollapsed === false) {
		560	this._transformCollapser.myContent.style.height = "auto";
		561	this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
		562	this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
		563	}
		564	if (this.isStyleCollapsed === false) {
		565	this._styleCollapser.myContent.style.height = "auto";
		566	this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
		567	this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
		568	}
		569	this._isFirstDraw = false;
		570	}
		571
451	}	572	}
452	},	573	},
453		574
@@ -730,6 +851,68 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
730	return returnVal;	851	return returnVal;
731	}	852	}