aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel/Tween.js
diff options
context:
space:
mode:
authorhwc4872012-02-23 15:21:56 -0800
committerhwc4872012-02-23 15:21:56 -0800
commit26bb2894c29d4608e843de01829d352dd3d00823 (patch)
treec5a9d10976304fe5b3dec59f40977d8c72df57de /js/panels/Timeline/Tween.reel/Tween.js
parent64280907f31e6f6e5659acb0893df3e0da5bb044 (diff)
parent81ce79819ba574b03b46e91e9a153dab82b550cd (diff)
downloadninja-26bb2894c29d4608e843de01829d352dd3d00823.tar.gz
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into integration
Conflicts: js/helper-classes/RDGE/GLWorld.js js/helper-classes/RDGE/Materials/PulseMaterial.js js/helper-classes/RDGE/Materials/RadialBlurMaterial.js js/helper-classes/RDGE/src/tools/rdge-compiled.js js/preloader/Preloader.js
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js114
1 files changed, 99 insertions, 15 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index eddf1b17..af01deb2 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -1,5 +1,6 @@
1var Montage = require("montage/core/core").Montage; 1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
3 4
4var Tween = exports.Tween = Montage.create(Component, { 5var Tween = exports.Tween = Montage.create(Component, {
5 6
@@ -8,6 +9,7 @@ var Tween = exports.Tween = Montage.create(Component, {
8 }, 9 },
9 10
10 _spanWidth: { 11 _spanWidth: {
12 serializable: true,
11 value: 0 13 value: 0
12 }, 14 },
13 15
@@ -18,6 +20,7 @@ var Tween = exports.Tween = Montage.create(Component, {
18 }, 20 },
19 set: function(value){ 21 set: function(value){
20 this._spanWidth = value; 22 this._spanWidth = value;
23 this.needsDraw = true;
21 } 24 }
22 }, 25 },
23 26
@@ -32,6 +35,7 @@ var Tween = exports.Tween = Montage.create(Component, {
32 }, 35 },
33 set:function (value) { 36 set:function (value) {
34 this._spanPosition = value; 37 this._spanPosition = value;
38 this.needsDraw = true;
35 } 39 }
36 }, 40 },
37 41
@@ -46,6 +50,7 @@ var Tween = exports.Tween = Montage.create(Component, {
46 }, 50 },
47 set:function (value) { 51 set:function (value) {
48 this._keyFramePosition = value; 52 this._keyFramePosition = value;
53 this.needsDraw = true;
49 } 54 }
50 }, 55 },
51 56
@@ -63,47 +68,126 @@ var Tween = exports.Tween = Montage.create(Component, {
63 } 68 }
64 }, 69 },
65 70
66 _keyframeID:{ 71 _tweenID:{
67 value:0 72 value:0
68 }, 73 },
69 74
70 keyframeID:{ 75 tweenID:{
71 serializable:true, 76 serializable:true,
72 get:function () { 77 get:function () {
73 return this._keyframeID; 78 return this._tweenID;
74 }, 79 },
75 set:function (value) { 80 set:function (value) {
76 this._keyframeID = value; 81 this._tweenID = value;
77 } 82 }
78 }, 83 },
79 84
80 _timelineTrack:{ 85 _tweenedProperties:{
81 value:0 86 serializable: true,
87 value:[]
88 },
89
90 tweenedProperties:{
91 serializable:true,
92 get:function(){
93 return this._tweenedProperties;
94 },
95 set:function(val){
96 this._tweenedProperties = val;
97 }
98 },
99
100 _isTweenAnimated:{
101 serializable:true,
102 value:false
82 }, 103 },
83 104
84 timelineTrack:{ 105 isTweenAnimated:{
85 serializable:true, 106 serializable:true,
86 get:function () { 107 get:function () {
87 return this._timelineTrack; 108 return this._isTweenAnimated;
88 }, 109 },
89 set:function (value) { 110 set:function (value) {
90 this._timelineTrack = value; 111 this._isTweenAnimated = value;
112 this.needsDraw = true;
91 } 113 }
92 }, 114 },
93 115
94 prepareForDraw:{ 116 prepareForDraw:{
95 value:function () { 117 value:function () {
96 this.keyframe.containingTrack = this.timelineTrack; 118
97 this.keyframe.position = this.spanWidth;
98 this.keyframe.timelinePosition = this.keyFramePosition;
99 this.keyframe.id = this.keyframeID;
100 } 119 }
101 }, 120 },
102 121
103 draw:{ 122 draw:{
104 value:function () { 123 value:function () {
105 this.span.spanWidth = this.spanWidth; 124 this.element.style.left = this.spanPosition + "px";
106 this.tweencontainer.style.left = this.spanPosition + "px"; 125 this.keyframe.position = this.spanWidth;
126 this.tweenspan.spanWidth = this.spanWidth;
127 if(this.isTweenAnimated){
128 this.tweenspan.highlightSpan();
129 }
130 }
131 },
132
133 handleElementChange:{
134 value:function (event) {
135 if (event.detail.source && event.detail.source !== "tween") {
136 // check for correct element selection
137 if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
138 alert("Wrong element selected for this keyframe track");
139 } else {
140 // update tweenedProperties and tell containing track to update CSS rule
141 // temp read only top and left. need to change to loop over event details for prop changes generically
142 if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
143 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
144 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
145 this.parentComponent.parentComponent.updateKeyframeRule();
146 }
147 // highlight the tween's span
148 this.tweenspan.highlightSpan();
149 this.isTweenAnimated = true;
150 }
151 }
152 }
153 },
154
155 selectTween:{
156 value: function(){
157 // turn on event listener for element change
158 this.eventManager.addEventListener("elementChange", this, false);
159
160 // select the containing layer
161 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
162 this.application.ninja.timeline.selectLayer(selectIndex);
163
164 // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline
165 this.application.ninja.timeline.deselectTweens();
166 this.application.ninja.timeline.selectedTweens.push(this);
167
168 // update playhead position and time text
169 this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px";
170 this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px";
171 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
172 var currentMillisec = currentMillisecPerPixel * this.keyFramePosition;
173 this.application.ninja.timeline.updateTimeText(currentMillisec);
174
175 // move animated element to correct position on stage
176 var currentTop = this.tweenedProperties["top"] + "px";
177 var currentLeft = this.tweenedProperties["left"] + "px";
178 ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");
179 ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
180
181 }
182 },
183
184 deselectTween:{
185 value:function(){
186 // turn off event listener for element change
187 this.eventManager.removeEventListener("elementChange", this, false);
188
189 // deselect the keyframe for this tween
190 this.keyframe.deselectKeyframe();
107 } 191 }
108 } 192 }
109}); 193});