Add autodividers functionality for listviews

Can be used to autogenerate dividers for a listview by
setting data-autodividers="alpha" (dividers are unique,
uppercased single characters from list items) or
data-autodividers="full" (unique full text strings selected
from list items) on the ul element of the listview.

It's also possible to apply a custom selector to find the
elements to be used for divider text, with
data-autodividers-selector="...".

This relates to jquery-archive/jquery-mobile#2466,
but is a different implementation which will automatically
update the list dividers if the list elements change. It also
has a fairly thorough test suite and documentation.

Author: townxelliot

js/index.php

@@ -35,6 +35,7 @@
 	'jquery.mobile.navbar.js',
 	'jquery.mobile.listview.js',
 	'jquery.mobile.listview.filter.js',
+	'jquery.mobile.listview.autodividers.js',
 	'jquery.mobile.nojs.js',
 	'jquery.mobile.forms.checkboxradio.js',
 	'jquery.mobile.forms.button.js',

js/jquery.mobile.listview.autodividers.js

@@ -0,0 +1,71 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Generates dividers for listview items
+//>>label: Listview Autodividers
+define( [ "jquery", "./jquery.mobile.listview" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.mobile.listview.prototype.options.autodividers = false;
+$.mobile.listview.prototype.options.autodividersSelector = function( elt ) {
+	// look for the first anchor in the item
+	var text = elt.find( 'a' ).text() || elt.text() || null;
+
+	if ( !text ) {
+		return null;
+	}
+
+	// create the text for the divider (first uppercased letter)
+	text = text.slice( 0, 1 ).toUpperCase();
+
+	return text;
+};
+
+$( document ).on( "listviewcreate", "ul,ol", function() {
+
+	var list = $( this ),
+			listview = list.data( "listview" );
+
+	if ( !listview.options.autodividers ) {
+		return;
+	}
+
+	var replaceDividers = function () {
+		list.find( 'li:jqmData(role=list-divider)' ).remove();
+
+		var lis = list.find( 'li' );
+
+		var lastDividerText = null;
+		var li;
+		var dividerText;
+		var i = 0;
+
+		for ( i ; i < lis.length ; i++ ) {
+			li = lis[i];
+			dividerText = listview.options.autodividersSelector( $( li ) );
+
+			if ( dividerText && lastDividerText !== dividerText ) {
+				var divider = document.createElement( 'li' );
+				divider.appendChild( document.createTextNode( dividerText ) );
+				divider.setAttribute( 'data-' + $.mobile.ns + 'role', 'list-divider' );
+				li.parentNode.insertBefore( divider, li );
+			}
+
+			lastDividerText = dividerText;
+		}
+	};
+
+	var afterListviewRefresh = function () {
+		list.off( 'listviewafterrefresh', afterListviewRefresh );
+		replaceDividers();
+		listview.refresh();
+		list.on( 'listviewafterrefresh', afterListviewRefresh );
+	};
+
+	afterListviewRefresh();
+
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");