Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'townxelliot-autodividers'

  • Loading branch information...
commit 3f4343d7b43a76a92aa48c8739a453acb810e0b8 2 parents 8929eda + ca1bab2
@johnbender johnbender authored
Showing with 592 additions and 8 deletions.
  1. +28 −3 docs/lists/docs-lists.html
  2. +1 −0  docs/lists/index.html
  3. +1 −0  docs/lists/lists-all-full.html
  4. +99 −0 docs/lists/lists-autodividers.html
  5. +1 −0  docs/lists/lists-count.html
  6. +1 −0  docs/lists/lists-divider.html
  7. +1 −0  docs/lists/lists-formatting.html
  8. +1 −0  docs/lists/lists-forms-inset.html
  9. +1 −0  docs/lists/lists-forms.html
  10. +1 −0  docs/lists/lists-icons.html
  11. +1 −0  docs/lists/lists-inset.html
  12. +1 −0  docs/lists/lists-nested.html
  13. +1 −0  docs/lists/lists-ol.html
  14. +1 −0  docs/lists/lists-performance.html
  15. +1 −0  docs/lists/lists-readonly-inset.html
  16. +1 −0  docs/lists/lists-readonly.html
  17. +1 −0  docs/lists/lists-search-inset.html
  18. +1 −0  docs/lists/lists-search-with-dividers.html
  19. +1 −0  docs/lists/lists-search.html
  20. +1 −0  docs/lists/lists-split.html
  21. +1 −0  docs/lists/lists-themes.html
  22. +1 −0  docs/lists/lists-thumbnails.html
  23. +1 −0  docs/lists/lists-ul.html
  24. +1 −0  js/index.php
  25. +71 −0 js/jquery.mobile.listview.autodividers.js
  26. +5 −2 js/jquery.mobile.listview.js
  27. +145 −0 tests/functional/autodividers.html
  28. +38 −0 tests/unit/listview/index.html
  29. +184 −3 tests/unit/listview/listview_core.js
