Skip to content

Commit 40c1561

Browse files
jefflembeckjefflembeck
committed
Only thing left is to get push working correctly
1 parent 4fef31c commit 40c1561

File tree

3 files changed

+43
-39
lines changed

3 files changed

+43
-39
lines changed

‎css/structure/jquery.mobile.panel.css‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
.ui-panel{
33
height: 100%;
44
border:0;
5-
}
6-
.ui-panel.ui-panel-open {
75
max-width: 28em;
86
width: 90%;
7+
top: 0;
98
}
9+
1010
.ui-panel-open,
1111
.ui-panel-open *,
1212
.ui-panel-open + *,
@@ -31,17 +31,22 @@
3131
.ui-panel-display-push,
3232
.ui-panel-content-wrap,
3333
.ui-panel-dismiss {
34-
z-index: 99999;
3534
-webkit-transition: width 250ms ease, left 250ms ease, right 250ms ease;
3635
-moz-transition: width 250ms ease, left 250ms ease, right 250ms ease;
3736
-o-transition: width 250ms ease, left 250ms ease, right 250ms ease;
3837
-ms-transition: width 250ms ease, left 250ms ease, right 250ms ease;
3938
transition: width 250ms ease, left 250ms ease, right 250ms ease;
4039
}
40+
.ui-panel-display-overlay,
41+
.ui-panel-display-push,
42+
.ui-panel-dismiss {
43+
z-index: 99999;
44+
}
4145

4246
/* display and reveal */
4347
.ui-panel-display-overlay,
44-
.ui-panel-display-reveal {
48+
.ui-panel-display-reveal,
49+
.ui-panel-display-push {
4550
position: absolute;
4651
}
4752

@@ -50,46 +55,39 @@
5055
}
5156

