3 files changed, 185 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..bf21994b
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<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"},
+                                "tweenkeyframe": {"#": "tweenkeyframe"}
+                            }
+                        }
+                    }
+        </script>
+        </head>
+        <body>
+        <div id="keyframespace">
+            <div id="tweenkeyframe" class="tween_keyframe"></div>
+        </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..1259fa63
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,147 @@
+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;
+        }
+    },
+    _id:{
+        value:0
+    },
+    id:{
+        serializable:true,
+        get:function () {
+            return this._id;
+        },
+        set:function (value) {
+            this._id = value;
+        }
+    },
+    _timelinePosition:{
+        value:0
+    },
+    timelinePosition:{
+        serializable:true,
+        get:function () {
+            return this._timelinePosition;
+        },
+        set:function (value) {
+            this._timelinePosition = value;
+        }
+    },
+    _containingTrack:{
+        value:{}
+    },
+    containingTrack:{
+        serializable:true,
+        get:function () {
+            return this._containingTrack;
+        },
+        set:function (value) {
+            this._containingTrack = value;
+        }
+    },
+    _animatedProperties:{
+        value:[]
+    },
+    animatedProperties:{
+        serializable:true,
+        get:function () {
+            return this._animatedProperties;
+        },
+        set:function (value) {
+            this._animatedProperties = value;
+        }
+    },
+    prepareForDraw:{
+        value:function(){
+            this.tweenkeyframe.addEventListener("click", this, false);
+            this.animatedProperties = new Array();
+            this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
+            this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
+        }
+    },
+    draw:{
+        value:function(){
+            this.tweenkeyframe.style.left = (this.position - 2) + "px";
+        }
+    },
+    handleElementChange:{
+        value:function (event) {
+            if(event.detail.source && event.detail.source !== "pi") {
+                var items = this.application.ninja.selectedElements;
+                // update this keyframe's animated properties from the item[0] element props
+                this.animatedProperties["top"] = items[0]._element.offsetTop;
+                this.animatedProperties["left"] = items[0]._element.offsetLeft;
+                this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
+                this.containingTrack.updateKeyframeRule();
+            }
+        }
+    },
+    deselect:{
+        value:function(){
+            this.tweenkeyframe.classList.remove("keyframeSelected");
+            this.eventManager.removeEventListener("elementChange", this, false);
+        }
+    },
+    select:{
+        value:function(){
+            this.application.ninja.timeline.deselectKeyframes();
+            this.tweenkeyframe.classList.add("keyframeSelected");
+            this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
+            this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
+            this.application.ninja.timeline.selectedKeyframes.push(this);
+            var currentTop = this.animatedProperties["top"] + "px";
+            var currentLeft = this.animatedProperties["left"] + "px";
+            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop);
+            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft);
+            // turn on element change event listener
+            this.eventManager.addEventListener("elementChange", this, false);
+        }
+    },
+    handleClick:{
+        value:function(ev){
+            this.select();
+        }
+    }
+});
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..e66bcf10
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -0,0 +1,11 @@
+.tween_keyframe{
+    position: absolute;
+    height: 16px;
+    width: 4px;
+    background-color: white;
+    z-index: 23;
+}
+.tween_keyframe.keyframeSelected{
+    background-color: blue;
+}
+\ 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..bf21994b --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -0,0 +1,27 @@
	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	5	<link rel="stylesheet" type="text/css" href="css/Keyframe.css">
	6	<script type="text/montage-serialization">
	7	{
	8	"owner": {
	9	"module": "js/panels/Timeline/Keyframe.reel",
	10	"name": "Keyframe",
	11	"properties": {
	12	"element": {"#": "keyframespace"},
	13	"tweenkeyframe": {"#": "tweenkeyframe"}
	14	}
	15	}
	16
	17	}
	18	</script>
	19	</head>
	20	<body>
	21
	22	<div id="keyframespace">
	23	<div id="tweenkeyframe" class="tween_keyframe"></div>
	24	</div>
	25
	26	</body>
	27	</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..1259fa63 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,147 @@
	1	var Montage = require("montage/core/core").Montage;
	2	var Component = require("montage/ui/component").Component;
	3
	4	var Keyframe = exports.Keyframe = Montage.create(Component, {
	5
	6	hasTemplate:{
	7	value: true
	8	},
	9
	10	_position:{
	11	value:0
	12	},
	13
	14	position:{
	15	serializable:true,
	16	get:function(){
	17	return this._position;
	18	},
	19	set:function(value){
	20	this._position = value;
	21	}
	22	},
	23
	24	_id:{
	25	value:0
	26	},
	27
	28	id:{
	29	serializable:true,
	30	get:function () {
	31	return this._id;
	32	},
	33	set:function (value) {
	34	this._id = value;
	35	}
	36	},
	37
	38	_timelinePosition:{
	39	value:0
	40	},
	41
	42	timelinePosition:{
	43	serializable:true,
	44	get:function () {
	45	return this._timelinePosition;
	46	},
	47	set:function (value) {
	48	this._timelinePosition = value;
	49	}
	50	},
	51
	52	_containingTrack:{
	53	value:{}
	54	},
	55
	56	containingTrack:{
	57	serializable:true,
	58	get:function () {
	59	return this._containingTrack;
	60	},
	61	set:function (value) {
	62	this._containingTrack = value;
	63	}
	64	},
	65
	66	_animatedProperties:{
	67	value:[]
	68	},
	69
	70	animatedProperties:{
	71	serializable:true,
	72	get:function () {
	73	return this._animatedProperties;
	74	},
	75	set:function (value) {
	76	this._animatedProperties = value;
	77	}
	78	},
	79
	80	prepareForDraw:{
	81	value:function(){
	82	this.tweenkeyframe.addEventListener("click", this, false);
	83	this.animatedProperties = new Array();
	84
	85	this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
	86	this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
	87	}
	88	},
	89
	90	draw:{
	91	value:function(){
	92	this.tweenkeyframe.style.left = (this.position - 2) + "px";
	93	}
	94	},
	95
	96	handleElementChange:{
	97	value:function (event) {
	98
	99	if(event.detail.source && event.detail.source !== "pi") {
	100
	101	var items = this.application.ninja.selectedElements;
	102
	103	// update this keyframe's animated properties from the item[0] element props
	104	this.animatedProperties["top"] = items[0]._element.offsetTop;
	105	this.animatedProperties["left"] = items[0]._element.offsetLeft;
	106	this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
	107
	108	this.containingTrack.updateKeyframeRule();
	109	}
	110
	111
	112	}
	113	},
	114
	115	deselect:{
	116	value:function(){
	117	this.tweenkeyframe.classList.remove("keyframeSelected");
	118
	119	this.eventManager.removeEventListener("elementChange", this, false);
	120	}
	121	},
	122
	123	select:{
	124	value:function(){
	125	this.application.ninja.timeline.deselectKeyframes();
	126	this.tweenkeyframe.classList.add("keyframeSelected");
	127	this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
	128	this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
	129	this.application.ninja.timeline.selectedKeyframes.push(this);
	130
	131	var currentTop = this.animatedProperties["top"] + "px";
	132	var currentLeft = this.animatedProperties["left"] + "px";
	133
	134	this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop);
	135	this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft);
	136
	137	// turn on element change event listener
	138	this.eventManager.addEventListener("elementChange", this, false);
	139	}
	140	},
	141
	142	handleClick:{
	143	value:function(ev){
	144	this.select();
	145	}
	146	}
	147	});


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..e66bcf10 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -0,0 +1,11 @@
	1	.tween_keyframe{
	2	position: absolute;
	3	height: 16px;
	4	width: 4px;
	5	background-color: white;
	6	z-index: 23;
	7	}
	8
	9	.tween_keyframe.keyframeSelected{
	10	background-color: blue;
	11	} \ No newline at end of file