From d57ab6509805ba4e97d6c74be913a2c1b324af3a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 13 Jun 2012 11:30:37 -0700 Subject: Binding Panel - Dock the edit view when transition ends so horizontal resizing works --- js/panels/binding-panel.reel/binding-panel.css | 5 +++ js/panels/binding-panel.reel/binding-panel.js | 56 +++++++++++++++++++++++--- 2 files changed, 55 insertions(+), 6 deletions(-) (limited to 'js/panels') diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index a1d5be0f..787cf114 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -20,3 +20,8 @@ .binding-panel-toolbar-container { -webkit-box-flex: 0; } + +.binding-panel .edit-view-docked { + left: 0; + -webkit-transition-duration: 0; +} \ No newline at end of file diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index 0641ecf5..45fa4005 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js @@ -6,6 +6,19 @@ exports.BindingPanel = Montage.create(Component, { bindings : { value: null }, editView : { value: null }, + + _dockEditView : { value: null }, + dockEditView : { + get : function() { return this._dockEditView; }, + set : function(value) { + if(value === this._dockEditView) { return; } + + this._dockEditView = value; + + this.needsDraw = true; + } + }, + _editing: { value: null }, editing: { get: function() { @@ -14,6 +27,11 @@ exports.BindingPanel = Montage.create(Component, { set: function(value) { if(value === this._editing) { return; } this._editing = value; + + if(!value) { + this.dockEditView = false; + } + this.needsDraw = true; } }, @@ -28,6 +46,18 @@ exports.BindingPanel = Montage.create(Component, { } }, + /* ------------------------- + Event handlers + ------------------------- */ + + handleWebkitTransitionEnd : { + value: function(e) { + console.log("trans end"); + + this.dockEditView = this.editing; + } + }, + /* ------------------------- Toolbar Button Actions ------------------------- */ @@ -54,8 +84,16 @@ exports.BindingPanel = Montage.create(Component, { } }, + prepareForDraw : { + value: function() { + + } + }, + willDraw: { value: function() { + this.editView.element.addEventListener('webkitTransitionEnd', this, false); + if(this.editing) { this._translateDistance = this.element.offsetWidth; } @@ -64,15 +102,21 @@ exports.BindingPanel = Montage.create(Component, { draw : { value: function() { - var transStr = '-webkit-transform'; + var transStr = '-webkit-transform', + editViewEl = this.editView.element; - if(this.editing) { - this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); - this.editView.element.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.2)') + if(this.dockEditView) { + editViewEl.classList.add('edit-view-docked'); + editViewEl.style.removeProperty(transStr); } else { - this.editView.element.style.removeProperty(transStr); - this.editView.element.style.removeProperty('box-shadow'); + editViewEl.classList.remove('edit-view-docked'); + if(this.editing) { + editViewEl.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); + } else { + editViewEl.style.removeProperty(transStr); + } } + } } }); \ No newline at end of file -- cgit v1.2.3