aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html21
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js120
-rw-r--r--js/panels/Timeline/Tween.reel/css/Tween.css6
3 files changed, 122 insertions, 25 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
index 307dcd02..ce51cb70 100644
--- a/js/panels/Timeline/Tween.reel/Tween.html
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -1,4 +1,9 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright>
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/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
2<html lang="en"> 7<html lang="en">
3 <head> 8 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -11,8 +16,7 @@
11 "properties": { 16 "properties": {
12 "element": {"#": "tweenspace"}, 17 "element": {"#": "tweenspace"},
13 "keyframe": {"@": "keyframe"}, 18 "keyframe": {"@": "keyframe"},
14 "span": {"@": "span"}, 19 "tweenspan": {"@": "span"}
15 "tweencontainer": {"#": "tweencontainer"}
16 } 20 }
17 }, 21 },
18 22
@@ -28,8 +32,7 @@
28 "module": "js/panels/Timeline/Keyframe.reel", 32 "module": "js/panels/Timeline/Keyframe.reel",
29 "name": "Keyframe", 33 "name": "Keyframe",
30 "properties": { 34 "properties": {
31 "element": {"#": "keyframe_container"}, 35 "element": {"#": "keyframe_container"}
32 "containingSpan": {"@": "span"}
33 } 36 }
34 } 37 }
35 } 38 }
@@ -37,12 +40,10 @@
37 </head> 40 </head>
38 <body> 41 <body>
39 42
40 <div id="tweenspace"> 43 <div id="tweenspace" class="tween_container">
41 <div id="tweencontainer" class="tween_container"> 44 <div id="span_container"></div>
42 <div id="span_container"></div> 45 <div id="keyframe_container"></div>
43 <div id="keyframe_container"></div> 46 </div>
44 </div>
45 </div>
46 47
47 </body> 48 </body>
48</html> \ No newline at end of file 49</html> \ No newline at end of file
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index eddf1b17..f6dbf32c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -1,5 +1,12 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
1var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
9var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
3 10
4var Tween = exports.Tween = Montage.create(Component, { 11var Tween = exports.Tween = Montage.create(Component, {
5 12
@@ -8,6 +15,7 @@ var Tween = exports.Tween = Montage.create(Component, {
8 }, 15 },
9 16
10 _spanWidth: { 17 _spanWidth: {
18 serializable: true,
11 value: 0 19 value: 0
12 }, 20 },
13 21
@@ -18,6 +26,7 @@ var Tween = exports.Tween = Montage.create(Component, {
18 }, 26 },
19 set: function(value){ 27 set: function(value){
20 this._spanWidth = value; 28 this._spanWidth = value;
29 this.needsDraw = true;
21 } 30 }
22 }, 31 },
23 32
@@ -32,6 +41,7 @@ var Tween = exports.Tween = Montage.create(Component, {
32 }, 41 },
33 set:function (value) { 42 set:function (value) {
34 this._spanPosition = value; 43 this._spanPosition = value;
44 this.needsDraw = true;
35 } 45 }
36 }, 46 },
37 47
@@ -46,6 +56,7 @@ var Tween = exports.Tween = Montage.create(Component, {
46 }, 56 },
47 set:function (value) { 57 set:function (value) {
48 this._keyFramePosition = value; 58 this._keyFramePosition = value;
59 this.needsDraw = true;
49 } 60 }
50 }, 61 },
51 62
@@ -63,47 +74,126 @@ var Tween = exports.Tween = Montage.create(Component, {
63 } 74 }
64 }, 75 },
65 76
66 _keyframeID:{ 77 _tweenID:{
67 value:0 78 value:0
68 }, 79 },
69 80
70 keyframeID:{ 81 tweenID:{
71 serializable:true, 82 serializable:true,
72 get:function () { 83 get:function () {
73 return this._keyframeID; 84 return this._tweenID;
74 }, 85 },
75 set:function (value) { 86 set:function (value) {
76 this._keyframeID = value; 87 this._tweenID = value;
77 } 88 }
78 }, 89 },
79 90
80 _timelineTrack:{ 91 _tweenedProperties:{
81 value:0 92 serializable: true,
93 value:[]
94 },
95
96 tweenedProperties:{
97 serializable:true,
98 get:function(){
99 return this._tweenedProperties;
100 },
101 set:function(val){
102 this._tweenedProperties = val;
103 }
82 }, 104 },
83 105
84 timelineTrack:{ 106 _isTweenAnimated:{
107 serializable:true,
108 value:false
109 },
110
111 isTweenAnimated:{
85 serializable:true, 112 serializable:true,
86 get:function () { 113 get:function () {
87 return this._timelineTrack; 114 return this._isTweenAnimated;
88 }, 115 },
89 set:function (value) { 116 set:function (value) {
90 this._timelineTrack = value; 117 this._isTweenAnimated = value;
118 this.needsDraw = true;
91 } 119 }
92 }, 120 },
93 121
94 prepareForDraw:{ 122 prepareForDraw:{
95 value:function () { 123 value:function () {
96 this.keyframe.containingTrack = this.timelineTrack; 124
97 this.keyframe.position = this.spanWidth;
98 this.keyframe.timelinePosition = this.keyFramePosition;
99 this.keyframe.id = this.keyframeID;
100 } 125 }
101 }, 126 },
102 127
103 draw:{ 128 draw:{
104 value:function () { 129 value:function () {
105 this.span.spanWidth = this.spanWidth; 130 this.element.style.left = this.spanPosition + "px";
106 this.tweencontainer.style.left = this.spanPosition + "px"; 131 this.keyframe.position = this.spanWidth;
132 this.tweenspan.spanWidth = this.spanWidth;
133 if(this.isTweenAnimated){
134 this.tweenspan.highlightSpan();
135 }
136 }
137 },
138
139 handleElementChange:{
140 value:function (event) {
141 if (event.detail.source && event.detail.source !== "tween") {
142 // check for correct element selection
143 if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
144 alert("Wrong element selected for this keyframe track");
145 } else {
146 // update tweenedProperties and tell containing track to update CSS rule
147 // temp read only top and left. need to change to loop over event details for prop changes generically
148 if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
149 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
150 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
151 this.parentComponent.parentComponent.updateKeyframeRule();
152 }
153 // highlight the tween's span
154 this.tweenspan.highlightSpan();
155 this.isTweenAnimated = true;
156 }
157 }
158 }