aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-06-13 11:30:37 -0700
committerEric Guzman2012-06-13 11:30:37 -0700
commitd57ab6509805ba4e97d6c74be913a2c1b324af3a (patch)
tree8d4607f57a42452af24b67bd349d0213f6c1e9df
parent1c32ba9a460bbb737206ce10d1ea75f035f543b7 (diff)
downloadninja-d57ab6509805ba4e97d6c74be913a2c1b324af3a.tar.gz
Binding Panel - Dock the edit view when transition ends so horizontal resizing works
-rw-r--r--js/panels/binding-panel.reel/binding-panel.css5
-rw-r--r--js/panels/binding-panel.reel/binding-panel.js56
2 files changed, 55 insertions, 6 deletions
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 @@
20.binding-panel-toolbar-container { 20.binding-panel-toolbar-container {
21 -webkit-box-flex: 0; 21 -webkit-box-flex: 0;
22} 22}
23
24.binding-panel .edit-view-docked {
25 left: 0;
26 -webkit-transition-duration: 0;
27} \ 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, {
6 6
7 bindings : { value: null }, 7 bindings : { value: null },
8 editView : { value: null }, 8 editView : { value: null },
9
10 _dockEditView : { value: null },
11 dockEditView : {
12 get : function() { return this._dockEditView; },
13 set : function(value) {
14 if(value === this._dockEditView) { return; }
15
16 this._dockEditView = value;
17
18 this.needsDraw = true;
19 }
20 },
21
9 _editing: { value: null }, 22 _editing: { value: null },
10 editing: { 23 editing: {
11 get: function() { 24 get: function() {
@@ -14,6 +27,11 @@ exports.BindingPanel = Montage.create(Component, {
14 set: function(value) { 27 set: function(value) {
15 if(value === this._editing) { return; } 28 if(value === this._editing) { return; }
16 this._editing = value; 29 this._editing = value;
30
31 if(!value) {
32 this.dockEditView = false;
33 }
34
17 this.needsDraw = true; 35 this.needsDraw = true;
18 } 36 }
19 }, 37 },
@@ -29,6 +47,18 @@ exports.BindingPanel = Montage.create(Component, {
29 }, 47 },
30 48
31 /* ------------------------- 49 /* -------------------------
50 Event handlers
51 ------------------------- */
52
53 handleWebkitTransitionEnd : {
54 value: function(e) {
55 console.log("trans end");
56
57 this.dockEditView = this.editing;
58 }
59 },
60
61 /* -------------------------
32 Toolbar Button Actions 62 Toolbar Button Actions
33 ------------------------- */ 63 ------------------------- */
34 64
@@ -54,8 +84,16 @@ exports.BindingPanel = Montage.create(Component, {
54 } 84 }
55 }, 85 },
56 86
87 prepareForDraw : {
88 value: function() {
89
90 }
91 },
92
57 willDraw: { 93 willDraw: {
58 value: function() { 94 value: function() {
95 this.editView.element.addEventListener('webkitTransitionEnd', this, false);
96
59 if(this.editing) { 97 if(this.editing) {
60 this._translateDistance = this.element.offsetWidth; 98 this._translateDistance = this.element.offsetWidth;
61 } 99 }
@@ -64,15 +102,21 @@ exports.BindingPanel = Montage.create(Component, {
64 102
65 draw : { 103 draw : {
66 value: function() { 104 value: function() {
67 var transStr = '-webkit-transform'; 105 var transStr = '-webkit-transform',
106 editViewEl = this.editView.element;
68 107
69 if(this.editing) { 108 if(this.dockEditView) {
70 this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); 109 editViewEl.classList.add('edit-view-docked');
71 this.editView.element.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.2)') 110 editViewEl.style.removeProperty(transStr);
72 } else { 111 } else {
73 this.editView.element.style.removeProperty(transStr); 112 editViewEl.classList.remove('edit-view-docked');
74 this.editView.element.style.removeProperty('box-shadow'); 113 if(this.editing) {
114 editViewEl.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
115 } else {
116 editViewEl.style.removeProperty(transStr);
117 }
75 } 118 }
119
76 } 120 }
77 } 121 }
78}); \ No newline at end of file 122}); \ No newline at end of file