Skip to content

Commit 353c60c

Browse files
author
=
committed
hide borders for closed paned hide hanldes for hidden closed paned, toggleEvent and toggleSelector customization
1 parent c72a49d commit 353c60c

File tree

3 files changed

+165
-87
lines changed

3 files changed

+165
-87
lines changed

demos/layout/nested.html

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,66 @@
1-
<html>
2-
<HEAD>
3-
<TITLE>Nested layout Example</TITLE>
4-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
5-
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
6-
<script src="../../jquery-1.4.4.js"></script>
7-
<script src="../../ui/jquery.ui.core.js"></script>
8-
<script src="../../ui/jquery.ui.widget.js"></script>
9-
<script src="../../ui/jquery.ui.mouse.js"></script>
10-
<script src="../../ui/jquery.ui.resizable.js"></script>
11-
<script src="../../ui/jquery.ui.position.js"></script>
12-
<script src="../../ui/jquery.ui.layout.js"></script>
13-
<script src="../../ui/jquery.ui.button.js"></script>
14-
<link rel="stylesheet" href="../demos.css">
15-
<script type="text/javascript">
16-
17-
$(document).ready(function () {
18-
var $outer_layout = $('#outer-layout').layout({west: {sliding: true}});
19-
var $inner_layout = $('#inner-layout').layout({type:'vertical', north: {sliding: true}});
20-
$('.ui-layout-pane-west .toggleSlide').button().click(function(e){
21-
e.preventDefault();
22-
$outer_layout.layout('toggleSlide', 'west')
23-
});
24-
$inner_layout.bind('layoutnorthopen', function(e,data){
25-
var self = $inner_layout.data('layout')
26-
self.options[data.name].height = self.panes['center'].outerHeight()+17
27-
});
28-
29-
});
30-
</script>
31-
<style>
32-
body{
33-
height: 100%;
34-
width: 100%;
35-
padding:0;
36-
margin:0;
37-
}
38-
.ui-layout-pane div.content{
39-
text-align: center;
40-
height: 100%;
41-
overflow:hidden;
42-
}
43-
a.toggleSlide.ui-button.ui-widget {
44-
font-size: 75%;
45-
}
46-
</style>
47-
</HEAD>
48-
<body>
49-
<div id="outer-layout">
50-
<div class="ui-layout-pane-west">
51-
<div class="content">
52-
<a href="nested.html#" class="toggleSlide">Toggle slide</a>
53-
<div>Outer layout west</div>
54-
</div>
55-
</div>
56-
<div id="inner-layout" class="ui-layout-pane-center">
57-
<div class="ui-layout-pane-north"><div class="content">Inner layout North</div></div>
58-
<div class="ui-layout-pane-center"><div class="content">Inner layout Center </div></div>
59-
<div class="ui-layout-pane-south"><div class="content">Inner layout South</div></div>
60-
</div>
61-
</div>
62-
</body>
1+
<html>
2+
<HEAD>
3+
<TITLE>Nested layout Example</TITLE>
4+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
5+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
6+
<script src="../../jquery-1.4.4.js"></script>
7+
<script src="../../ui/jquery.ui.core.js"></script>
8+
<script src="../../ui/jquery.ui.widget.js"></script>
9+
<script src="../../ui/jquery.ui.mouse.js"></script>
10+
<script src="../../ui/jquery.ui.resizable.js"></script>
11+
<script src="../../ui/jquery.ui.position.js"></script>
12+
<script src="../../ui/jquery.ui.layout.js"></script>
13+
<script src="../../ui/jquery.ui.button.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script type="text/javascript">
16+
17+
$(document).ready(function () {
18+
var $outer_layout = $('#outer-layout').layout({west: {sliding: true, hiding: true}});
19+
var $inner_layout = $('#inner-layout').layout({type:'vertical', north: {sliding: true}});
20+
$('.ui-layout-pane-west .toggleSlide').button().click(function(e){
21+
e.preventDefault();
22+
$outer_layout.layout('toggleSlide', 'west')
23+
});
24+
$inner_layout.bind('layoutnorthopen', function(e,data){
25+
var self = $inner_layout.data('layout')
26+
self.options[data.paneName].height = self.panes['center'].outerHeight() + 15
27+
});
28+
29+
//set the margin to 0 after the west pane has been closed
30+
$('.ui-layout-pane-west').bind('mouseenter', function(){
31+
$outer_layout.layout('open','west')
32+
}).bind('mouseleave', function(){
33+
$outer_layout.layout('close','west')
34+
});
35+
});
36+
</script>
37+
<style>
38+
body{
39+
height: 100%;
40+
width: 100%;
41+
padding:0;
42+
margin:0;
43+
}
44+
.ui-layout-pane div.content{
45+
text-align: center;
46+
height: 100%;
47+
overflow:hidden;
48+
}
49+
</style>
50+
</HEAD>
51+
<body>
52+
<div id="outer-layout">
53+
<div class="ui-layout-pane-west">
54+
<div class="content">
55+
<a href="nested.html#" class="toggleSlide">Toggle slide</a>
56+
<div>Outer layout west</div>
57+
</div>
58+
</div>
59+
<div id="inner-layout" class="ui-layout-pane-center">
60+
<div class="ui-layout-pane-north"><div class="content">Inner layout North</div></div>
61+
<div class="ui-layout-pane-center"><div class="content">Inner layout Center </div></div>
62+
<div class="ui-layout-pane-south"><div class="content">Inner layout South</div></div>
63+
</div>
64+
</div>
65+
</body>
6366
</html>

