3 files changed, 112 insertions, 0 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
new file mode 100644
index 00000000..7e917b5a
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -0,0 +1,30 @@
+<!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" />
+        <link rel="stylesheet" type="text/css" href="css/Keyframe.css">
+        <script type="text/montage-serialization">
+                    {
+                        "owner": {
+                            "module": "js/panels/Timeline/Keyframe.reel",
+                            "name": "Keyframe",
+                            "properties": {
+                                "element": {"#": "keyframespace"}
+                            }
+                        }
+                    }
+        </script>
+        </head>
+        <body>
+        <div id="keyframespace" class="tween_keyframe">
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
new file mode 100644
index 00000000..859cdfb1
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,61 @@
+/* <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 Keyframe = exports.Keyframe = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+    _position:{
+        value:0
+    },
+    position:{
+        serializable:true,
+        get:function(){
+            return this._position;
+        },
+        set:function(value){
+            this._position = value;
+            this.needsDraw = true;
+        }
+    },
+    prepareForDraw:{
+        value:function(){
+            this.element.addEventListener("click", this, false);
+        }
+    },
+    draw:{
+        value:function(){
+            this.element.style.left = (this.position - 3) + "px";
+        }
+    },
+    deselectKeyframe:{
+        value:function(){
+            this.element.classList.remove("keyframeSelected");
+        }
+    },
+    selectKeyframe:{
+        value:function(){
+            this.element.classList.add("keyframeSelected");
+            this.parentComponent.selectTween();
+        }
+    },
+    handleClick:{
+        value:function(ev){
+            this.selectKeyframe();
+        }
+    }
+});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
new file mode 100644
index 00000000..ff5dae7a
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -0,0 +1,21 @@
+/* <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> */
+.tween_keyframe{
+    position: absolute;
+    height: 16px;
+    width: 5px;
+    background-color: white;
+    z-index: 23;
+    border-radius: 3px;
+}
+.tween_keyframe.keyframeSelected{
+    background-color: #570e19;
+    border-style: solid;
+    border-width: thin;
+    border-color: #d6d1cf;
+}
+\ No newline at end of file

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html new file mode 100644 index 00000000..7e917b5a --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -0,0 +1,30 @@
	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> -->
	7	<html lang="en">
	8	<head>
	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	10	<link rel="stylesheet" type="text/css" href="css/Keyframe.css">
	11	<script type="text/montage-serialization">
	12	{
	13	"owner": {
	14	"module": "js/panels/Timeline/Keyframe.reel",
	15	"name": "Keyframe",
	16	"properties": {
	17	"element": {"#": "keyframespace"}
	18	}
	19	}
	20
	21	}
	22	</script>
	23	</head>
	24	<body>
	25
	26	<div id="keyframespace" class="tween_keyframe">
	27	</div>
	28
	29	</body>
	30	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js new file mode 100644 index 00000000..859cdfb1 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,61 @@
	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
	7	var Montage = require("montage/core/core").Montage;
	8	var Component = require("montage/ui/component").Component;
	9
	10	var Keyframe = exports.Keyframe = Montage.create(Component, {
	11
	12	hasTemplate:{
	13	value: true
	14	},
	15
	16	_position:{
	17	value:0
	18	},
	19
	20	position:{
	21	serializable:true,
	22	get:function(){
	23	return this._position;
	24	},
	25	set:function(value){
	26	this._position = value;
	27	this.needsDraw = true;
	28	}
	29	},
	30
	31	prepareForDraw:{
	32	value:function(){
	33	this.element.addEventListener("click", this, false);
	34	}
	35	},
	36
	37	draw:{
	38	value:function(){
	39	this.element.style.left = (this.position - 3) + "px";
	40	}
	41	},
	42
	43	deselectKeyframe:{
	44	value:function(){
	45	this.element.classList.remove("keyframeSelected");
	46	}
	47	},
	48
	49	selectKeyframe:{
	50	value:function(){
	51	this.element.classList.add("keyframeSelected");
	52	this.parentComponent.selectTween();
	53	}
	54	},
	55
	56	handleClick:{
	57	value:function(ev){
	58	this.selectKeyframe();
	59	}
	60	}
	61	});


diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css new file mode 100644 index 00000000..ff5dae7a --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -0,0 +1,21 @@
	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
	7	.tween_keyframe{
	8	position: absolute;
	9	height: 16px;
	10	width: 5px;
	11	background-color: white;
	12	z-index: 23;
	13	border-radius: 3px;
	14	}
	15
	16	.tween_keyframe.keyframeSelected{
	17	background-color: #570e19;
	18	border-style: solid;
	19	border-width: thin;
	20	border-color: #d6d1cf;
	21	} \ No newline at end of file