diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 16 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 35 |
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; |