1 files changed, 154 insertions, 0 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
new file mode 100644
index 00000000..c82a9086
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,154 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
+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;
+        }
+    },
+
+    containingSpan:{
+        value: null
+    },
+
+    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 - 3) + "px";
+        }
+    },
+
+    handleElementChange:{
+        value:function (event) {
+            if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
+                alert("Wrong element selected for this keyframe track");
+                return;
+            }
+
+            if(event.detail.source && event.detail.source !== "keyframe") {
+                this.containingSpan.highlightSpan();
+                if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
+                    this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
+                    this.animatedProperties["left"] = this.containingTrack.animatedElement.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 currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+            var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
+            this.application.ninja.timeline.updateTimeText(currentMillisec);
+
+            var currentTop = this.animatedProperties["top"] + "px";
+            var currentLeft = this.animatedProperties["left"] + "px";
+
+            ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
+            ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
+
+            // turn on element change event listener
+            this.eventManager.addEventListener("elementChange", this, false);
+        }
+    },
+
+    handleClick:{
+        value:function(ev){
+            this.select();
+        }
+    }
+});