aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorKruti Shah2012-07-09 11:14:55 -0700
committerKruti Shah2012-07-09 11:14:55 -0700
commit6e29c88846e12757f127f0ce8e8cbb737ab8c880 (patch)
treebc325b52afd38d00475cf979b5c293350dc0d912 /js/panels/Timeline
parent8a2a9cf8d43a1ba7e40c41619e7db9675f4cb195 (diff)
downloadninja-6e29c88846e12757f127f0ce8e8cbb737ab8c880.tar.gz
Adding comments
Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js27
-rw-r--r--js/panels/Timeline/Span.reel/Span.js5
2 files changed, 29 insertions, 3 deletions
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;
9 9
10var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { 10var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
11 11
12 /* Begin: Models */ 12
13 hasTemplate:{ 13 hasTemplate:{
14 value: true 14 value: true
15 }, 15 },
16 16
17 /* Begin: Models */
18
17 _propTweenRepetition:{ 19 _propTweenRepetition:{
18 value:null 20 value:null
19 }, 21 },
@@ -283,10 +285,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
283 currentMillisec = currentMillisecPerPixel * clickPos; 285 currentMillisec = currentMillisecPerPixel * clickPos;
284 this.trackDuration = currentMillisec; 286 this.trackDuration = currentMillisec;
285 287
288 /* Creating a newTween Object */
286 newTween = {}; 289 newTween = {};
287 newTween.tweenData = {}; 290 newTween.tweenData = {};
288 newTween.tweenData.tweenedProperties = []; 291 newTween.tweenData.tweenedProperties = [];
289 292
293 /* Getting the Property Style for the animatedElement */
294
290 propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); 295 propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
291 if(propVal == null){ 296 if(propVal == null){
292 propVal = "1px"; 297 propVal = "1px";
@@ -294,6 +299,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
294 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; 299 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal;
295 300
296 if (clickPos == 0) { 301 if (clickPos == 0) {
302
303 /* Setting the tweenData Properties for the first Keyframe */
304
297 newTween.tweenData.spanWidth = 0; 305 newTween.tweenData.spanWidth = 0;
298 newTween.tweenData.keyFramePosition = 0; 306 newTween.tweenData.keyFramePosition = 0;
299 newTween.tweenData.keyFrameMillisec = 0; 307 newTween.tweenData.keyFrameMillisec = 0;
@@ -327,13 +335,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
327 splitTweenIndex, 335 splitTweenIndex,
328 newTweenToInsert; 336 newTweenToInsert;
329 337
338 /* Traverse through the property tweens array */
339
330 for (i = 0; i < tweensLength; i++) { 340 for (i = 0; i < tweensLength; i++) {
331 prevTween = this.propTweens[i].tweenData.keyFramePosition; 341 prevTween = this.propTweens[i].tweenData.keyFramePosition;
332 nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; 342 nextTween = this.propTweens[i + 1].tweenData.keyFramePosition;
333 if (position > prevTween && position < nextTween) { 343 if (position > prevTween && position < nextTween) {
334 344
345 /* Insert a new tween at this index */
335 splitTweenIndex = i + 1; 346 splitTweenIndex = i + 1;
336 347
348 /* Update the next tween to have new span position and width */
349
337 this.propTweens[i + 1].tweenData.spanPosition = position; 350 this.propTweens[i + 1].tweenData.spanPosition = position;
338 this.propTweens[i + 1].spanPosition = position; 351 this.propTweens[i + 1].spanPosition = position;
339 this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; 352 this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position;
@@ -346,6 +359,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
346 } 359 }
347 this.propTweenRepetition.childComponents[nextComponentIndex].setData(); 360 this.propTweenRepetition.childComponents[nextComponentIndex].setData();
348 361
362 /* Create a new Tween and splice it into the model */
349 newTweenToInsert = {}; 363 newTweenToInsert = {};
350 newTweenToInsert.tweenData = {}; 364 newTweenToInsert.tweenData = {};
351 newTweenToInsert.tweenData.spanWidth = position - prevTween; 365 newTweenToInsert.tweenData.spanWidth = position - prevTween;
@@ -393,12 +407,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
393 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 407 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
394 this.nextKeyframe = 0; 408 this.nextKeyframe = 0;
395 409
410 /* Traverse through the currentKeyFrameRule for the animatedElement */
411
396 for (i = 0; this.currentKeyframeRule[i]; i++) { 412 for (i = 0; this.currentKeyframeRule[i]; i++) {
397 newTween = {}; 413 newTween = {};
398 newTween.tweenData = {}; 414 newTween.tweenData = {};
399 415
400 styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; 416 styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = [];
401 417
418 /* Traversering through the style of the currentKeyFrameRule of the animatedElement */
402 for (j = 0; j < styleLength; j++) { 419 for (j = 0; j < styleLength; j++) {
403 420
404 firstChar = this.currentKeyframeRule[i].style[j].charAt(0); 421 firstChar = this.currentKeyframeRule[i].style[j].charAt(0);
@@ -417,6 +434,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
417 } 434 }
418 435
419 if (this.currentKeyframeRule[i].keyText === "0%") { 436 if (this.currentKeyframeRule[i].keyText === "0%") {
437
438 /* Setting the tweenData Property for only the first Keyframe */
420 newTween.tweenData.spanWidth = 0; 439 newTween.tweenData.spanWidth = 0;
421 newTween.tweenData.keyFramePosition = 0; 440 newTween.tweenData.keyFramePosition = 0;
422 newTween.tweenData.keyFrameMillisec = 0; 441 newTween.tweenData.keyFrameMillisec = 0;
@@ -425,6 +444,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
425 this.propTweens.push(newTween); 444 this.propTweens.push(newTween);
426 } 445 }
427 else { 446 else {
447
428 tempTiming = trackTiming.split("s"); 448 tempTiming = trackTiming.split("s");
429 tempTimingFloat = parseFloat(tempTiming[0]); 449 tempTimingFloat = parseFloat(tempTiming[0]);
430 this.trackDuration = tempTimingFloat * 1000; 450 this.trackDuration = tempTimingFloat * 1000;
@@ -481,6 +501,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
481 501
482 addPropAnimationRuleToElement:{ 502 addPropAnimationRuleToElement:{
483 value:function(tweenEvent){ 503 value:function(tweenEvent){
504
505 /* Adding the style property as an animation rule to the animatedElement */
506
484 var currentStyleValue, 507 var currentStyleValue,
485 currentAnimationNameString, 508 currentAnimationNameString,
486 newAnimationNames, 509 newAnimationNames,
@@ -490,6 +513,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
490 newIterationCount, 513 newIterationCount,
491 initRule; 514 initRule;
492 515
516 /* Retrieveing the current style value on the animatedElement */
493 currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); 517 currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
494 if (currentStyleValue == null) { 518 if (currentStyleValue == null) {
495 currentStyleValue = "1px"; 519 currentStyleValue = "1px";
@@ -515,6 +539,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
515 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); 539 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
516 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); 540 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
517 541
542 /* Creating the animation rule */
518 initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; 543 initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
519 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 544 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
520 this.insertPropTween(tweenEvent.offsetX); 545 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, {
163 handleEasingChoicesClick: { 163 handleEasingChoicesClick: {
164 value: function(event) { 164 value: function(event) {
165 event.stopPropagation(); 165 event.stopPropagation();
166 166
167 /* Un-highlight the old choice and highlight the new choice */
167 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); 168 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
168 event.target.classList.add("easing-selected"); 169 event.target.classList.add("easing-selected");
169 170
170 // Set the easing 171 /* Set the easing */
171 this.easing = event.target.dataset.ninjaEase; 172 this.easing = event.target.dataset.ninjaEase;
172 this.parentTween.easing = this.easing; 173 this.parentTween.easing = this.easing;
173 this.parentTween.tweenData.easing = this.easing; 174 this.parentTween.tweenData.easing = this.easing;