From a822fec0e8e044b647306ed50619cb9a818269e4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 9 Feb 2012 11:17:47 -0800 Subject: Fixes for animation element assignment Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 16 +++++----- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 35 ++++++++++++++-------- 2 files changed, 29 insertions(+), 22 deletions(-) (limited to 'js/panels') 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, { value:function(){ this.tweenkeyframe.addEventListener("click", this, false); this.animatedProperties = new Array(); - - // should element mediator be used here? this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; } @@ -101,15 +99,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { handleElementChange:{ value:function (event) { + if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){ + alert("Wrong element selected for this keyframe track"); + return; + } if(event.detail.source && event.detail.source !== "keyframe") { - - var items = this.application.ninja.selectedElements; this.containingSpan.highlightSpan(); - if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ - // update this keyframe's animated properties from the item[0] element props - this.animatedProperties["top"] = items[0]._element.offsetTop; - this.animatedProperties["left"] = items[0]._element.offsetLeft; + if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){ + this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; + this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; this.containingTrack.updateKeyframeRule(); } @@ -120,7 +119,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { deselect:{ value:function(){ this.tweenkeyframe.classList.remove("keyframeSelected"); - this.eventManager.removeEventListener("elementChange", this, false); } }, 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, { value:false }, - animatedElement:{ + _animatedElement:{ + serializable:true, + enumerable:true, + writable:true, value:null }, + animatedElement:{ + serializable:true, + get:function () { + return this._animatedElement; + }, + set:function (val) { + this._animatedElement = val; + } + }, + animationName:{ value:null }, @@ -273,24 +286,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { addAnimationRuleToElement:{ value:function (tweenEvent) { - var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; - this.animatedElement = theElement; - + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; var initAnimatedProperties = new Array(); - initAnimatedProperties["top"] = theElement.offsetTop; - initAnimatedProperties["left"] = theElement.offsetLeft; + initAnimatedProperties["top"] = this.animatedElement.offsetTop; + initAnimatedProperties["left"] = this.animatedElement.offsetLeft; this.keyFramePropertyData[0] = initAnimatedProperties; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - //console.log(this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]); - //console.log(this.trackID); - this.animationName = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0].className + this.trackID; + this.animationName = this.animatedElement.className + this.trackID; - this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-name", this.animationName); - this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-duration", animationDuration); - this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-iteration-count", "infinite"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} 100% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} }"; + 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;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.isAnimated = true; -- cgit v1.2.3