diff options
Diffstat (limited to 'js/panels')
11 files changed, 217 insertions, 32 deletions
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 3cbd4369..003724bb 100755 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js | |||
@@ -45,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, { | |||
45 | }, | 45 | }, |
46 | 46 | ||
47 | initPanelOrder: { | 47 | initPanelOrder: { |
48 | value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] | 48 | value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] |
49 | }, | 49 | }, |
50 | 50 | ||
51 | panelOrder: { | 51 | panelOrder: { |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e75b4d0f..d50360e6 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -509,7 +509,6 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
509 | this.styleCollapser.bypassAnimation = true; | 509 | this.styleCollapser.bypassAnimation = true; |
510 | this.styleCollapser.toggle(); | 510 | this.styleCollapser.toggle(); |
511 | } | 511 | } |
512 | |||
513 | if (this.isSelected) { | 512 | if (this.isSelected) { |
514 | this.element.classList.add("selected"); | 513 | this.element.classList.add("selected"); |
515 | } else { | 514 | } else { |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 92adee05..1aa9a725 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -32,7 +32,8 @@ | |||
32 | "timetext" : {"#": "time_text"}, | 32 | "timetext" : {"#": "time_text"}, |
33 | "timebar" : {"#": "time_bar"}, | 33 | "timebar" : {"#": "time_bar"}, |
34 | "container_tracks" : {"#" : "container-tracks"}, | 34 | "container_tracks" : {"#" : "container-tracks"}, |
35 | "end_hottext" : {"@" : "endHottext"} | 35 | "end_hottext" : {"@" : "endHottext"}, |
36 | "getme" : {"#" : "getme"} | ||
36 | } | 37 | } |
37 | }, | 38 | }, |
38 | 39 | ||
@@ -284,7 +285,7 @@ | |||
284 | 285 | ||
285 | <div id="user_layers" class="userlayers"> | 286 | <div id="user_layers" class="userlayers"> |
286 | <div id="master_layer" class="masterlayer"> | 287 | <div id="master_layer" class="masterlayer"> |
287 | <div>Master Layer</div> | 288 | <div id="getme">Master Layer</div> |
288 | </div> | 289 | </div> |
289 | <div id="container-layers"> | 290 | <div id="container-layers"> |
290 | <div id="container-layer"></div> | 291 | <div id="container-layer"></div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d7d5328e..81415951 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -28,6 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
28 | }, | 28 | }, |
29 | set:function (newVal) { | 29 | set:function (newVal) { |
30 | this._arrLayers = newVal; | 30 | this._arrLayers = newVal; |
31 | this.application.ninja.currentDocument.tlArrLayers = newVal; | ||
31 | } | 32 | } |
32 | }, | 33 | }, |
33 | 34 | ||
@@ -99,6 +100,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
99 | }, | 100 | }, |
100 | set:function (newVal) { | 101 | set:function (newVal) { |
101 | this._arrTracks = newVal; | 102 | this._arrTracks = newVal; |
103 | this.application.ninja.currentDocument.tlArrTracks = newVal; | ||
102 | } | 104 | } |
103 | }, | 105 | }, |
104 | 106 | ||
@@ -171,12 +173,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
171 | /* === BEGIN: Draw cycle === */ | 173 | /* === BEGIN: Draw cycle === */ |
172 | prepareForDraw:{ | 174 | prepareForDraw:{ |
173 | value:function () { | 175 | value:function () { |
174 | this.eventManager.addEventListener( "onOpenDocument", this, false); | 176 | this.initTimeline(); |
177 | this.eventManager.addEventListener("onOpenDocument", this, false); | ||
178 | this.eventManager.addEventListener("closeDocument", this, false); | ||
179 | this.eventManager.addEventListener("switchDocument", this, false); | ||
175 | } | 180 | } |
176 | }, | 181 | }, |
177 | 182 | ||
178 | handleOnOpenDocument:{ | 183 | handleOnOpenDocument:{ |
179 | value:function(){ | 184 | value:function(){ |
185 | this.clearTimelinePanel(); | ||
180 | this.eventManager.addEventListener("deleteLayerClick", this, false); | 186 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
181 | this.eventManager.addEventListener("newLayer", this, false); | 187 | this.eventManager.addEventListener("newLayer", this, false); |
182 | this.eventManager.addEventListener("deleteLayer", this, false); | 188 | this.eventManager.addEventListener("deleteLayer", this, false); |
@@ -194,6 +200,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
194 | 200 | ||
195 | } | 201 | } |
196 | }, | 202 | }, |
203 | |||
204 | handleCloseDocument: { | ||
205 | value: function(event) { | ||
206 | this.clearTimelinePanel(); | ||
207 | } | ||
208 | }, | ||
209 | |||
210 | handleSwitchDocument : { | ||
211 | value: function(event) { | ||
212 | // Handle document change. | ||
213 | this.handleOnOpenDocument(); | ||
214 | } | ||
215 | }, | ||
216 | |||
197 | willDraw:{ | 217 | willDraw:{ |
198 | value:function () { | 218 | value:function () { |
199 | if (this._isLayer) { | 219 | if (this._isLayer) { |
@@ -205,10 +225,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
205 | /* === END: Draw cycle === */ | 225 | /* === END: Draw cycle === */ |
206 | 226 | ||
207 | /* === BEGIN: Controllers === */ | 227 | /* === BEGIN: Controllers === */ |
208 | initTimelineView:{ | 228 | initTimeline : { |
209 | value:function () { | 229 | value: function() { |
210 | var myIndex; | 230 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. |
211 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 231 | this.layout_tracks = this.element.querySelector(".layout-tracks"); |
212 | this.layout_markers = this.element.querySelector(".layout_markers"); | 232 | this.layout_markers = this.element.querySelector(".layout_markers"); |
213 | 233 | ||
214 | this.newlayer_button.identifier = "addLayer"; | 234 | this.newlayer_button.identifier = "addLayer"; |
@@ -219,8 +239,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
219 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 239 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
220 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 240 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
221 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); | 241 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); |
222 | 242 | ||
223 | this.drawTimeMarkers(); | 243 | } |
244 | }, | ||
245 | initTimelineView:{ | ||
246 | value:function () { | ||
247 | var myIndex; | ||
248 | |||
249 | this.drawTimeMarkers(); | ||
224 | 250 | ||
225 | this._hashKey = "123"; | 251 | this._hashKey = "123"; |
226 | _firstLayerDraw = false; | 252 | _firstLayerDraw = false; |
@@ -230,6 +256,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
230 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | 256 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) |
231 | { | 257 | { |
232 | this._openDoc=true; | 258 | this._openDoc=true; |
259 | this._captureSelection=true; | ||
233 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | 260 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) |
234 | myIndex++; | 261 | myIndex++; |
235 | } | 262 | } |
@@ -249,18 +276,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
249 | 276 | ||
250 | clearTimelinePanel : { | 277 | clearTimelinePanel : { |
251 | value: function() { | 278 | value: function() { |
252 | console.log('clearing timeline...') | 279 | // Remove events |
253 | this.arrTracks = null; | 280 | this.eventManager.removeEventListener("deleteLayerClick", this, false); |
254 | this.arrLayers = null; | 281 | this.eventManager.removeEventListener("newLayer", this, false); |
282 | this.eventManager.removeEventListener("deleteLayer", this, false); | ||
283 | this.eventManager.removeEventListener("layerBinding", this, false); | ||
284 | this.eventManager.removeEventListener("elementAdded", this, false); | ||
285 | this.eventManager.removeEventListener("elementDeleted", this, false); | ||
286 | this.eventManager.removeEventListener("deleteSelection", this, false); | ||
287 | this.eventManager.removeEventListener("selectionChange", this, true); | ||
288 | |||
289 | // Remove every event listener for every tween in TimelineTrack | ||
290 | this.deselectTweens(); | ||
291 | |||
292 | // Reset visual appearance | ||
293 | this.application.ninja.timeline.playhead.style.left = "-2px"; | ||
294 | this.application.ninja.timeline.playheadmarker.style.left = "0px"; | ||
295 |