diff options
author | Jonathan Duran | 2012-02-07 07:29:32 -0800 |
---|---|---|
committer | Jonathan Duran | 2012-02-07 07:29:32 -0800 |
commit | 7303780d92bce267eafd3793476674edf17816c9 (patch) | |
tree | 349e8079d8cfba12a40d622f0e1b236ff52a0687 /js/panels | |
parent | 68f6af70818652821507881daf0abd2e8b6d5d27 (diff) | |
download | ninja-7303780d92bce267eafd3793476674edf17816c9.tar.gz |
Change DOM/layer handling workflow
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 152 |
1 files changed, 95 insertions, 57 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a0e2376a..67081cda 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -108,6 +108,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
108 | this.initTimelineView(); | 108 | this.initTimelineView(); |
109 | } | 109 | } |
110 | }, | 110 | }, |
111 | |||
111 | _isLayer: { | 112 | _isLayer: { |
112 | value: false | 113 | value: false |
113 | }, | 114 | }, |
@@ -120,6 +121,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
120 | value:true | 121 | value:true |
121 | }, | 122 | }, |
122 | 123 | ||
124 | _firstLayerDraw:{ | ||
125 | value:false, | ||
126 | writable:true | ||
127 | }, | ||
128 | |||
123 | willDraw: { | 129 | willDraw: { |
124 | value: function() { | 130 | value: function() { |
125 | if (this._isLayer) { | 131 | if (this._isLayer) { |
@@ -155,7 +161,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
155 | 161 | ||
156 | // Default to one layer for new doc | 162 | // Default to one layer for new doc |
157 | // this.newLayer(); | 163 | // this.newLayer(); |
158 | NJevent('newLayer'); | 164 | this._hashKey="123"; |
165 | _firstLayerDraw = false; | ||
166 | NJevent('newLayer',this._hashKey); | ||
167 | _firstLayerDraw = true; | ||
168 | |||
159 | // TODO - add condition for existing doc and parse DOM for top level elements | 169 | // TODO - add condition for existing doc and parse DOM for top level elements |
160 | } | 170 | } |
161 | }, | 171 | }, |
@@ -190,6 +200,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
190 | value:function(event){ | 200 | value:function(event){ |
191 | event.stopPropagation(); | 201 | event.stopPropagation(); |
192 | this._deleteKeyDown=false; | 202 | this._deleteKeyDown=false; |
203 | if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ | ||
204 | this._hashKey="123"; | ||
205 | } | ||
193 | NJevent('deleteLayer') | 206 | NJevent('deleteLayer') |
194 | } | 207 | } |
195 | }, | 208 | }, |
@@ -201,11 +214,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
201 | this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid; | 214 | this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid; |
202 | this.currentElement= event.detail.element; | 215 | this.currentElement= event.detail.element; |
203 | 216 | ||
204 | while(this.arrLayers.pop()){ | 217 | // if(this._firstLayerDraw===false){ |
205 | } | 218 | // while(this.arrLayers.pop()){ |
206 | while(this.arrTracks.pop()){ | 219 | // } |
207 | } | 220 | // while(this.arrTracks.pop()){ |
208 | 221 | // } | |
222 | // } | ||
209 | 223 | ||
210 | this._hashKey = event.detail.element.uuid; | 224 | this._hashKey = event.detail.element.uuid; |
211 | if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){ | 225 | if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){ |
@@ -237,39 +251,39 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
237 | return; | 251 | return; |
238 | } | 252 | } |
239 | 253 | ||
240 | if(this._isElementAdded){ | ||
241 | if(this.addButtonClicked){ | ||
242 | layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); | ||
243 | trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); | ||
244 | if(layerObject!==undefined){ | ||
245 | while(layerObject[hashVariable]){ | ||
246 | if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){ | ||
247 | dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid); | ||
248 | while(dLayer[hashVariable]){ | ||
249 | if(dLayer[hashVariable].element===event.detail){ | ||
250 | dLayer[hashVariable].deleted=true; | ||
251 | parentNode=dLayer[hashVariable].parentElement; | ||
252 | break; | ||
253 | } | ||
254 | hashVariable++; | ||
255 | } | ||
256 | this._setBreadCrumb=true; | ||
257 | NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); | ||
258 | 254 | ||
259 | } | 255 | // if(this.addButtonClicked){ |
260 | else if(layerObject[hashVariable].element===event.detail){ | 256 | // layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); |
261 | this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]); | 257 | // trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); |
262 | this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]); | 258 | // if(layerObject!==undefined){ |
263 | this._isLayerAdded=true; | 259 | // while(layerObject[hashVariable]){ |
264 | break; | 260 | // if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){ |
265 | } | 261 | // dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid); |
266 | hashVariable++; | 262 | // while(dLayer[hashVariable]){ |
267 | this._isLayerAdded=false; | 263 | // if(dLayer[hashVariable].element===event.detail){ |
268 | } | 264 | // dLayer[hashVariable].deleted=true; |
269 | } | 265 | // parentNode=dLayer[hashVariable].parentElement; |
270 | } | 266 | // break; |
267 | // } | ||
268 | // hashVariable++; | ||
269 | // } | ||
270 | // this._setBreadCrumb=true; | ||
271 | // NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); | ||
272 | // | ||
273 | // } | ||
274 | // else if(layerObject[hashVariable].element===event.detail){ | ||
275 | // this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]); | ||
276 | // this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]); | ||
277 | // this._isLayerAdded=true; | ||
278 | // break; | ||
279 | // } | ||
280 | // hashVariable++; | ||
281 | // this._isLayerAdded=false; | ||
282 | // } | ||
283 | // } | ||
284 | // } | ||
285 | |||
271 | 286 | ||
272 | if(this._isLayerAdded===false){ | ||
273 | var newLayerName = "", | 287 | var newLayerName = "", |
274 | //thingToPush = Layer.create(), | 288 | //thingToPush = Layer.create(), |
275 | thingToPush = {}, | 289 | thingToPush = {}, |
@@ -278,6 +292,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
278 | myIndex = 0; | 292 | myIndex = 0; |
279 | 293 | ||
280 | // Build the thingToPush object | 294 | // Build the thingToPush object |
295 | if(_firstLayerDraw){ | ||
296 | if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ | ||
297 | this._hashKey="123"; | ||
298 | } | ||
299 | } | ||
281 | 300 | ||
282 | this.currentLayerNumber = this.currentLayerNumber +1; | 301 | this.currentLayerNumber = this.currentLayerNumber +1; |
283 | newLayerName = "Layer " + this.currentLayerNumber; | 302 | newLayerName = "Layer " + this.currentLayerNumber; |
@@ -288,10 +307,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
288 | thingToPush.isTransformCollapsed = true; | 307 | thingToPush.isTransformCollapsed = true; |
289 | thingToPush.isStyleCollapsed = false; | 308 | thingToPush.isStyleCollapsed = false; |
290 | thingToPush.arrLayerStyles = []; | 309 | thingToPush.arrLayerStyles = []; |
291 | thingToPush.element=this.layerElement; | 310 | thingToPush.element=[]; |
292 | thingToPush.deleted=false; | 311 | thingToPush.deleted=false; |
293 | thingToPush.parentElement=this.application.ninja.currentSelectedContainer; | 312 | thingToPush.parentElement=this.application.ninja.currentSelectedContainer; |
294 | this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; | 313 | // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; |
295 | 314 | ||
296 | newTrack.trackID = this.currentLayerNumber; | 315 | newTrack.trackID = this.currentLayerNumber; |
297 | newTrack.isMainCollapsed = true; | 316 | newTrack.isMainCollapsed = true; |
@@ -300,7 +319,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
300 | newTrack.isStyleCollapsed = false; | 319 | newTrack.isStyleCollapsed = false; |
301 | newTrack.tweens = []; | 320 | newTrack.tweens = []; |
302 | 321 | ||
303 | |||
304 | // If a layer is selcted, splice the new layer on top | 322 | // If a layer is selcted, splice the new layer on top |
305 | // Otherwise, just push the new layer in at the bottom. | 323 | // Otherwise, just push the new layer in at the bottom. |
306 | 324 | ||
@@ -312,20 +330,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
312 | newTrack.trackPosition=myIndex; | 330 | newTrack.trackPosition=myIndex; |
313 | this.arrLayers.splice(myIndex, 0, thingToPush); | 331 | this.arrLayers.splice(myIndex, 0, thingToPush); |
314 | this.arrTracks.splice(myIndex, 0, newTrack); | 332 | this.arrTracks.splice(myIndex, 0, newTrack); |
333 | this.currentLayerSelected= this.arrLayers[myIndex]; | ||
315 | this.layerRepetition.selectedIndexes = [myIndex]; | 334 | this.layerRepetition.selectedIndexes = [myIndex]; |
316 | } else { | 335 | } else { |
317 | this.arrLayers.splice(0, 0, thingToPush); | 336 | this.arrLayers.push(thingToPush); |
318 | this.arrTracks.splice(0, 0, newTrack); | 337 | this.arrTracks.push(newTrack); |
319 | thingToPush.layerPosition=this.arrLayers.length-1; | 338 | thingToPush.layerPosition=this.arrLayers.length-1; |
320 |