Skip to content

Commit 1cbdc76

Browse files
jzaeffererjzaefferer
committed
Listview: Code cleanup and refactoring, introducing refresh method. Partial fix for jquery-archive#249 
1 parent df93b9e commit 1cbdc76

File tree

1 file changed

+110
-104
lines changed

1 file changed

+110
-104
lines changed

‎js/jquery.mobile.listview.js‎

Lines changed: 110 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
1818
},
1919

2020
_create: function() {
21-
var o = this.options
21+
var o = this.options,
2222
$list = this.element;
2323

2424
this._createSubPages();
@@ -27,54 +27,14 @@ $.widget( "mobile.listview", $.mobile.widget, {
2727
this.element
2828
.addClass( "ui-listview" )
2929
.attr( "role", "listbox" )
30-
.find( "li" )
31-
.attr("role","option")
32-
.attr("tabindex","-1")
33-
.focus(function(){
34-
$(this).attr("tabindex","0");
35-
})
36-
.each(function() {
37-
var $li = $( this ),
38-
role = $li.data( "role" ),
39-
dividertheme = $list.data( "dividertheme" ) || o.dividerTheme;
40-
if ( $li.is( ":has(img)" ) ) {
41-
if ($li.is( ":has(img.ui-li-icon)" )){
42-
$li.addClass( "ui-li-has-icon" );
43-
}
44-
else{
45-
$li.addClass( "ui-li-has-thumb" );
46-
}
47-
48-
}
49-
if ( $li.is( ":has(.ui-li-aside)" ) ) {
50-
var aside = $li.find('.ui-li-aside');
51-
aside.prependTo(aside.parent()); //shift aside to front for css float
52-
}
53-
$li.addClass( "ui-li" );
54-
55-
if( $li.find('a').length ){
56-
$li
57-
.buttonMarkup({
58-
wrapperEls: "div",
59-
shadow: false,
60-
corners: false,
61-
iconpos: "right",
62-
icon: $(this).data("icon") || "arrow-r",
63-
theme: o.theme
64-
})
65-
.find( "a" ).eq( 0 )
66-
.addClass( "ui-link-inherit" );
67-
}
68-
else if( role == "list-divider" ){
69-
$li.addClass( "ui-li-divider ui-btn ui-bar-" + dividertheme ).attr( "role", "heading" );
70-
}
71-
else {
72-
$li.addClass( "ui-li-static ui-btn-up-" + o.theme );
73-
}
74-
})
75-
.eq(0)
76-
.attr("tabindex","0");
77-
30+
31+
if ( o.inset ) {
32+
this.element
33+
.addClass( "ui-listview-inset" )
34+
.controlgroup({ shadow: true });
35+
}
36+
37+
this.refresh();
7838

7939
//keyboard events for menu items
8040
this.element.keydown(function(event){
@@ -120,20 +80,85 @@ $.widget( "mobile.listview", $.mobile.widget, {
12080
}
12181
});
12282

123-
if ( o.inset ) {
124-
this.element
125-
.addClass( "ui-listview-inset" )
126-
.controlgroup({ shadow: true });
127-
}
83+
// TODO class has to be defined in markup
84+
this.element.find( ".ui-li-count" )
85+
.addClass( "ui-btn-up-" + ($list.data( "counttheme" ) || o.countTheme) + " ui-btn-corner-all" );
86+
87+
// TODO what is :header matching? does that need to be moved to refresh?
88+
this.element.find( ":header" )
89+
.addClass( "ui-li-heading" );
12890

129-
this.element
130-
.find( "li" ).each(function() {
91+
// TODO move to refresh()
92+
this._numberItems();
93+
94+
//tapping the whole LI triggers ajaxClick on the first link
95+
this.element.find( "li:has(a)" ).live( "tap", function(event) {
96+
if( !$(event.target).closest('a').length ){
97+
$( this ).find( "a:first" ).trigger('click');
98+
return false;
99+
}
100+
});
101+
},
102+
103+
refresh: function() {
104+
var o = this.options,
105+
dividertheme = this.element.data( "dividertheme" ) || o.dividerTheme,
106+
$list = this.element;
107+
this.element.find( "li")
108+
.eq(0)
109+
.attr("tabindex","0")
110+
.end()
111+
.filter(":not(.ui-li)" )
112+
.attr("role","option")
113+
.attr("tabindex","-1")
114+
.focus(function(){
115+
$(this).attr("tabindex","0");
116+
})
117+
.each(function() {
118+
var $li = $( this ).addClass( "ui-li" ),
119+
role = $li.data( "role" );
120+
121+
if ( $li.is( ":has(img)" ) ) {
122+
if ($li.is( ":has(img.ui-li-icon)" )) {
123+
$li.addClass( "ui-li-has-icon" );
124+
} else {
125+
$li.addClass( "ui-li-has-thumb" );
126+
}
127+
}
128+
129+
if ( $li.is( ":has(.ui-li-aside)" ) ) {
130+
var aside = $li.find('.ui-li-aside');
131+
aside.prependTo(aside.parent()); //shift aside to front for css float
132+
}
133+
134+
if ( $li.find('a').length ) {
135+
$li
136+
.buttonMarkup({
137+
wrapperEls: "div",
138+
shadow: false,
139+
corners: false,
140+
iconpos: "right",
141+
icon: $(this).data("icon") || "arrow-r",
142+
theme: o.theme
143+
})
144+
.find( "a" ).eq( 0 )
145+
.addClass( "ui-link-inherit" );
146+
}
147+
else if( role == "list-divider" ){
148+
$li.addClass( "ui-li-divider ui-btn ui-bar-" + dividertheme ).attr( "role", "heading" );
149+
}
150+
else {
151+
$li.addClass( "ui-li-static ui-btn-up-" + o.theme );
152+
}
153+
131154
//for split buttons
132-
var $splitBtn = $( this ).find( "a" ).eq( 1 );
133-
if( $splitBtn.length ){ $(this).addClass('ui-li-has-alt'); }
134-
$splitBtn.each(function() {
135-
var a = $( this );
136-
a
155+
var $splitBtn = $li.find( "a" ).eq( 1 );
156+
if ( $splitBtn.length ) {
157+
$(this).addClass('ui-li-has-alt');
158+
}
159+
$splitBtn.each(function() {
160+
console.log(this);
161+
var a = $( this )
137162
.attr( "title", $( this ).text() )
138163
.addClass( "ui-li-link-alt" )
139164
.empty()
@@ -143,8 +168,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
143168
theme: o.theme,
144169
icon: false,
145170
iconpos: false
146-
})
147-
.find( ".ui-btn-inner" )
171+
});
172+
a.find( ".ui-btn-inner" )
148173
.append( $( "<span>" ).buttonMarkup({
149174
shadow: true,
150175
corners: true,
@@ -163,52 +188,33 @@ $.widget( "mobile.listview", $.mobile.widget, {
163188
}
164189
}
165190
});
191+
192+
//remove corners before or after dividers
193+
var sides = ['top','bottom'];
194+
$.each( sides, function( i ){
195+
var side = sides[ i ];
196+
$li.filter( ".ui-corner-" + side ).each(function() {
197+
if ( $li[ i == 0 ? 'prev' : 'next' ]( ".ui-li-divider" ).length ) {
198+
$( this ).removeClass( "ui-corner-" + side );
199+
}
200+
});
201+
});
166202
})
167203
.find( "img")
168-
.addClass( "ui-li-thumb" );
169-
170-
if ( o.inset ) {
171-
172-
//remove corners before or after dividers
173-
var sides = ['top','bottom'];
174-
$.each( sides, function( i ){
175-
var side = sides[ i ];
176-
$list.find( ".ui-corner-" + side ).each(function(){
177-
if( $(this).parents('li')[ i == 0 ? 'prev' : 'next' ]( ".ui-li-divider" ).length ){
178-
$(this).removeClass( "ui-corner-" + side );
179-
}
180-
});
181-
});
182-
183-
this.element
184-
.find( "img" )
185-
.filter( "li:first-child img" )
186-
.addClass( "ui-corner-tl" )
187-
.end()
188-
.filter( "li:last-child img" )
189-
.addClass( "ui-corner-bl" )
190-
.end();
191-
}
192-
193-
this.element
194-
.find( ".ui-li-count" )
195-
.addClass( "ui-btn-up-" + ($list.data( "counttheme" ) || o.countTheme) + " ui-btn-corner-all" )
196-
.end()
197-
.find( ":header" )
198-
.addClass( "ui-li-heading" )
204+
.addClass( "ui-li-thumb" )
199205
.end()
200-
.find( "p,ul,dl" )
206+
.find( "p, ul, dl" )
201207
.addClass( "ui-li-desc" );
202208

203-
this._numberItems();
204-
205-
//tapping the whole LI triggers ajaxClick on the first link
206-
this.element.find( "li:has(a)" ).live( "tap", function(event) {
207-
if( !$(event.target).closest('a').length ){
208-
$( this ).find( "a:first" ).trigger('click');
209-
return false;
210-
}
211-
});
209+
// TODO remove these classes from any elements that may have gotten them in a previous call
210+
this.element
211+
.find( "img" )
212+
.filter( "li:first-child img" )
213+
.addClass( "ui-corner-tl" )
214+
.end()
215+
.filter( "li:last-child img" )
216+
.addClass( "ui-corner-bl" )
217+
.end();
212218
},
213219

214220
_createSubPages: function() {

0 commit comments

Comments
 (0)