Permalink
Browse files

Listview: Add support for enhanced option

Fixes gh-7161
Closes gh-7162
  • Loading branch information...
frequent authored and arschmitz committed Feb 23, 2014
1 parent 24c072b commit 3cf294415593520c54e6681e6685d5bcd603780a
Showing with 139 additions and 99 deletions.
  1. +105 −99 js/widgets/listview.js
  2. +12 −0 tests/integration/listview/index.html
  3. +22 −0 tests/integration/listview/listview_core.js
View
@@ -44,23 +44,26 @@ return $.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 );
},
@@ -108,127 +111,130 @@ return $.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-button\b/ ) < 0 && !isDivider ) {
itemIcon = getAttr( item[ 0 ], "icon" );
icon = ( itemIcon === false ) ? false : ( itemIcon || o.icon );
if ( a.length && a[ 0 ].className.search( /\bui-button\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-button";
buttonClass = "ui-button";
if ( itemTheme ) {
buttonClass += " ui-button-" + itemTheme;
}
if ( itemTheme ) {
buttonClass += " ui-button-" + itemTheme;
}
if ( a.length > 1 ) {
itemClass = "ui-li-has-alt";
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-button-" + splittheme : "";
spliticon = getAttr( last[ 0 ], "icon" ) || getAttr( item[ 0 ], "icon" ) || o.splitIcon;
altButtonClass = "ui-button ui-button-icon-only ui-icon-" + spliticon + splitThemeClass;
last = a.last();
splittheme = getAttr( last[ 0 ], "theme" ) || o.splitTheme || getAttr( item[ 0 ], "theme", true );
splitThemeClass = splittheme ? " ui-button-" + splittheme : "";
spliticon = getAttr( last[ 0 ], "icon" ) || getAttr( item[ 0 ], "icon" ) || o.splitIcon;
altButtonClass = "ui-button ui-button-icon-only ui-icon-" + spliticon + splitThemeClass;
last
.attr( "title", $.trim( last.getEncodedText() ) )
.addClass( altButtonClass )
.empty();
last
.attr( "title", $.trim( last.getEncodedText() ) )
.addClass( altButtonClass )
.empty();
// Reduce to the first anchor, because only the first gets the buttonClass
a = a.first();
} else if ( icon ) {
buttonClass += " ui-icon-end ui-icon-" + icon;
}
// Reduce to the first anchor, because only the first gets the buttonClass
a = a.first();
} else if ( icon ) {
buttonClass += " ui-icon-end ui-icon-" + icon;
}
// Apply buttonClass to the (first) anchor
a.addClass( buttonClass );
} else if ( isDivider ) {
dividerTheme = ( getAttr( item[ 0 ], "theme" ) || o.dividerTheme || o.theme );
// Apply buttonClass to the (first) anchor
a.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.not( "[class*='ui-body-']" ).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-button" ) );
for ( itemClass in itemClassDict ) {
$( itemClassDict[ itemClass ] ).addClass( itemClass );
}
this._afterListviewRefresh();
countBubbles.each( function() {
$( this ).closest( "li" ).addClass( "ui-li-has-count" );
} );
if ( countThemeClass ) {
countBubbles.not( "[class*='ui-body-']" ).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-button" ) );
this._afterListviewRefresh();
this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
}
}, $.mobile.behaviors.addFirstLastClasses ) );
@@ -312,5 +312,17 @@ <h1>Heading</h1>
</div><!-- /content -->
</div>
<!-- Pre-enhanced List -->
<div data-nstest-role="page" id="list-pre-enhanced" data-nstest-theme="a">
<div data-nstest-role="content">
<ul data-nstest-role="listview" class="ui-listview" data-nstest-enhanced="true">
<li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Acura</a></li>
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Audi</a></li>
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">BMW</a></li>
<li class="ui-last-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Volvo</a></li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
@@ -635,4 +635,26 @@ asyncTest( "list inside collapsible content", function() {
] );
} );
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 );

0 comments on commit 3cf2944

Please sign in to comment.