Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Listview: Deprecated auto detection of thumbs/icons. Add class ui-li-…
Browse files Browse the repository at this point in the history
…has-thumb/icon to the LI.
  • Loading branch information
jaspermdegroot committed May 15, 2013
1 parent 713bac2 commit ed89730
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 38 deletions.
9 changes: 5 additions & 4 deletions css/structure/jquery.mobile.listview.css
Expand Up @@ -143,16 +143,17 @@
.ui-listview .ui-btn[class*="ui-icon-"] .ui-li-count {
right: 3.636em;
}
.ui-listview .ui-li-static > img:first-child,
.ui-listview > li > .ui-btn > img:first-child {
.ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child {
position: absolute;
left: 0;
top: 0;
max-height: 5em;
max-width: 5em;
}
.ui-listview .ui-li-static > img.ui-li-icon,
.ui-listview > li > .ui-btn > img.ui-li-icon {
.ui-listview .ui-li-has-icon > img:first-child,
.ui-listview .ui-li-has-icon > .ui-btn > img:first-child {
position: absolute;
left: .625em;
top: .9em;
max-height: 1em;
Expand Down
47 changes: 13 additions & 34 deletions js/widgets/listview.js
Expand Up @@ -42,17 +42,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
t.refresh( true );
},

// This is a generic utility method for finding the first
// node with a given nodeName. It uses basic DOM traversal
// to be fast and is meant to be a substitute for simple
// $.fn.closest() and $.fn.children() calls on a single
// element. Note that callers must pass both the lowerCase
// and upperCase version of the nodeName they are looking for.
// The main reason for this is that this function will be
// called many times and we want to avoid having to lowercase
// the nodeName from the element every time to ensure we have
// a match. Note that this function lives here for now, but may
// be moved into $.mobile if other components need a similar method.
// TODO: Remove in 1.5
_findFirstElementByTagName: function( ele, nextProp, lcName, ucName ) {
var dict = {};
dict[ lcName ] = dict[ ucName ] = true;
Expand All @@ -64,6 +54,16 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
}
return null;
},
// TODO: Remove in 1.5
_addThumbClasses: function( containers ) {
var i, img, len = containers.length;
for ( i = 0; i < len; i++ ) {
img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
if ( img.length ) {
$( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.hasClass( "ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
}
}
},

_getChildrenByTagName: function( ele, lcName, ucName ) {
var results = [],
Expand All @@ -79,16 +79,6 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
return $( results );
},

_addThumbClasses: function( containers ) {
var i, img, len = containers.length;
for ( i = 0; i < len; i++ ) {
img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
if ( img.length ) {
$( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.hasClass( "ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
}
}
},

refresh: function( create ) {
var o = this.options,
$list = this.element,
Expand Down Expand Up @@ -190,20 +180,9 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
$( this ).closest( "li" ).addClass( "ui-li-has-count" );
}).addClass( "ui-fill-" + ( getAttr( $list[ 0 ], "counttheme", true ) || this.options.countTheme) + " ui-corner-all" );

// The idea here is to look at the first image in the list item
// itself, and any .ui-link-inherit element it may contain, so we
// can place the appropriate classes on the image and list item.
// Note that we used to use something like:
//
// li.find(">img:eq(0), .ui-link-inherit>img:eq(0)").each( ... );
//
// But executing a find() like that on Windows Phone 7.5 took a
// really long time. Walking things manually with the code below
// allows the 400 listview item page to load in about 3 seconds as
// opposed to 30 seconds.

// Deprecated in 1.4. From 1.5 you have to add class ui-li-has-thumb or ui-li-has-icon to the LI.
this._addThumbClasses( li );
this._addThumbClasses( $list.find( "li > .ui-btn" ) );
this._addThumbClasses( li.find( ".ui-btn" ) );

this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
// autodividers binds to this to redraw dividers after the listview refresh
Expand Down

0 comments on commit ed89730

Please sign in to comment.