|
29 | 29 | type: "horizontal", // vertical |
30 | 30 | defaults: { |
31 | 31 | closingWidth: 20, |
32 | | - closingHeight: 20 |
| 32 | + closingHeight: 20, |
| 33 | + toggleEvent: 'click', |
| 34 | + toggleSelector: '.ui-resizable-handle' |
33 | 35 | }, |
34 | 36 | east: { |
35 | 37 | selector: '.ui-layout-pane-east', |
|
62 | 64 | resizable: { handles: 'n', maxHeight: 999999 } |
63 | 65 | } |
64 | 66 | }, |
| 67 | +// todo : method to be used in order to slide a pane on opening an closing action (instead of resizing it) |
65 | 68 | _positionProp: function(pane){ |
66 | | - var prop = '' |
| 69 | + var prop ; |
67 | 70 | switch(pane){ |
68 | 71 | case 'west': prop = 'left'; break; |
69 | 72 | case 'east': prop = 'right'; break; |
|
76 | 79 | prefix = prefix || ''; |
77 | 80 | return toCamelCase(prefix +" " + (this.options[pane].resizable.handles.match(/e|w/) ? 'width' : 'height') ); |
78 | 81 | }, |
| 82 | + |
79 | 83 | _create: function(){ |
80 | 84 | var self = this; |
81 | 85 |
|
|
98 | 102 | // init side panes as resizable elements |
99 | 103 | if (pane != 'center'){ |
100 | 104 |
|
| 105 | + |
101 | 106 | // init pane as rezisable element |
102 | 107 | $pane.resizable($.extend({}, self.options[pane].resizable,{ |
103 | 108 | containment: 'parent' |
104 | 109 | })); |
105 | 110 |
|
106 | | - |
107 | 111 | $pane.bind('resizestart', function(e,ui){ |
108 | 112 | self._open(pane) |
109 | 113 |
|
|
136 | 140 | self.resize(); |
137 | 141 | }); |
138 | 142 |
|
139 | | - var preventToggling = false ; |
| 143 | + var preventToggling = false; |
| 144 | + |
140 | 145 | $pane.bind('resizestop', function(e,ui){ |
| 146 | + |
141 | 147 | // remove conflicting attributes |
142 | 148 | self._removeInlineStyleAttr(pane); |
| 149 | + |
| 150 | + // remove potential iframe mask |
143 | 151 | $pane.children('div.iframe-mask').remove(); |
144 | 152 |
|
| 153 | + |
| 154 | + // prevent the pane to toggle after a mouseup event, if the orginal size has significantly been changed |
| 155 | + if (Math.abs(ui.size[self._sizeProp(pane)] - ui.originalSize[self._sizeProp(pane)]) > 3){ |
| 156 | + preventToggling = true; |
| 157 | + setTimeout(function(){ |
| 158 | + preventToggling = false; |
| 159 | + },100); |
| 160 | + } |
| 161 | + else{ |
| 162 | + return true; |
| 163 | + } |
| 164 | + |
| 165 | + |
145 | 166 | // close the sidePane if not visible anymore, otherwise record its dimension |
146 | 167 | if (ui.size[self._sizeProp(pane)] < self.options[pane][self._sizeProp(pane, 'closing')]){ |
147 | 168 | self.close(pane) |
|
151 | 172 | self.options[pane][self._sizeProp(pane)] = ui.size[self._sizeProp(pane)] |
152 | 173 | } |
153 | 174 |
|
154 | | - //$pane.find('div.iframe-mask').remove(); |
155 | | - |
156 | | - // prevent the pane to toogle after a mouseup event |
157 | | - preventToggling = true; |
158 | | - setTimeout(function(){ |
159 | | - preventToggling = false; |
160 | | - },100) |
161 | 175 | }); |
162 | 176 |
|
163 | 177 | // toggle the pane if clicking on the handler |
164 | 178 | $pane.data('resizable')._handles |
165 | 179 | .append('<div class="ui-icon ui-icon-grip-dotted-'+ (self.options.type == 'horizontal' ? 'vertical' : 'horizontal') +'"></div>') |
166 | | - .bind('click', function(e){ |
167 | | - if (!preventToggling) |
168 | | - self.toggle(pane); |
169 | | - }); |
| 180 | + |
| 181 | + $(self.options[pane].toggleSelector, $pane) |
| 182 | + .bind(self.options[pane].toggleEvent, function(e){ |
| 183 | + if (!preventToggling) |
| 184 | + self.toggle(pane); |
| 185 | + }) |
170 | 186 | } |
171 | 187 |
|
172 | 188 | self.panes[pane] = $pane ; |
173 | 189 |
|
| 190 | + |
| 191 | + self._hiding(pane, self.options[pane].hiding) ; |
| 192 | + |
174 | 193 | // set pane dimension |
175 | 194 | if(self.options[pane].sliding){ |
176 | 195 | self._sliding(pane) |
|
201 | 220 | }) |
202 | 221 | } |
203 | 222 | }, |
| 223 | + |
204 | 224 | _resizeElement: function(){ |
205 | 225 | var self = this; |
206 | 226 |
|
|
284 | 304 | sliding = ("undefined" == typeof sliding) ? true : sliding; |
285 | 305 | this.panes[pane][sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding'); |
286 | 306 | }, |
| 307 | + _hiding: function(pane, hiding){ |
| 308 | + hiding = ("undefined" == typeof hiding) ? false : hiding; |
| 309 | + this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding'); |
| 310 | + }, |
287 | 311 | toggleSlide: function(pane){ |
288 | 312 | this.options[pane].sliding = !this.options[pane].sliding; |
289 | 313 | this._sliding(pane, this.options[pane].sliding); |
290 | 314 | this.resize(); |
291 | 315 | return this.element |
292 | 316 | }, |
293 | | - _pane:function(pane){ |
294 | | - return {pane: this.panes[pane], name: pane} |
| 317 | + _ui:function(pane){ |
| 318 | + return {pane: this.panes[pane], paneName: pane, options: this.options} |
295 | 319 | }, |
| 320 | + |
| 321 | + |
296 | 322 | _open: function(pane, trigg){ |
297 | 323 | trigg = ("undefined" == typeof trigg ) ? true : trigg; |
298 | 324 | this.panes[pane].addClass('ui-layout-pane-open') |
| 325 | + this.panes[pane].removeClass('ui-layout-pane-close') |
299 | 326 | this.options[pane].opened = true; |
300 | 327 | if (trigg) |
301 | | - this._trigger(pane+'open', null, this._pane(pane)); |
| 328 | + this._trigger(pane+'open', null, this._ui(pane)); |
302 | 329 | }, |
303 | 330 | _opened: function(pane){ |
304 | | - this._trigger(pane+'opened', null, this._pane(pane)); |
| 331 | + this._trigger(pane+'opened', null, this._ui(pane)); |
305 | 332 | }, |
306 | 333 | _close: function(pane){ |
307 | | - this._trigger(pane+'close', null, this._pane(pane)); |
| 334 | + this._trigger(pane+'close', null, this._ui(pane)); |
308 | 335 | }, |
309 | 336 | _closed: function(pane){ |
310 | 337 | this.panes[pane].removeClass('ui-layout-pane-open') |
| 338 | + this.panes[pane].addClass('ui-layout-pane-close') |
311 | 339 | this.options[pane].opened = false; |
312 | | - this._trigger(pane+'closed', null, this._pane(pane)); |
| 340 | + this._trigger(pane+'closed', null, this._ui(pane)); |
313 | 341 | }, |
314 | 342 |
|
315 | 343 |
|
|
342 | 370 | } |
343 | 371 | }, |
344 | 372 |
|
345 | | - |
346 | 373 | toggle: function(pane, callback){ |
347 | 374 | if (this.options[pane].opened) |
348 | 375 | this.close(pane, callback); |
|
393 | 420 | self.resize(); |
394 | 421 | }, |
395 | 422 | complete: function(){ |
| 423 | + if (callback){ |
| 424 | + callback(); |
| 425 | + } |
396 | 426 | if (!self.options[pane].sliding){ |
397 | 427 | //self._putBackground(pane) |
398 | 428 | self.resize(); |
399 | 429 | } |
400 | | - if (callback){ |
401 | | - callback(); |
402 | | - } |
403 | 430 | }} |
404 | 431 | ); |
405 | 432 | } |
|
0 commit comments