3 files changed, 122 insertions, 25 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
index 307dcd02..ce51cb70 100644
--- a/js/panels/Timeline/Tween.reel/Tween.html
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -1,4 +1,9 @@
 <!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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
 <html lang="en">
        <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -11,8 +16,7 @@
                            "properties": {
                                "element": {"#": "tweenspace"},
                                "keyframe": {"@": "keyframe"},
-                                "span": {"@": "span"},
+                                "tweenspan": {"@": "span"}
-                                "tweencontainer": {"#": "tweencontainer"}
                            }
                        },
                        
@@ -28,8 +32,7 @@
                            "module": "js/panels/Timeline/Keyframe.reel",
                            "name": "Keyframe",
                            "properties": {
-                                "element": {"#": "keyframe_container"},
+                                "element": {"#": "keyframe_container"}
-                                "containingSpan": {"@": "span"}
                            }
                        }
                    }
@@ -37,12 +40,10 @@
        </head>
        <body>
-        <div id="tweenspace">
+    <div id="tweenspace" class="tween_container">
-            <div id="tweencontainer" class="tween_container">
+        <div id="span_container"></div>
-                <div id="span_container"></div>
+        <div id="keyframe_container"></div>
-                <div id="keyframe_container"></div>
+    </div>
-            </div>
-        </div>
    </body>
 </html>
 \ No newline at end of file
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index eddf1b17..f6dbf32c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -1,5 +1,12 @@
+/* <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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 var Tween = exports.Tween = Montage.create(Component, {
@@ -8,6 +15,7 @@ var Tween = exports.Tween = Montage.create(Component, {
    },
    _spanWidth: {
+        serializable: true,
        value: 0
    },
@@ -18,6 +26,7 @@ var Tween = exports.Tween = Montage.create(Component, {
        },
        set: function(value){
            this._spanWidth = value;
+            this.needsDraw = true;
        }
    },
@@ -32,6 +41,7 @@ var Tween = exports.Tween = Montage.create(Component, {
        },
        set:function (value) {
            this._spanPosition = value;
+            this.needsDraw = true;
        }
    },
@@ -46,6 +56,7 @@ var Tween = exports.Tween = Montage.create(Component, {
        },
        set:function (value) {
            this._keyFramePosition = value;
+            this.needsDraw = true;
        }
    },
@@ -63,47 +74,126 @@ var Tween = exports.Tween = Montage.create(Component, {
        }
    },
-    _keyframeID:{
+    _tweenID:{
        value:0
    },
-    keyframeID:{
+    tweenID:{
        serializable:true,
        get:function () {
-            return this._keyframeID;
+            return this._tweenID;
        },
        set:function (value) {
-            this._keyframeID = value;
+            this._tweenID = value;
        }
    },
-    _timelineTrack:{
+    _tweenedProperties:{
-        value:0
+        serializable: true,
+        value:[]
+    },
+    tweenedProperties:{
+        serializable:true,
+        get:function(){
+            return this._tweenedProperties;
+        },
+        set:function(val){
+            this._tweenedProperties = val;
+        }
    },
-    timelineTrack:{
+    _isTweenAnimated:{
+        serializable:true,
+        value:false
+    },
+    isTweenAnimated:{
        serializable:true,
        get:function () {
-            return this._timelineTrack;
+            return this._isTweenAnimated;
        },
        set:function (value) {
-            this._timelineTrack = value;
+            this._isTweenAnimated = value;
+            this.needsDraw = true;
        }
    },
    prepareForDraw:{
        value:function () {
-            this.keyframe.containingTrack = this.timelineTrack;
-            this.keyframe.position = this.spanWidth;
-            this.keyframe.timelinePosition = this.keyFramePosition;
-            this.keyframe.id = this.keyframeID;
        }
    },
    draw:{
        value:function () {
-            this.span.spanWidth = this.spanWidth;
+            this.element.style.left = this.spanPosition + "px";
-            this.tweencontainer.style.left = this.spanPosition + "px";
+            this.keyframe.position = this.spanWidth;
+            this.tweenspan.spanWidth = this.spanWidth;
+            if(this.isTweenAnimated){
+                this.tweenspan.highlightSpan();
+            }
+        }
+    },
+    handleElementChange:{
+        value:function (event) {
+            if (event.detail.source && event.detail.source !== "tween") {
+                // check for correct element selection
+                if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
+                    alert("Wrong element selected for this keyframe track");
+                } else {
+                    // update tweenedProperties and tell containing track to update CSS rule
+                    // temp read only top and left.  need to change to loop over event details for prop changes generically
+                    if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
+                        this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
+                        this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
+                        this.parentComponent.parentComponent.updateKeyframeRule();
+                    }
+                    // highlight the tween's span
+                    this.tweenspan.highlightSpan();
+                    this.isTweenAnimated = true;
+                }
+            }
+        }
+    },

diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index 307dcd02..ce51cb70 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -1,4 +1,9 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
		2	<!-- <copyright>
		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/>
		5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		6	</copyright> -->
2	<html lang="en">	7	<html lang="en">
3	<head>	8	<head>
4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -11,8 +16,7 @@
11	"properties": {	16	"properties": {
12	"element": {"#": "tweenspace"},	17	"element": {"#": "tweenspace"},
13	"keyframe": {"@": "keyframe"},	18	"keyframe": {"@": "keyframe"},
14	"span": {"@": "span"},	19	"tweenspan": {"@": "span"}
15	"tweencontainer": {"#": "tweencontainer"}
16	}	20	}
17	},	21	},
18		22
@@ -28,8 +32,7 @@
28	"module": "js/panels/Timeline/Keyframe.reel",	32	"module": "js/panels/Timeline/Keyframe.reel",
29	"name": "Keyframe",	33	"name": "Keyframe",
30	"properties": {	34	"properties": {
31	"element": {"#": "keyframe_container"},	35	"element": {"#": "keyframe_container"}
32	"containingSpan": {"@": "span"}
33	}	36	}
34	}	37	}
35	}	38	}
@@ -37,12 +40,10 @@
37	</head>	40	</head>
38	<body>	41	<body>
39		42
40	<div id="tweenspace">	43	<div id="tweenspace" class="tween_container">
41	<div id="tweencontainer" class="tween_container">	44	<div id="span_container"></div>
42	<div id="span_container"></div>	45	<div id="keyframe_container"></div>
43	<div id="keyframe_container"></div>	46	</div>
44	</div>
45	</div>
46		47
47	</body>	48	</body>
48	</html> \ No newline at end of file	49	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index eddf1b17..f6dbf32c 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -1,5 +1,12 @@
		1	/* <copyright>
		2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		5	</copyright> */
		6