View
31 docs/lists/docs-lists.html
@@ -34,7 +34,7 @@
</ul>
<h2>Basic linked lists</h2>
- <p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
+ <p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
<p>Here is the HTML markup for a basic linked list.</p>
<pre><code>
@@ -76,6 +76,31 @@
<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
+ <h2>Autodividers</h2>
+
+ <p>A listview can be configured to automatically generate dividers for its items. This is done by adding a <code>data-autodividers="true"</code> attribute to any listview.</p>
+
+ <p>By default, the text used to create dividers is the uppercased first letter of either the item's link text (for link lists) or the item's text (for read-only lists). Alternatively, if you are using formatted list items, you can specify divider text by setting the <code>autodividersSelector</code> option on the listview programmatically. For example, to add a custom selector to the element with <code>id="mylistview"</code>:</p>
+
+<pre><code>
+$("#mylistview").listview({
+ autodividers: true,
+
+ // the selector function is passed a &lt;li&gt; element from the listview;
+ // it should return the appropriate divider text for that &lt;li&gt;
+ // element as a string
+ autodividersSelector: function ( li ) {
+ var out = /* generate a string based on the content of li */;
+ return out;
+ }
+});
+</code></pre>
+
+ <p>If new list items are added to the list or removed from it, the dividers are <em>not</em> automatically updated: you should call <code>refresh()</code> on the listview to redraw the autodividers.</p>
+
+ <a href="lists-autodividers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Autodividers example</a>
+
+
<h2>Search filter</h2>
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>
@@ -116,7 +141,7 @@
<h2>Calling the listview plugin</h2>
<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
<code>$('#mylist').listview();</code>
-
+
<h2>Updating lists</h2>
<p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
<code>$('#mylist').listview('refresh');</code>
@@ -142,6 +167,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
@@ -174,4 +200,3 @@
</body>
</html>
-
View
1  docs/lists/index.html
@@ -36,6 +36,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-all-full.html
@@ -140,6 +140,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
99 docs/lists/lists-autodividers.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - List Dividers</title>
+ <link rel="stylesheet" href="../../css/themes/default/" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Autodividers</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-autodividers="alpha">
+ <li><a href="index.html">Adam Kinkaid</a></li>
+ <li><a href="index.html">Alex Wickerham</a></li>
+ <li><a href="index.html">Avery Johnson</a></li>
+ <li><a href="index.html">Bob Cabot</a></li>
+ <li><a href="index.html">Caleb Booth</a></li>
+ <li><a href="index.html">Christopher Adams</a></li>
+ <li><a href="index.html">Culver James</a></li>
+ <li><a href="index.html">David Walsh</a></li>
+ <li><a href="index.html">Drake Alfred</a></li>
+ <li><a href="index.html">Elizabeth Bacon</a></li>
+ <li><a href="index.html">Emery Parker</a></li>
+ <li><a href="index.html">Enid Voldon</a></li>
+ <li><a href="index.html">Francis Wall</a></li>
+ <li><a href="index.html">Graham Smith</a></li>
+ <li><a href="index.html">Greta Peete</a></li>
+ <li><a href="index.html">Harvey Walls</a></li>
+ <li><a href="index.html">Mike Farnsworth</a></li>
+ <li><a href="index.html">Murray Vanderbuilt</a></li>
+ <li><a href="index.html">Nathan Williams</a></li>
+ <li><a href="index.html">Paul Baker</a></li>
+ <li><a href="index.html">Pete Mason</a></li>
+ <li><a href="index.html">Rod Tarker</a></li>
+ <li><a href="index.html">Sawyer Wakefield</a></li>
+ </ul>
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+ <li data-role="list-divider">List views</li>
+ <li><a href="docs-lists.html">List markup conventions</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li data-theme="a"><a href="lists-autodividers.html">Autodividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2011 The jQuery Project</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
View
1  docs/lists/lists-count.html
@@ -49,6 +49,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li data-theme="a"><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-divider.html
@@ -80,6 +80,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li data-theme="a"><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-formatting.html
@@ -101,6 +101,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-forms-inset.html
@@ -215,6 +215,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-forms.html
@@ -215,6 +215,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-icons.html
@@ -55,6 +55,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li data-theme="a"><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-inset.html
@@ -141,6 +141,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-nested.html
@@ -160,6 +160,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-ol.html
@@ -64,6 +64,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-performance.html
@@ -544,6 +544,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-readonly-inset.html
@@ -137,6 +137,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-readonly.html
@@ -139,6 +139,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-search-inset.html
@@ -66,6 +66,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-search-with-dividers.html
@@ -79,6 +79,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-search.html
@@ -66,6 +66,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-split.html
@@ -113,6 +113,7 @@
<li data-theme="a"><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-themes.html
@@ -230,6 +230,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-thumbnails.html
@@ -101,6 +101,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  docs/lists/lists-ul.html
@@ -66,6 +66,7 @@
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
View
1  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',
View
71 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");
View
7 js/jquery.mobile.listview.js
@@ -30,10 +30,10 @@ $.widget( "mobile.listview", $.mobile.widget, {
_create: function() {
var t = this,
listviewClasses = "";
-
+
listviewClasses += t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "";
listviewClasses += t.element.jqmData( "mini" ) || t.options.mini === true ? " ui-mini" : "";
-
+
// create listview markup
t.element.addClass(function( i, orig ) {
return orig + " ui-listview " + listviewClasses;
@@ -309,6 +309,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
this._refreshCorners( create );
+
+ // autodividers binds to this to redraw dividers after the listview refresh
+ this._trigger( "afterrefresh" );
},
//create a string for ID/subpage url creation
View
145 tests/functional/autodividers.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>jQuery Mobile: Autodividers</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <script src="../../js/jquery.js"></script>
+ <script src="../../js/"></script>
+</head>
+
+<body>
+
+<div data-role="page" id="baseline">
+ <div data-role="header">
+ <h1>Autodividers</h1>
+ </div>
+
+ <div data-role="content">
+ <p>This should get auto-dividers based on link text.</p>
+ <ul id="link-text-dividers" data-role="listview" data-autodividers="true">
+ <li><a href="#">Amy</a></li>
+ <li><a href="#">Andrew</a></li>
+ <li><a href="#">Astrid</a></li>
+ <li><a href="#">Bertie</a></li>
+ <li><a href="#">Carrie</a></li>
+ <li><a href="#">Derek</a></li>
+ <li><a href="#">Ian</a></li>
+ <li><a href="#">Matthew</a></li>
+ </ul>
+ </div>
+
+ <div data-role="content">
+ <p>This should get auto-dividers based on link text but
+ shouldn't produce duplicate dividers. Should also
+ add more dividers if new list elements are added. Note that
+ removing Bertie should cause the duplicate "A" dividers to merge
+ and trigger a "listviewchange" event.</p>
+
+ <p>
+ <button id="add-gary-button" data-inline="true">Add Gary and refresh</button>
+ <button id="remove-bertie-button" data-inline="true">Remove Bertie and refresh</button>
+ </p>
+
+ <ul id="refreshable-dividers" data-role="listview" data-autodividers="true">
+ <li><a href="#">Amy</a></li>
+ <li><a href="#">Andrew</a></li>
+ <li><a href="#">Angela</a></li>
+ <li><a href="#">Bertie</a></li>
+ <li><a href="#">Astrid</a></li>
+ <li><a href="#">Carrie</a></li>
+ <li><a href="#">Derek</a></li>
+ <li><a href="#">Ian</a></li>
+ <li><a href="#">Matthew</a></li>
+ </ul>
+ </div>
+
+ <div data-role="content">
+ <p>This uses a custom selector to draw text from formatted list
+ items.</p>
+
+ <ul id="custom-selector">
+ <li><span>Anne</span> likes to eat sweets</li>
+ <li><span>Beth</span> likes to eat treats</li>
+ <li><span>Bill</span> likes to eat meats</li>
+ <li><span>Carl</span> likes to eat beets</li>
+ </ul>
+ </div>
+
+ <div data-role="content">
+ <p>This should get auto-dividers based on text. NB this has
+ intentionally blank li elements to check they don't get dividers.</p>
+ <ul id="text-dividers" data-role="listview" data-autodividers="true">
+ <li>Barry</li>
+ <li>Betty</li>
+ <li>Carrie</li>
+ <li>Harry</li>
+ <li></li>
+ <li>Hetty</li>
+ <li>Kitty</li>
+ <li>Larry</li>
+ <li></li>
+ <li>Laurie</li>
+ <li>Mary</li>
+ </ul>
+ </div>
+
+ <div data-role="content">
+ <p>Non-sorted list will produce duplicate auto-dividers.</p>
+ <ul id="non-sorted" data-role="listview" data-autodividers="true">
+ <li>Barry</li>
+ <li>Carrie</li>
+ <li>Betty</li>
+ <li>Harry</li>
+ <li>Carly</li>
+ <li>Hetty</li>
+ </ul>
+ </div>
+
+ <div data-role="content">
+ <p>This had dividers already which were replaced.</p>
+ <ul id="has-dividers" data-role="listview" data-autodividers="true">
+ <li data-role="list-divider">Any old iron</li>
+ <li><a href="#">Amy</a></li>
+ <li><a href="#">Andrew</a></li>
+ <li><a href="#">Astrid</a></li>
+ <li data-role="list-divider">Barnacles</li>
+ <li><a href="#">Bertie</a></li>
+ <li data-role="list-divider">Crop circle</li>
+ <li><a href="#">Carrie</a></li>
+ <li data-role="list-divider">Dog</li>
+ <li><a href="#">Derek</a></li>
+ <li data-role="list-divider">Igloos</li>
+ <li><a href="#">Ian</a></li>
+ <li data-role="list-divider">Massive clouds</li>
+ <li><a href="#">Matthew</a></li>
+ </ul>
+ </div>
+
+</div>
+
+<script>
+$(document).bind('pagecreate', function () {
+ $('#custom-selector').listview({
+ autodividers: true,
+ autodividersSelector: function( elt ) {
+ return elt.find('span').text();
+ }
+ });
+
+ $('#add-gary-button').bind('click', function () {
+ var gary = $('<li><a href="#">Gary</a></li>');
+ $('#refreshable-dividers').find('li.ui-li-divider:contains(I)').before(gary);
+ $('#refreshable-dividers').listview('refresh');
+ });
+
+ $('#remove-bertie-button').bind('click', function () {
+ $('#refreshable-dividers').find('li:contains("Bertie")').remove();
+ $('#refreshable-dividers').listview('refresh');
+ });
+});
+</script>
+
+</body>
+</html>
View
38 tests/unit/listview/index.html
@@ -16,6 +16,7 @@
"jquery.mobile.navigation",
"jquery.mobile.listview",
"jquery.mobile.listview.filter",
+ "jquery.mobile.listview.autodividers"
],
[ "jquery.mobile.init" ],
[
@@ -223,6 +224,43 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<!-- Autodivider -->
+<div data-nstest-role="page" id="autodividers-test">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Autodivider Test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-autodividers="true">
+ <li data-nstest-role="list-divider">SHOULD REMOVE</li>
+ <li>a is for aquaman</li>
+ <li>b is for batman</li>
+ <li>c is for catwoman</li>
+ <li>d is for darkwing</li>
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="autodividers-selector-test">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Autodivider Selector Test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="true">
+ <li><a href="">a is for aquaman</a></li>
+ <li><a href="">b is for batman</a></li>
+ <li><a href="">c is for catwoman</a></li>
+ <li><a href="">d is for darkwing</a></li>
+ </ul>
+
+ <ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="true">
+ <li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
+ </ul>
+ </div>
+</div>
+
<!-- Search bar filter -->
<div data-nstest-role="page" id='search-filter-test'>
<div data-nstest-role="header" data-nstest-position="inline">
View
187 tests/unit/listview/listview_core.js
@@ -93,7 +93,23 @@
]);
});
- module('Nested List Test');
+ module('Nested List Test', {
+ setup: function() {
+ // ensure that the nested pages are generated
+ stop();
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#nested-list-test");
+ },
+
+ function() {
+ window.history.back();
+ },
+
+ start
+ ]);
+ }
+ });
asyncTest( "Changes page to nested list test and enhances", function() {
$.testHelper.pageSequence([
@@ -150,8 +166,7 @@
});
test( "nested list title should use first text node, regardless of line breaks", function(){
- // NOTE this is a super fragile reference to the nested page, any change to the list will break it
- ok($(":jqmData(url='nested-list-test&ui-page=0-0') .ui-title").text() === "More animals", 'Text should be "More animals"');
+ same($(":jqmData(url='nested-list-test&ui-page=0-0') .ui-title").text(), "More animals", 'Text should be "More animals"');
});
asyncTest( "Multiple nested lists on a page with same labels", function() {
@@ -330,6 +345,172 @@
]);
});
+ module( "Autodividers" );
+
+ asyncTest( "Adds dividers based on first letters of list items.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-test' );
+ ok( $new_page.hasClass( 'ui-page-active' ) );
+ ok( $new_page.find( '.ui-li-divider' ).length === 4 );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Responds to addition/removal of list elements after refresh.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-test' );
+ ok( $new_page.hasClass( 'ui-page-active' ));
+
+ var $list = $new_page.find( 'ul' );
+
+ // should remove all existing dividers
+ ok( $new_page.find( 'li:contains("SHOULD REMOVE")' ).length === 0 );
+
+ // add li; should add an "X" divider
+ $list.append( '<li>x is for xanthe</li>' );
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider' ).is( ':contains("X")' ) );
+
+ // adding the same element again should create a valid list
+ // item but no new divider
+ ok( $new_page.find( '.ui-li-static' ).length === 5 );
+ $list.append( '<li>x is for xanthe</li>' );
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider:contains("X")' ).length === 1 );
+ ok( $new_page.find( '.ui-li-static' ).length === 6 );
+
+ // should ignore addition of non-li elements to the list
+ $list.find( 'li:eq(0)' ).append( '<span>ignore me</span>' );
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-static' ).length === 6 );
+
+ // add li with the same initial letter as another li
+ // but after the X li item; should add a second "B" divider to the
+ // end of the list
+ $list.append( '<li>b is for barry</li>' );
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 6 );
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
+
+ // remove the item with a repeated "b"; should remove the second
+ // "B" divider
+ $list.find( 'li:contains("barry")' ).remove();
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
+
+ // remove li; should remove the "A" divider
+ $list.find( 'li:contains("aquaman")' ).remove();
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 4 );
+ ok( !$new_page.find( '.ui-li-divider' ).is( ':contains("A")' ) );
+
+ // adding another "B" item after "C" should create two separate
+ // "B" dividers
+ $list.find( 'li:contains("catwoman")' ).after( '<li>b is for barry</li>' );
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
+
+ // if two dividers with the same letter have only non-dividers
+ // between them, they get merged
+
+ // removing catwoman should cause the two "B" dividers to merge
+ $list.find( 'li:contains("catwoman")' ).remove();
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
+
+ // adding another "D" item before the "D" divider should only
+ // result in a single "D" divider after merging
+ $list.find( 'li:contains("barry")' ).after( '<li>d is for dan</li>' );
+ $list.listview('refresh');
+ ok( $new_page.find( '.ui-li-divider:contains("D")' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+
+ module( "Autodividers Selector" );
+
+ asyncTest( "Adds divider text from links.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-selector-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-selector-test' );
+ ok($new_page.hasClass( 'ui-page-active' ));
+
+ // check we have the right dividers based on link text
+ var $list = $( '#autodividers-selector-test-list1' );
+ ok( $list.find( '.ui-li-divider' ).length === 4 );
+ ok( $list.find( '.ui-li-divider:eq(0):contains(A)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(1):contains(B)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(2):contains(C)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(3):contains(D)' ).length === 1 );
+
+ // check that adding a new item with link creates the right divider
+ $list.append( '<li><a href="">e is for ethel</a></li>' );
+ $list.listview('refresh');
+ ok( $list.find( '.ui-li-divider:eq(4):contains(E)' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Adds divider text based on custom selector.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-selector-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-selector-test' );
+ ok($new_page.hasClass( 'ui-page-active' ));
+
+ // check we have the right dividers based on custom selector
+ var $list = $( '#autodividers-selector-test-list2' );
+ $list.listview( 'option', 'autodividersSelector', function( elt ) {
+ var text = elt.find( 'div > span.autodividers-selector-test-selectme' ).text();
+ text = text.slice( 0, 1 ).toUpperCase();
+ return text;
+ });
+ $list.listview( 'refresh' );
+ ok( $list.find( '.ui-li-divider' ).length === 4 );
+ ok( $list.find( '.ui-li-divider:eq(0):contains(E)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(1):contains(F)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(2):contains(G)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(3):contains(H)' ).length === 1 );
+
+ // check that adding a new item creates the right divider
+ $list.append( '<li><div><span class="autodividers-selector-test-selectme">' +
+ 'i is for impy</span></div></li>' );
+ $list.listview( 'refresh' );
+
+ ok( $list.find( '.ui-li-divider:eq(4):contains(I)' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+
module( "Search Filter");
var searchFilterId = "#search-filter-test";

0 comments on commit 3f4343d

Please sign in to comment.
Something went wrong with that request. Please try again.