diff options
Diffstat (limited to 'js/panels/Timeline')
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; |