|
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