aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel
diff options
context:
space:
mode:
authorhwc4872012-03-06 11:41:28 -0800
committerhwc4872012-03-06 11:41:28 -0800
commit5e640e24c3b4658b8060cde837ae98dabd3ba5bf (patch)
tree527f183b5e485282ce1efe15d96b6b8ddc26801e /js/panels/Timeline/Layer.reel
parent182f05f2f7a8f43f1589c9b8c15bf00d6e983676 (diff)
parent2815adfd7c19b3dff89dc3e1bda9af8d30dca8d6 (diff)
downloadninja-5e640e24c3b4658b8060cde837ae98dabd3ba5bf.tar.gz
Merge branch 'TimelineUber' of github.com:imix23ways/ninja-internal into integration
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html14
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js163
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css73
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss2
4 files changed, 181 insertions, 71 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 0bd448f7..14315f8d 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -226,6 +226,8 @@
226 } 226 }
227 } 227 }
228 } 228 }
229
230
229 } 231 }
230 </script> 232 </script>
231 </head> 233 </head>
@@ -241,9 +243,9 @@
241 <div class="collapsible-content content-layer collapsible-collapsed"> 243 <div class="collapsible-content content-layer collapsible-collapsed">
242 <div class="label-position"> 244 <div class="label-position">
243 <span class="collapsible-label">Position</span> 245 <span class="collapsible-label">Position</span>
244 <span class="collapsible-clicker clicker-position"></span> 246 <span class="collapsible-clicker clicker-position collapsible-collapsed"></span>
245 </div> 247 </div>
246 <div class="content-position collapsible-content"> 248 <div class="content-position collapsible-content collapsible-collapsed">
247 <div class="layout-table"> 249 <div class="layout-table">
248 <div class="layout-row"> 250 <div class="layout-row">
249 <div class="layout-cell">X</div> 251 <div class="layout-cell">X</div>
@@ -257,9 +259,9 @@
257 </div> 259 </div>
258 <div class="label-transform"> 260 <div class="label-transform">
259 <span class="collapsible-label">Transform</span> 261 <span class="collapsible-label">Transform</span>
260 <span class="clicker-transform collapsible-clicker"></span> 262 <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span>
261 </div> 263 </div>
262 <div class="content-transform collapsible-content"> 264 <div class="content-transform collapsible-content collapsible-collapsed">
263 <div class="layout-table"> 265 <div class="layout-table">
264 <div class="layout-row"> 266 <div class="layout-row">
265 <div class="layout-cell">Scale X</div> 267 <div class="layout-cell">Scale X</div>
@@ -286,11 +288,11 @@
286 </div> 288 </div>
287 <div class="label-style"> 289 <div class="label-style">
288 <span class="collapsible-label">Style</span> 290 <span class="collapsible-label">Style</span>
289 <span class="clicker-style collapsible-clicker"></span> 291 <span class="clicker-style collapsible-clicker collapsible-collapsed"></span>
290 <div class="cssbutton button-delete disabled"></div> 292 <div class="cssbutton button-delete disabled"></div>
291 <div class="cssbutton button-add"></div> 293 <div class="cssbutton button-add"></div>
292 </div> 294 </div>
293 <div class="content-style collapsible-content"> 295 <div class="content-style collapsible-content collapsible-collapsed">
294 <div class="" id="style-container"> 296 <div class="" id="style-container">
295 <div class="style-row" id="layer-style"> 297 <div class="style-row" id="layer-style">
296 </div> 298 </div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e75b4d0f..2980842f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, {
306 306
307 // Are the various collapsers collapsed or not 307 // Are the various collapsers collapsed or not
308 _isMainCollapsed : { 308 _isMainCollapsed : {
309 value: "" 309 serializable: true,
310 value: true
310 }, 311 },
311 isMainCollapsed : { 312 isMainCollapsed : {
313 serializable: true,
312 get: function() { 314 get: function() {
313 return this._isMainCollapsed; 315 return this._isMainCollapsed;
314 }, 316 },
315 set: function(newVal) { 317 set: function(newVal) {
318 this.log('layer.js: isMainCollapsed: ' + newVal);
316 if (newVal !== this._isMainCollapsed) { 319 if (newVal !== this._isMainCollapsed) {
317 this._isMainCollapsed = newVal; 320 this._isMainCollapsed = newVal;
318 this.needsDraw = true;
319 } 321 }
320 } 322 }
321 }, 323 },
322 324
323 _isTransformCollapsed : { 325 _isTransformCollapsed : {
326 serializable: true,
324 value: true 327 value: true
325 }, 328 },
326 isTransformCollapsed : { 329 isTransformCollapsed : {
330 serializable: true,
327 get: function() { 331 get: function() {
328 return this._isTransformCollapsed; 332 return this._isTransformCollapsed;
329 }, 333 },
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, {
336 }, 340 },
337 341
338 _isPositionCollapsed : { 342 _isPositionCollapsed : {
343 serializable: true,
339 value: true 344 value: true
340 }, 345 },
341 isPositionCollapsed : { 346 isPositionCollapsed : {
347 serializable: true,
342 get: function() { 348 get: function() {
343 return this._isPositionCollapsed; 349 return this._isPositionCollapsed;
344 }, 350 },
@@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, {
351 }, 357 },
352 358
353 _isStyleCollapsed : { 359 _isStyleCollapsed : {
360 serializable: true,
354 value: true 361 value: true
355 }, 362 },
356 isStyleCollapsed : { 363 isStyleCollapsed : {
364 serializable: true,
357 get: function() { 365 get: function() {
358 return this._isStyleCollapsed; 366 return this._isStyleCollapsed;
359 }, 367 },
@@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, {
364 } 372 }
365 } 373 }
366 }, 374 },
375 _animateCollapser : {
376 serializable: true,
377 value: false
378 },
379 animateCollapser : {
380 serializable: true,
381 get: function() {
382 return this._animateCollapser;
383 },
384 set: function(newVal) {
385 this._animateCollapser = newVal;
386 }
387 },
367 388
368 389
369 /* END: Models */ 390 /* END: Models */
@@ -403,11 +424,20 @@ var Layer = exports.Layer = Montage.create(Component, {
403 this.mainCollapser.myContent = this.myContent; 424 this.mainCollapser.myContent = this.myContent;
404 this.mainCollapser.contentHeight = 60; 425 this.mainCollapser.contentHeight = 60;
405 this.myContent.style.height = "0px"; 426 this.myContent.style.height = "0px";
406 this.mainCollapser.element = this.element; 427 this.mainCollapser.element = this.myContent;
407 //this.mainCollapser.isCollapsedAtStart = true;
408 this.mainCollapser.isCollapsed = this.isMainCollapsed; 428 this.mainCollapser.isCollapsed = this.isMainCollapsed;
409 this.mainCollapser.isAnimated = true; 429 this.mainCollapser.isAnimated = true;
410 this.element.setAttribute("data-layerid", this.layerID); 430 this.element.setAttribute("data-layerid", this.layerID);
431 // Bind the collapser's isToggling property to the isMainCollapsed property,
432 // so a change in one will affect the other.
433 Object.defineBinding(this.mainCollapser, "isToggling", {
434 boundObject: this,
435 boundObjectPropertyPath: "isMainCollapsed",
436 oneway: false
437 });
438 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
439
440 /*
411 this.mainCollapser.labelClickEvent = function(boolBypass) { 441 this.mainCollapser.labelClickEvent = function(boolBypass) {
412 var newEvent = document.createEvent("CustomEvent"); 442 var newEvent = document.createEvent("CustomEvent");
413 newEvent.initCustomEvent("layerEvent", false, true); 443 newEvent.initCustomEvent("layerEvent", false, true);
@@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, {
418 defaultEventManager.dispatchEvent(newEvent); 448 defaultEventManager.dispatchEvent(newEvent);
419 that.isMainCollapsed = that.mainCollapser.isCollapsed; 449 that.isMainCollapsed = that.mainCollapser.isCollapsed;
420 } 450 }
421 this.mainCollapser.needsDraw = true; 451 */
452 //this.mainCollapser.needsDraw = true;
422 453
423 this.positionCollapser.clicker = this.clickerPosition; 454 this.positionCollapser.clicker = this.clickerPosition;
424 this.positionCollapser.myContent = this.contentPosition; 455 this.positionCollapser.myContent = this.contentPosition;
425 this.positionCollapser.element = this.element; 456 this.positionCollapser.element = this.contentPosition;
426 this.positionCollapser.contentHeight = 60; 457 this.positionCollapser.contentHeight = 40;
427 // this.positionCollapser.isCollapsedAtStart = true;
428 this.positionCollapser.isCollapsed = this.isPositionCollapsed; 458 this.positionCollapser.isCollapsed = this.isPositionCollapsed;
429 this.positionCollapser.isAnimated = true; 459 this.positionCollapser.isAnimated = false;
460 // Bind the collapser's isToggling property to the isPositionCollapsed proper