themes/base/jquery.ui.layout.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,54 @@
2727
padding-right: 16px;
2828
}
2929

30+
.ui-layout .ui-layout-pane.ui-layout-pane-close{
31+
border: none;
32+
}
33+
34+
35+
.ui-layout-pane.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-handle .ui-icon{
36+
background: none;
37+
width: 0;
38+
height:0;
39+
left:0;
40+
}
41+
42+
.ui-layout-pane-west.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-e {
43+
right: -1px;
44+
width: 1px;
45+
}
46+
.ui-layout-pane-east.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-w {
47+
left: -1px;
48+
width: 1px;
49+
}
50+
.ui-layout-pane-south.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-n {
51+
top: -1px;
52+
width: 1px;
53+
}
54+
.ui-layout-pane-north.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-s {
55+
bottom: -1px;
56+
width: 1px;
57+
}
58+
59+
60+
.ui-layout-pane-west.ui-layout-pane-sliding.ui-layout-pane-hiding,
61+
.ui-layout-pane-west.ui-layout-pane-close.ui-layout-pane-hiding{
62+
margin-right: 0;
63+
}
64+
.ui-layout-pane-east.ui-layout-pane-sliding.ui-layout-pane-hiding,
65+
.ui-layout-pane-east.ui-layout-pane-close.ui-layout-pane-hiding{
66+
margin-left: 0;
67+
}
68+
.ui-layout-pane-north.ui-layout-pane-sliding.ui-layout-pane-hiding,
69+
.ui-layout-pane-north.ui-layout-pane-close.ui-layout-pane-hiding{
70+
margin-bottom: 0;
71+
}
72+
.ui-layout-pane-south.ui-layout-pane-sliding.ui-layout-pane-hiding,
73+
.ui-layout-pane-south.ui-layout-pane-close.ui-layout-pane-hiding{
74+
margin-bottom: 0;
75+
}
76+
77+
3078
.ui-layout-pane-north{
3179
margin-bottom:16px;
3280
top: 0;

ui/jquery.ui.layout.js

Lines changed: 52 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
type: "horizontal", // vertical
3030
defaults: {
3131
closingWidth: 20,
32-
closingHeight: 20
32+
closingHeight: 20,
33+
toggleEvent: 'click',
34+
toggleSelector: '.ui-resizable-handle'
3335
},
3436
east: {
3537
selector: '.ui-layout-pane-east',
@@ -62,8 +64,9 @@
6264
resizable: { handles: 'n', maxHeight: 999999 }
6365
}
6466
},
67+
// todo : method to be used in order to slide a pane on opening an closing action (instead of resizing it)
6568
_positionProp: function(pane){
66-
var prop = ''
69+
var prop ;
6770
switch(pane){
6871
case 'west': prop = 'left'; break;
6972
case 'east': prop = 'right'; break;
@@ -76,6 +79,7 @@
7679
prefix = prefix || '';
7780
return toCamelCase(prefix +" " + (this.options[pane].resizable.handles.match(/e|w/) ? 'width' : 'height') );
7881
},
82+
7983
_create: function(){
8084
var self = this;
8185

@@ -98,12 +102,12 @@
98102
// init side panes as resizable elements
99103
if (pane != 'center'){
100104

105+
101106
// init pane as rezisable element
102107
$pane.resizable($.extend({}, self.options[pane].resizable,{
103108
containment: 'parent'
104109
}));
105110

106-
107111
$pane.bind('resizestart', function(e,ui){
108112
self._open(pane)
109113

@@ -136,12 +140,29 @@
136140
self.resize();
137141
});
138142

139-
var preventToggling = false ;
143+
var preventToggling = false;
144+
140145
$pane.bind('resizestop', function(e,ui){
146+
141147
// remove conflicting attributes
142148
self._removeInlineStyleAttr(pane);
149+
150+
// remove potential iframe mask
143151
$pane.children('div.iframe-mask').remove();
144152

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+
145166
// close the sidePane if not visible anymore, otherwise record its dimension
146167
if (ui.size[self._sizeProp(pane)] < self.options[pane][self._sizeProp(pane, 'closing')]){
147168
self.close(pane)
@@ -151,26 +172,24 @@
151172
self.options[pane][self._sizeProp(pane)] = ui.size[self._sizeProp(pane)]
152173
}
153174

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)
161175
});
162176

163177
// toggle the pane if clicking on the handler
164178
$pane.data('resizable')._handles
165179
.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+
})
170186
}
171187

