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.html49
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js199
-rw-r--r--js/panels/Timeline/Tween.reel/css/Tween.css10
3 files changed, 258 insertions, 0 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
new file mode 100644
index 00000000..ce51cb70
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -0,0 +1,49 @@
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> -->
7<html lang="en">
8 <head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="css/Tween.css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module": "js/panels/Timeline/Tween.reel",
15 "name": "Tween",
16 "properties": {
17 "element": {"#": "tweenspace"},
18 "keyframe": {"@": "keyframe"},
19 "tweenspan": {"@": "span"}
20 }
21 },
22
23 "span": {
24 "module": "js/panels/Timeline/Span.reel",
25 "name": "Span",
26 "properties": {
27 "element": {"#": "span_container"}
28 }
29 },
30
31 "keyframe": {
32 "module": "js/panels/Timeline/Keyframe.reel",
33 "name": "Keyframe",
34 "properties": {
35 "element": {"#": "keyframe_container"}
36 }
37 }
38 }
39 </script>
40 </head>
41 <body>
42
43 <div id="tweenspace" class="tween_container">
44 <div id="span_container"></div>
45 <div id="keyframe_container"></div>
46 </div>
47
48 </body>
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
new file mode 100644
index 00000000..f6dbf32c
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -0,0 +1,199 @@
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
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
10
11var Tween = exports.Tween = Montage.create(Component, {
12
13 hasTemplate:{
14 value: true
15 },
16
17 _spanWidth: {
18 serializable: true,
19 value: 0
20 },
21
22 spanWidth: {
23 serializable:true,
24 get: function(){
25 return this._spanWidth;
26 },
27 set: function(value){
28 this._spanWidth = value;
29 this.needsDraw = true;
30 }
31 },
32
33 _spanPosition:{
34 value: 0
35 },
36
37 spanPosition:{
38 serializable:true,
39 get:function () {
40 return this._spanPosition;
41 },
42 set:function (value) {
43 this._spanPosition = value;
44 this.needsDraw = true;
45 }
46 },
47
48 _keyFramePosition:{
49 value:0
50 },
51
52 keyFramePosition:{
53 serializable:true,
54 get:function () {
55 return this._keyFramePosition;
56 },
57 set:function (value) {
58 this._keyFramePosition = value;
59 this.needsDraw = true;
60 }
61 },
62
63 _keyFrameMillisec:{
64 value:0
65 },
66
67 keyFrameMillisec:{
68 serializable:true,
69 get:function () {
70 return this._keyFrameMillisec;
71 },
72 set:function (value) {
73 this._keyFrameMillisec = value;
74 }
75 },
76
77 _tweenID:{
78 value:0
79 },
80
81 tweenID:{
82 serializable:true,
83 get:function () {
84 return this._tweenID;
85 },
86 set:function (value) {
87 this._tweenID = value;
88 }
89 },
90
91 _tweenedProperties:{
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 }
104 },
105
106 _isTweenAnimated:{
107 serializable:true,
108 value:false
109 },
110
111 isTweenAnimated:{
112 serializable:true,
113 get:function () {
114 return this._isTweenAnimated;
115 },
116 set:function (value) {
117 this._isTweenAnimated = value;
118 this.needsDraw = true;
119 }
120 },
121
122 prepareForDraw:{
123 value:function () {
124
125 }
126 },
127
128 draw:{
129 value:function () {
130 this.element.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 }
159 },
160
161 selectTween:{
162 value: function(){
163 // turn on event listener for element change
164 this.eventManager.addEventListener("elementChange", this, false);
165
166 // select the containing layer
167 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
168 this.application.ninja.timeline.selectLayer(selectIndex);
169
170 // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline
171 this.application.ninja.timeline.deselectTweens();
172 this.application.ninja.timeline.selectedTweens.push(this);
173
174 // update playhead position and time text
175 this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px";
176 this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px";
177 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
178 var currentMillisec = currentMillisecPerPixel * this.keyFramePosition;
179 this.application.ninja.timeline.updateTimeText(currentMillisec);