diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 134 |
1 files changed, 124 insertions, 10 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index ef353490..8f7c63bf 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 | ||
@@ -37,13 +38,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
37 | this._layerRepetition = newVal; | 38 | this._layerRepetition = newVal; |
38 | } | 39 | } |
39 | }, | 40 | }, |
40 | 41 | _currentLayerNumber: { | |
42 | value: 0 | ||
43 | }, | ||
41 | currentLayerNumber:{ | 44 | currentLayerNumber:{ |
42 | value:0 | 45 | get: function() { |
46 | return this._currentLayerNumber; | ||
47 | }, | ||
48 | set: function(newVal) { | ||
49 | if (newVal !== this._currentLayerNumber) { | ||
50 | this._currentLayerNumber = newVal; | ||
51 | } | ||
52 | } | ||
43 | }, | 53 | }, |
44 | 54 | ||
45 | millisecondsOffset:{ | 55 | millisecondsOffset:{ |
46 | value:5000 | 56 | value:1000 |
47 | }, | 57 | }, |
48 | 58 | ||
49 | // Track model | 59 | // Track model |
@@ -139,15 +149,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
139 | // Initialize the timeline | 149 | // Initialize the timeline |
140 | initTimelineView : { | 150 | initTimelineView : { |
141 | value:function(){ | 151 | value:function(){ |
152 | |||
153 | // Get some selectors to make life easier. | ||
154 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | ||
155 | this.layout_markers = this.element.querySelector(".layout_markers"); | ||
142 | 156 | ||
143 | // Add event handlers on the buttons. | 157 | // Add event handlers on the buttons. |
144 | this.newlayer_button.identifier = "addLayer"; | 158 | this.newlayer_button.identifier = "addLayer"; |
145 | this.newlayer_button.addEventListener("click", this, false); | 159 | this.newlayer_button.addEventListener("click", this, false); |
146 | this.deletelayer_button.identifier = "deleteLayer"; | 160 | this.deletelayer_button.identifier = "deleteLayer"; |
147 | this.deletelayer_button.addEventListener("click", this, false); | 161 | this.deletelayer_button.addEventListener("click", this, false); |
162 | |||
163 | // New click listener to handle select/deselect events | ||
164 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); | ||
148 | 165 | ||
149 | // Simultaneous scrolling of the layer and tracks | 166 | // Simultaneous scrolling of the layer and tracks |
150 | this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 167 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
151 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 168 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
152 | 169 | ||
153 | // Calculate and draw time markers | 170 | // Calculate and draw time markers |
@@ -159,6 +176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
159 | _firstLayerDraw = false; | 176 | _firstLayerDraw = false; |
160 | NJevent('newLayer',this._hashKey); | 177 | NJevent('newLayer',this._hashKey); |
161 | _firstLayerDraw = true; | 178 | _firstLayerDraw = true; |
179 | this.selectLayer(0); | ||
162 | 180 | ||
163 | // TODO - add condition for existing doc and parse DOM for top level elements | 181 | // TODO - add condition for existing doc and parse DOM for top level elements |
164 | } | 182 | } |
@@ -166,8 +184,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
166 | 184 | ||
167 | updateLayerScroll:{ | 185 | updateLayerScroll:{ |
168 | value:function(){ | 186 | value:function(){ |
169 | this.user_layers.scrollTop = this.layer_tracks.scrollTop; | 187 | console.log(this.layout_tracks.scrollLeft) |
170 | this.master_track.scrollLeft = this.layer_tracks.scrollLeft; | 188 | this.user_layers.scrollTop = this.layout_tracks.scrollTop; |
189 | this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; | ||
171 | } | 190 | } |
172 | }, | 191 | }, |
173 | 192 | ||
@@ -183,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
183 | 202 | ||
184 | handleAddLayerClick:{ | 203 | handleAddLayerClick:{ |
185 | value:function(event){ | 204 | value:function(event){ |
186 | event.stopPropagation(); | 205 | //event.stopPropagation(); |
187 | this._isLayer = true; | 206 | this._isLayer = true; |
188 | this.needsDraw = true; | 207 | this.needsDraw = true; |
189 | } | 208 | } |
@@ -191,7 +210,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
191 | 210 | ||
192 | handleDeleteLayerClick:{ | 211 | handleDeleteLayerClick:{ |
193 | value:function(event){ | 212 | value:function(event){ |
194 | event.stopPropagation(); | 213 | //event.stopPropagation(); |
195 | this._deleteKeyDown=false; | 214 | this._deleteKeyDown=false; |
196 | if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ | 215 | if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ |
197 | this._hashKey="123"; | 216 | this._hashKey="123"; |
@@ -230,6 +249,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
230 | } | 249 | } |
231 | }, | 250 | }, |
232 | 251 | ||
252 | timelineLeftPaneClick : { | ||
253 | value: function(event) { | ||
254 | // Check ALL THE CLICKS | ||
255 | // Are they in a particular layer? If so, we need to select that layer and | ||
256 | // deselect the others. | ||
257 | var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); | ||
258 | if (ptrParent !== false) { | ||
259 | // Why yes, the click was within a layer. But which one? | ||
260 | var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText, | ||
261 | myIndex = this.getLayerIndexByName(strLabel); | ||
262 | this.selectLayer(myIndex); | ||
263 | } | ||
264 | } | ||
265 | }, | ||
266 | |||
233 | handleNewLayer:{ | 267 | handleNewLayer:{ |
234 | value:function(event){ | 268 | value:function(event){ |
235 | // Add a new layer. It should be added above the currently selected layer, | 269 | // Add a new layer. It should be added above the currently selected layer, |
@@ -315,6 +349,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
315 | thingToPush.arrLayerStyles = []; | 349 | thingToPush.arrLayerStyles = []; |
316 | thingToPush.element=[]; | 350 | thingToPush.element=[]; |
317 | thingToPush.deleted=false; | 351 | thingToPush.deleted=false; |
352 | thingToPush.isSelected = false; | ||
318 | if(_firstLayerDraw){ | 353 | if(_firstLayerDraw){ |
319 | thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; | 354 | thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; |
320 | thingToPush.parentElement=this.application.ninja.currentSelectedContainer; | 355 | thingToPush.parentElement=this.application.ninja.currentSelectedContainer; |
@@ -341,18 +376,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
341 | if (!!this.layerRepetition.selectedIndexes) { | 376 | if (!!this.layerRepetition.selectedIndexes) { |
342 | myIndex = this.layerRepetition.selectedIndexes[0]; | 377 | myIndex = this.layerRepetition.selectedIndexes[0]; |
343 | thingToPush.layerPosition=myIndex; | 378 | thingToPush.layerPosition=myIndex; |
379 | thingToPush.isSelected = true; | ||
344 | newTrack.trackPosition=myIndex; | 380 | newTrack.trackPosition=myIndex; |
345 | this.arrLayers.splice(myIndex, 0, thingToPush); | 381 | this.arrLayers.splice(myIndex, 0, thingToPush); |
346 | this.arrTracks.splice(myIndex, 0, newTrack); | 382 | this.arrTracks.splice(myIndex, 0, newTrack); |
347 | this._LayerUndoPosition = myIndex; | 383 | this._LayerUndoPosition = myIndex; |
384 | /* | ||
348 | this.currentLayerSelected= this.arrLayers[myIndex]; | 385 | this.currentLayerSelected= this.arrLayers[myIndex]; |
349 | this.currentTrackSelected=this.arrTracks[myIndex]; | 386 | this.currentTrackSelected=this.arrTracks[myIndex]; |
387 | var i = 0, | ||
388 | arrLayersLength = this.arrLayers.length; | ||
389 | for (i = 0; i < arrLayersLength; i++) { | ||
390 | if (i === myIndex) { | ||
391 | this.arrLayers[i].isSelected = true; | ||
392 | } else { | ||
393 | this.arrLayers[i].isSelected = false; | ||
394 | } | ||
395 | } | ||
350 | this.layerRepetition.selectedIndexes = [myIndex]; | 396 | this.layerRepetition.selectedIndexes = [myIndex]; |
397 | */ | ||
398 | |||
399 | this.selectLayer(myIndex); | ||
400 | |||
351 | this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); | 401 | this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); |
352 | this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); | 402 | this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); |
353 | } else { | 403 | } else { |
354 | this.arrLayers.push(thingToPush); | 404 | this.arrLayers.splice(0, 0, thingToPush); |
355 | this.arrTracks.push(newTrack); | 405 | this.arrTracks.splice(0, 0, newTrack); |
356 | thingToPush.layerPosition=this.arrLayers.length-1; | 406 | thingToPush.layerPosition=this.arrLayers.length-1; |
357 | newTrack.trackPosition=this.arrTracks.length-1; | 407 | newTrack.trackPosition=this.arrTracks.length-1; |
358 | this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; | 408 | this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; |
@@ -710,6 +760,70 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
710 | 760 | ||
711 | } | 761 | } |
712 | }, | 762 | }, |
763 | |||
< |