Listview: Implement classes option

Fixes jquery-archivegh-7692 Fixes jquery-archivegh-7670
gabrielschulhof · Aug 28, 2015 · 9071222 · 9071222
1 parent f7bc225
commit 9071222
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 38 deletions.
diff --git a/js/widgets/listview.js b/js/widgets/listview.js
@@ -36,34 +36,29 @@ return $.widget( "mobile.listview", $.extend( {
 	version: "@VERSION",
 
 	options: {
+		classes: {
+			"ui-listview-inset": "ui-corner-all ui-shadow"
+		},
 		theme: null,
 		dividerTheme: null,
 		icon: "caret-r",
 		splitIcon: "caret-r",
 		splitTheme: null,
-		corners: true,
-		shadow: true,
-		inset: false,
 		enhanced: false
 	},
 
 	_create: function() {
-		var t = this,
-			o = t.options,
-			listviewClasses = "";
-
-		if ( !o.enhanced ) {
-			listviewClasses += o.inset ? " ui-listview-inset" : "";
-
-			if ( !!o.inset ) {
-				listviewClasses += o.corners ? " ui-corner-all" : "";
-				listviewClasses += o.shadow ? " ui-shadow" : "";
-			}
+		if ( !this.options.enhanced ) {
+			this._enhance();
+			this.refresh( true );
+		}
+	},
 
-			// create listview markup
-			t.element.addClass( " ui-listview" + listviewClasses );
+	_enhance: function() {
+		this._addClass( this.element, "ui-listview" );
+		if ( this.options.theme ) {
+			this._addClass( this.element, null, "ui-group-theme-" + this.options.theme );
 		}
-		t.refresh( true );
 	},
 
 	_getChildrenByTagName: function( ele, lcName, ucName ) {
@@ -84,9 +79,9 @@ return $.widget( "mobile.listview", $.extend( {
 	_afterListviewRefresh: $.noop,
 
 	refresh: function( create ) {
-		var buttonClass, pos, numli, item, itemClass, itemTheme, itemIcon, icon, a,
+		var buttonClass, pos, numli, item, itemClass, itemExtraClass, itemTheme, itemIcon, icon, a,
 			isDivider, startCount, newStartCount, value, last, splittheme, splitThemeClass, spliticon,
-			altButtonClass, dividerTheme, li, ol, start, itemClassDict, countBubbles,
+			altButtonClass, dividerTheme, li, ol, start, itemClassDict, dictionaryKey, countBubbles,
 			o = this.options,
 			$list = this.element;
 
@@ -97,11 +92,6 @@ return $.widget( "mobile.listview", $.extend( {
 		ol = !!$.nodeName( $list[ 0 ], "ol" );
 		start = $list.attr( "start" );
 		itemClassDict = {};
-		countBubbles = $list.find( ".ui-listview-item-count-bubble" );
-
-		if ( o.theme ) {
-			$list.addClass( "ui-group-theme-" + o.theme );
-		}
 
 		// Check if a start attribute has been set while taking a value of 0 into account
 		if ( ol && ( start || start === 0 ) ) {
@@ -113,9 +103,15 @@ return $.widget( "mobile.listview", $.extend( {
 
 		li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" );
 
+		countBubbles = li
+			.children( "a" )
+				.children( ".ui-listview-item-count-bubble" )
+			.add( li.children( ".ui-listview-item-count-bubble" ) );
+
 		for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
 			item = li.eq( pos );
-			itemClass = "";
+			itemClass = "ui-listview-item";
+			itemExtraClass = undefined;
 
 			if ( create || item[ 0 ].className
 					.search( /\bui-listview-item-static\b|\bui-listview-item-divider\b/ ) < 0 ) {
@@ -128,9 +124,6 @@ return $.widget( "mobile.listview", $.extend( {
 					itemIcon = getAttr( item[ 0 ], "icon" );
 					icon = ( itemIcon === false ) ? false : ( itemIcon || o.icon );
 
-					// TODO: Remove in 1.5 together with links.js (links.js / .ui-link deprecated in 1.4)
-					a.removeClass( "ui-link" );
-
 					buttonClass = "ui-button";
 
 					if ( itemTheme ) {
@@ -162,11 +155,13 @@ return $.widget( "mobile.listview", $.extend( {
 				} else if ( isDivider ) {
 					dividerTheme = ( getAttr( item[ 0 ], "theme" ) || o.dividerTheme || o.theme );
 
-					itemClass = "ui-listview-item-divider ui-bar-" + ( dividerTheme ? dividerTheme : "inherit" );
+					itemClass = "ui-listview-item-divider";
+					itemExtraClass = "ui-bar-" + ( dividerTheme ? dividerTheme : "inherit" );
 
 					item.attr( "role", "heading" );
 				} else if ( a.length <= 0 ) {
-					itemClass = "ui-listview-item-static ui-body-" + ( itemTheme ? itemTheme : "inherit" );
+					itemClass = "ui-listview-item-static";
+					itemExtraClass = "ui-body-" + ( itemTheme ? itemTheme : "inherit" );
 				}
 				if ( ol && value ) {
 					newStartCount = parseInt( value, 10 ) - 1;
@@ -180,11 +175,15 @@ return $.widget( "mobile.listview", $.extend( {
 			// that tells us what class to set on it so we can do this after this
 			// processing loop is finished.
 
-			if ( !itemClassDict[ itemClass ] ) {
-				itemClassDict[ itemClass ] = [];
+			// Construct the dictionary key from the key class and the extra class
+			dictionaryKey = [ itemClass ]
+				.concat( itemExtraClass ? [ itemExtraClass ] : [] )
+				.join( "|" );
+			if ( !itemClassDict[ dictionaryKey ] ) {
+				itemClassDict[ dictionaryKey ] = [];
 			}
 
-			itemClassDict[ itemClass ].push( item[ 0 ] );
+			itemClassDict[ dictionaryKey ].push( item[ 0 ] );
 		}
 
 		// Set the appropriate listview item classes on each list item.
@@ -193,17 +192,31 @@ return $.widget( "mobile.listview", $.extend( {
 		// by calling addClass() and children() once or twice afterwards. This
 		// can give us a significant boost on platforms like WP7.5.
 
-		for ( itemClass in itemClassDict ) {
-			$( itemClassDict[ itemClass ] ).addClass( itemClass );
+		for ( dictionaryKey in itemClassDict ) {
+
+			// Split the dictionary key back into key classes and extra classes and construct the
+			// _addClass() parameter list
+			this._addClass.apply( this,
+				[ $( itemClassDict[ dictionaryKey ] ) ]
+					.concat( dictionaryKey.split( "|" ) ) );
 		}
 
-		countBubbles.each( function() {
-			$( this ).closest( "li" ).addClass( "ui-listview-item-has-count" );
-		} );
+		this._addClass( countBubbles.closest( "li" ), "ui-listview-item-has-count" );
 
 		this._afterListviewRefresh();
 
 		this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
+
+		// Untrack removed items
+		if ( this._oldListItems ) {
+			this._removeClass(
+				this._oldListItems.filter( function() {
+					return ( $( this ).parent().length === 0 );
+				} ),
+				"ui-listview-item ui-listview-item-static ui-listview-item-has-count " +
+				"ui-listview-item-has-alternate ui-listview-item-divider" );
+			this._oldListItems = li;
+		}
 	}
 }, $.mobile.behaviors.addFirstLastClasses ) );
 

diff --git a/tests/integration/listview/index.html b/tests/integration/listview/index.html
@@ -23,6 +23,7 @@
 			[
 				"navigation",
 				"widgets/listview",
+				"widgets/listview.backcompat",
 				"widgets/listview.autodividers",
 				"widgets/toolbar",
 				"widgets/collapsible"