Skip to content

Commit 3cf2944

Browse files
frequentarschmitz
frequent
authored and
arschmitz
committed
Listview: Add support for enhanced option
Fixes jquery-archivegh-7161 Closes jquery-archivegh-7162
1 parent 24c072b commit 3cf2944

File tree

3 files changed

+139
-99
lines changed

3 files changed

+139
-99
lines changed

‎js/widgets/listview.js

Lines changed: 105 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -44,23 +44,26 @@ return $.widget( "mobile.listview", $.extend( {
4444
splitTheme: null,
4545
corners: true,
4646
shadow: true,
47-
inset: false
47+
inset: false,
48+
enhanced: false
4849
},
4950

5051
_create: function() {
5152
var t = this,
53+
o = t.options,
5254
listviewClasses = "";
5355

54-
listviewClasses += t.options.inset ? " ui-listview-inset" : "";
56+
if ( !o.enhanced ) {
57+
listviewClasses += o.inset ? " ui-listview-inset" : "";
5558

56-
if ( !!t.options.inset ) {
57-
listviewClasses += t.options.corners ? " ui-corner-all" : "";
58-
listviewClasses += t.options.shadow ? " ui-shadow" : "";
59-
}
60-
61-
// create listview markup
62-
t.element.addClass( " ui-listview" + listviewClasses );
59+
if ( !!o.inset ) {
60+
listviewClasses += o.corners ? " ui-corner-all" : "";
61+
listviewClasses += o.shadow ? " ui-shadow" : "";
62+
}
6363

64+
// create listview markup
65+
t.element.addClass( " ui-listview" + listviewClasses );
66+
}
6467
t.refresh( true );
6568
},
6669

@@ -108,127 +111,130 @@ return $.widget( "mobile.listview", $.extend( {
108111
refresh: function( create ) {
109112
var buttonClass, pos, numli, item, itemClass, itemTheme, itemIcon, icon, a,
110113
isDivider, startCount, newStartCount, value, last, splittheme, splitThemeClass, spliticon,
111-
altButtonClass, dividerTheme, li,
114+
altButtonClass, dividerTheme, li, ol, start, itemClassDict, countBubbles, countTheme, countThemeClass,
112115
o = this.options,
113-
$list = this.element,
114-
ol = !!$.nodeName( $list[ 0 ], "ol" ),
115-
start = $list.attr( "start" ),
116-
itemClassDict = {},
117-
countBubbles = $list.find( ".ui-li-count" ),
118-
countTheme = getAttr( $list[ 0 ], "counttheme" ) || this.options.countTheme,
116+
$list = this.element;
117+
118+
if ( !o.enhanced ) {
119+
ol = !!$.nodeName( $list[ 0 ], "ol" );
120+
start = $list.attr( "start" );
121+
itemClassDict = {};
122+
countBubbles = $list.find( ".ui-li-count" );
123+
countTheme = getAttr( $list[ 0 ], "counttheme" ) || this.options.countTheme;
119124
countThemeClass = countTheme ? "ui-body-" + countTheme : "ui-body-inherit";
120125

121-
if ( o.theme ) {
122-
$list.addClass( "ui-group-theme-" + o.theme );
123-
}
126+
if ( o.theme ) {
127+
$list.addClass( "ui-group-theme-" + o.theme );
128+
}
124129

125-
// Check if a start attribute has been set while taking a value of 0 into account
126-
if ( ol && ( start || start === 0 ) ) {
127-
startCount = parseInt( start, 10 ) - 1;
128-
$list.css( "counter-reset", "listnumbering " + startCount );
129-
}
130+
// Check if a start attribute has been set while taking a value of 0 into account
131+
if ( ol && ( start || start === 0 ) ) {
132+
startCount = parseInt( start, 10 ) - 1;
133+
$list.css( "counter-reset", "listnumbering " + startCount );
134+
}
130135

131-
this._beforeListviewRefresh();
136+
this._beforeListviewRefresh();
132137

133-
li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" );
138+
li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" );
134139

135-
for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
136-
item = li.eq( pos );
137-
itemClass = "";
140+
for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
141+
item = li.eq( pos );
142+
itemClass = "";
138143

139-
if ( create || item[ 0 ].className.search( /\bui-li-static\b|\bui-li-divider\b/ ) < 0 ) {
140-
a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
141-
isDivider = ( getAttr( item[ 0 ], "role" ) === "list-divider" );
142-
value = item.attr( "value" );
143-
itemTheme = getAttr( item[ 0 ], "theme" );
144+
if ( create || item[ 0 ].className.search( /\bui-li-static\b|\bui-li-divider\b/ ) < 0 ) {
145+
a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
146+
isDivider = ( getAttr( item[ 0 ], "role" ) === "list-divider" );
147+
value = item.attr( "value" );
148+
itemTheme = getAttr( item[ 0 ], "theme" );
144149

145-
if ( a.length && a[ 0 ].className.search( /\bui-button\b/ ) < 0 && !isDivider ) {
146-
itemIcon = getAttr( item[ 0 ], "icon" );
147-
icon = ( itemIcon === false ) ? false : ( itemIcon || o.icon );
150+
if ( a.length && a[ 0 ].className.search( /\bui-button\b/ ) < 0 && !isDivider ) {
151+
itemIcon = getAttr( item[ 0 ], "icon" );
152+
icon = ( itemIcon === false ) ? false : ( itemIcon || o.icon );
148153

149-
// TODO: Remove in 1.5 together with links.js (links.js / .ui-link deprecated in 1.4)
150-
a.removeClass( "ui-link" );
154+
// TODO: Remove in 1.5 together with links.js (links.js / .ui-link deprecated in 1.4)
155+
a.removeClass( "ui-link" );
151156

152-
buttonClass = "ui-button";
157+
buttonClass = "ui-button";
153158

154-
if ( itemTheme ) {
155-
buttonClass += " ui-button-" + itemTheme;
156-
}
159+
if ( itemTheme ) {
160+
buttonClass += " ui-button-" + itemTheme;
161+
}
157162

158-
if ( a.length > 1 ) {
159-
itemClass = "ui-li-has-alt";
163+
if ( a.length > 1 ) {
164+
itemClass = "ui-li-has-alt";
160165

161-
last = a.last();
162-
splittheme = getAttr( last[ 0 ], "theme" ) || o.splitTheme || getAttr( item[ 0 ], "theme", true );
163-
splitThemeClass = splittheme ? " ui-button-" + splittheme : "";
164-
spliticon = getAttr( last[ 0 ], "icon" ) || getAttr( item[ 0 ], "icon" ) || o.splitIcon;
165-
altButtonClass = "ui-button ui-button-icon-only ui-icon-" + spliticon + splitThemeClass;
166+
last = a.last();
167+
splittheme = getAttr( last[ 0 ], "theme" ) || o.splitTheme || getAttr( item[ 0 ], "theme", true );
168+
splitThemeClass = splittheme ? " ui-button-" + splittheme : "";
169+
spliticon = getAttr( last[ 0 ], "icon" ) || getAttr( item[ 0 ], "icon" ) || o.splitIcon;
170+
altButtonClass = "ui-button ui-button-icon-only ui-icon-" + spliticon + splitThemeClass;
166171

167-
last
168-
.attr( "title", $.trim( last.getEncodedText() ) )
169-
.addClass( altButtonClass )
170-
.empty();
172+
last
173+
.attr( "title", $.trim( last.getEncodedText() ) )
174+
.addClass( altButtonClass )
175+
.empty();
171176

172-
// Reduce to the first anchor, because only the first gets the buttonClass
173-
a = a.first();
174-
} else if ( icon ) {
175-
buttonClass += " ui-icon-end ui-icon-" + icon;
176-
}
177+
// Reduce to the first anchor, because only the first gets the buttonClass
178+
a = a.first();
179+
} else if ( icon ) {
180+
buttonClass += " ui-icon-end ui-icon-" + icon;
181+
}
177182

178-
// Apply buttonClass to the (first) anchor
179-
a.addClass( buttonClass );
180-
} else if ( isDivider ) {
181-
dividerTheme = ( getAttr( item[ 0 ], "theme" ) || o.dividerTheme || o.theme );
183+
// Apply buttonClass to the (first) anchor
184+
a.addClass( buttonClass );
185+
} else if ( isDivider ) {
186+
dividerTheme = ( getAttr( item[ 0 ], "theme" ) || o.dividerTheme || o.theme );
182187

183-
itemClass = "ui-li-divider ui-bar-" + ( dividerTheme ? dividerTheme : "inherit" );
188+
itemClass = "ui-li-divider ui-bar-" + ( dividerTheme ? dividerTheme : "inherit" );
184189

185-
item.attr( "role", "heading" );
186-
} else if ( a.length <= 0 ) {
187-
itemClass = "ui-li-static ui-body-" + ( itemTheme ? itemTheme : "inherit" );
190+
item.attr( "role", "heading" );
191+
} else if ( a.length <= 0 ) {
192+
itemClass = "ui-li-static ui-body-" + ( itemTheme ? itemTheme : "inherit" );
193+
}
194+
if ( ol && value ) {
195+
newStartCount = parseInt( value, 10 ) - 1;
196+
197+
item.css( "counter-reset", "listnumbering " + newStartCount );
198+
}
188199
}
189-
if ( ol && value ) {
190-
newStartCount = parseInt( value, 10 ) - 1;
191200

192-
item.css( "counter-reset", "listnumbering " + newStartCount );
201+
// Instead of setting item class directly on the list item
202+
// at this point in time, push the item into a dictionary
203+
// that tells us what class to set on it so we can do this after this
204+
// processing loop is finished.
205+
206+
if ( !itemClassDict[ itemClass ] ) {
207+
itemClassDict[ itemClass ] = [];
193208
}
209+
210+
itemClassDict[ itemClass ].push( item[ 0 ] );
194211
}
195212

196-
// Instead of setting item class directly on the list item
197-
// at this point in time, push the item into a dictionary
198-
// that tells us what class to set on it so we can do this after this
199-
// processing loop is finished.
213+
// Set the appropriate listview item classes on each list item.
214+
// The main reason we didn't do this
215+
// in the for-loop above is because we can eliminate per-item function overhead
216+
// by calling addClass() and children() once or twice afterwards. This
217+
// can give us a significant boost on platforms like WP7.5.
200218

201-
if ( !itemClassDict[ itemClass ] ) {
202-
itemClassDict[ itemClass ] = [];
219+
for ( itemClass in itemClassDict ) {
220+
$( itemClassDict[ itemClass ] ).addClass( itemClass );
203221
}
204222

205-
itemClassDict[ itemClass ].push( item[ 0 ] );
206-
}
223+
countBubbles.each( function() {
224+
$( this ).closest( "li" ).addClass( "ui-li-has-count" );
225+
} );
226+
if ( countThemeClass ) {
227+
countBubbles.not( "[class*='ui-body-']" ).addClass( countThemeClass );
228+
}
207229

208-
// Set the appropriate listview item classes on each list item.
209-
// The main reason we didn't do this
210-
// in the for-loop above is because we can eliminate per-item function overhead
211-
// by calling addClass() and children() once or twice afterwards. This
212-
// can give us a significant boost on platforms like WP7.5.
230+
// Deprecated in 1.4. From 1.5 you have to add class ui-li-has-thumb or ui-li-has-icon to the LI.
231+
this._addThumbClasses( li );
232+
this._addThumbClasses( li.find( ".ui-button" ) );
213233

214-
for ( itemClass in itemClassDict ) {
215-
$( itemClassDict[ itemClass ] ).addClass( itemClass );
216-
}
234+
this._afterListviewRefresh();
217235

218-
countBubbles.each( function() {
219-
$( this ).closest( "li" ).addClass( "ui-li-has-count" );
220-
} );
221-
if ( countThemeClass ) {
222-
countBubbles.not( "[class*='ui-body-']" ).addClass( countThemeClass );
236+
this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
223237
}
224-
225-
// Deprecated in 1.4. From 1.5 you have to add class ui-li-has-thumb or ui-li-has-icon to the LI.
226-
this._addThumbClasses( li );
227-
this._addThumbClasses( li.find( ".ui-button" ) );
228-
229-
this._afterListviewRefresh();
230-
231-
this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
232238
}
233239
}, $.mobile.behaviors.addFirstLastClasses ) );
234240

‎tests/integration/listview/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,5 +312,17 @@ <h1>Heading</h1>
312312
</div><!-- /content -->
313313
</div>
314314

315+
<!-- Pre-enhanced List -->
316+
<div data-nstest-role="page" id="list-pre-enhanced" data-nstest-theme="a">
317+
<div data-nstest-role="content">
318+
<ul data-nstest-role="listview" class="ui-listview" data-nstest-enhanced="true">
319+
<li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Acura</a></li>
320+
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Audi</a></li>
321+
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">BMW</a></li>
322+
<li class="ui-last-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Volvo</a></li>
323+
</ul>
324+
</div><!-- /content -->
325+
</div>
326+
315327
</body>
316328
</html>

‎tests/integration/listview/listview_core.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,26 @@ asyncTest( "list inside collapsible content", function() {
635635
] );
636636
} );
637637

638+
module( "Pre-enhanced" );
639+
640+
asyncTest( "basic pre-enhanced listview", function() {
641+
var $page = $( "#list-pre-enhanced" ),
642+
$list = $page.find( "ul" );
643+
644+
$.testHelper.pageSequence( [
645+
function() {
646+
$.mobile.changePage( "#list-pre-enhanced" );
647+
},
648+
649+
function() {
650+
deepEqual( typeof $list.listview, "function",
651+
"listview object declared on pre-enhanced list" );
652+
653+
window.history.back();
654+
},
655+
656+
start
657+
] );
658+
} );
659+
638660
} )( jQuery );

0 commit comments

Comments
 (0)