172188
self.panes[pane] = $pane ;
173189

190+
191+
self._hiding(pane, self.options[pane].hiding) ;
192+
174193
// set pane dimension
175194
if(self.options[pane].sliding){
176195
self._sliding(pane)
@@ -201,6 +220,7 @@
201220
})
202221
}
203222
},
223+
204224
_resizeElement: function(){
205225
var self = this;
206226

@@ -284,32 +304,40 @@
284304
sliding = ("undefined" == typeof sliding) ? true : sliding;
285305
this.panes[pane][sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding');
286306
},
307+
_hiding: function(pane, hiding){
308+
hiding = ("undefined" == typeof hiding) ? false : hiding;
309+
this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding');
310+
},
287311
toggleSlide: function(pane){
288312
this.options[pane].sliding = !this.options[pane].sliding;
289313
this._sliding(pane, this.options[pane].sliding);
290314
this.resize();
291315
return this.element
292316
},
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}
295319
},
320+
321+
296322
_open: function(pane, trigg){
297323
trigg = ("undefined" == typeof trigg ) ? true : trigg;
298324
this.panes[pane].addClass('ui-layout-pane-open')
325+
this.panes[pane].removeClass('ui-layout-pane-close')
299326
this.options[pane].opened = true;
300327
if (trigg)
301-
this._trigger(pane+'open', null, this._pane(pane));
328+
this._trigger(pane+'open', null, this._ui(pane));
302329
},
303330
_opened: function(pane){
304-
this._trigger(pane+'opened', null, this._pane(pane));
331+
this._trigger(pane+'opened', null, this._ui(pane));
305332
},
306333
_close: function(pane){
307-
this._trigger(pane+'close', null, this._pane(pane));
334+
this._trigger(pane+'close', null, this._ui(pane));
308335
},
309336
_closed: function(pane){
310337
this.panes[pane].removeClass('ui-layout-pane-open')
338+
this.panes[pane].addClass('ui-layout-pane-close')
311339
this.options[pane].opened = false;
312-
this._trigger(pane+'closed', null, this._pane(pane));
340+
this._trigger(pane+'closed', null, this._ui(pane));
313341
},
314342

315343

@@ -342,7 +370,6 @@
342370
}
343371
},
344372

345-
346373
toggle: function(pane, callback){
347374
if (this.options[pane].opened)
348375
this.close(pane, callback);
@@ -393,13 +420,13 @@
393420
self.resize();
394421
},
395422
complete: function(){
423+
if (callback){
424+
callback();
425+
}
396426
if (!self.options[pane].sliding){
397427
//self._putBackground(pane)
398428
self.resize();
399429
}
400-
if (callback){
401-
callback();
402-
}
403430
}}
404431
);
405432
}

0 commit comments

Comments
 (0)