diff --git a/js/widgets/listview.js b/js/widgets/listview.js index 15f587d29cb..f3b2d3f42f6 100644 --- a/js/widgets/listview.js +++ b/js/widgets/listview.js @@ -22,23 +22,26 @@ $.widget( "mobile.listview", $.extend( { splitTheme: null, corners: true, shadow: true, - inset: false + inset: false, + enhanced: false }, _create: function() { var t = this, + o = t.options, listviewClasses = ""; - listviewClasses += t.options.inset ? " ui-listview-inset" : ""; + if ( !o.enhanced ) { + listviewClasses += o.inset ? " ui-listview-inset" : ""; - if ( !!t.options.inset ) { - listviewClasses += t.options.corners ? " ui-corner-all" : ""; - listviewClasses += t.options.shadow ? " ui-shadow" : ""; - } - - // create listview markup - t.element.addClass( " ui-listview" + listviewClasses ); + if ( !!o.inset ) { + listviewClasses += o.corners ? " ui-corner-all" : ""; + listviewClasses += o.shadow ? " ui-shadow" : ""; + } + // create listview markup + t.element.addClass( " ui-listview" + listviewClasses ); + } t.refresh( true ); }, @@ -85,123 +88,126 @@ $.widget( "mobile.listview", $.extend( { refresh: function( create ) { var buttonClass, pos, numli, item, itemClass, itemTheme, itemIcon, icon, a, isDivider, startCount, newStartCount, value, last, splittheme, splitThemeClass, spliticon, - altButtonClass, dividerTheme, li, + altButtonClass, dividerTheme, li, ol, start, itemClassDict, countBubbles, countTheme, countThemeClass, o = this.options, - $list = this.element, - ol = !!$.nodeName( $list[ 0 ], "ol" ), - start = $list.attr( "start" ), - itemClassDict = {}, - countBubbles = $list.find( ".ui-li-count" ), - countTheme = getAttr( $list[ 0 ], "counttheme" ) || this.options.countTheme, + $list = this.element; + + if ( !o.enhanced ) { + ol = !!$.nodeName( $list[ 0 ], "ol" ); + start = $list.attr( "start" ); + itemClassDict = {}; + countBubbles = $list.find( ".ui-li-count" ); + countTheme = getAttr( $list[ 0 ], "counttheme" ) || this.options.countTheme; countThemeClass = countTheme ? "ui-body-" + countTheme : "ui-body-inherit"; - if ( o.theme ) { - $list.addClass( "ui-group-theme-" + o.theme ); - } + if ( o.theme ) { + $list.addClass( "ui-group-theme-" + o.theme ); + } - // Check if a start attribute has been set while taking a value of 0 into account - if ( ol && ( start || start === 0 ) ) { - startCount = parseInt( start, 10 ) - 1; - $list.css( "counter-reset", "listnumbering " + startCount ); - } + // Check if a start attribute has been set while taking a value of 0 into account + if ( ol && ( start || start === 0 ) ) { + startCount = parseInt( start, 10 ) - 1; + $list.css( "counter-reset", "listnumbering " + startCount ); + } - this._beforeListviewRefresh(); + this._beforeListviewRefresh(); - li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" ); + li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" ); - for ( pos = 0, numli = li.length; pos < numli; pos++ ) { - item = li.eq( pos ); - itemClass = ""; + for ( pos = 0, numli = li.length; pos < numli; pos++ ) { + item = li.eq( pos ); + itemClass = ""; - if ( create || item[ 0 ].className.search( /\bui-li-static\b|\bui-li-divider\b/ ) < 0 ) { - a = this._getChildrenByTagName( item[ 0 ], "a", "A" ); - isDivider = ( getAttr( item[ 0 ], "role" ) === "list-divider" ); - value = item.attr( "value" ); - itemTheme = getAttr( item[ 0 ], "theme" ); + if ( create || item[ 0 ].className.search( /\bui-li-static\b|\bui-li-divider\b/ ) < 0 ) { + a = this._getChildrenByTagName( item[ 0 ], "a", "A" ); + isDivider = ( getAttr( item[ 0 ], "role" ) === "list-divider" ); + value = item.attr( "value" ); + itemTheme = getAttr( item[ 0 ], "theme" ); - if ( a.length && a[ 0 ].className.search( /\bui-btn\b/ ) < 0 && !isDivider ) { - itemIcon = getAttr( item[ 0 ], "icon" ); - icon = ( itemIcon === false ) ? false : ( itemIcon || o.icon ); + if ( a.length && a[ 0 ].className.search( /\bui-btn\b/ ) < 0 && !isDivider ) { + itemIcon = getAttr( item[ 0 ], "icon" ); + icon = ( itemIcon === false ) ? false : ( itemIcon || o.icon ); - // TODO: Remove in 1.5 together with links.js (links.js / .ui-link deprecated in 1.4) - a.removeClass( "ui-link" ); + // TODO: Remove in 1.5 together with links.js (links.js / .ui-link deprecated in 1.4) + a.removeClass( "ui-link" ); - buttonClass = "ui-btn"; + buttonClass = "ui-btn"; - if ( itemTheme ) { - buttonClass += " ui-btn-" + itemTheme; - } + if ( itemTheme ) { + buttonClass += " ui-btn-" + itemTheme; + } - if ( a.length > 1 ) { - itemClass = "ui-li-has-alt"; - - last = a.last(); - splittheme = getAttr( last[ 0 ], "theme" ) || o.splitTheme || getAttr( item[ 0 ], "theme", true ); - splitThemeClass = splittheme ? " ui-btn-" + splittheme : ""; - spliticon = getAttr( last[ 0 ], "icon" ) || getAttr( item[ 0 ], "icon" ) || o.splitIcon; - altButtonClass = "ui-btn ui-btn-icon-notext ui-icon-" + spliticon + splitThemeClass; - - last - .attr( "title", $.trim( last.getEncodedText() ) ) - .addClass( altButtonClass ) - .empty(); - } else if ( icon ) { - buttonClass += " ui-btn-icon-right ui-icon-" + icon; - } + if ( a.length > 1 ) { + itemClass = "ui-li-has-alt"; + + last = a.last(); + splittheme = getAttr( last[ 0 ], "theme" ) || o.splitTheme || getAttr( item[ 0 ], "theme", true ); + splitThemeClass = splittheme ? " ui-btn-" + splittheme : ""; + spliticon = getAttr( last[ 0 ], "icon" ) || getAttr( item[ 0 ], "icon" ) || o.splitIcon; + altButtonClass = "ui-btn ui-btn-icon-notext ui-icon-" + spliticon + splitThemeClass; + + last + .attr( "title", $.trim( last.getEncodedText() ) ) + .addClass( altButtonClass ) + .empty(); + } else if ( icon ) { + buttonClass += " ui-btn-icon-right ui-icon-" + icon; + } - a.first().addClass( buttonClass ); - } else if ( isDivider ) { - dividerTheme = ( getAttr( item[ 0 ], "theme" ) || o.dividerTheme || o.theme ); + a.first().addClass( buttonClass ); + } else if ( isDivider ) { + dividerTheme = ( getAttr( item[ 0 ], "theme" ) || o.dividerTheme || o.theme ); - itemClass = "ui-li-divider ui-bar-" + ( dividerTheme ? dividerTheme : "inherit" ); + itemClass = "ui-li-divider ui-bar-" + ( dividerTheme ? dividerTheme : "inherit" ); - item.attr( "role", "heading" ); - } else if ( a.length <= 0 ) { - itemClass = "ui-li-static ui-body-" + ( itemTheme ? itemTheme : "inherit" ); + item.attr( "role", "heading" ); + } else if ( a.length <= 0 ) { + itemClass = "ui-li-static ui-body-" + ( itemTheme ? itemTheme : "inherit" ); + } + if ( ol && value ) { + newStartCount = parseInt( value , 10 ) - 1; + + item.css( "counter-reset", "listnumbering " + newStartCount ); + } } - if ( ol && value ) { - newStartCount = parseInt( value , 10 ) - 1; - item.css( "counter-reset", "listnumbering " + newStartCount ); + // Instead of setting item class directly on the list item + // at this point in time, push the item into a dictionary + // that tells us what class to set on it so we can do this after this + // processing loop is finished. + + if ( !itemClassDict[ itemClass ] ) { + itemClassDict[ itemClass ] = []; } + + itemClassDict[ itemClass ].push( item[ 0 ] ); } - // Instead of setting item class directly on the list item - // at this point in time, push the item into a dictionary - // that tells us what class to set on it so we can do this after this - // processing loop is finished. + // Set the appropriate listview item classes on each list item. + // The main reason we didn't do this + // in the for-loop above is because we can eliminate per-item function overhead + // by calling addClass() and children() once or twice afterwards. This + // can give us a significant boost on platforms like WP7.5. - if ( !itemClassDict[ itemClass ] ) { - itemClassDict[ itemClass ] = []; + for ( itemClass in itemClassDict ) { + $( itemClassDict[ itemClass ] ).addClass( itemClass ); } - itemClassDict[ itemClass ].push( item[ 0 ] ); - } + countBubbles.each( function() { + $( this ).closest( "li" ).addClass( "ui-li-has-count" ); + }); + if ( countThemeClass ) { + countBubbles.addClass( countThemeClass ); + } - // Set the appropriate listview item classes on each list item. - // The main reason we didn't do this - // in the for-loop above is because we can eliminate per-item function overhead - // by calling addClass() and children() once or twice afterwards. This - // can give us a significant boost on platforms like WP7.5. + // Deprecated in 1.4. From 1.5 you have to add class ui-li-has-thumb or ui-li-has-icon to the LI. + this._addThumbClasses( li ); + this._addThumbClasses( li.find( ".ui-btn" ) ); - for ( itemClass in itemClassDict ) { - $( itemClassDict[ itemClass ] ).addClass( itemClass ); - } + this._afterListviewRefresh(); - countBubbles.each( function() { - $( this ).closest( "li" ).addClass( "ui-li-has-count" ); - }); - if ( countThemeClass ) { - countBubbles.addClass( countThemeClass ); + this._addFirstLastClasses( li, this._getVisibles( li, create ), create ); } - - // Deprecated in 1.4. From 1.5 you have to add class ui-li-has-thumb or ui-li-has-icon to the LI. - this._addThumbClasses( li ); - this._addThumbClasses( li.find( ".ui-btn" ) ); - - this._afterListviewRefresh(); - - this._addFirstLastClasses( li, this._getVisibles( li, create ), create ); } }, $.mobile.behaviors.addFirstLastClasses ) ); diff --git a/tests/integration/listview/index.html b/tests/integration/listview/index.html index b62517ed449..8f6b3154e42 100644 --- a/tests/integration/listview/index.html +++ b/tests/integration/listview/index.html @@ -313,5 +313,17 @@

Heading

+ +
+
+ +
+
+ diff --git a/tests/integration/listview/listview_core.js b/tests/integration/listview/listview_core.js index 6ec1cfeb2c6..1130c14de99 100755 --- a/tests/integration/listview/listview_core.js +++ b/tests/integration/listview/listview_core.js @@ -634,4 +634,25 @@ ]); }); + module( "Pre-enhanced" ); + + asyncTest( "basic pre-enhanced listview", function() { + var $page = $( "#list-pre-enhanced" ), + $list = $page.find( "ul" ); + + $.testHelper.pageSequence([ + function() { + $.mobile.changePage("#list-pre-enhanced"); + }, + + function() { + deepEqual(typeof $list.listview, "function", "listview object declared on pre-enhanced list"); + + window.history.back(); + }, + + start + ]); + }); + })(jQuery);