diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 131 |
1 files changed, 124 insertions, 7 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index ef353490..48537cef 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -2,6 +2,7 @@ var Montage = require("montage/core/core").Montage; | |||
2 | var Component = require("montage/ui/component").Component; | 2 | var Component = require("montage/ui/component").Component; |
3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | 3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | 4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; |
5 | var nj = require("js/lib/NJUtils").NJUtils; | ||
5 | 6 | ||
6 | // var Track = require("js/panels/Timeline/Track.reel").Track; | 7 | // var Track = require("js/panels/Timeline/Track.reel").Track; |
7 | 8 | ||
@@ -139,15 +140,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
139 | // Initialize the timeline | 140 | // Initialize the timeline |
140 | initTimelineView : { | 141 | initTimelineView : { |
141 | value:function(){ | 142 | value:function(){ |
143 | |||
144 | // Get some selectors to make life easier. | ||
145 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | ||
146 | this.layout_markers = this.element.querySelector(".layout_markers"); | ||
142 | 147 | ||
143 | // Add event handlers on the buttons. | 148 | // Add event handlers on the buttons. |
144 | this.newlayer_button.identifier = "addLayer"; | 149 | this.newlayer_button.identifier = "addLayer"; |
145 | this.newlayer_button.addEventListener("click", this, false); | 150 | this.newlayer_button.addEventListener("click", this, false); |
146 | this.deletelayer_button.identifier = "deleteLayer"; | 151 | this.deletelayer_button.identifier = "deleteLayer"; |
147 | this.deletelayer_button.addEventListener("click", this, false); | 152 | this.deletelayer_button.addEventListener("click", this, false); |
153 | |||
154 | // New click listener to handle select/deselect events | ||
155 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); | ||
156 | |||
157 | // New click listener on body to handle "blurring" the panel | ||
158 | document.addEventListener("click", this.handleBlur.bind(this), false); | ||
148 | 159 | ||
149 | // Simultaneous scrolling of the layer and tracks | 160 | // Simultaneous scrolling of the layer and tracks |
150 | this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 161 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
151 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 162 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
152 | 163 | ||
153 | // Calculate and draw time markers | 164 | // Calculate and draw time markers |
@@ -166,8 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
166 | 177 | ||
167 | updateLayerScroll:{ | 178 | updateLayerScroll:{ |
168 | value:function(){ | 179 | value:function(){ |
169 | this.user_layers.scrollTop = this.layer_tracks.scrollTop; | 180 | console.log(this.layout_tracks.scrollLeft) |
170 | this.master_track.scrollLeft = this.layer_tracks.scrollLeft; | 181 | this.user_layers.scrollTop = this.layout_tracks.scrollTop; |
182 | this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; | ||
171 | } | 183 | } |
172 | }, | 184 | }, |
173 | 185 | ||
@@ -183,7 +195,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
183 | 195 | ||
184 | handleAddLayerClick:{ | 196 | handleAddLayerClick:{ |
185 | value:function(event){ | 197 | value:function(event){ |
186 | event.stopPropagation(); | 198 | //event.stopPropagation(); |
187 | this._isLayer = true; | 199 | this._isLayer = true; |
188 | this.needsDraw = true; | 200 | this.needsDraw = true; |
189 | } | 201 | } |
@@ -191,7 +203,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
191 | 203 | ||
192 | handleDeleteLayerClick:{ | 204 | handleDeleteLayerClick:{ |
193 | value:function(event){ | 205 | value:function(event){ |
194 | event.stopPropagation(); | 206 | //event.stopPropagation(); |
195 | this._deleteKeyDown=false; | 207 | this._deleteKeyDown=false; |
196 | if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ | 208 | if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ |
197 | this._hashKey="123"; | 209 | this._hashKey="123"; |
@@ -230,6 +242,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
230 | } | 242 | } |
231 | }, | 243 | }, |
232 | 244 | ||
245 | timelineLeftPaneClick : { | ||
246 | value: function(event) { | ||
247 | // Check ALL THE CLICKS | ||
248 | // Are they in a particular layer? If so, we need to select that layer and | ||
249 | // deselect the others. | ||
250 | var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); | ||
251 | if (ptrParent !== false) { | ||
252 | // Why yes, the click was within a layer. But which one? | ||
253 | var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText, | ||
254 | myIndex = this.getLayerIndexByName(strLabel); | ||
255 | this.selectLayer(myIndex); | ||
256 | } | ||
257 | } | ||
258 | }, | ||
259 | |||
260 | handleBlur: { | ||
261 | value: function(event) { | ||
262 | var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane"); | ||
263 | if (ptrParent !== false) { | ||
264 | // We were clicking somewhere within the left pane, so we shouldn't blur. | ||
265 | } else { | ||
266 | this.selectLayer("none"); | ||
267 | } | ||
268 | } | ||
269 | }, | ||
270 | |||
233 | handleNewLayer:{ | 271 | handleNewLayer:{ |
234 | value:function(event){ | 272 | value:function(event){ |
235 | // Add a new layer. It should be added above the currently selected layer, | 273 | // Add a new layer. It should be added above the currently selected layer, |
@@ -315,6 +353,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
315 | thingToPush.arrLayerStyles = []; | 353 | thingToPush.arrLayerStyles = []; |
316 | thingToPush.element=[]; | 354 | thingToPush.element=[]; |
317 | thingToPush.deleted=false; | 355 | thingToPush.deleted=false; |
356 | thingToPush.isSelected = false; | ||
318 | if(_firstLayerDraw){ | 357 | if(_firstLayerDraw){ |
319 | thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; | 358 | thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; |
320 | thingToPush.parentElement=this.application.ninja.currentSelectedContainer; | 359 | thingToPush.parentElement=this.application.ninja.currentSelectedContainer; |
@@ -341,18 +380,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
341 | if (!!this.layerRepetition.selectedIndexes) { | 380 | if (!!this.layerRepetition.selectedIndexes) { |
342 | myIndex = this.layerRepetition.selectedIndexes[0]; | 381 | myIndex = this.layerRepetition.selectedIndexes[0]; |
343 | thingToPush.layerPosition=myIndex; | 382 | thingToPush.layerPosition=myIndex; |
383 | thingToPush.isSelected = true; | ||
344 | newTrack.trackPosition=myIndex; | 384 | newTrack.trackPosition=myIndex; |
345 | this.arrLayers.splice(myIndex, 0, thingToPush); | 385 | this.arrLayers.splice(myIndex, 0, thingToPush); |
346 | this.arrTracks.splice(myIndex, 0, newTrack); | 386 | this.arrTracks.splice(myIndex, 0, newTrack); |
347 | this._LayerUndoPosition = myIndex; | 387 | this._LayerUndoPosition = myIndex; |
388 | /* | ||
348 | this.currentLayerSelected= this.arrLayers[myIndex]; | 389 | this.currentLayerSelected= this.arrLayers[myIndex]; |
349 | this.currentTrackSelected=this.arrTracks[myIndex]; | 390 | this.currentTrackSelected=this.arrTracks[myIndex]; |
391 | var i = 0, | ||
392 | arrLayersLength = this.arrLayers.length; | ||
393 | for (i = 0; i < arrLayersLength; i++) { | ||
394 | if (i === myIndex) { | ||
395 | this.arrLayers[i].isSelected = true; | ||
396 | } else { | ||
397 | this.arrLayers[i].isSelected = false; | ||
398 | } | ||
399 | } | ||
350 | this.layerRepetition.selectedIndexes = [myIndex]; | 400 | this.layerRepetition.selectedIndexes = [myIndex]; |
401 | */ | ||
402 | |||
403 | this.selectLayer(myIndex); | ||
404 | |||
351 | this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); | 405 | this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); |
352 | this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); | 406 | this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); |
353 | } else { | 407 | } else { |
354 | this.arrLayers.push(thingToPush); | 408 | this.arrLayers.splice(0, 0, thingToPush); |
355 | this.arrTracks.push(newTrack); | 409 | this.arrTracks.splice(0, 0, newTrack); |
356 | thingToPush.layerPosition=this.arrLayers.length-1; | 410 | thingToPush.layerPosition=this.arrLayers.length-1; |
357 | newTrack.trackPosition=this.arrTracks.length-1; | 411 | newTrack.trackPosition=this.arrTracks.length-1; |
358 | this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; | 412 | this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; |
@@ -710,6 +764,69 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
710 | 764 | ||
711 | } | 765 | } |
712 | }, | 766 | }, |
767 | |||
768 | selectLayer : { | ||
769 | value: function(layerIndex) { | ||
770 | // Select a layer based on its index. | ||
771 | // use layerIndex = "none" to deselect all layers. | ||
772 | var i = 0, | ||
773 | arrLayersLength = this.arrLayers.length; | ||
774 | |||
775 | // First, update this.arrLayers[].isSelected | ||
776 | for (i = 0; i < arrLayersLength; i++) { | ||
777 | if (i === layerIndex) { | ||
778 | this.arrLayers[i].isSelected = true; | ||
779 | } else { | ||
780 | this.arrLayers[i].isSelected = false; | ||
781 | } | ||
782 | } | ||
783 | |||
784 | // Next, update this.layerRepetition.selectedIndexes and this.currentLayerSelected. | ||
785 | if (layerIndex !== "none") { | ||
786 | this.layerRepetition.selectedIndexes = [layerIndex]; | ||
787 | this.currentLayerSelected = this.arrLayers[layerIndex] | ||
788 | } else { | ||