aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Keyframe.reel/Keyframe.js
diff options
context:
space:
mode:
authorEric Guzman2012-02-13 15:48:37 -0800
committerEric Guzman2012-02-13 15:48:37 -0800
commitb2672478decd3ee3bfacf86b525551c997f9604d (patch)
tree79a88684406d3adf00350246a4da884b97fb0eac /js/panels/Timeline/Keyframe.reel/Keyframe.js
parenta738121a921e4c721b280434952b415b9ab3b1a8 (diff)
parent0620e2f788861e824d6e49fa319da4d20b18a556 (diff)
downloadninja-b2672478decd3ee3bfacf86b525551c997f9604d.tar.gz
Merge branch 'refs/heads/master' into StylesControllerUpdates
Conflicts: js/controllers/styles-controller.js
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js154
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 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
4
5var Keyframe = exports.Keyframe = Montage.create(Component, {
6
7 hasTemplate:{
8 value: true
9 },
10
11 _position:{
12 value:0
13 },
14
15 position:{
16 serializable:true,
17 get:function(){
18 return this._position;
19 },
20 set:function(value){
21 this._position = value;
22 }
23 },
24
25 _id:{
26 value:0
27 },
28
29 id:{
30 serializable:true,
31 get:function () {
32 return this._id;
33 },
34 set:function (value) {
35 this._id = value;
36 }
37 },
38
39 _timelinePosition:{
40 value:0
41 },
42
43 timelinePosition:{
44 serializable:true,
45 get:function () {
46 return this._timelinePosition;
47 },
48 set:function (value) {
49 this._timelinePosition = value;
50 }
51 },
52
53 _containingTrack:{
54 value:{}
55 },
56
57 containingTrack:{
58 serializable:true,
59 get:function () {
60 return this._containingTrack;
61 },
62 set:function (value) {
63 this._containingTrack = value;
64 }
65 },
66
67 _animatedProperties:{
68 value:[]
69 },
70
71 animatedProperties:{
72 serializable:true,
73 get:function () {
74 return this._animatedProperties;
75 },
76 set:function (value) {
77 this._animatedProperties = value;
78 }
79 },
80
81 containingSpan:{
82 value: null
83 },
84
85 prepareForDraw:{
86 value:function(){
87 this.tweenkeyframe.addEventListener("click", this, false);
88 this.animatedProperties = new Array();
89 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
90 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
91 }
92 },
93
94 draw:{
95 value:function(){
96 this.tweenkeyframe.style.left = (this.position - 3) + "px";
97 }
98 },
99
100 handleElementChange:{
101 value:function (event) {
102 if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
103 alert("Wrong element selected for this keyframe track");
104 return;
105 }
106
107 if(event.detail.source && event.detail.source !== "keyframe") {
108 this.containingSpan.highlightSpan();
109 if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
110 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
111 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
112 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
113 this.containingTrack.updateKeyframeRule();
114 }
115 }
116 }
117 },
118
119 deselect:{
120 value:function(){
121 this.tweenkeyframe.classList.remove("keyframeSelected");
122 this.eventManager.removeEventListener("elementChange", this, false);
123 }
124 },
125
126 select:{
127 value:function(){
128 this.application.ninja.timeline.deselectKeyframes();
129 this.tweenkeyframe.classList.add("keyframeSelected");
130 this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
131 this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
132 this.application.ninja.timeline.selectedKeyframes.push(this);
133
134 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
135 var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
136 this.application.ninja.timeline.updateTimeText(currentMillisec);
137
138 var currentTop = this.animatedProperties["top"] + "px";
139 var currentLeft = this.animatedProperties["left"] + "px";
140
141 ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
142 ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
143
144 // turn on element change event listener
145 this.eventManager.addEventListener("elementChange", this, false);
146 }
147 },
148
149 handleClick:{
150 value:function(ev){
151 this.select();
152 }
153 }
154});