diff options
author | Jonathan Duran | 2012-04-06 08:46:42 -0700 |
---|---|---|
committer | Jonathan Duran | 2012-04-06 08:46:42 -0700 |
commit | 852f49888e54b4a2a8ee929dbeb0c54dfa004de6 (patch) | |
tree | d90b53a70e0c14992db62fc0705b830f75cec52e /js | |
parent | 921a106cc1159b93068a4c635fcc0c74084446a5 (diff) | |
parent | eb694fa5d39733264bce7ba832aabbe9c3d6c81e (diff) | |
download | ninja-852f49888e54b4a2a8ee929dbeb0c54dfa004de6.tar.gz |
Merge branch 'refs/heads/timeline-local' into TimelineUber
Diffstat (limited to 'js')
-rw-r--r-- | js/components/hintable.reel/hintable.js | 8 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 46 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 58 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 72 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 27 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 22 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 26 |
7 files changed, 157 insertions, 102 deletions
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index cbfe2d9b..6e3b2aaf 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -157,6 +157,14 @@ exports.Hintable = Montage.create(Editable, { | |||
157 | 157 | ||
158 | this._super(arguments); | 158 | this._super(arguments); |
159 | 159 | ||
160 | /// Remove the phantom "<BR>" element that is generated when | ||
161 | /// content editable element is empty | ||
162 | this._children(this._element, function(item) { | ||
163 | return item.nodeName === 'BR'; | ||
164 | }).forEach(function(item) { | ||
165 | this._element.removeChild(item); | ||
166 | }, this); | ||
167 | |||
160 | if(k === 39) { | 168 | if(k === 39) { |
161 | selection = window.getSelection(); | 169 | selection = window.getSelection(); |
162 | text = selection.baseNode.textContent; | 170 | text = selection.baseNode.textContent; |
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 454c2742..eb9ff3a9 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -337,14 +337,14 @@ | |||
337 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> | 337 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> |
338 | </div> | 338 | </div> |
339 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> | 339 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> |
340 | <div class="layout-table"> | 340 | <div class="layout-tablew"> |
341 | <div class="layout-row"> | 341 | <div class="container-row"> |
342 | <div class="layout-cell">X</div> | 342 | <div class="cell-property">X</div> |
343 | <div class="layout-cell"><div data-montage-id="position-x"></div></div> | 343 | <div class="cell-value"><div data-montage-id="position-x"></div></div> |
344 | </div> | 344 | </div> |
345 | <div class="layout-row"> | 345 | <div class="container-row"> |
346 | <div class="layout-cell">Y</div> | 346 | <div class="cell-property">Y</div> |
347 | <div class="layout-cell"><div data-montage-id="position-y"></div></div> | 347 | <div class="cell-value"><div data-montage-id="position-y"></div></div> |
348 | </div> | 348 | </div> |
349 | </div> | 349 | </div> |
350 | </div> | 350 | </div> |
@@ -353,26 +353,26 @@ | |||
353 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> | 353 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> |
354 | </div> | 354 | </div> |
355 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> | 355 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> |
356 | <div class="layout-table"> | 356 | <div class="layout-tablew"> |
357 | <div class="layout-row"> | 357 | <div class="container-row"> |
358 | <div class="layout-cell">Scale X</div> | 358 | <div class="cell-property">Scale X</div> |
359 | <div class="layout-cell"><div data-montage-id="scale-x"></div></div> | 359 | <div class="cell-value"><div data-montage-id="scale-x"></div></div> |
360 | </div> | 360 | </div> |
361 | <div class="layout-row"> | 361 | <div class="container-row"> |
362 | <div class="layout-cell">Scale Y</div> | 362 | <div class="cell-property">Scale Y</div> |
363 | <div class="layout-cell"><div data-montage-id="scale-y"></div></div> | 363 | <div class="cell-value"><div data-montage-id="scale-y"></div></div> |
364 | </div> | 364 | </div> |
365 | <div class="layout-row"> | 365 | <div class="container-row"> |
366 | <div class="layout-cell">Skew X</div> | 366 | <div class="cell-property">Skew X</div> |
367 | <div class="layout-cell"><div data-montage-id="skew-x"></div></div> | 367 | <div class="cell-value"><div data-montage-id="skew-x"></div></div> |
368 | </div> | 368 | </div> |
369 | <div class="layout-row"> | 369 | <div class="container-row"> |
370 | <div class="layout-cell">Skew Y</div> | 370 | <div class="cell-property">Skew Y</div> |
371 | <div class="layout-cell"><div data-montage-id="skew-y"></div></div> | 371 | <div class="cell-value"><div data-montage-id="skew-y"></div></div> |
372 | </div> | 372 | </div> |
373 | <div class="layout-row"> | 373 | <div class="container-row"> |
374 | <div class="layout-cell">Rotation</div> | 374 | <div class="cell-property">Rotation</div> |
375 | <div class="layout-cell"><div data-montage-id="rotation"></div></div> | 375 | <div class="cell-value"><div data-montage-id="rotation"></div></div> |
376 | </div> | 376 | </div> |
377 | </div> | 377 | </div> |
378 | 378 | ||
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2f0310a9..3bcc1401 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -311,11 +311,9 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
311 | return this._isMainCollapsed; | 311 | return this._isMainCollapsed; |
312 | }, | 312 | }, |
313 | set: function(newVal) { | 313 | set: function(newVal) { |
314 | if (newVal !== this._isMainCollapsed) { | 314 | this._isMainCollapsed = newVal; |
315 | this.log('layer.js: isMainCollapsed: ' + newVal); | 315 | this.layerData.isMainCollapsed = newVal; |
316 | this._isMainCollapsed = newVal; | 316 | |
317 | this.layerData.isMainCollapsed = newVal; | ||
318 | } | ||
319 | } | 317 | } |
320 | }, | 318 | }, |
321 | 319 | ||
@@ -329,10 +327,8 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
329 | return this._isTransformCollapsed; | 327 | return this._isTransformCollapsed; |
330 | }, | 328 | }, |
331 | set: function(newVal) { | 329 | set: function(newVal) { |
332 | if (newVal !== this._isTransformCollapsed) { | 330 | this._isTransformCollapsed = newVal; |
333 | this._isTransformCollapsed = newVal; | 331 | this.layerData.isTransformCollapsed = newVal; |
334 | this.layerData.isTransformCollapsed = newVal; | ||
335 | } | ||
336 | } | 332 | } |
337 | }, | 333 | }, |
338 | 334 | ||
@@ -346,10 +342,8 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
346 | return this._isPositionCollapsed; | 342 | return this._isPositionCollapsed; |
347 | }, | 343 | }, |
348 | set: function(newVal) { | 344 | set: function(newVal) { |
349 | if (newVal !== this._isPositionCollapsed) { | 345 | this._isPositionCollapsed = newVal; |
350 | this._isPositionCollapsed = newVal; | 346 | this.layerData.isPositionCollapsed = newVal; |
351 | this.layerData.isPositionCollapsed = newVal; | ||
352 | } | ||
353 | } | 347 | } |
354 | }, | 348 | }, |
355 | 349 | ||
@@ -363,10 +357,8 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
363 | return this._isStyleCollapsed; | 357 | return this._isStyleCollapsed; |
364 | }, | 358 | }, |
365 | set: function(newVal) { | 359 | set: function(newVal) { |
366 | if (newVal !== this._isStyleCollapsed) { | 360 | this._isStyleCollapsed = newVal; |
367 | this._isStyleCollapsed = newVal; | 361 | this.layerData.isStyleCollapsed = newVal; |
368 | this.layerData.isStyleCollapsed = newVal; | ||
369 | } | ||
370 | } | 362 | } |
371 | }, | 363 | }, |
372 | _bypassAnimation : { | 364 | _bypassAnimation : { |
@@ -379,7 +371,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
379 | return this._bypassAnimation; | 371 | return this._bypassAnimation; |
380 | }, | 372 | }, |
381 | set: function(newVal) { | 373 | set: function(newVal) { |
382 | if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) { | 374 | if (typeof(this.layerData) !== "undefined") { |
383 | this._bypassAnimation = newVal; | 375 | this._bypassAnimation = newVal; |
384 | this.layerData.bypassAnimation = newVal; | 376 | this.layerData.bypassAnimation = newVal; |
385 | } | 377 | } |
@@ -480,31 +472,23 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
480 | 472 | ||
481 | // Initialize myself | 473 | // Initialize myself |
482 | this.init(); | 474 | this.init(); |
483 | var that = this; | 475 | |
484 | // Make it editable! | 476 | // Make it editable! |
485 | this._layerEditable = Hintable.create(); | 477 | this._layerEditable = Hintable.create(); |
486 | this._layerEditable.element = this.titleSelector; | 478 | this._layerEditable.element = this.titleSelector; |
487 | this.titleSelector.identifier = "selectorEditable"; | 479 | this.titleSelector.identifier = "selectorEditable"; |
488 | this.titleSelector.addEventListener("click", this, false); | 480 | this.titleSelector.addEventListener("click", this, false); |
489 | this._layerEditable.addEventListener("blur", function(event) { | 481 | this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); |
490 | that.handleSelectorEditableBlur(event); | 482 | this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false); |
491 | }, false); | ||
492 | this._layerEditable.addEventListener("change", function(event) { | ||
493 | that.dynamicLayerName.value = that._layerEditable.value; | ||
494 | this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value; | ||
495 | that.needsDraw = true; | ||
496 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
497 | }, false); | ||
498 | this._layerEditable.editingClass = "editable2"; | 483 | this._layerEditable.editingClass = "editable2"; |
499 | this._layerEditable.value = this.layerName; |