aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html5
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js127
2 files changed, 78 insertions, 54 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 158d666e..26d045d6 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -62,6 +62,11 @@
62 "boundObject" : {"@": "tweenRepetition"}, 62 "boundObject" : {"@": "tweenRepetition"},
63 "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", 63 "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated",
64 "oneway" : false 64 "oneway" : false
65 },
66 "isClearing" : {
67 "boundObject" : {"@": "tweenRepetition"},
68 "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing",
69 "oneway" : false
65 } 70 }
66 } 71 }
67 }, 72 },
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 0c5121cd..43cd7477 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -331,10 +331,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
331 _styleCollapser:{ 331 _styleCollapser:{
332 value:null 332 value:null
333 }, 333 },
334 _openDocRedrawCheck:{
335 value:true,
336 writable:true
337 },
338 prepareForDraw:{ 334 prepareForDraw:{
339 value:function () { 335 value:function () {
340 this.init(); 336 this.init();
@@ -364,10 +360,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
364 360
365 didDraw:{ 361 didDraw:{
366 value:function () { 362 value:function () {
367 if(this.application.ninja.currentDocument.documentRoot.children[0]){ 363 if(!this.application.ninja.documentController.creatingNewFile){
368 if (this._openDocRedrawCheck) { 364 if(this.application.ninja.currentDocument.documentRoot.children[0]){
369 this.retrieveStoredTweens(); 365 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
370 this._openDocRedrawCheck = false; 366 if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){
367 this.retrieveStoredTweens();
368 }
371 } 369 }
372 } 370 }
373 } 371 }
@@ -379,7 +377,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
379 // This needs to move to a keyboard shortcut that is TBD 377 // This needs to move to a keyboard shortcut that is TBD
380 378
381 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 379 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
382 //this.application.ninja.timeline.selectLayer(selectIndex);
383 380
384 if (ev.shiftKey) { 381 if (ev.shiftKey) {
385 if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { 382 if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) {
@@ -462,49 +459,66 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
462 459
463 retrieveStoredTweens:{ 460 retrieveStoredTweens:{
464 value:function () { 461 value:function () {
465 var percentValue, fraction, splitValue, i = 0; 462 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0;
466
467 this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0];
468 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
469 this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
470 if(this.animationDuration){
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;
476
477 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
478 while (this.currentKeyframeRule[i]) {
479 var newTween = {};
480
481 if (this.currentKeyframeRule[i].keyText === "0%") {
482 newTween.spanWidth = 0;
483 newTween.keyFramePosition = 0;
484 newTween.keyFrameMillisec = 0;
485 newTween.tweenID = 0;
486 newTween.spanPosition = 0;
487 this.tweens.push(newTween);
488
489 }
490 else {
491 percentValue = this.currentKeyframeRule[i].keyText;
492 splitValue = percentValue.split("%");
493 fraction = splitValue[0] / 100;
494 this.currentMilliSec = fraction * this.trackDuration[0] * 1000;
495 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
496 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
497 newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition;
498 newTween.keyFramePosition = this.clickPos;
499 newTween.keyFrameMillisec = this.currentMilliSec;
500 newTween.tweenID = this.nextKeyframe;
501 newTween.spanPosition = this.clickPos - newTween.spanWidth;
502 this.tweens.push(newTween);
503
504 463
464 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
465 this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
466 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0];
467 if(this.animatedElement!==undefined){
468 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
469 if(this.animationName){
470 this.animationDuration = 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;
476
477 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
478 while (this.currentKeyframeRule[i]) {
479 var newTween = {};
480
481 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
482 topOffSetAttribute = offsetAttribute[3].split("px");
483 leftOffsetAttribute = offsetAttribute[5].split("px");
484
485 parseInt(topOffSetAttribute[0]);
486 parseInt(leftOffsetAttribute[0]);
487
488 if (this.currentKeyframeRule[i].keyText === "0%") {
489 newTween.spanWidth = 0;
490 newTween.keyFramePosition = 0;
491 newTween.keyFrameMillisec = 0;
492 newTween.tweenID = 0;
493 newTween.spanPosition = 0;
494 newTween.tweenedProperties = [];
495 newTween.tweenedProperties["top"] = topOffSetAttribute[0];
496 newTween.tweenedProperties["left"] = leftOffsetAttribute[0];
497 this.tweens.push(newTween);
498
499 }
500 else {
501 percentValue = this.currentKeyframeRule[i].keyText;
502 splitValue = percentValue.split("%");
503 fraction = splitValue[0] / 100;
504 this.currentMilliSec = fraction * this.trackDuration[0] * 1000;
505 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
506 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
507 newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition;
508 newTween.keyFramePosition = this.clickPos;
509 newTween.keyFrameMillisec = this.currentMilliSec;
510 newTween.tweenID = this.nextKeyframe;
511 newTween.spanPosition = this.clickPos - newTween.spanWidth;
512 newTween.tweenedProperties=[];
513 newTween.tweenedProperties["top"] = topOffSetAttribute[0];
514 newTween.tweenedProperties["left"] = leftOffsetAttribute[0];
515 this.tweens.push(newTween);
516
517
518 }
519 i++;
520 this.nextKeyframe += 1;
505 } 521 }
506 i++;
507 this.nextKeyframe += 1;
508 } 522 }
509 } 523 }
510 else{ 524 else{
@@ -518,7 +532,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
518 this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; 532 this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop;
519 this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; 533 this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft;
520 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 534 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
521 this.animationName = "animation_" + this.animatedElement.className; 535 this.animationName = "animation_" + this.animatedElement.classList[0];
522 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 536 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
523 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 537 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
524 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); 538 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite");
@@ -538,7 +552,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
538 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 552 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
539 553
540 for (var i = 0; i < this.tweens.length; i++) { 554 for (var i = 0; i < this.tweens.length; i++) {
541 var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; 555 var keyMill = parseInt(this.tweens[i].keyFrameMillisec);
556 // TODO - trackDur should be parseFloat rounded to significant digits
557 var trackDur = parseInt(this.trackDuration);
558 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
542 var keyframePropertyString = " " + keyframePercent + " {";