diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.html | 14 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 72 |
2 files changed, 43 insertions, 43 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index e27aeb89..0ae6c73b 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 | Copyright (c) 2012, Motorola Mobility, Inc | 3 | Copyright (c) 2012, Motorola Mobility, Inc |
4 | All Rights Reserved. | 4 | All Rights Reserved. |
@@ -29,9 +29,9 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE | |||
29 | POSSIBILITY OF SUCH DAMAGE. | 29 | POSSIBILITY OF SUCH DAMAGE. |
30 | </copyright> --> | 30 | </copyright> --> |
31 | <html lang="en"> | 31 | <html lang="en"> |
32 | <head> | 32 | <head> |
33 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | 33 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
34 | <link rel="stylesheet" type="text/css" href="css/Tween.css"> | 34 | <link rel="stylesheet" type="text/css" href="css/Tween.css"> |
35 | <script type="text/montage-serialization"> | 35 | <script type="text/montage-serialization"> |
36 | { | 36 | { |
37 | "owner": { | 37 | "owner": { |
@@ -42,7 +42,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
42 | "tweenspan": {"@": "span"} | 42 | "tweenspan": {"@": "span"} |
43 | } | 43 | } |
44 | }, | 44 | }, |
45 | 45 | ||
46 | "span": { | 46 | "span": { |
47 | "prototype": "js/panels/Timeline/Span.reel", | 47 | "prototype": "js/panels/Timeline/Span.reel", |
48 | "properties": { | 48 | "properties": { |
@@ -58,8 +58,8 @@ POSSIBILITY OF SUCH DAMAGE. | |||
58 | } | 58 | } |
59 | } | 59 | } |
60 | </script> | 60 | </script> |
61 | </head> | 61 | </head> |
62 | <body> | 62 | <body> |
63 | 63 | ||
64 | <div data-montage-id="tweenspace" class="tween_container"> | 64 | <div data-montage-id="tweenspace" class="tween_container"> |
65 | <div data-montage-id="span_container"></div> | 65 | <div data-montage-id="span_container"></div> |
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index ff8d0bad..c451caa7 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -165,38 +165,38 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
165 | this._isTweenAnimated = value; | 165 | this._isTweenAnimated = value; |
166 | } | 166 | } |
167 | }, | 167 | }, |
168 | 168 | ||
169 | _isDragging: { | 169 | _isDragging: { |
170 | value: false | 170 | value: false |
171 | }, | 171 | }, |
172 | isDragging: { | 172 | isDragging: { |
173 | serializable: true, | 173 | serializable: true, |
174 | get:function () { | 174 | get:function () { |
175 | return this._isDragging; | 175 | return this._isDragging; |
176 | }, | 176 | }, |
177 | set:function (newVal) { | 177 | set:function (newVal) { |
178 | this._isDragging = newVal; | 178 | this._isDragging = newVal; |
179 | } | 179 | } |
180 | 180 | ||
181 | }, | 181 | }, |
182 | 182 | ||
183 | _easing: { | 183 | _easing: { |
184 | value: "none" | 184 | value: "none" |
185 | }, | 185 | }, |
186 | easing: { | 186 | easing: { |
187 | serializable: true, | 187 | serializable: true, |
188 | get:function () { | 188 | get:function () { |
189 | return this._easing; | 189 | return this._easing; |
190 | }, | 190 | }, |
191 | set:function (newVal) { | 191 | set:function (newVal) { |
192 | this._easing = newVal; | 192 | this._easing = newVal; |
193 | } | 193 | } |
194 | 194 | ||
195 | }, | 195 | }, |
196 | 196 | ||
197 | draw:{ | 197 | draw:{ |
198 | value:function () { | 198 | value:function () { |
199 | this.tweenspan.element.style.width = this.spanWidth + "px"; | 199 | this.tweenspan.element.style.width = this.spanWidth + "px"; |
200 | this.keyframe.element.style.left = (this.spanWidth -5) + "px"; | 200 | this.keyframe.element.style.left = (this.spanWidth -5) + "px"; |
201 | this.tweenspan.spanWidth = this.spanWidth; | 201 | this.tweenspan.spanWidth = this.spanWidth; |
202 | this.element.style.left = this.spanPosition + "px"; | 202 | this.element.style.left = this.spanPosition + "px"; |
@@ -225,7 +225,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
225 | handleElementChange:{ | 225 | handleElementChange:{ |
226 | value:function (event) { | 226 | value:function (event) { |
227 | // temp - testing var | 227 | // temp - testing var |
228 | var useAbsolute = true; | 228 | var useAbsolute = true; |
229 | 229 | ||
230 | if(event.detail.type === "cssChange"){ | 230 | if(event.detail.type === "cssChange"){ |
231 | event.detail.source="cssPanelChange" | 231 | event.detail.source="cssPanelChange" |
@@ -250,32 +250,32 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
250 | setTweenProperties:{ | 250 | setTweenProperties:{ |
251 | value:function (eventDetail) { | 251 | value:function (eventDetail) { |
252 | 252 | ||
253 | if (eventDetail.source === "SelectionTool" || eventDetail.source === "timeline" || eventDetail.source === "pi" || eventDetail.source === "cssPanelChange") { | 253 | if (eventDetail.source === "SelectionTool" || eventDetail.source === "timeline" || eventDetail.source === "pi" || eventDetail.source === "cssPanelChange") { |
254 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 254 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
255 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; | 255 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; |
256 | } | 256 | } |
257 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 257 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
258 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; | 258 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; |
259 | } | 259 | } |
260 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 260 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
261 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; | 261 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; |
262 | } | 262 | } |
263 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 263 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
264 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; | 264 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; |
265 | } | 265 | } |
266 | // tell track to update css rule | 266 | // tell track to update css rule |
267 | this.parentComponent.parentComponent.updateKeyframeRule(); | 267 | this.parentComponent.parentComponent.updateKeyframeRule(); |
268 | this.isTweenAnimated = true; | 268 | this.isTweenAnimated = true; |
269 | } | 269 | } |
270 | 270 | ||
271 | if (eventDetail.source === "translateTool") { | 271 | if (eventDetail.source === "translateTool") { |
272 | var arrMat = eventDetail.data.value[0].properties.mat, | 272 | var arrMat = eventDetail.data.value[0].properties.mat, |
273 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; | 273 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; |
274 | 274 | ||
275 | this.tweenedProperties["-webkit-transform"] = strTweenProperty; | 275 | this.tweenedProperties["-webkit-transform"] = strTweenProperty; |
276 | this.parentComponent.parentComponent.updateKeyframeRule(); | 276 | this.parentComponent.parentComponent.updateKeyframeRule(); |
277 | this.isTweenAnimated = true; | 277 | this.isTweenAnimated = true; |
278 | } | 278 | } |
279 | } | 279 | } |
280 | }, | 280 | }, |
281 | 281 | ||