26 files changed, 1270 insertions, 699 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 88314c8b..9c8d4434 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage,
        // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
        _isToggling: {
-                serializable: true,
                value: true
        },
        isToggling: {
@@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage,
        
        prepareForDraw: {
                value: function() {
                        // Get the original value of the overflow property:
                        this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
                        if (this.isCollapsed === false) {
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index 7e917b5a..4b029874 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.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/>
@@ -11,8 +11,7 @@
        <script type="text/montage-serialization">
                    {
                        "owner": {
-                            "module": "js/panels/Timeline/Keyframe.reel",
+                            "prototype": "js/panels/Timeline/Keyframe.reel",
-                            "name": "Keyframe",
                            "properties": {
                                "element": {"#": "keyframespace"}
                            }
@@ -23,7 +22,7 @@
        </head>
        <body>
-        <div id="keyframespace" class="tween_keyframe">
+        <div data-montage-id="keyframespace" class="tween_keyframe">
        </div>
    </body>
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..a4f957cf 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,12 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
    prepareForDraw:{
        value:function(){
            this.element.addEventListener("click", this, false);
+            
+                        // Drag and drop event handlers
+                        this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
+                        this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
+                        this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
+                        this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
        }
    },
@@ -56,6 +62,41 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
    handleClick:{
        value:function(ev){
            this.selectKeyframe();
+            ev.stopPropagation();
        }
-    }
+    },
+    
+        handleMouseover: {
+                value: function(event) {
+                        this.element.draggable = true;
+                }
+        },
+        handleMouseout: {
+                value: function(event) {
+                        this.element.draggable = false;
+                }
+        },
+        handleDragstart: {
+                value: function(event) {
+                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;
+            event.dataTransfer.setData('Text', 'Keyframe');
+            
+            // Get my index in my track's tween array
+            var i = 0,
+                tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
+                myIndex = null;
+            for (i = 0; i < tweenRepetitionLength; i++) {
+                if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
+                        myIndex = i;
+                }
+            }
+            this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
+                }
+        },
+        handleDragend: {
+                value: function(event) {
+                        this.parentComponent.isDragging = false;
+                }
+        }
+    
 });
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 915e8b89..c7e7b575 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.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/>
@@ -11,26 +11,21 @@
                <script type="text/montage-serialization">
            {
                "owner": {
-                    "module": "js/panels/Timeline/Layer.reel",
+                    "prototype": "js/panels/Timeline/Layer.reel",
-                    "name": "Layer",
                    "properties": {
                        "element": {"#": "layer"},
                                                "styleRepetition" : {"@":"repetition1"},
                                                "dynamicLayerName" : {"@":"dtext1"},
                                                "dynamicLayerTag" : {"@": "dtext2"},
-                                                "slotStyle" : {"@":"slot1"},
                                                "mainCollapser" : {"@" : "mainCollapser"},
                                                "positionCollapser" : {"@" : "positionCollapser"},
-                                                "transformCollapser" : {"@" : "transformCollapser"},
                                                "styleCollapser" : {"@" : "styleCollapser"},
                                                "clickerMain" : {"#" : "clicker-main"},
-                                                "myLabel" : {"#" : "myLabel"},
+                                                "myLabel" : {"#" : "myLabel"}
-                                                "dragDrop" : {"@" : "DragDrop"}
                    }
                },
                    "dtext1" : {
-                        "module" : "montage/ui/dynamic-text.reel",
+                        "prototype" : "montage/ui/dynamic-text.reel",
-                        "name" : "DynamicText",
                        "properties" : {
                                "element" : {"#" : "layer-label-text"}
                        },
@@ -43,8 +38,7 @@
                        }
                    },
                    "dtext2" : {
-                        "module" : "montage/ui/dynamic-text.reel",
+                        "prototype" : "montage/ui/dynamic-text.reel",
-                        "name" : "DynamicText",
                        "properties" : {
                                "element" : {"#" : "layer-tag"}

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 88314c8b..9c8d4434 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js
@@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage,
151		151
152	// isToggling: Bindable property. Set this (to anything) to trigger a toggle.	152	// isToggling: Bindable property. Set this (to anything) to trigger a toggle.
153	_isToggling: {	153	_isToggling: {
154	serializable: true,
155	value: true	154	value: true
156	},	155	},
157	isToggling: {	156	isToggling: {
@@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage,
179		178
180	prepareForDraw: {	179	prepareForDraw: {
181	value: function() {	180	value: function() {
182
183	// Get the original value of the overflow property:	181	// Get the original value of the overflow property:
184	this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");	182	this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
185	if (this.isCollapsed === false) {	183	if (this.isCollapsed === false) {


diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html index 7e917b5a..4b029874 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.html +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.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/>
@@ -11,8 +11,7 @@
11	<script type="text/montage-serialization">	11	<script type="text/montage-serialization">
12	{	12	{
13	"owner": {	13	"owner": {
14	"module": "js/panels/Timeline/Keyframe.reel",	14	"prototype": "js/panels/Timeline/Keyframe.reel",
15	"name": "Keyframe",
16	"properties": {	15	"properties": {
17	"element": {"#": "keyframespace"}	16	"element": {"#": "keyframespace"}
18	}	17	}
@@ -23,7 +22,7 @@
23	</head>	22	</head>
24	<body>	23	<body>
25		24
26	<div id="keyframespace" class="tween_keyframe">	25	<div data-montage-id="keyframespace" class="tween_keyframe">
27	</div>	26	</div>
28		27
29	</body>	28	</body>


diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 859cdfb1..a4f957cf 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,12 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
31	prepareForDraw:{	31	prepareForDraw:{
32	value:function(){	32	value:function(){
33	this.element.addEventListener("click", this, false);	33	this.element.addEventListener("click", this, false);
		34
		35	// Drag and drop event handlers
		36	this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
		37	this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
		38	this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
		39	this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
34	}	40	}
35	},	41	},
36		42
@@ -56,6 +62,41 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
56	handleClick:{	62	handleClick:{
57	value:function(ev){	63	value:function(ev){
58	this.selectKeyframe();	64	this.selectKeyframe();
		65	ev.stopPropagation();
59	}	66	}
60	}	67	},
		68
		69	handleMouseover: {
		70	value: function(event) {
		71	this.element.draggable = true;
		72	}
		73	},
		74	handleMouseout: {
		75	value: function(event) {
		76	this.element.draggable = false;
		77	}
		78	},
		79	handleDragstart: {
		80	value: function(event) {
		81	//this.parentComponent.parentComponent.dragLayerID = this.layerID;
		82	event.dataTransfer.setData('Text', 'Keyframe');
		83
		84	// Get my index in my track's tween array
		85	var i = 0,
		86	tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
		87	myIndex = null;
		88	for (i = 0; i < tweenRepetitionLength; i++) {
		89	if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
		90	myIndex = i;
		91	}
		92	}
		93	this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
		94	}
		95	},
		96	handleDragend: {
		97	value: function(event) {
		98	this.parentComponent.isDragging = false;
		99	}
		100	}
		101
61	});	102	});


diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 915e8b89..c7e7b575 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.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/>
@@ -11,26 +11,21 @@
11	<script type="text/montage-serialization">	11	<script type="text/montage-serialization">
12	{	12	{
13	"owner": {	13	"owner": {
14	"module": "js/panels/Timeline/Layer.reel",	14	"prototype": "js/panels/Timeline/Layer.reel",
15	"name": "Layer",
16	"properties": {	15	"properties": {
17	"element": {"#": "layer"},	16	"element": {"#": "layer"},
18	"styleRepetition" : {"@":"repetition1"},	17	"styleRepetition" : {"@":"repetition1"},
19	"dynamicLayerName" : {"@":"dtext1"},	18	"dynamicLayerName" : {"@":"dtext1"},
20	"dynamicLayerTag" : {"@": "dtext2"},	19	"dynamicLayerTag" : {"@": "dtext2"},
21	"slotStyle" : {"@":"slot1"},
22	"mainCollapser" : {"@" : "mainCollapser"},	20	"mainCollapser" : {"@" : "mainCollapser"},
23	"positionCollapser" : {"@" : "positionCollapser"},	21	"positionCollapser" : {"@" : "positionCollapser"},
24	"transformCollapser" : {"@" : "transformCollapser"},
25	"styleCollapser" : {"@" : "styleCollapser"},	22	"styleCollapser" : {"@" : "styleCollapser"},
26	"clickerMain" : {"#" : "clicker-main"},	23	"clickerMain" : {"#" : "clicker-main"},
27	"myLabel" : {"#" : "myLabel"},	24	"myLabel" : {"#" : "myLabel"}
28	"dragDrop" : {"@" : "DragDrop"}
29	}	25	}
30	},	26	},
31	"dtext1" : {	27	"dtext1" : {
32	"module" : "montage/ui/dynamic-text.reel",	28	"prototype" : "montage/ui/dynamic-text.reel",
33	"name" : "DynamicText",
34	"properties" : {	29	"properties" : {
35	"element" : {"#" : "layer-label-text"}	30	"element" : {"#" : "layer-label-text"}
36	},	31	},
@@ -43,8 +38,7 @@
43	}	38	}
44	},	39	},
45	"dtext2" : {	40	"dtext2" : {
46	"module" : "montage/ui/dynamic-text.reel",	41	"prototype" : "montage/ui/dynamic-text.reel",
47	"name" : "DynamicText",
48	"properties" : {	42	"properties" : {
49	"element" : {"#" : "layer-tag"}	43	"element" : {"#" : "layer-tag"}
50	},	44