aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js13
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js20
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js25
-rw-r--r--js/panels/Timeline/Span.reel/Span.js6
-rw-r--r--js/panels/Timeline/Style.reel/Style.html2
-rw-r--r--js/panels/Timeline/Style.reel/Style.js6
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css52
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html6
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js201
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css36
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html21
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js88
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js7
15 files changed, 344 insertions, 147 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index ba6952aa..f7c936f7 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,9 +76,20 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
76 76
77 selectKeyframe:{ 77 selectKeyframe:{
78 value:function(){ 78 value:function(){
79 if(this.isSelected){
80 return;
81 }
82
83 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
84 var tweenID = this.parentComponent.tweenID;
85 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
86 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
87 return;
88 }
89
79 this.isSelected=true; 90 this.isSelected=true;
80 this.element.style.left = (this.position - 6) + "px"; 91 this.element.style.left = (this.position - 6) + "px";
81 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty 92 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
82 this.parentComponent.selectTween(); 93 this.parentComponent.selectTween();
83 } 94 }
84 }, 95 },
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 776d5ec8..b4833fa2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -325,6 +325,7 @@ var Layer = exports.Layer = Montage.create(Component, {
325 value: false 325 value: false
326 }, 326 },
327 isActive: { 327 isActive: {
328 serializable:true,
328 get: function() { 329 get: function() {
329 return this._isActive; 330 return this._isActive;
330 }, 331 },
@@ -752,12 +753,20 @@ var Layer = exports.Layer = Montage.create(Component, {
752 //defaultEventManager.dispatchEvent(newEvent); 753 //defaultEventManager.dispatchEvent(newEvent);
753 754
754 // Dispatch the event to the TimelineTrack component associated with this Layer. 755 // Dispatch the event to the TimelineTrack component associated with this Layer.
755 var myIndex = this.application.ninja.timeline.getActiveLayerIndex(), 756 var myIndex = false,
757 i = 0,
758 arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
756 arrTracks = document.querySelectorAll('[data-montage-id="track"]'); 759 arrTracks = document.querySelectorAll('[data-montage-id="track"]');
757 760
761 for (i = 0; i < arrLayersLength; i++) {
762 if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) {
763 myIndex = i;
764 }
765 }
766
758 if (myIndex !== false) { 767 if (myIndex !== false) {
759 arrTracks[myIndex].dispatchEvent(newEvent); 768 arrTracks[myIndex].dispatchEvent(newEvent);
760 } 769 }
761 } 770 }
762 }, 771 },
763 772
@@ -945,12 +954,14 @@ var Layer = exports.Layer = Montage.create(Component, {
945 this.isMainCollapsed = false; 954 this.isMainCollapsed = false;
946 } else { 955 } else {
947 this.isMainCollapsed = true; 956 this.isMainCollapsed = true;
957 this.application.ninja.timeline.synchScrollbars(43);
948 } 958 }
949 this.triggerOutgoingBinding(); 959 this.triggerOutgoingBinding();
950 } 960 }
951 }, 961 },
952 handlePositionCollapserClick : { 962 handlePositionCollapserClick : {
953 value: function(event) { 963 value: function(event) {
964 var myHeight = this.positionCollapser.element.offsetHeight;
954 this.positionCollapser.bypassAnimation = false; 965 this.positionCollapser.bypassAnimation = false;
955 this.bypassAnimation = false; 966 this.bypassAnimation = false;
956 this.layerData.bypassAnimation = false; 967 this.layerData.bypassAnimation = false;
@@ -958,12 +969,14 @@ var Layer = exports.Layer = Montage.create(Component, {
958 this.isPositionCollapsed = false; 969 this.isPositionCollapsed = false;
959 } else { 970 } else {
960 this.isPositionCollapsed = true; 971 this.isPositionCollapsed = true;
972 this.application.ninja.timeline.synchScrollbars(myHeight);
961 } 973 }
962 this.triggerOutgoingBinding(); 974 this.triggerOutgoingBinding();
963 } 975 }
964 }, 976 },
965 handleStyleCollapserClick : { 977 handleStyleCollapserClick : {
966 value: function(event) { 978 value: function(event) {
979 var myHeight = this.styleCollapser.element.offsetHeight;
967 this.styleCollapser.bypassAnimation = false; 980 this.styleCollapser.bypassAnimation = false;
968 this.bypassAnimation = false; 981 this.bypassAnimation = false;
969 this.layerData.bypassAnimation = false; 982 this.layerData.bypassAnimation = false;
@@ -971,6 +984,7 @@ var Layer = exports.Layer = Montage.create(Component, {
971 this.isStyleCollapsed = false; 984 this.isStyleCollapsed = false;
972 } else { 985 } else {
973 this.isStyleCollapsed = true; 986 this.isStyleCollapsed = true;
987 this.application.ninja.timeline.synchScrollbars(myHeight);
974 } 988 }
975 this.triggerOutgoingBinding(); 989 this.triggerOutgoingBinding();
976 } 990 }
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 66f39b5a..72d26e78 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -16,8 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
16 prepareForDraw:{ 16 prepareForDraw:{
17 value:function(){ 17 value:function(){
18 this.element.addEventListener("click", this, false); 18 this.element.addEventListener("click", this, false);
19 this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; 19 this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; 20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
21 this.ninjaStylesContoller = this.application.ninja.stylesController; 21 this.ninjaStylesContoller = this.application.ninja.stylesController;
22 } 22 }
23 }, 23 },
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
442 442
443 for (var i = 0; i < this.propTweens.length; i++) { 443 for (var i = 0; i < this.propTweens.length; i++) {
444 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); 444 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
445 // TODO - trackDur should be parseFloat rounded to significant digits 445 // trackDur should be parseFloat rounded to significant digits
446 var trackDur = parseInt(this.trackDuration); 446 var trackDur = parseInt(this.trackDuration);
447 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 447 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
448 var keyframePropertyString = " " + keyframePercent + " {"; 448 var keyframePropertyString = " " + keyframePercent + " {";
449 for(var prop in this.propTweens[i].tweenData.tweenedProperties){ 449 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
450 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop]; 450 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";";
451 } 451 }
452 keyframePropertyString += "}"; 452 keyframePropertyString += "}";
453 keyframeString += keyframePropertyString; 453 keyframeString += keyframePropertyString;
@@ -465,30 +465,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
465 if (currentStyleValue == null) { 465 if (currentStyleValue == null) {
466 currentStyleValue = "1px"; 466 currentStyleValue = "1px";
467 } 467 }
468 console.log(currentStyleValue);
469 468
470 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; 469 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
471 470
472
473 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; 471 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
474 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; 472 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString;
475 var newAnimationNames = currentAnimationNameString + "," + this.animationName; 473 var newAnimationNames = "";
474 if(currentAnimationNameString.length == 0){
475 newAnimationNames = this.animationName;
476 } else {
477 newAnimationNames = currentAnimationNameString + "," + this.animationName;
478 }
476 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 479 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
477 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; 480 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
478 var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); 481 var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count");
479 var newIterationCount = currentIterationCount + ",1";