diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/binding-panel.reel/binding-panel.css | 5 | ||||
-rw-r--r-- | js/panels/binding-panel.reel/binding-panel.js | 56 |
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 |