5257
.ui-panel-display-overlay.ui-panel-position-left,
53-
.ui-panel-display-reveal.ui-panel-position-left {
58+
.ui-panel-display-push.ui-panel-position-left {
5459
left: -80%;
5560
}
5661
.ui-panel-open.ui-panel-display-overlay.ui-panel-position-left,
57-
.ui-panel-open.ui-panel-display-reveal.ui-panel-position-left{
62+
.ui-panel-open.ui-panel-display-push.ui-panel-position-left,
63+
.ui-panel-display-reveal.ui-panel-position-left{
5864
left: 0;
5965
}
6066
.ui-panel-display-overlay.ui-panel-position-right,
61-
.ui-panel-display-reveal.ui-panel-position-right {
67+
.ui-panel-display-push.ui-panel-position-right {
6268
right: -80%;
6369
}
6470
.ui-panel-open.ui-panel-display-overlay.ui-panel-position-right,
65-
.ui-panel-open.ui-panel-display-reveal.ui-panel-position-right {
71+
.ui-panel-open.ui-panel-display-push.ui-panel-position-right,
72+
.ui-panel-display-reveal.ui-panel-position-right {
6673
right: 0;
6774
}
6875

69-
/* push */
70-
.ui-panel-display-push {
71-
width: 0;
72-
overflow: hidden;
73-
}
74-
.ui-panel-display-push.ui-panel-position-left {
75-
float: left;
76-
}
77-
.ui-panel-display-push.ui-panel-position-right {
78-
float: right;
79-
}
8076

8177

8278
/* content-wrap */
8379

8480
.ui-panel-content-wrap {
8581
position: relative;
8682
background: inherit;
87-
}
88-
.ui-panel-open.ui-panel-display-push.ui-panel-position-left ~.ui-panel-content-wrap {
83+
z-index: 1;
8984
display: table;
9085
}
91-
.ui-panel-open.ui-panel-display-push.ui-panel-position-right ~.ui-panel-content-wrap{
92-
display: table;
86+
.ui-panel-content-wrap.reveal-left, .ui-panel-content-wrap.push-left {
87+
left: 28em;
88+
}
89+
.ui-panel-content-wrap.reveal-right, .ui-panel-content-wrap.push-right {
90+
right: 28em;
9391
}
9492

9593

‎docs/panels/index.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ <h2>Create new user</h2>
203203

204204
<div class="switch">
205205
<label for="status">Status</label>
206-
<select name="status" id="slider2" data-role="slider" data-mini="true">
206+
<select name="status" id="slider" data-role="slider" data-mini="true">
207207
<option value="off">Inactive</option>
208208
<option value="on">Active</option>
209209
</select>
@@ -213,6 +213,7 @@ <h2>Create new user</h2>
213213
<div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
214214
<div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
215215
</div>
216+
</form>
216217

217218
<!-- panel content goes here -->
218219
</div><!-- /panel -->
@@ -224,13 +225,13 @@ <h2>Create new user</h2>
224225
<form class="userform">
225226
<h2>Create new user</h2>
226227
<label for="name">Name</label>
227-
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
228+
<input type="text" name="name" id="name2" value="" data-clear-btn="true" data-mini="true">
228229

229230
<label for="email">Email</label>
230-
<input type="email" name="email" id="status" value="" data-clear-btn="true" data-mini="true">
231+
<input type="email" name="email" id="status2" value="" data-clear-btn="true" data-mini="true">
231232

232233
<label for="password">Password:</label>
233-
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
234+
<input type="password" name="password2" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
234235

235236
<div class="switch">
236237
<label for="status">Status</label>
@@ -244,6 +245,7 @@ <h2>Create new user</h2>
244245
<div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
245246
<div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
246247
</div>
248+
</form>
247249

248250
<!-- panel content goes here -->
249251
</div><!-- /panel -->
@@ -254,17 +256,17 @@ <h2>Create new user</h2>
254256
<form class="userform">
255257
<h2>Create new user</h2>
256258
<label for="name">Name</label>
257-
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
259+
<input type="text" name="name" id="name3" value="" data-clear-btn="true" data-mini="true">
258260

259261
<label for="email">Email</label>
260-
<input type="email" name="email" id="status" value="" data-clear-btn="true" data-mini="true">
262+
<input type="email" name="email" id="status3" value="" data-clear-btn="true" data-mini="true">
261263

262264
<label for="password">Password:</label>
263-
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
265+
<input type="password" name="password" id="password3" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
264266

265267
<div class="switch">
266268
<label for="status">Status</label>
267-
<select name="status" id="slider2" data-role="slider" data-mini="true">
269+
<select name="status" id="slider3" data-role="slider" data-mini="true">
268270
<option value="off">Inactive</option>
269271
<option value="on">Active</option>
270272
</select>
@@ -274,6 +276,7 @@ <h2>Create new user</h2>
274276
<div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
275277
<div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
276278
</div>
279+
</form>
277280

278281
<!-- panel content goes here -->
279282
</div><!-- /panel -->

‎js/widgets/panel.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ $.widget( "mobile.panel", $.mobile.widget, {
5656
if( self.options.dismissible ){
5757
self._createModal();
5858
}
59+
// move the panel to the right place in the DOM
60+
self.element[ this.options.position === "left" ? "insertBefore" : "insertAfter" ]( self._wrapper );
5961

6062
self._trigger( "create" );
6163
},
@@ -117,13 +119,13 @@ $.widget( "mobile.panel", $.mobile.widget, {
117119
self.close.call( self );
118120
})
119121
// Close immediately if another panel on the page opens
120-
.on( "pagebeforeopen", function( e ){
122+
.on( "panelbeforeopen", function( e ){
121123
if( self._open && e.target !== self.element ){
122124
self.close.call( self , true );
123125
}
124126
})
125127
// clean up open panels after page hide
126-
.on( "pagebeforehide", function( e ) {
128+
.on( "panelbeforehide", function( e ) {
127129
self.close.call( self );
128130
})
129131
// on escape, close? might need to have a target check too...
@@ -145,8 +147,6 @@ $.widget( "mobile.panel", $.mobile.widget, {
145147
self._trigger( "open" );
146148
};
147149

148-
// move the panel to the right place in the DOM
149-
self.element[ o.position === "left" ? "insertBefore" : "insertAfter" ]( self._wrapper );
150150

151151
self._trigger( "beforeopen" );
152152

@@ -158,23 +158,26 @@ $.widget( "mobile.panel", $.mobile.widget, {
158158

159159
self._modal.addClass( o.classes.modalOpen );
160160
self.element.addClass( o.classes.panelOpen );
161+
self._wrapper.addClass( o.display + "-" + o.position );
161162

162163
self._open = true;
163164

164165
},
165166

166167
close: function( immediate ){
167168
var o = this.options,
169+
self = this,
168170
complete = function(){
169171
self._trigger( "close" );
170172
};
171173

172-
this._trigger( "beforeclose" );
174+
self._trigger( "beforeclose" );
173175

174-
this.element.removeClass( o.classes.panelOpen + " " + o.classes.openComplete );
175-
this._modal.removeClass( o.classes.modalOpen );
176+
self.element.removeClass( o.classes.panelOpen + " " + o.classes.openComplete );
177+
self._modal.removeClass( o.classes.modalOpen );
178+
self._wrapper.removeClass( o.display + "-" + o.position );
176179

177-
this._open = false;
180+
self._open = false;
178181
},
179182

180183
toggle: function( options ){

0 commit comments

Comments
 (0)