aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js8
-rw-r--r--js/panels/Timeline/Span.reel/Span.js6
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js128
-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.js55
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js4
8 files changed, 167 insertions, 94 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 66f39b5a..c18d6eff 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 },
@@ -465,11 +465,9 @@ 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.animationNamesString;
475 var newAnimationNames = currentAnimationNameString + "," + this.animationName; 473 var newAnimationNames = currentAnimationNameString + "," + this.animationName;
@@ -486,9 +484,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
486 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); 484 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
487 485
488 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; 486 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
489 console.log(initRule);
490 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 487 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
491
492 this.insertPropTween(tweenEvent.offsetX); 488 this.insertPropTween(tweenEvent.offsetX);
493 } 489 }
494 } 490 }
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 91ce1cfb..3c491a53 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -71,6 +71,8 @@ var Span = exports.Span = Montage.create(Component, {
71 newVal = "none"; 71 newVal = "none";
72 } 72 }
73 this._easing = newVal; 73 this._easing = newVal;
74 this.parentComponent.easing = this.easing;
75 this.parentComponent.tweenData.easing = this.easing;
74 this.parentComponent.setKeyframeEase(newVal); 76 this.parentComponent.setKeyframeEase(newVal);
75 this.needsDraw = true; 77 this.needsDraw = true;
76 } 78 }
@@ -180,7 +182,7 @@ var Span = exports.Span = Montage.create(Component, {
180 handleEasingChoicesClick: { 182 handleEasingChoicesClick: {
181 value: function(event) { 183 value: function(event) {
182 event.stopPropagation(); 184 event.stopPropagation();
183 185
184 // Remove the pointer to ourselves 186 // Remove the pointer to ourselves
185 //this.application.ninja.timeline.currentOpenSpanMenu = false; 187 //this.application.ninja.timeline.currentOpenSpanMenu = false;
186 188
@@ -190,6 +192,8 @@ var Span = exports.Span = Montage.create(Component, {
190 192
191 // Set the easing 193 // Set the easing
192 this.easing = event.target.dataset.ninjaEase; 194 this.easing = event.target.dataset.ninjaEase;
195 this.parentComponent.easing = this.easing;
196 this.parentComponent.tweenData.easing = this.easing;
193 197
194 // Unbind the event handler 198 // Unbind the event handler
195 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); 199 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 1c023fdb..470062ba 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -117,28 +117,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
117 if (value === this._currentDocument) { 117 if (value === this._currentDocument) {
118 return; 118 return;
119 } 119 }
120
121 if(!this._currentDocument && value.currentView === "design") {
122 this.enablePanel(true);
123 }
124
125 this._currentDocument = value; 120 this._currentDocument = value;
121
122 var boolDoc = false,
123 boolView = false;
124
125 // Should we enable the panel?
126 // Only if we have both a document and we're in design view.
127 if (typeof(value) !== "undefined") {
128 if (value.currentView === "design") {
129 // We are in design view.
130 boolView = true;
131 }
132 }
133 if (typeof(this._currentDocument) !== "undefined") {
134 // We have a document, or at least we have initialized the panel.
135 boolDoc = true;
136 }
126 137
127 if(!value) { 138 if(boolDoc === false) {
128 this._boolCacheArrays = false; 139 this._boolCacheArrays = false;
129 this.clearTimelinePanel(); 140 this.clearTimelinePanel();
130 this._boolCacheArrays = true; 141 this._boolCacheArrays = true;
131 this.enablePanel(false); 142 this.enablePanel(false);
132 } else if(this._currentDocument.currentView === "design") { 143 } else {
133 this._boolCacheArrays = false; 144 if(boolView === true) {
134 this.clearTimelinePanel(); 145 this._boolCacheArrays = false;
135 this._boolCacheArrays = true; 146 this.clearTimelinePanel();
136 147 this._boolCacheArrays = true;
137 // Rebind the document events for the new document context 148
138 this._bindDocumentEvents(); 149 // Rebind the document events for the new document context
139 150 this._bindDocumentEvents();
140 // Initialize the timeline for the document. 151
141 this.initTimelineForDocument(); 152 // Initialize the timeline for the document.
153 this.initTimelineForDocument();
154 this.enablePanel(true);
155 }
142 } 156 }
143 } 157 }
144 }, 158 },
@@ -595,7 +609,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
595 prepareForDraw:{ 609 prepareForDraw:{
596 value:function () { 610 value:function () {
597 this.initTimeline(); 611 this.initTimeline();
598
599 } 612 }
600 }, 613 },
601 614
@@ -726,11 +739,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
726 if (this._boolCacheArrays) { 739 if (this._boolCacheArrays) {
727 // ... but only if we're supposed to. 740 // ... but only if we're supposed to.
728 if(this.currentDocument) { 741 if(this.currentDocument) {
742 var i = 0,
743 hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length,
744 boolHash = false;
745
729 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; 746 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
730 this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; 747 this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
731 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; 748 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
732 this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; 749 this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
733 this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; 750 this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
751 for (i = 0; i < hashLength; i++ ) {
752 if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
753 this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers;
754 boolHash = true;
755 }
756 }
757 if (boolHash === false) {
758 var newHash = {};
759 newHash.containerUuid = this.currentDocument.model.domContainer.uuid;
760 newHash.arrLayers = this.arrLayers;
761 this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash);
762 }
734 } 763 }
735 this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected; 764 this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
736 } 765 }
@@ -748,6 +777,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
748 this.application.ninja.currentDocument.tlCurrentLayersSelected = false; 777 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
749 this.application.ninja.currentDocument.tlCurrentElementsSelected = [];