Skip to content
This repository

Nested lists id generation #1779

Closed
wants to merge 7 commits into from

2 participants

Ghislain Seguin Kin Blas
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
18  js/jquery.mobile.listview.js
@@ -5,6 +5,10 @@
5 5
 * http://jquery.org/license
6 6
 */
7 7
 (function($, undefined ) {
  8
+//Keeps track of the number of lists per page UID
  9
+//This allows support for multiple nested list in the same page
  10
+//https://github.com/jquery/jquery-mobile/issues/1617
  11
+var listCountPerPage = {};
8 12
 
9 13
 $.widget( "mobile.listview", $.mobile.widget, {
10 14
 	options: {
@@ -189,23 +193,31 @@ $.widget( "mobile.listview", $.mobile.widget, {
189 193
 	_idStringEscape: function( str ){
190 194
 		return str.replace(/[^a-zA-Z0-9]/g, '-');
191 195
 	},
192  
-	
  196
+
193 197
 	_createSubPages: function() {
194 198
 		var parentList = this.element,
195 199
 			parentPage = parentList.closest( ".ui-page" ),
196  
-			parentId = parentPage.jqmData( "url" ),
  200
+			parentUrl = parentPage.jqmData( "url" ),
  201
+			parentId  = parentUrl || parentPage[ 0 ][ $.expando ],
  202
+			parentListId = parentList.attr( "id" ),
197 203
 			o = this.options,
198 204
 			dns = "data-" + $.mobile.ns,
199 205
 			self = this,
200 206
 			persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" );
201 207
 
  208
+		if ( typeof( listCountPerPage[ parentId ] ) === 'undefined' ) {
  209
+            listCountPerPage[ parentId ] = -1;
  210
+        }
  211
+		parentListId = parentListId || ++listCountPerPage[ parentId ];
  212
+
202 213
 		$( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {
203 214
 			var list = $( this ),
  215
+				listId = list.attr( "id" ) || parentListId + "-" + i,
204 216
 				parent = list.parent(),
205 217
 				nodeEls = $( list.prevAll().toArray().reverse() ),
206 218
 				nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
207 219
 				title = nodeEls.first().text(),//url limits to first 30 chars of text
208  
-				id = parentId + "&" + $.mobile.subPageUrlKey + "=" + self._idStringEscape(title + " " + i),
  220
+				id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId;
209 221
 				theme = list.jqmData( "theme" ) || o.theme,
210 222
 				countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
211 223
 				newPage = list.detach()
15  tests/unit/listview/listview_core.js
@@ -63,8 +63,8 @@
63 63
 
64 64
 			function(){
65 65
 				ok($('#nested-list-test').hasClass('ui-page-active'), "makes nested list test page active");
66  
-				ok($(':jqmData(url="nested-list-test&ui-page=More-animals-0")').length == 1, "Adds first UL to the page");
67  
-				ok($(':jqmData(url="nested-list-test&ui-page=Groups-of-animals-1")').length == 1, "Adds second nested UL to the page");
  66
+				ok($(':jqmData(url="nested-list-test&ui-page=0-0")').length == 1, "Adds first UL to the page");
  67
+				ok($(':jqmData(url="nested-list-test&ui-page=0-1")').length == 1, "Adds second nested UL to the page");
68 68
 				start();
69 69
 			}
70 70
 		]);
@@ -82,7 +82,7 @@
82 82
 			},
83 83
 
84 84
 			function(){
85  
-				var $new_page = $(':jqmData(url="nested-list-test&ui-page=More-animals-0")');
  85
+				var $new_page = $(':jqmData(url="nested-list-test&ui-page=0-0")');
86 86
 	
87 87
 				ok($new_page.hasClass('ui-page-active'), 'Makes the nested page the active page.');
88 88
 				ok($('.ui-listview', $new_page).find(":contains('Rhumba of rattlesnakes')").length == 1, "The current page should have the proper text in the list.");
@@ -95,7 +95,7 @@
95 95
 	asyncTest( "should go back to top level when the back button is clicked", function() {
96 96
 		$.testHelper.pageSequence([
97 97
 			function(){
98  
-				$.testHelper.openPage("#nested-list-test&ui-page=More-animals-0");
  98
+				$.testHelper.openPage("#nested-list-test&ui-page=0-0");
99 99
 			},
100 100
 
101 101
 			function(){
@@ -113,7 +113,7 @@
113 113
 		ok($('#nested-list-test .linebreaknode').text() === "More animals", 'Text should be "More animals"');
114 114
 	});
115 115
 
116  
-	asyncTest( "Multiple nested lists on a page", function() {
  116
+	asyncTest( "Multiple nested lists on a page with same labels", function() {
117 117
 		$.testHelper.pageSequence([
118 118
 			function(){
119 119
 				// https://github.com/jquery/jquery-mobile/issues/1617
@@ -121,8 +121,11 @@
121 121
 			},
122 122
 
123 123
 			function(){
  124
+				// Click on the link of the third li element
124 125
 				$('.ui-page-active li:eq(2) a:eq(0)').click();
125  
-	
  126
+			},
  127
+
  128
+			function(){
126 129
 				equal($('.ui-page-active .ui-content .ui-listview li').text(), "Sub Item 10Sub Item 11Sub Item 12", 'Text should be "Sub Item 10Sub Item 11Sub Item 12"');
127 130
 				start();
128 131
 			}
4  themes/default/jquery.mobile.core.css
@@ -14,14 +14,14 @@
14 14
 .ui-mobile-viewport {  margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
15 15
 
16 16
 /* "page" containers - full-screen views, one should always be in view post-pageload */
17  
-.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; height: auto !important; height: 100%; position: absolute; display: none; border: 0; } 
  17
+.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; } 
18 18
 .ui-mobile .ui-page-active { display: block; overflow: visible; }
19 19
 
20 20
 /*orientations from js are available */
21 21
 .portrait,
22 22
 .portrait .ui-page,
23 23
 .landscape,
24  
-.landscape .ui-page  { min-height: 100%; height: auto !important; height: 100%; }
  24
+.landscape .ui-page  { min-height: 100%; }
25 25
 
26 26
 /* loading screen */
27 27
 .ui-loading .ui-mobile-viewport { overflow: hidden !important; }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.