Skip to content

Commit b81b0c6

Browse files
Gabriel Schulhofarschmitz
Gabriel Schulhof
authored and
arschmitz
committed
Listview: Implement classes option
Fixes jquery-archivegh-7692 Fixes jquery-archivegh-7670
1 parent 3cf2944 commit b81b0c6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1261
-1157
lines changed

‎build/tasks/options/jscs.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,15 @@ module.exports = {
4646
"js/widgets/popup.js",
4747
"js/widgets/loader.js",
4848
"js/widgets/loader.backcompat.js",
49+
"js/widgets/listview.autodividers.js",
50+
"js/widgets/listview.backcompat.js",
51+
"js/widgets/listview.hidedividers.js",
52+
"js/widgets/listview.js",
4953

5054
// Tests
55+
"tests/integration/listview/autodividers_core.js",
56+
"tests/integration/listview/listview_core.js",
57+
"tests/integration/listview/backcompat_core.js",
5158
"tests/unit/textinput/settings.js",
5259
"tests/unit/textinput/textinput_core.js",
5360
"tests/integration/dialog/dialog_events.js",

‎css/structure/jquery.mobile.fixedToolbar.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,6 @@
7171
z-index: 10;
7272
}
7373
/* workarounds for other widgets */
74-
.ui-toolbar-android-2x-fixed .ui-li-has-thumb {
74+
.ui-toolbar-android-2x-fixed .ui-listview-item-has-thumbnail {
7575
-webkit-transform: translate3d(0,0,0);
7676
}

‎css/structure/jquery.mobile.forms.select.css

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,24 +54,25 @@
5454
display: block;
5555
}
5656