1	var Montage = require("montage/core/core").Montage;	7	var Montage = require("montage/core/core").Montage;
2	var Component = require("montage/ui/component").Component;	8	var Component = require("montage/ui/component").Component;
		9	var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
3		10
4	var Tween = exports.Tween = Montage.create(Component, {	11	var Tween = exports.Tween = Montage.create(Component, {
5		12
@@ -8,6 +15,7 @@ var Tween = exports.Tween = Montage.create(Component, {
8	},	15	},
9		16
10	_spanWidth: {	17	_spanWidth: {
		18	serializable: true,
11	value: 0	19	value: 0
12	},	20	},
13		21
@@ -18,6 +26,7 @@ var Tween = exports.Tween = Montage.create(Component, {
18	},	26	},
19	set: function(value){	27	set: function(value){
20	this._spanWidth = value;	28	this._spanWidth = value;
		29	this.needsDraw = true;
21	}	30	}
22	},	31	},
23		32
@@ -32,6 +41,7 @@ var Tween = exports.Tween = Montage.create(Component, {
32	},	41	},
33	set:function (value) {	42	set:function (value) {
34	this._spanPosition = value;	43	this._spanPosition = value;
		44	this.needsDraw = true;
35	}	45	}
36	},	46	},
37		47
@@ -46,6 +56,7 @@ var Tween = exports.Tween = Montage.create(Component, {
46	},	56	},
47	set:function (value) {	57	set:function (value) {
48	this._keyFramePosition = value;	58	this._keyFramePosition = value;
		59	this.needsDraw = true;
49	}	60	}
50	},	61	},
51		62
@@ -63,47 +74,126 @@ var Tween = exports.Tween = Montage.create(Component, {
63	}	74	}
64	},	75	},
65		76
66	_keyframeID:{	77	_tweenID:{
67	value:0	78	value:0
68	},	79	},
69		80
70	keyframeID:{	81	tweenID:{
71	serializable:true,	82	serializable:true,
72	get:function () {	83	get:function () {
73	return this._keyframeID;	84	return this._tweenID;
74	},	85	},
75	set:function (value) {	86	set:function (value) {
76	this._keyframeID = value;	87	this._tweenID = value;
77	}	88	}
78	},	89	},
79		90
80	_timelineTrack:{	91	_tweenedProperties:{
81	value:0	92	serializable: true,
		93	value:[]
		94	},
		95
		96	tweenedProperties:{
		97	serializable:true,
		98	get:function(){
		99	return this._tweenedProperties;
		100	},
		101	set:function(val){
		102	this._tweenedProperties = val;
		103	}
82	},	104	},
83		105
84	timelineTrack:{	106	_isTweenAnimated:{
		107	serializable:true,
		108	value:false
		109	},
		110
		111	isTweenAnimated:{
85	serializable:true,	112	serializable:true,
86	get:function () {	113	get:function () {
87	return this._timelineTrack;	114	return this._isTweenAnimated;
88	},	115	},
89	set:function (value) {	116	set:function (value) {
90	this._timelineTrack = value;	117	this._isTweenAnimated = value;
		118	this.needsDraw = true;
91	}	119	}
92	},	120	},
93		121
94	prepareForDraw:{	122	prepareForDraw:{
95	value:function () {	123	value:function () {
96	this.keyframe.containingTrack = this.timelineTrack;	124
97	this.keyframe.position = this.spanWidth;
98	this.keyframe.timelinePosition = this.keyFramePosition;
99	this.keyframe.id = this.keyframeID;
100	}	125	}
101	},	126	},
102		127
103	draw:{	128	draw:{
104	value:function () {	129	value:function () {
105	this.span.spanWidth = this.spanWidth;	130	this.element.style.left = this.spanPosition + "px";
106	this.tweencontainer.style.left = this.spanPosition + "px";	131	this.keyframe.position = this.spanWidth;
		132	this.tweenspan.spanWidth = this.spanWidth;
		133	if(this.isTweenAnimated){
		134	this.tweenspan.highlightSpan();
		135	}
		136	}
		137	},
		138
		139	handleElementChange:{
		140	value:function (event) {
		141	if (event.detail.source && event.detail.source !== "tween") {
		142	// check for correct element selection
		143	if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
		144	alert("Wrong element selected for this keyframe track");
		145	} else {
		146	// update tweenedProperties and tell containing track to update CSS rule
		147	// temp read only top and left. need to change to loop over event details for prop changes generically
		148	if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
		149	this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
		150	this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
		151	this.parentComponent.parentComponent.updateKeyframeRule();
		152	}
		153	// highlight the tween's span
		154	this.tweenspan.highlightSpan();
		155	this.isTweenAnimated = true;
		156	}
		157	}
		158	}
		159	},
		160