Skip to content

Commit 18d4815

Browse files
jaspermdegrootjaspermdegroot
committed
Modifications to swipe list demo.
1 parent f729761 commit 18d4815

File tree

2 files changed

+118
-65
lines changed

2 files changed

+118
-65
lines changed

‎docs/demos/_assets/img/avatar.jpg‎

-1.22 KB
Binary file not shown.

‎docs/demos/swipe/swipe-list.html‎

Lines changed: 118 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -12,54 +12,76 @@
1212
<script>
1313
$( document ).on( "pageinit", "#demo-page", function() {
1414

15+
// Swipe to remove list item
1516
$( document ).on( "swipeleft swiperight", "#list .ui-li", function( event ) {
1617
var dir = event.type === "swipeleft" ? "left" : "right",
1718
listitem = $( this );
18-
19+
20+
// Inject topic in confirmation popup after removing any previous injected topics
21+
$( "#confirm .topic" ).remove();
22+
listitem.find( ".topic" ).clone().insertAfter( "#question" );
23+
1924
// Show the confirmation popup
2025
$( "#confirm" ).popup( "open" );
2126

2227
$( "#confirm #yes" ).on( "click", function() {
23-
// Check if the browser supports our CSS transition
24-
if ( $.mobile.support.cssTransform3d ) {
28+
29+
// Check if the browser supports the transform (3D) CSS transition
30+
// TO DO: CHANGE .touch INTO .cssTransform3d WHEN THE SUPPORT TEST HAS BEEN FIXED: #5359
31+
if ( $.mobile.support.touch ) {
32+
2533
listitem
2634
// Add the class for the transition
2735
.addClass( dir )
2836
// When the transition is done...
2937
.on( "webkitTransitionEnd transitionend otransitionend", function() {
3038
// ...the list item will be removed
3139
listitem.remove();
32-
// ...the list will be refreshed and the border styling class removed
40+
// ...the list will be refreshed and the temporary class for border styling removed
3341
$( "#list" ).listview( "refresh" ).find( ".ui-li.border" ).removeClass( "border" );
3442
})
3543
// During the transition the previous list item should get bottom border
3644
.prev( ".ui-li" ).addClass( "border" );
3745
}
38-
// Otherwise just remove the list item and refresh the list
46+
// If the CSS transition isn't supported just remove the list item and refresh the list
3947
else {
4048
listitem.remove();
4149
$( "#list" ).listview( "refresh" );
4250
}
4351
});
4452
});
4553

54+
// If it's not a touch device...
4655
if ( ! $.mobile.support.touch ) {
56+
4757
// Remove the class that is used to hide the delete button on touch devices
4858
$( "#list" ).removeClass( "touch" );
4959

50-
// Handles removal of the list item when the delete button is clicked
60+
// Click delete split-button to remove list item
5161
$( ".delete" ).on( "click", function() {
52-
var listitem = $( this );
62+
var splitbutton = $( this );
5363

64+
// Inject topic in confirmation popup after removing any previous injected topics
65+
$( "#confirm .topic" ).remove();
66+
splitbutton.parent( ".ui-li" ).find( ".topic" ).clone().insertAfter( "#question" );
67+
68+
// Show the confirmation popup
5469
$( "#confirm" ).popup( "open" );
5570

5671
$( "#confirm #yes" ).on( "click", function() {
5772

58-
listitem.parent( ".ui-li" ).remove();
73+
// Remove the list item and refresh the list
74+
splitbutton.parent( ".ui-li" ).remove();
5975
$( "#list" ).listview( "refresh" );
6076
});
6177
});
6278
}
79+
80+
// Unbind when the cancel button is clicked
81+
$( "#confirm #cancel" ).on( "click", function() {
82+
$( "#confirm #yes" ).off();
83+
});
84+
6385
});
6486
</script>
6587
<style>
@@ -73,7 +95,7 @@
7395
-o-transform: translateX(-100%);
7496
transition: transform 250ms ease;
7597
transform: translateX(-100%);
76-
border-top-width: 0;
98+
border-top-width: 0; /* We switch to border bottom on previous list item */
7799
border-right-width: 1px;
78100
}
79101
/* Right transition */
@@ -86,10 +108,10 @@
86108
-o-transform: translateX(100%);
87109
transition: transform 250ms ease;
88110
transform: translateX(100%);
89-
border-top-width: 0;
111+
border-top-width: 0; /* We switch to border bottom on previous list item */
90112
border-left-width: 1px;
91113
}
92-
/* Border bottom for the previous list item */
114+
/* Border bottom for the previous list item during the transition*/
93115
li.ui-li.border {
94116
border-bottom-width: 1px;
95117
}
@@ -100,10 +122,32 @@
100122
.touch .ui-link-inherit {
101123
padding-right: 15px !important;
102124
}
103-
/* Maximize the width of the confirmation popup */
125+
/* Custom styling for the popup */
104126
#confirm {
127+
border: 1px solid rgba(4,64,98,.4);
128+
background: rgba(69,111,154,.8);
129+
-moz-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
130+
-webkit-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
131+
box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
105132
max-width: 250px;
106133
}
134+
#confirm p {
135+
color: #fff;
136+
text-shadow: 0 1px 1px rgba(0,0,0,.6);
137+
margin-bottom: .75em;
138+
}
139+
/* Make the buttons inherit the popup border-radius (.ui-corner-all) */
140+
#confirm div, #confirm .ui-btn-corner-all {
141+
-webkit-border-radius: inherit;
142+
border-radius: inherit;
143+
}
144+
#confirm #cancel {
145+
background-image: none;
146+
}
147+
#confirm .topic.ui-li-desc {
148+
font-size: inherit; /* The cloned topic will have class ui-li-desc so we negate the font-size settings of this class */
149+
text-align: center;
150+
}
107151
</style>
108152
</head>
109153
<body>
@@ -119,8 +163,10 @@ <h1>Swipe list demo</h1>
119163