57-
/* ui-li-count is styled in the listview CSS. We set padding and offset here because select supports icon position while listview doesn't. */
58-
.ui-select .ui-li-has-count.ui-button {
57+
/* ui-listview-item-count is styled in the listview CSS. We set padding and offset here because
58+
select supports icon position while listview doesn't. */
59+
.ui-select .ui-listview-item-has-count.ui-button {
5960
padding-right: 2.8125em;
6061
}
61-
.ui-select .ui-li-has-count.ui-icon-end {
62+
.ui-select .ui-listview-item-has-count.ui-icon-end {
6263
padding-right: 4.6875em;
6364
}
64-
.ui-select .ui-icon-end .ui-li-count {
65+
.ui-select .ui-icon-end .ui-listview-item-count-bubble {
6566
right: 3.2em;
6667
}
6768

6869
/* Count indicator position must be different for mini version. */
69-
.ui-select.ui-mini .ui-btn-icon-right .ui-li-count {
70+
.ui-select.ui-mini .ui-btn-icon-right .ui-listview-item-count-bubble {
7071
right: 2.5em;
7172
}
7273

7374
/* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
74-
.ui-select .ui-button > span:not(.ui-li-count) {
75+
.ui-select .ui-button > span:not(.ui-listview-item-count-bubble) {
7576
display: block;
7677
text-overflow: ellipsis;
7778
overflow: hidden !important;
@@ -133,7 +134,7 @@
133134
border-bottom-width: 0;
134135
}
135136

136-
.ui-selectmenu .ui-button.ui-li-divider {
137+
.ui-selectmenu .ui-button.ui-listview-item-divider {
137138
cursor: default;
138139
}
139140

‎css/structure/jquery.mobile.listview.css

Lines changed: 36 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
position: relative;
2424
overflow: visible;
2525
}
26-
.ui-listview > .ui-li-static,
27-
.ui-listview > .ui-li-divider,
26+
.ui-listview > .ui-listview-item-static,
27+
.ui-listview > .ui-listview-item-divider,
2828
.ui-listview > li > a.ui-button {
2929
margin: 0;
3030
display: block;
@@ -37,20 +37,20 @@
3737
.ui-listview > li > .ui-button:focus {
3838
z-index: 1;
3939
}
40-
.ui-listview > .ui-li-static,
41-
.ui-listview > .ui-li-divider,
40+
.ui-listview > .ui-listview-item-static,
41+
.ui-listview > .ui-listview-item-divider,
4242
.ui-listview > li > a.ui-button {
4343
border-width: 1px 0 0 0;
4444
border-style: solid;
4545
}
46-
.ui-listview-inset > .ui-li-static,
47-
.ui-listview-inset > .ui-li-divider,
46+
.ui-listview-inset > .ui-listview-item-static,
47+
.ui-listview-inset > .ui-listview-item-divider,
4848
.ui-listview-inset > li > a.ui-button {
4949
border-right-width: 1px;
5050
border-left-width: 1px;
5151
}
52-
.ui-listview > .ui-li-static.ui-last-child,
53-
.ui-listview > .ui-li-divider.ui-last-child,
52+
.ui-listview > .ui-listview-item-static.ui-last-child,
53+
.ui-listview > .ui-listview-item-divider.ui-last-child,
5454
.ui-listview > li.ui-last-child > a.ui-button {
5555
border-bottom-width: 1px;
5656
}
@@ -76,7 +76,7 @@
7676
-webkit-border-bottom-left-radius: inherit;
7777
border-bottom-left-radius: inherit;
7878
}
79-
.ui-listview > li.ui-li-has-alt > a.ui-button {
79+
.ui-listview > li.ui-listview-item-has-alternate > a.ui-button {
8080
-webkit-border-top-right-radius: 0;
8181
border-top-right-radius: 0;
8282
-webkit-border-bottom-right-radius: 0;
@@ -94,49 +94,43 @@
9494
-webkit-border-bottom-right-radius: inherit;
9595
border-bottom-right-radius: inherit;
9696
}
97-
.ui-listview > li.ui-first-child img:first-child:not(.ui-li-icon) {
97+
.ui-listview > li.ui-first-child img:first-child:not(.ui-listview-item-icon) {
9898
-webkit-border-top-left-radius: inherit;
9999
border-top-left-radius: inherit;
100100
}
101-
.ui-listview > li.ui-last-child img:first-child:not(.ui-li-icon) {
101+
.ui-listview > li.ui-last-child img:first-child:not(.ui-listview-item-icon) {
102102
-webkit-border-bottom-left-radius: inherit;
103103
border-bottom-left-radius: inherit;
104104
}
105105
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) {
106106
-webkit-border-radius: inherit;
107107
border-radius: inherit;
108108
}
109-
.ui-listview > .ui-li-static {
109+
.ui-listview > .ui-listview-item-static {
110110
padding: .7em 1em;
111111
}
112-
.ui-listview > .ui-li-divider {
112+
.ui-listview > .ui-listview-item-divider {
113113
padding: .5em 1.143em;
114114
font-size: 14px;
115115
font-weight: bold;
116116
cursor: default;
117117
outline: 0; /* Dividers in custom selectmenus have tabindex */
118118
}
119-
.ui-listview > .ui-li-has-count > .ui-button,
120-
.ui-listview > .ui-li-static.ui-li-has-count,
121-
.ui-listview > .ui-li-divider.ui-li-has-count {
119+
.ui-listview > .ui-listview-item-has-count > .ui-button,
120+
.ui-listview > .ui-listview-item-static.ui-listview-item-has-count,
121+
.ui-listview > .ui-listview-item-divider.ui-listview-item-has-count {
122122
padding-right: 2.8125em;
123123
}
124-
.ui-listview > .ui-li-has-count > .ui-icon-end {
124+
.ui-listview > .ui-listview-item-has-count > .ui-icon-end {
125125
padding-right: 4.6875em;
126126
}
127-
.ui-listview > .ui-li-has-thumb > .ui-button,
128-
.ui-listview > .ui-li-static.ui-li-has-thumb {
127+
.ui-listview > .ui-listview-item-has-thumbnail > .ui-button,
128+
.ui-listview > .ui-listview-item-static.ui-listview-item-has-thumbnail {
129129
min-height: 3.625em;
130130
padding-left: 6.25em;
131131
}
132-
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
133-
.ui-listview > .ui-li-has-icon > .ui-button,
134-
.ui-listview > .ui-li-static.ui-li-has-icon {
135-
min-height: 1.25em;
136-
padding-left: 2.5em;
137-
}
138132
/* Used by both listview and custom multiple select button */
139-
.ui-li-count {
133+
.ui-listview-item-count-bubble {
140134
position: absolute;
141135
font-size: 12.5px;
142136
font-weight: bold;
@@ -151,27 +145,22 @@
151145
top: 50%;
152146
margin-top: -.88em;
153147
}
154-
.ui-listview .ui-icon-end .ui-li-count {
148+
.ui-listview .ui-listview-item-count-bubble {
149+
background-color: inherit;
150+
border-color: inherit;
151+
}
152+
.ui-listview .ui-icon-end .ui-listview-item-count-bubble {
155153
right: 3.2em;
156154
}
157-
.ui-listview .ui-li-has-thumb > img:first-child,
158-
.ui-listview .ui-li-has-thumb > .ui-button > img:first-child,
159-
.ui-listview .ui-li-has-thumb .ui-li-thumb {
155+
.ui-listview .ui-listview-item-has-thumbnail > img:first-child,
156+
.ui-listview .ui-listview-item-has-thumbnail > .ui-button > img:first-child,
157+
.ui-listview .ui-listview-item-has-thumbnail .ui-listview-item-thumbnail {
160158
position: absolute;
161159
left: 0;
162160
top: 0;
163161
max-height: 5em;
164162
max-width: 5em;
165163
}
166-
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
167-
.ui-listview > .ui-li-has-icon > img:first-child,
168-
.ui-listview > .ui-li-has-icon > .ui-button > img:first-child {
169-
position: absolute;
170-
left: .625em;
171-
top: .9em;
172-
max-height: 1em;
173-
max-width: 1em;
174-
}
175164
.ui-listview > li h1,
176165
.ui-listview > li h2,
177166
.ui-listview > li h3,
@@ -195,18 +184,18 @@
195184
overflow: hidden;
196185
white-space: nowrap;
197186
}
198-
.ui-listview .ui-li-aside {
187+
.ui-listview .ui-listview-item-aside {
199188
position: absolute;
200189
top: 1em;
201190
right: 3.333em;
202191
margin: 0;
203192
text-align: right;
204193
}
205-
.ui-listview > li.ui-li-has-alt > .ui-button {
194+
.ui-listview > li.ui-listview-item-has-alternate > .ui-button {
206195
margin-right: 2.5em;
207196
border-right-width: 0;
208197
}
209-
.ui-listview > li.ui-li-has-alt > .ui-button + .ui-button {
198+
.ui-listview > li.ui-listview-item-has-alternate > .ui-button + .ui-button {
210199
position: absolute;
211200
width: 2.5em;
212201
height: 100%;
@@ -220,22 +209,22 @@
220209
padding: 0;
221210
z-index: 2;
222211
}
223-
.ui-listview-inset > li.ui-li-has-alt > .ui-button + .ui-button {
212+
.ui-listview-inset > li.ui-listview-item-has-alternate > .ui-button + .ui-button {
224213
border-right-width: 1px;
225214
}
226-
.ui-listview > li.ui-li-has-alt > .ui-button + .ui-button:focus {
215+
.ui-listview > li.ui-listview-item-has-alternate > .ui-button + .ui-button:focus {
227216
z-index: 3;
228217
}
229218
ol.ui-listview,
230-
ol.ui-listview > .ui-li-divider {
219+
ol.ui-listview > .ui-listview-item-divider {
231220
counter-reset: listnumbering;
232221
}
233222
ol.ui-listview > li > .ui-button,
234-
ol.ui-listview > li.ui-li-static {
223+
ol.ui-listview > li.ui-listview-item-static {
235224
vertical-align: middle;
236225
}
237226
ol.ui-listview > li > .ui-button:first-child:before,
238-
ol.ui-listview > li.ui-li-static:before,
227+
ol.ui-listview > li.ui-listview-item-static:before,
239228
ol.ui-listview > li.ui-field-contain > label:before,
240229
ol.ui-listview > li.ui-field-contain > .ui-controlgroup-label:before {
241230
display: inline-block;

‎css/themes/default/jquery.mobile.theme.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ label.ui-button {
9494
/* Flipswitch */
9595
.ui-flipswitch.ui-corner-all,
9696
/* Count bubble */
97-
.ui-li-count {
97+
.ui-listview-item-count-bubble {
9898
-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
9999
border-radius: .3125em /*{global-radii-buttons}*/;
100100
}

‎demos/_assets/css/jqm-demos.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@
205205
}
206206
.jqm-demos .jqm-list .ui-button,
207207
.jqm-demos .jqm-list .ui-button:visited,
208-
.jqm-demos .jqm-list .ui-li-divider {
208+
.jqm-demos .jqm-list .ui-listview-item-divider {
209209
font-family: 'Open Sans', sans-serif;
210210
font-weight: 300;
211211
text-shadow: none !important;
@@ -217,15 +217,15 @@
217217
.jqm-demos .jqm-list .ui-button.ui-button-active {
218218
color: #fff;
219219
}
220-
.jqm-demos .jqm-list .ui-li-divider {
220+
.jqm-demos .jqm-list .ui-listview-item-divider {
221221
color: #3eb249;
222222
}
223223

224224
/* Navmenu */
225225
.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading {
226226
margin: 0;
227227
}
228-
.jqm-navmenu-panel .ui-collapsible.ui-li-static {
228+
.jqm-navmenu-panel .ui-collapsible.ui-listview-item-static {
229229
padding: 0;
230230
border: none !important;
231231
}

‎demos/_assets/js/jqm-demos.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,8 @@ $( document ).one( "pagecreate", ".jqm-demos", function( event ) {
153153

154154
$( this )
155155
.find( "a" )
156-
.append( "<span class='jqm-search-results-keywords ui-li-desc'>" + text + "</span>" );
156+
.append( "<span class='jqm-search-results-keywords ui-listview-item-description'>" +
157+
text + "</span>" );
157158
});
158159
});
159160

‎demos/backbone-requirejs/backbone-require.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ <h1>Vehicles</h1>
7777

7878
<% _.each( collection.toJSON(), function( category, id ) { %>
7979

80-
<li class="ui-li-static">
80+
<li class="ui-listview-item-static">
8181
<%= category.type %>
8282
</li>
8383

‎demos/external-widgets/page-d.php

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,57 +31,57 @@
3131
<div class="ui-content" role="main">
3232

3333
<ul data-role="listview" data-theme="a" data-dividertheme="b" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search messages...">
34-
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
34+
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-listview-item-count-bubble">2</span></li>
3535
<li><a href="#">
3636
<h3>Stephen Weber</h3>
3737
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
3838
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
39-
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
39+
<p class="ui-listview-item-aside"><strong>6:24</strong>PM</p>
4040
</a></li>
4141
<li><a href="#">
4242
<h3>jQuery Team</h3>
4343
<p><strong>Boston Conference Planning</strong></p>
4444
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
45-
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
45+
<p class="ui-listview-item-aside"><strong>9:18</strong>AM</p>
4646
</a></li>
47-
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
47+
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-listview-item-count-bubble">1</span></li>
4848
<li><a href="#">
4949
<h3>Avery Walker</h3>
5050
<p><strong>Re: Dinner Tonight</strong></p>
5151
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
52-
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
52+
<p class="ui-listview-item-aside"><strong>4:48</strong>PM</p>
5353
</a></li>
54-
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
54+
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-listview-item-count-bubble">3</span></li>
5555
<li><a href="#">
5656
<h3>Amazon.com</h3>
5757
<p><strong>4-for-3 Books for Kids</strong></p>
5858
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
59-
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
59+
<p class="ui-listview-item-aside"><strong>12:47</strong>PM</p>
6060
</a></li>
6161
<li><a href="#">
6262
<h3>Mike Taylor</h3>
6363
<p><strong>Re: This weekend in Maine</strong></p>
6464
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
65-
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
65+
<p class="ui-listview-item-aside"><strong>6:24</strong>AM</p>
6666
</a></li>
6767
<li><a href="#">
6868
<h3>Redfin</h3>
6969
<p><strong>Redfin listing updates for today</strong></p>
7070
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
71-
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
71+
<p class="ui-listview-item-aside"><strong>5:52</strong>AM</p>
7272
</a></li>
73-
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
73+
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-listview-item-count-bubble">3</span></li>
7474
<li><a href="index.php">
7575
<h3>Angela Smith</h3>
7676
<p><strong>Link Request</strong></p>
7777
<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>
78-
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
78+
<p class="ui-listview-item-aside"><strong>6:24</strong>AM</p>
7979
</a></li>
8080
<li><a href="index.php">
8181
<h3>Mike Taylor</h3>
8282
<p><strong>This weekend in Maine</strong></p>
8383
<p>Sounds good, let me check into our plans.</p>
84-
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
84+
<p class="ui-listview-item-aside"><strong>6:24</strong>AM</p>
8585
</a></li>
8686
</ul>
8787

0 commit comments

Comments
 (0)