aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJonathan Duran2012-02-09 11:17:47 -0800
committerJonathan Duran2012-02-09 11:17:47 -0800
commita822fec0e8e044b647306ed50619cb9a818269e4 (patch)
tree56ff7fb54b2cf80c594aa8a34989b6130fca8e4f /js
parentf6ad57e346a7fac5efe64473642c80fff763299b (diff)
downloadninja-a822fec0e8e044b647306ed50619cb9a818269e4.tar.gz
Fixes for animation element assignment
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js16
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js35
2 files changed, 29 insertions, 22 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c46ae8c9..c82a9086 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -86,8 +86,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
86 value:function(){ 86 value:function(){
87 this.tweenkeyframe.addEventListener("click", this, false); 87 this.tweenkeyframe.addEventListener("click", this, false);
88 this.animatedProperties = new Array(); 88 this.animatedProperties = new Array();
89
90 // should element mediator be used here?
91 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; 89 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
92 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; 90 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
93 } 91 }
@@ -101,15 +99,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
101 99
102 handleElementChange:{ 100 handleElementChange:{
103 value:function (event) { 101 value:function (event) {
102 if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
103 alert("Wrong element selected for this keyframe track");
104 return;
105 }
104 106
105 if(event.detail.source && event.detail.source !== "keyframe") { 107 if(event.detail.source && event.detail.source !== "keyframe") {
106
107 var items = this.application.ninja.selectedElements;
108 this.containingSpan.highlightSpan(); 108 this.containingSpan.highlightSpan();
109 if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ 109 if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
110 // update this keyframe's animated properties from the item[0] element props 110 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
111 this.animatedProperties["top"] = items[0]._element.offsetTop; 111 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
112 this.animatedProperties["left"] = items[0]._element.offsetLeft;
113 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; 112 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
114 this.containingTrack.updateKeyframeRule(); 113 this.containingTrack.updateKeyframeRule();
115 } 114 }
@@ -120,7 +119,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
120 deselect:{ 119 deselect:{
121 value:function(){ 120 value:function(){
122 this.tweenkeyframe.classList.remove("keyframeSelected"); 121 this.tweenkeyframe.classList.remove("keyframeSelected");
123
124 this.eventManager.removeEventListener("elementChange", this, false); 122 this.eventManager.removeEventListener("elementChange", this, false);
125 } 123 }
126 }, 124 },
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index dde01a2c..62688825 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -138,10 +138,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
138 value:false 138 value:false
139 }, 139 },
140 140
141 animatedElement:{ 141 _animatedElement:{
142 serializable:true,
143 enumerable:true,
144 writable:true,
142 value:null 145 value:null
143 }, 146 },
144 147
148 animatedElement:{
149 serializable:true,
150 get:function () {
151 return this._animatedElement;
152 },
153 set:function (val) {
154 this._animatedElement = val;
155 }
156 },
157
145 animationName:{ 158 animationName:{
146 value:null 159 value:null
147 }, 160 },
@@ -273,24 +286,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
273 286
274 addAnimationRuleToElement:{ 287 addAnimationRuleToElement:{
275 value:function (tweenEvent) { 288 value:function (tweenEvent) {
276 var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; 289 this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0];
277 this.animatedElement = theElement;
278
279 var initAnimatedProperties = new Array(); 290 var initAnimatedProperties = new Array();
280 initAnimatedProperties["top"] = theElement.offsetTop; 291 initAnimatedProperties["top"] = this.animatedElement.offsetTop;
281 initAnimatedProperties["left"] = theElement.offsetLeft; 292 initAnimatedProperties["left"] = this.animatedElement.offsetLeft;
282 this.keyFramePropertyData[0] = initAnimatedProperties; 293 this.keyFramePropertyData[0] = initAnimatedProperties;
283 294
284 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 295 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
285 //console.log(this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]); 296 this.animationName = this.animatedElement.className + this.trackID;
286 //console.log(this.trackID);
287 this.animationName = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0].className + this.trackID;
288 297
289 this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-name", this.animationName); 298 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
290 this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-duration", animationDuration); 299 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
291 this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-iteration-count", "infinite"); 300 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite");
292 301
293 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} 100% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} }"; 302 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }";
294 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 303 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
295 304
296 this.isAnimated = true; 305 this.isAnimated = true;