Autodivider Features - group & count

Autodivider Features - group & count

Hello. I noticed in the autodivider 2 things:
- you can't count the elements you have in any divider.
- if your list have not ordered, you can get more dan 1 divider with the same value.


Then I deside to make some fixes in the core code adding 2 flags.

Adding "autodividersCounter" flag, you can count all elements you have in any divider. With "autodividersGroup" flag, the autodivider will group all elements that matches with the same autodivider value.

Is so easy to use them, just do something like that when you call the listview creation:

  1. $('.selector').listview({
  2. autodividersCounter : true,
  3. autodividersGroup : true
  4. });

Ok now the code. You only have to replace the core function "replaceDivider" - you can find it in line 5943 (jqm-1.2.0) or 5355 (jqm 1.1.0).

  1. var replaceDividers = function () {
  2. list.find( "li:jqmData(role='list-divider')" ).remove();

  3. var lis = list.find( 'li' ),
  4. lastDividerText = null,
  5. counter = 0,
  6. i, j, li, divider, dividerText;

  7. var addCounter = function (){
  8. if( listview.options.autodividersCounter && divider ) {
  9. var count = document.createElement( 'span' );
  10. divider.appendChild( count );
  11. $( count ).addClass( 'ui-li-count' ).text( counter );
  12. }
  13. counter = 0;
  14. };

  15. if(listview.options.autodividersGroup)
  16. for ( i = 0, j = 1; i < lis.length ; i++, j=i+1 ) {
  17. if ( lis[j] && listview.options.autodividersSelector( $( lis[i] ) ) !== listview.options.autodividersSelector( $( lis[j] ) ) ) {
  18. for ( j++; j < lis.length ; j++ ) {
  19. if ( lis[j] && listview.options.autodividersSelector( $( lis[i] ) ) === listview.options.autodividersSelector( $( lis[j] ) ) ) {
  20. $(lis[j]).insertAfter(lis[i]);
  21. i++;
  22. lis = list.find( 'li' );
  23. }
  24. }
  25. }
  26. }

  27. for ( i = 0; i < lis.length ; i++, counter++ ) {
  28. li = lis[i];
  29. dividerText = listview.options.autodividersSelector( $( li ) );

  30. if ( dividerText && lastDividerText !== dividerText ) {
  31. addCounter();
  32. divider = document.createElement( 'li' );
  33. divider.appendChild( document.createTextNode( dividerText ) );
  34. if(listview.options.autodividersCounter){
  35. }
  36. divider.setAttribute( 'data-' + $.mobile.ns + 'role', 'list-divider' );
  37. li.parentNode.insertBefore( divider, li );
  38. }
  39. lastDividerText = dividerText;
  40. }
  41. addCounter();
  42. };
Hope that somebody must find this usefull.