120164
<div class="content-primary">
121165

166+
<h2>Using swipe event to remove a list item</h2>
167+
122168
<div data-demo-html="#demo-page" data-demo-js="true" data-demo-css="true">
123-
<p>This demo shows how you can remove list items on swipe left or right with a delete split-button for devices without touchscreen. In this example the user has to confirm the deletion first.</p>
169+
<p>This demo shows how you can remove list items by swiping left or right. For devices without touchscreen there is a delete button. This demo also contains a custom styled confirmation popup.</p>
124170

125171
<p><a href="#demo-page" data-transition="fade" data-role="button" data-inline="true" data-theme="c">Open swipe list demo</a></p>
126172
</div>
@@ -131,6 +177,7 @@ <h1>Swipe list demo</h1>
131177

132178
</div><!-- /page -->
133179

180+
134181
<div data-role="page" id="demo-page" data-title="Inbox" data-theme="d">
135182

136183
<div data-role="header" data-position="fixed" data-theme="b">
@@ -143,134 +190,126 @@ <h1>Inbox</h1>
143190

144191
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="delete" data-split-theme="d">
145192
<li>
146-
<a href="#">
147-
<img src="../_assets/img/avatar.jpg" alt="avatar">
193+
<a href="#demo-mail">
148194
<h3>Avery Walker</h3>
149-
<p><strong>Re: Dinner Tonight</strong></p>
195+
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
150196
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
151197
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
152198
</a>
153199
<a href="#" class="delete">Delete</a>
154200
</li>
155201
<li>
156-
<a href="#">
202+
<a href="#demo-mail">
157203
<h3>Amazon.com</h3>
158-
<p><strong>4-for-3 Books for Kids</strong></p>
204+
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
159205
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
160206
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
161207
</a>
162208
<a href="#" class="delete">Delete</a>
163209
</li>
164210
<li>
165-
<a href="#">
166-
<img src="../_assets/img/avatar.jpg" alt="avatar">
211+
<a href="#demo-mail">
167212
<h3>Mike Taylor</h3>
168-
<p><strong>Re: This weekend in Maine</strong></p>
213+
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
169214
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
170215
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
171216
</a>
172217
<a href="#" class="delete">Delete</a>
173218
</li>
174219
<li>
175-
<a href="#">
220+
<a href="#demo-mail">
176221
<h3>Redfin</h3>
177-
<p><strong>Redfin listing updates for today</strong></p>
222+
<p class="topic"><strong>Redfin listing updates for today</strong></p>
178223
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
179224
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
180225
</a>
181226
<a href="#" class="delete">Delete</a>
182227
</li>
183228
<li>
184-
<a href="#">
185-
<img src="../_assets/img/avatar.jpg" alt="avatar">
229+
<a href="#demo-mail">
186230
<h3>Angela Smith</h3>
187-
<p><strong>Link Request</strong></p>
231+
<p class="topic"><strong>Link Request</strong></p>
188232
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
189233
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
190234
</a>
191235
<a href="#" class="delete">Delete</a>
192236
</li>
193237
<li>
194-
<a href="#">
195-
<img src="../_assets/img/avatar.jpg" alt="avatar">
238+
<a href="#demo-mail">
196239
<h3>Stephen Weber</h3>
197-
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
240+
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
198241
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
199242
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
200243
</a>
201244
<a href="#" class="delete">Delete</a>
202245
</li>
203246
<li>
204-
<a href="#">
247+
<a href="#demo-mail">
205248
<h3>jQuery Team</h3>
206-
<p><strong>Boston Conference Planning</strong></p>
249+
<p class="topic"><strong>Boston Conference Planning</strong></p>
207250
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
208251
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
209252
</a>
210253
<a href="#" class="delete">Delete</a>
211254
</li>
212255
<li>
213-
<a href="#">
214-
<img src="../_assets/img/avatar.jpg" alt="avatar">
256+
<a href="#demo-mail">
215257
<h3>Avery Walker</h3>
216-
<p><strong>Re: Dinner Tonight</strong></p>
258+
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
217259
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
218260
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
219261
</a>
220262
<a href="#" class="delete">Delete</a>
221263
</li>
222264
<li>
223-
<a href="#">
265+
<a href="#demo-mail">
224266
<h3>Amazon.com</h3>
225-
<p><strong>4-for-3 Books for Kids</strong></p>
267+
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
226268
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
227269
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
228270
</a>
229271
<a href="#" class="delete">Delete</a>
230272
</li>
231273
<li>
232-
<a href="#">
233-
<img src="../_assets/img/avatar.jpg" alt="avatar">
274+
<a href="#demo-mail">
234275
<h3>Mike Taylor</h3>
235-
<p><strong>Re: This weekend in Maine</strong></p>
276+
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
236277
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
237278
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
238279
</a>
239280
<a href="#" class="delete">Delete</a>
240281
</li>
241282
<li>
242-
<a href="#">
283+
<a href="#demo-mail">
243284
<h3>Redfin</h3>
244-
<p><strong>Redfin listing updates for today</strong></p>
285+
<p class="topic"><strong>Redfin listing updates for today</strong></p>
245286
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
246287
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
247288
</a>
248289
<a href="#" class="delete">Delete</a>
249290
</li>
250291
<li>
251-
<a href="#">
252-
<img src="../_assets/img/avatar.jpg" alt="avatar">
292+
<a href="#demo-mail">
253293
<h3>Angela Smith</h3>
254-
<p><strong>Link Request</strong></p>
294+
<p class="topic"><strong>Link Request</strong></p>
255295
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
256296
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
257297
</a>
258298
<a href="#" class="delete">Delete</a>
259299
</li>
260300
<li>
261-
<a href="#">
262-
<img src="../_assets/img/avatar.jpg" alt="avatar">
301+
<a href="#demo-mail">
263302
<h3>Stephen Weber</h3>
264-
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
303+
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
265304
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
266305
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
267306
</a>
268307
<a href="#" class="delete">Delete</a>
269308
</li>
270309
<li>
271-
<a href="#">
310+
<a href="#demo-mail">
272311
<h3>jQuery Team</h3>
273-
<p><strong>Boston Conference Planning</strong></p>
312+
<p class="topic"><strong>Boston Conference Planning</strong></p>
274313
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
275314
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
276315
</a>
@@ -280,27 +319,41 @@ <h3>jQuery Team</h3>
280319

