From eb7c3c8db304bdfb01f747a50e932665d9ec03fa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:09:35 -0700 Subject: style keyframe rule addition Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 51 +++++++++++++++++++--- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 25 +++++------ js/panels/Timeline/Tween.reel/Tween.js | 50 ++++++++++++++++++--- 3 files changed, 97 insertions(+), 29 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 690c912b..f44afcec 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -18,7 +18,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; - + this.ninjaStylesContoller = this.application.ninja.stylesController; } }, @@ -89,6 +89,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:1 }, + ninjaStylesContoller:{ + value:null + }, + + animationName:{ + value:null + }, + + currentKeyframeRule:{ + value:null + }, + _trackID:{ value:null }, @@ -167,11 +179,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; - console.log("Property track editorProperty set to: " + this.trackEditorProperty); + //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - //console.log("clicking on position track"); - //console.log(this.trackEditorProperty); + console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); @@ -219,7 +230,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; newTween.tweenData.tweenedProperties = []; - + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); this.nextKeyframe += 1; @@ -237,9 +248,35 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ + var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; + + + this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; + var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; + var newAnimationNames = currentAnimationNameString + "," + this.animationName; + var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + var newIterationCount = currentIterationCount + ",1"; + + this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; + + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); + + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); + + + console.log(currentStyleValue); + + var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; + console.log(initRule); + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); + this.insertPropTween(tweenEvent.offsetX); - this.animationName = this.parentComponent.parentComponent.parentComponent.animationName; - //console.log(this.animationName); } } }); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8b3938f4..0e40e222 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -321,6 +321,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + animationNamesString:{ + value:"" + }, + ninjaStylesContoller:{ value:null }, @@ -468,14 +472,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } - - - - - - - - + // Drag and Drop: // Do we have a helper to append? if (this._appendHelper === true) { @@ -527,7 +524,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } - if (this._isFirstDraw === true) { if (this.isMainCollapsed === false) { @@ -591,11 +587,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[i].tweenData = myObj; } - - } } }, + handleClick:{ value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span @@ -609,7 +604,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.updateKeyframeRule(); } else { this.handleNewTween(ev); - this.updateKeyframeRule(); + if (ev.target.className === "tracklane") { + this.updateKeyframeRule(); + } } } else { // TEMP error check @@ -626,7 +623,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(ev.offsetX); } else { - console.log(ev.target); this.splitTween(ev); } } @@ -792,6 +788,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.animationName = this.animatedElement.classList[0] + "_PositionSize"; + this.animationNamesString = this.animationName; 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", 1); @@ -900,8 +897,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newStyleTrack.propTrackData.trackEditorProperty = ""; newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - console.log(layerEvent.styleIndex); - this.arrStyleTracks.push(newStyleTrack); } else if (layerEvent.layerEventType === "deleteStyle") { diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 48b41023..b8cc4a07 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -178,16 +178,23 @@ var Tween = exports.Tween = Montage.create(Component, { var useAbsolute = true; if (event.detail.source && event.detail.source !== "tween") { - // check for correct element selection - if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { - console.log("Wrong element selected for this keyframe track"); + + if(this.parentComponent.parentComponent.isSubproperty){ + this.setStyleTweenProperty(event.detail); } else { - if(useAbsolute){ - this.setAbsoluteTweenProperties(event.detail); + // check for correct element selection + if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { + console.log("Wrong element selected for this keyframe track"); } else { - this.setRelativeTweenProperties(event.detail); + if (useAbsolute) { + this.setAbsoluteTweenProperties(event.detail); + } else { + this.setRelativeTweenProperties(event.detail); + } } } + + } } }, @@ -231,6 +238,36 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setStyleTweenProperty:{ + value:function (eventDetail) { + console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); + console.log(eventDetail); + + if(eventDetail.type == "setProperties"){ + // ignore top, left, width, and height + console.log(eventDetail.data.value[0]); + this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; + console.log(this.tweenedProperties); + + } else if(eventDetail.type == "setColor"){ + console.log(eventDetail.data.value.color.css); + var prop = this.parentComponent.parentComponent.trackEditorProperty; + this.tweenedProperties[prop] = eventDetail.data.value.color.css; + console.log(this.tweenedProperties[prop]); + + } else if(eventDetail.type == "setProperty"){ + // ignore top, left, width, and height + console.log(eventDetail.data.value[0]); + this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; + console.log(this.tweenedProperties); + }else { + console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); + } + + + } + }, + selectTween:{ value: function(){ // turn on event listener for element change @@ -252,7 +289,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.timeline.updateTimeText(currentMillisec); if(this.parentComponent.parentComponent.isSubproperty){ - console.log("sub prop tween selection"); // set property specific style on element } else { // move animated element to correct position on stage -- cgit v1.2.3