aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js82
1 files changed, 39 insertions, 43 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bf97c0fd..9894e6f9 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -229,6 +229,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
229 }, 229 },
230 set:function (val) { 230 set:function (val) {
231 this._trackDuration = val; 231 this._trackDuration = val;
232 if(this._trackDuration > this.application.ninja.timeline.masterDuration){
233 this.application.ninja.timeline.masterDuration = this._trackDuration;
234 }
232 } 235 }
233 }, 236 },
234 237
@@ -405,18 +408,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
405 408
406 insertTween:{ 409 insertTween:{
407 value:function (clickPos) { 410 value:function (clickPos) {
408
409 // calculate new tween's keyframe milliseconds by clickPos 411 // calculate new tween's keyframe milliseconds by clickPos
410 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 412 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
411 var currentMillisec = currentMillisecPerPixel * clickPos; 413 var currentMillisec = currentMillisecPerPixel * clickPos;
412 414
413 // need to check timeline master duration if greater than this track duration 415 // need to check timeline master duration if greater than this track duration
414 this.trackDuration = currentMillisec; 416 this.trackDuration = currentMillisec;
415
416 if(this.trackDuration > this.application.ninja.timeline.masterDuration){
417 this.application.ninja.timeline.masterDuration = this.trackDuration;
418 }
419
420 var newTween = {}; 417 var newTween = {};
421 418
422 if (clickPos == 0) { 419 if (clickPos == 0) {
@@ -444,9 +441,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
444 // update the animation duration 441 // update the animation duration
445 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 442 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
446 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 443 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
447
448 this.nextKeyframe += 1; 444 this.nextKeyframe += 1;
449 } 445 }
446 this.application.ninja.documentController.activeDocument.needsSave = true;
450 } 447 }
451 }, 448 },
452 449
@@ -459,7 +456,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
459 456
460 retrieveStoredTweens:{ 457 retrieveStoredTweens:{
461 value:function () { 458 value:function () {
462 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; 459 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute
460 var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0;
463 461
464 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 462 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
465 this.application.ninja.timeline.arrLayers[selectedIndex].created=true; 463 this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
@@ -467,23 +465,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
467 if(this.animatedElement!==undefined){ 465 if(this.animatedElement!==undefined){
468 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); 466 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
469 if(this.animationName){ 467 if(this.animationName){
470 this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 468 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
471 this.trackDuration = this.animationDuration.split("s");
472 this.currentMilliSec = this.trackDuration[0] * 1000;
473 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
474 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
475 this.nextKeyframe = 0; 469 this.nextKeyframe = 0;
476 470
477 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); 471 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
478 while (this.currentKeyframeRule[i]) { 472
473 for (i =0; this.currentKeyframeRule[i] ;i++) {
479 var newTween = {}; 474 var newTween = {};
480 475
481 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); 476 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
482 topOffSetAttribute = offsetAttribute[3].split("px"); 477 topOffSetAttribute = offsetAttribute[3].split("px");
483 leftOffsetAttribute = offsetAttribute[5].split("px"); 478 leftOffsetAttribute = offsetAttribute[5].split("px");
484 479
485 parseInt(topOffSetAttribute[0]); 480 var tempTopOffset = parseInt(topOffSetAttribute[0]);
486 parseInt(leftOffsetAttribute[0]); 481 var tempLeftOffset =parseInt(leftOffsetAttribute[0]);
487 482
488 if (this.currentKeyframeRule[i].keyText === "0%") { 483 if (this.currentKeyframeRule[i].keyText === "0%") {
489 newTween.spanWidth = 0; 484 newTween.spanWidth = 0;
@@ -492,39 +487,38 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
492 newTween.tweenID = 0; 487 newTween.tweenID = 0;
493 newTween.spanPosition = 0; 488 newTween.spanPosition = 0;
494 newTween.tweenedProperties = []; 489 newTween.tweenedProperties = [];
495 newTween.tweenedProperties["top"] = topOffSetAttribute[0]; 490 newTween.tweenedProperties["top"] = tempTopOffset;
496 newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; 491 newTween.tweenedProperties["left"] = tempLeftOffset;
497 this.tweens.push(newTween); 492 this.tweens.push(newTween);
498 493
499 } 494 }
500 else { 495 else {
496 tempTiming = trackTiming.split("s");
497 tempTimingInt = parseInt(tempTiming[0]);
498 this.trackDuration = tempTimingInt *1000;
501 percentValue = this.currentKeyframeRule[i].keyText; 499 percentValue = this.currentKeyframeRule[i].keyText;
502 splitValue = percentValue.split("%"); 500 splitValue = percentValue.split("%");
503 fraction = splitValue[0] / 100; 501 fraction = splitValue[0] / 100;
504 this.currentMilliSec = fraction * this.trackDuration[0] * 1000; 502 currentMilliSec = fraction * this.trackDuration;
505 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 503 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
506 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; 504 clickPosition = currentMilliSec / currentMilliSecPerPixel;
507 newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; 505 newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition;
508 newTween.keyFramePosition = this.clickPos; 506 newTween.keyFramePosition = clickPosition;
509 newTween.keyFrameMillisec = this.currentMilliSec; 507 newTween.keyFrameMillisec = currentMilliSec;
510 newTween.tweenID = this.nextKeyframe; 508 newTween.tweenID = this.nextKeyframe;
511 newTween.spanPosition = this.clickPos - newTween.spanWidth; 509 newTween.spanPosition =clickPosition - newTween.spanWidth;
512 newTween.tweenedProperties=[]; 510 newTween.tweenedProperties=[];
513 newTween.tweenedProperties["top"] = topOffSetAttribute[0]; 511 newTween.tweenedProperties["top"] = tempTopOffset;
514 newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; 512 newTween.tweenedProperties["left"] = tempLeftOffset;
515 this.tweens.push(newTween); 513 this.tweens.push(newTween);
516 514
517 515
518 } 516 }
519 i++;
520 this.nextKeyframe += 1; 517 this.nextKeyframe += 1;
521 } 518 }
522 this.isTrackAnimated = true; 519 this.isTrackAnimated = true;
523 } 520 }
524 } 521 }
525 else{
526 return;
527 }
528 } 522 }
529 }, 523 },
530 524
@@ -536,7 +530,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
536 this.animationName = "animation_" + this.animatedElement.classList[0]; 530 this.animationName = "animation_" + this.animatedElement.classList[0];
537 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 531 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
538 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 532 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
539 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); 533 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
534 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
535 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
540 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;} }"; 536 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;} }";
541 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 537 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
542 this.insertTween(tweenEvent.offsetX); 538 this.insertTween(tweenEvent.offsetX);
@@ -566,6 +562,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
566 keyframeString += " }"; 562 keyframeString += " }";
567 // set the keyframe string as the new rule 563 // set the keyframe string as the new rule
568 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); 564 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
565 this.application.ninja.documentController.activeDocument.needsSave = true;
569 } 566 }
570 }, 567 },
571 568
@@ -591,55 +588,54 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
591 this._mainCollapser.myContent = this.myContent; 588 this._mainCollapser.myContent = this.myContent;
592 this._mainCollapser.contentHeight = 60; 589 this._mainCollapser.contentHeight = 60;
593 this._mainCollapser.isLabelClickable = false;