diff options
author | Jose Antonio Marquez Russo | 2012-03-08 10:49:06 -0800 |
---|---|---|
committer | Jose Antonio Marquez Russo | 2012-03-08 10:49:06 -0800 |
commit | 85f21e020ac281e8e545df1cf269034de99a00b1 (patch) | |
tree | 441834fa8b02b1cc2a970210020d27e06d2c99be /js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |
parent | d9813946dc28d8c28033a68b68300b9d9eda115c (diff) | |
parent | 11a6f18e274d7232cdbb8f6e9e65e0a5ab756451 (diff) | |
download | ninja-85f21e020ac281e8e545df1cf269034de99a00b1.tar.gz |
Merge pull request #29 from ericmueller/integration
Integration
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 116 |
1 files changed, 100 insertions, 16 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 9894e6f9..7120298c 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 | } |
@@ -89,6 +89,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
89 | } | 89 | } |
90 | } | 90 | } |
91 | }, | 91 | }, |
92 | _animateCollapser : { | ||
93 | serializable: true, | ||
94 | value: false | ||
95 | }, | ||
96 | animateCollapser : { | ||
97 | serializable: true, | ||
98 | get: function() { | ||
99 | return this._animateCollapser; | ||
100 | }, | ||
101 | set: function(newVal) { | ||
102 | this._animateCollapser = newVal; | ||
103 | } | ||
104 | }, | ||
92 | 105 | ||
93 | _arrStyleTracks : { | 106 | _arrStyleTracks : { |
94 | serializable:true, | 107 | serializable:true, |
@@ -345,6 +358,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
345 | draw:{ | 358 | draw:{ |
346 | value:function () { | 359 | value:function () { |
347 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 360 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
361 | return; | ||
348 | if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { | 362 | if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { |
349 | this._mainCollapser.toggle(false); | 363 | this._mainCollapser.toggle(false); |
350 | } | 364 | } |
@@ -390,7 +404,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
390 | this.handleNewTween(ev); | 404 | this.handleNewTween(ev); |
391 | } | 405 | } |
392 | } else { | 406 | } else { |
393 | alert("There must be exactly one element in an animated layer.") | 407 | console.log("There must be exactly one element in an animated layer."); |
394 | } | 408 | } |
395 | } | 409 | } |
396 | } | 410 | } |
@@ -439,7 +453,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
439 | this.tweens.push(newTween); | 453 | this.tweens.push(newTween); |
440 | 454 | ||
441 | // update the animation duration | 455 | // update the animation duration |
442 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; | 456 | var animationDuration = (this.trackDuration / 1000) + "s"; |
443 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 457 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
444 | this.nextKeyframe += 1; | 458 | this.nextKeyframe += 1; |
445 | } | 459 | } |
@@ -449,15 +463,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
449 | 463 | ||
450 | splitTween:{ | 464 | splitTween:{ |
451 | value:function (ev) { | 465 | value:function (ev) { |
452 | alert("Splitting an existing span with a new keyframe is not yet supported."); | 466 | 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 | } | 467 | } |
455 | }, | 468 | }, |
456 | 469 | ||
457 | retrieveStoredTweens:{ | 470 | retrieveStoredTweens:{ |
458 | value:function () { | 471 | value:function () { |
459 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute | 472 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; |
460 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; | 473 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; |
461 | 474 | ||
462 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 475 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
463 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 476 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; |
@@ -490,12 +503,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
490 | newTween.tweenedProperties["top"] = tempTopOffset; | 503 | newTween.tweenedProperties["top"] = tempTopOffset; |
491 | newTween.tweenedProperties["left"] = tempLeftOffset; | 504 | newTween.tweenedProperties["left"] = tempLeftOffset; |
492 | this.tweens.push(newTween); | 505 | this.tweens.push(newTween); |
493 | |||
494 | } | 506 | } |
495 | else { | 507 | else { |
496 | tempTiming = trackTiming.split("s"); | 508 | tempTiming = trackTiming.split("s"); |
497 | tempTimingInt = parseInt(tempTiming[0]); | 509 | tempTimingFloat = parseFloat(tempTiming[0]); |
498 | this.trackDuration = tempTimingInt *1000; | 510 | this.trackDuration = tempTimingFloat *1000; |
499 | percentValue = this.currentKeyframeRule[i].keyText; | 511 | percentValue = this.currentKeyframeRule[i].keyText; |
500 | splitValue = percentValue.split("%"); | 512 | splitValue = percentValue.split("%"); |
501 | fraction = splitValue[0] / 100; | 513 | fraction = splitValue[0] / 100; |
@@ -511,8 +523,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
511 | newTween.tweenedProperties["top"] = tempTopOffset; | 523 | newTween.tweenedProperties["top"] = tempTopOffset; |
512 | newTween.tweenedProperties["left"] = tempLeftOffset; | 524 | newTween.tweenedProperties["left"] = tempLeftOffset; |
513 | this.tweens.push(newTween); | 525 | this.tweens.push(newTween); |
514 | |||
515 | |||
516 | } | 526 | } |
517 | this.nextKeyframe += 1; | 527 | this.nextKeyframe += 1; |
518 | } | 528 | } |
@@ -554,8 +564,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
554 | var trackDur = parseInt(this.trackDuration); | 564 | var trackDur = parseInt(this.trackDuration); |
555 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; | 565 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; |
556 | var keyframePropertyString = " " + keyframePercent + " {"; | 566 | var keyframePropertyString = " " + keyframePercent + " {"; |
557 | keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; | 567 | for(var prop in this.tweens[i].tweenedProperties){ |
558 | keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; | 568 | keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; |
569 | } | ||
559 | keyframePropertyString += "}"; | 570 | keyframePropertyString += "}"; |
560 | keyframeString += keyframePropertyString; | 571 | keyframeString += keyframePropertyString; |
561 | } | 572 | } |
@@ -591,9 +602,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
591 | this._mainCollapser.element = this.myContent; | 602 | this._mainCollapser.element = this.myContent; |
592 | this._mainCollapser.isCollapsed = this.isMainCollapsed; | 603 | this._mainCollapser.isCollapsed = this.isMainCollapsed; |
593 | this._mainCollapser.isAnimated = true; | 604 | this._mainCollapser.isAnimated = true; |
605 | Object.defineBinding(this._mainCollapser, "isToggling", { | ||
606 | boundObject: this, | ||
607 | boundObjectPropertyPath: "isMainCollapsed", | ||
608 | oneway: false | ||
609 | }); | ||
610 | Object.defineBinding(this._mainCollapser, "bypassAnimation", { | ||
611 | boundObject: this, | ||
612 | boundObjectPropertyPath: "animateCollapser", | ||
613 | oneway: false, | ||
614 | boundValueMutator: function(value) { | ||
615 | return !value; | ||
616 | } | ||
617 | }); | ||
618 | |||
619 | /* | ||
594 | this._mainCollapser.labelClickEvent = function () { | 620 | this._mainCollapser.labelClickEvent = function () { |
595 | that.isMainCollapsed = that._mainCollapser.isCollapsed; | 621 | that.isMainCollapsed = that._mainCollapser.isCollapsed; |
596 | }; | 622 | }; |
623 | */ | ||
597 | //this._mainCollapser.needsDraw = true; | 624 | //this._mainCollapser.needsDraw = true; |
598 | 625 | ||
599 | this._positionCollapser = Collapser.create(); | 626 | this._positionCollapser = Collapser.create(); |
@@ -604,9 +631,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
604 | this._positionCollapser.element = this.contentPosition; | 631 | this._positionCollapser.element = this.contentPosition; |
605 | this._positionCollapser.isCollapsed = this.isPositionCollapsed; | 632 | this._positionCollapser.isCollapsed = this.isPositionCollapsed; |
606 | this._positionCollapser.isAnimated = true; | 633 | this._positionCollapser.isAnimated = true; |
634 | Object.defineBinding(this._positionCollapser, "isToggling", { | ||
635 | boundObject: this, | ||
636 | boundObjectPropertyPath: "isPositionCollapsed", | ||
637 | oneway: false | ||
638 | }); | ||
639 | |||
640 | |||
641 | /* | ||
607 | this._positionCollapser.labelClickEvent = function () { | 642 | this._positionCollapser.labelClickEvent = function () { |
608 | that.isPositionCollapsed = that._positionCollapser.isCollapsed; | 643 | that.isPositionCollapsed = that._positionCollapser.isCollapsed; |
609 | }; | 644 |