281320
</div><!-- /content -->
282321

283-
<div id="confirm" data-role="popup">
284-
<div data-role="header" data-theme="d">
285-
<h3>Confirm</h3>
286-
</div><!-- /header -->
287-
<div data-role="content">
322+
<div id="confirm" class="ui-content" data-role="popup" data-overlay-theme="a" data-theme="none">
288323

289-
<p>Are you sure you want to delete this item?</p>
290-
291-
<div class="ui-grid-a">
292-
<div class="ui-block-a">
293-
<a id="yes" data-role="button" data-mini="true" data-theme="b" data-rel="back">Yes</a>
294-
</div>
295-
<div class="ui-block-b">
296-
<a data-role="button" data-mini="true" data-rel="back">Cancel</a>
297-
</div>
298-
</div>
324+
<p id="question">Are you sure you want to delete</p>
325+
326+
<div class="ui-grid-a">
327+
<div class="ui-block-a">
328+
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Yes</a>
329+
</div>
330+
<div class="ui-block-b">
331+
<a id="cancel" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Cancel</a>
332+
</div>
333+
</div>
299334

300-
</div><!-- /content -->
301335
</div><!-- /popup -->
302336

303337
</div><!-- /page -->
304338

339+
340+
<div data-role="page" id="demo-mail" data-title="Demo" data-theme="d">
341+
342+
<div data-role="header" data-position="fixed" data-theme="b">
343+
<h1>Demo</h1>
344+
<a href="#demo-page" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
345+
</div><!-- /header -->
346+
347+
<div data-role="content">
348+
349+
<p>This is just a landing page for demo purposes.</p>
350+
351+
<p><a href="#demo-page" data-rel="back" data-role="button" data-inline="true" data-icon="arrow-l" data-iconpos="left">Back</a></p>
352+
353+
354+
</div><!-- /content -->
355+
356+
</div><!-- /page -->
357+
305358
</body>
306359
</html>

0 commit comments

Comments
 (0)