From 6e29c88846e12757f127f0ce8e8cbb737ab8c880 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 9 Jul 2012 11:14:55 -0700 Subject: Adding comments Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 27 +++++++++++++++++++++- js/panels/Timeline/Span.reel/Span.js | 5 ++-- 2 files changed, 29 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b46a6242..dd440d9e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,11 +9,13 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { - /* Begin: Models */ + hasTemplate:{ value: true }, + /* Begin: Models */ + _propTweenRepetition:{ value:null }, @@ -283,10 +285,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; + /* Creating a newTween Object */ newTween = {}; newTween.tweenData = {}; newTween.tweenData.tweenedProperties = []; + /* Getting the Property Style for the animatedElement */ + propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if(propVal == null){ propVal = "1px"; @@ -294,6 +299,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; if (clickPos == 0) { + + /* Setting the tweenData Properties for the first Keyframe */ + newTween.tweenData.spanWidth = 0; newTween.tweenData.keyFramePosition = 0; newTween.tweenData.keyFrameMillisec = 0; @@ -327,13 +335,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { splitTweenIndex, newTweenToInsert; + /* Traverse through the property tweens array */ + for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { + /* Insert a new tween at this index */ splitTweenIndex = i + 1; + /* Update the next tween to have new span position and width */ + this.propTweens[i + 1].tweenData.spanPosition = position; this.propTweens[i + 1].spanPosition = position; this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; @@ -346,6 +359,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); + /* Create a new Tween and splice it into the model */ newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; @@ -393,12 +407,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); this.nextKeyframe = 0; + /* Traverse through the currentKeyFrameRule for the animatedElement */ + for (i = 0; this.currentKeyframeRule[i]; i++) { newTween = {}; newTween.tweenData = {}; styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; + /* Traversering through the style of the currentKeyFrameRule of the animatedElement */ for (j = 0; j < styleLength; j++) { firstChar = this.currentKeyframeRule[i].style[j].charAt(0); @@ -417,6 +434,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } if (this.currentKeyframeRule[i].keyText === "0%") { + + /* Setting the tweenData Property for only the first Keyframe */ newTween.tweenData.spanWidth = 0; newTween.tweenData.keyFramePosition = 0; newTween.tweenData.keyFrameMillisec = 0; @@ -425,6 +444,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens.push(newTween); } else { + tempTiming = trackTiming.split("s"); tempTimingFloat = parseFloat(tempTiming[0]); this.trackDuration = tempTimingFloat * 1000; @@ -481,6 +501,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ + + /* Adding the style property as an animation rule to the animatedElement */ + var currentStyleValue, currentAnimationNameString, newAnimationNames, @@ -490,6 +513,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newIterationCount, initRule; + /* Retrieveing the current style value on the animatedElement */ currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if (currentStyleValue == null) { currentStyleValue = "1px"; @@ -515,6 +539,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + /* Creating the animation rule */ initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index ffe7f4a4..ee3bcb0b 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -163,11 +163,12 @@ var Span = exports.Span = Montage.create(Component, { handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); - + + /* Un-highlight the old choice and highlight the new choice */ this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); event.target.classList.add("easing-selected"); - // Set the easing + /* Set the easing */ this.easing = event.target.dataset.ninjaEase; this.parentTween.easing = this.easing; this.parentTween.tweenData.easing = this.easing; -- cgit v1.2.3