From b14ae8bc16faa7c26a3e7def02839f96836bf7df Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Sat, 18 Sep 2010 08:21:51 -0400
Subject: [PATCH] added support for a JS fallback for auto-numbering in
 listviews made from OL elements. If supported, numbering is pure CSS,
 otherwise, the script will generate numbering.

In both the css and the js, the counters will restart whenever a list grouping header is encountered.
---
 _listview.html        | 43 +++++++++++++++++++++++++++++++++++++++++++
 css/structure.css     |  3 ++-
 js/jQuery.listview.js | 21 +++++++++++++++------
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/_listview.html b/_listview.html
index 016cf536..bcbf463e 100644
--- a/_listview.html
+++ b/_listview.html
@@ -169,6 +169,49 @@
 		</li>
 	</ul>
 	
+	<h2 class="ui-bar ui-bar-b">Same as above with OL numbering:</h2>
+	<ol data-role="listview">
+		<li>This morning <span class="ui-li-count">3</span></li>
+		<li>
+			<h3><a href="index.html">Todd Parker</a></h3>
+			<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+			<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			<p class="ui-li-aside"><strong>6:24</strong>AM</p>
+		</li>
+		<li>
+			<h3><a href="index.html">Todd Parker</a></h3>
+			<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+			<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			<p class="ui-li-aside"><strong>6:24</strong>AM</p>
+		</li>
+		<li>
+			<h3><a href="index.html">Todd Parker</a></h3>
+			<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+			<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			<p class="ui-li-aside"><strong>6:24</strong>AM</p>
+		</li>
+		<li>This afternoon <span class="ui-li-count">1</span></li>
+		<li>
+			<h3><a href="index.html">Todd Parker</a></h3>
+			<p><strong>Meeting reminder</strong></p>
+			<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			<p class="ui-li-aside"><strong>1:15</strong>PM</p>
+		</li>
+		<li>
+			<h3><a href="index.html">Todd Parker</a></h3>
+			<p><strong>Meeting reminder</strong></p>
+			<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			<p class="ui-li-aside"><strong>1:15</strong>PM</p>
+		</li>
+		<li>This evening <span class="ui-li-count">1</span></li>
+		<li>
+			<h3><a href="index.html">Todd Parker</a></h3>
+			<p><strong>Just checking</strong></p>
+			<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			<p class="ui-li-aside"><strong>7:46</strong>PM</p>
+		</li>
+	</ol>	
+	
 	
 	<h2 class="ui-bar ui-bar-b">Basic Listview w/ thumbnails:</h2>
 	
diff --git a/css/structure.css b/css/structure.css
index 211e86d0..93d8c7ff 100644
--- a/css/structure.css
+++ b/css/structure.css
@@ -184,7 +184,8 @@ div.ui-checkbox, div.ui-radio { position:relative;  margin: .2em 0 .5em;  }
 .ui-listview, .ui-li { list-style:none; padding:0; zoom: 1; }
 .ui-li { display: block; margin:0; position: relative; overflow: hidden; text-align: left; border-width: 0; border-top-width: 1px; }
 .ui-li-grouping { padding: .5em 15px; font-size: 13px; font-weight: bold; counter-reset: listnumbering;  }
-ol.ui-listview .ui-link-inherit:before { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
+ol.ui-listview .ui-link-inherit:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
+ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
 .ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
 .ui-li:last-child { border-bottom-width: 1px; }
 .ui-li .ui-btn-inner { display: block; position: relative; padding: .5em 65px .5em 15px; }
diff --git a/js/jQuery.listview.js b/js/jQuery.listview.js
index 5dfcd1bb..13e60f3d 100644
--- a/js/jQuery.listview.js
+++ b/js/jQuery.listview.js
@@ -158,13 +158,22 @@ $.fn.listview = function( options ) {
 			.find( "p,ul,dl" )
 				.addClass( "ui-li-desc" );
 			
-		/* auto-numbering for OL elements - we could add a $.support.cssBefore test
-			// to see if this JS generated numbering is necessary...
-		if($this.is('ol')){
-			$this.find('li').each(function( i ){
-				$(this).find('.ui-link-inherit:first').prepend('<span class="ui-li-dec"></span>');
+		// JS fallback for auto-numbering for OL elements
+		if( !$.support.cssPseudoElement && $this.is('ol') ){
+			var counter = 1;
+			$this.find('li').each(function(){
+				if( $(this).is('.ui-li-grouping') ){
+					//reset counter when a grouping heading is encountered
+					counter = 1;
+				}
+				else { 
+					$(this)
+						.find('.ui-link-inherit:first')
+						.addClass('ui-li-jsnumbering')
+						.prepend('<span class="ui-li-dec">' + counter++ + '. </span>');
+				}		
 			});
-		}	*/	
+		}	
 				
 		//tapping the whole LI triggers ajaxClick on the first link
 		$this.find( "li:has(a)" ).live( "tap", function() {