diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.html | 17 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 102 |
2 files changed, 76 insertions, 43 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index ce51cb70..aba42436 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <!-- <copyright> | 2 | <!-- <copyright> |
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 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/> | 4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
@@ -11,8 +11,7 @@ | |||
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | "owner": { | 13 | "owner": { |
14 | "module": "js/panels/Timeline/Tween.reel", | 14 | "prototype": "js/panels/Timeline/Tween.reel", |
15 | "name": "Tween", | ||
16 | "properties": { | 15 | "properties": { |
17 | "element": {"#": "tweenspace"}, | 16 | "element": {"#": "tweenspace"}, |
18 | "keyframe": {"@": "keyframe"}, | 17 | "keyframe": {"@": "keyframe"}, |
@@ -21,16 +20,14 @@ | |||
21 | }, | 20 | }, |
22 | 21 | ||
23 | "span": { | 22 | "span": { |
24 | "module": "js/panels/Timeline/Span.reel", | 23 | "prototype": "js/panels/Timeline/Span.reel", |
25 | "name": "Span", | ||
26 | "properties": { | 24 | "properties": { |
27 | "element": {"#": "span_container"} | 25 | "element": {"#": "span_container"} |
28 | } | 26 | } |
29 | }, | 27 | }, |
30 | 28 | ||
31 | "keyframe": { | 29 | "keyframe": { |
32 | "module": "js/panels/Timeline/Keyframe.reel", | 30 | "prototype": "js/panels/Timeline/Keyframe.reel", |
33 | "name": "Keyframe", | ||
34 | "properties": { | 31 | "properties": { |
35 | "element": {"#": "keyframe_container"} | 32 | "element": {"#": "keyframe_container"} |
36 | } | 33 | } |
@@ -40,9 +37,9 @@ | |||
40 | </head> | 37 | </head> |
41 | <body> | 38 | <body> |
42 | 39 | ||
43 | <div id="tweenspace" class="tween_container"> | 40 | <div data-montage-id="tweenspace" class="tween_container"> |
44 | <div id="span_container"></div> | 41 | <div data-montage-id="span_container"></div> |
45 | <div id="keyframe_container"></div> | 42 | <div data-montage-id="keyframe_container"></div> |
46 | </div> | 43 | </div> |
47 | 44 | ||
48 | </body> | 45 | </body> |
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b13a037f..3c0223c1 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -14,12 +14,10 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
14 | }, | 14 | }, |
15 | 15 | ||
16 | _tweenData:{ | 16 | _tweenData:{ |
17 | serializable: true, | ||
18 | value:{} | 17 | value:{} |
19 | }, | 18 | }, |
20 | 19 | ||
21 | tweenData:{ | 20 | tweenData:{ |
22 | serializable: true, | ||
23 | get:function(){ | 21 | get:function(){ |
24 | return this._tweenData; | 22 | return this._tweenData; |
25 | }, | 23 | }, |
@@ -32,7 +30,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
32 | }, | 30 | }, |
33 | 31 | ||
34 | _spanWidth: { | 32 | _spanWidth: { |
35 | serializable: true, | ||
36 | value: 0 | 33 | value: 0 |
37 | }, | 34 | }, |
38 | 35 | ||
@@ -109,7 +106,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
109 | }, | 106 | }, |
110 | 107 | ||
111 | _tweenedProperties:{ | 108 | _tweenedProperties:{ |
112 | serializable: true, | ||
113 | value:[] | 109 | value:[] |
114 | }, | 110 | }, |
115 | 111 | ||
@@ -124,7 +120,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
124 | }, | 120 | }, |
125 | 121 | ||
126 | _isTweenAnimated:{ | 122 | _isTweenAnimated:{ |
127 | serializable:true, | ||
128 | value:false | 123 | value:false |
129 | }, | 124 | }, |
130 | 125 | ||
@@ -137,6 +132,20 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
137 | this._isTweenAnimated = value; | 132 | this._isTweenAnimated = value; |
138 | } | 133 | } |
139 | }, | 134 | }, |
135 | |||
136 | _isDragging: { | ||
137 | value: false | ||
138 | }, | ||
139 | isDragging: { | ||
140 | serializable: true, | ||
141 | get:function () { | ||
142 | return this._isDragging; | ||
143 | }, | ||
144 | set:function (newVal) { | ||
145 | this._isDragging = newVal; | ||
146 | } | ||
147 | |||
148 | }, | ||
140 | 149 | ||
141 | 150 | ||
142 | draw:{ | 151 | draw:{ |
@@ -169,50 +178,41 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
169 | var useAbsolute = true; | 178 | var useAbsolute = true; |
170 | 179 | ||
171 | if (event.detail.source && event.detail.source !== "tween") { | 180 | if (event.detail.source && event.detail.source !== "tween") { |
172 | // check for correct element selection | 181 | |
173 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 182 | if(this.parentComponent.parentComponent.isSubproperty){ |
174 | console.log("Wrong element selected for this keyframe track"); | 183 | this.setStyleTweenProperty(event.detail); |
175 | } else { | 184 | } else { |
176 | if(useAbsolute){ | 185 | // check for correct element selection |
177 | this.setAbsoluteTweenProperties(event.detail); | 186 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
187 | console.log("Wrong element selected for this keyframe track"); | ||
178 | } else { | 188 | } else { |
179 | this.setRelativeTweenProperties(event.detail); | 189 | if (useAbsolute) { |
190 | this.setAbsoluteTweenProperties(event.detail); | ||
191 | } else { | ||
192 | this.setRelativeTweenProperties(event.detail); | ||
193 | } | ||
180 | } | 194 | } |
181 | } | 195 | } |
196 | |||
197 | |||
182 | } | 198 | } |
183 | } | 199 | } |
184 | }, | 200 | }, |
185 | 201 | ||
186 | setAbsoluteTweenProperties:{ | 202 | setAbsoluteTweenProperties:{ |
187 | value:function (eventDetail) { | 203 | value:function (eventDetail) { |
188 | //console.log(eventDetail); | ||
189 | |||
190 | // top | ||
191 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 204 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
192 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 205 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; |
193 | } | 206 | } |
194 | |||
195 | // left | ||
196 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 207 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
197 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | 208 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; |
198 | } | 209 | } |
199 | |||
200 | // width | ||
201 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 210 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
202 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; | 211 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; |
203 | } | 212 | } |
204 | |||
205 | // height | ||
206 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 213 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
207 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; | 214 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; |
208 | } | 215 | } |
209 | |||
210 | // skewX | ||
211 | |||
212 | // skewY | ||
213 | |||
214 | // rotation | ||
215 | |||
216 | // tell track to update css rule | 216 | // tell track to update css rule |
217 | this.parentComponent.parentComponent.updateKeyframeRule(); | 217 | this.parentComponent.parentComponent.updateKeyframeRule(); |
218 | 218 | ||
@@ -228,6 +228,34 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
228 | } | 228 | } |
229 | }, | 229 | }, |
230 | 230 | ||
231 | setStyleTweenProperty:{ | ||
232 | value:function (eventDetail) { | ||
233 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
234 | //console.log(eventDetail); | ||
235 | |||
236 | if(eventDetail.type == "setProperties"){ | ||
237 | // ignore top, left, width, and height | ||
238 | console.log(eventDetail.data.value[0]); | ||
239 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
240 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||