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.js138
1 files changed, 58 insertions, 80 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 9894e6f9..669dabef 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
33 33
34 // Are the various collapsers collapsed or not 34 // Are the various collapsers collapsed or not
35 _isMainCollapsed:{ 35 _isMainCollapsed:{
36 value:"" 36 value: true
37 }, 37 },
38 isMainCollapsed:{ 38 isMainCollapsed:{
39 get:function () { 39 get:function () {
40 return this._isMainCollapsed; 40 return this._isMainCollapsed;
41 }, 41 },
42 set:function (newVal) { 42 set:function (newVal) {
43 this.log('TimelineTrack.js: isMainCollapsed: ', newVal);
43 if (newVal !== this._isMainCollapsed) { 44 if (newVal !== this._isMainCollapsed) {
44 this._isMainCollapsed = newVal; 45 this._isMainCollapsed = newVal;
45 this.needsDraw = true;
46 } 46 }
47 47
48 } 48 }
@@ -57,7 +57,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
57 set:function (newVal) { 57 set:function (newVal) {
58 if (newVal !== this._isTransformCollapsed) { 58 if (newVal !== this._isTransformCollapsed) {
59 this._isTransformCollapsed = newVal; 59 this._isTransformCollapsed = newVal;
60 this.needsDraw = true;
61 } 60 }
62 } 61 }
63 }, 62 },
@@ -71,7 +70,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
71 set:function (newVal) { 70 set:function (newVal) {
72 if (newVal !== this._isPositionCollapsed) { 71 if (newVal !== this._isPositionCollapsed) {
73 this._isPositionCollapsed = newVal; 72 this._isPositionCollapsed = newVal;
74 this.needsDraw = true;
75 } 73 }
76 } 74 }
77 }, 75 },
@@ -85,10 +83,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
85 set:function (newVal) { 83 set:function (newVal) {
86 if (newVal !== this._isStyleCollapsed) { 84 if (newVal !== this._isStyleCollapsed) {
87 this._isStyleCollapsed = newVal; 85 this._isStyleCollapsed = newVal;
88 this.needsDraw = true;
89 } 86 }
90 } 87 }
91 }, 88 },
89 _bypassAnimation : {
90 serializable: true,
91 value: false
92 },
93 bypassAnimation : {
94 serializable: true,
95 get: function() {
96 return this._bypassAnimation;
97 },
98 set: function(newVal) {
99 //console.log("timelinetrack bypassAnimation setter " + newVal)
100 this._bypassAnimation = newVal;
101 }
102 },
92 103
93 _arrStyleTracks : { 104 _arrStyleTracks : {
94 serializable:true, 105 serializable:true,
@@ -345,6 +356,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
345 draw:{ 356 draw:{
346 value:function () { 357 value:function () {
347 this.ninjaStylesContoller = this.application.ninja.stylesController; 358 this.ninjaStylesContoller = this.application.ninja.stylesController;
359 return;
348 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { 360 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
349 this._mainCollapser.toggle(false); 361 this._mainCollapser.toggle(false);
350 } 362 }
@@ -390,7 +402,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
390 this.handleNewTween(ev); 402 this.handleNewTween(ev);
391 } 403 }
392 } else { 404 } else {
393 alert("There must be exactly one element in an animated layer.") 405 console.log("There must be exactly one element in an animated layer.");
394 } 406 }
395 } 407 }
396 } 408 }
@@ -439,7 +451,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
439 this.tweens.push(newTween); 451 this.tweens.push(newTween);
440 452
441 // update the animation duration 453 // update the animation duration
442 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 454 var animationDuration = (this.trackDuration / 1000) + "s";
443 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 455 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
444 this.nextKeyframe += 1; 456 this.nextKeyframe += 1;
445 } 457 }
@@ -449,15 +461,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
449 461
450 splitTween:{ 462 splitTween:{
451 value:function (ev) { 463 value:function (ev) {
452 alert("Splitting an existing span with a new keyframe is not yet supported."); 464 console.log("Splitting an existing span with a new keyframe is not yet supported.");
453 //console.log("splitting tween at span offsetX: " + ev.offsetX);
454 } 465 }
455 }, 466 },
456 467
457 retrieveStoredTweens:{ 468 retrieveStoredTweens:{
458 value:function () { 469 value:function () {
459 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute 470 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute;
460 var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; 471 var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0;
461 472
462 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 473 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
463 this.application.ninja.timeline.arrLayers[selectedIndex].created=true; 474 this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
@@ -490,12 +501,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
490 newTween.tweenedProperties["top"] = tempTopOffset; 501 newTween.tweenedProperties["top"] = tempTopOffset;
491 newTween.tweenedProperties["left"] = tempLeftOffset; 502 newTween.tweenedProperties["left"] = tempLeftOffset;
492 this.tweens.push(newTween); 503 this.tweens.push(newTween);
493
494 } 504 }
495 else { 505 else {
496 tempTiming = trackTiming.split("s"); 506 tempTiming = trackTiming.split("s");
497 tempTimingInt = parseInt(tempTiming[0]); 507 tempTimingFloat = parseFloat(tempTiming[0]);
498 this.trackDuration = tempTimingInt *1000; 508 this.trackDuration = tempTimingFloat *1000;
499 percentValue = this.currentKeyframeRule[i].keyText; 509 percentValue = this.currentKeyframeRule[i].keyText;
500 splitValue = percentValue.split("%"); 510 splitValue = percentValue.split("%");
501 fraction = splitValue[0] / 100; 511 fraction = splitValue[0] / 100;
@@ -511,8 +521,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
511 newTween.tweenedProperties["top"] = tempTopOffset; 521 newTween.tweenedProperties["top"] = tempTopOffset;
512 newTween.tweenedProperties["left"] = tempLeftOffset; 522 newTween.tweenedProperties["left"] = tempLeftOffset;
513 this.tweens.push(newTween); 523 this.tweens.push(newTween);
514
515
516 } 524 }
517 this.nextKeyframe += 1; 525 this.nextKeyframe += 1;
518 } 526 }
@@ -554,8 +562,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
554 var trackDur = parseInt(this.trackDuration); 562 var trackDur = parseInt(this.trackDuration);
555 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 563 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
556 var keyframePropertyString = " " + keyframePercent + " {"; 564 var keyframePropertyString = " " + keyframePercent + " {";
557 keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; 565 for(var prop in this.tweens[i].tweenedProperties){
558 keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; 566 keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;";
567 }
559 keyframePropertyString += "}"; 568 keyframePropertyString += "}";
560 keyframeString += keyframePropertyString; 569 keyframeString += keyframePropertyString;
561 } 570 }
@@ -573,70 +582,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
573 582
574 this.arrPositionTracks = [0, 1]; 583 this.arrPositionTracks = [0, 1];
575 this.arrTransformTracks = [0, 1, 2, 3, 4]; 584 this.arrTransformTracks = [0, 1, 2, 3, 4];
576
577 this.label = this.element.querySelector(".label-main");
578 this.myContent = this.element.querySelector(".content-main");
579 this.labelPosition = this.element.querySelector(".label-position");
580 this.contentPosition = this.element.querySelector(".content-position");
581 this.labelTransform = this.element.querySelector(".label-transform");
582 this.contentTransform = this.element.querySelector(".content-transform");
583 this.labelStyles = this.element.querySelector(".label-styles");
584 this.contentStyles = this.element.querySelector(".content-styles");
585
586 this._mainCollapser = Collapser.create();
587 this._mainCollapser.clicker = this.label;
588 this._mainCollapser.myContent = this.myContent;
589 this._mainCollapser.contentHeight = 60;
590 this._mainCollapser.isLabelClickable = false;
591 this._mainCollapser.element = this.myContent;
592 this._mainCollapser.isCollapsed = this.isMainCollapsed;
593 this._mainCollapser.isAnimated = true;
594 this._mainCollapser.labelClickEvent = function () {
595 that.isMainCollapsed = that._mainCollapser.i