Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Listview: add support for enhanced option #7162

Closed
frequent wants to merge 1 commit into from
Closed

Listview: add support for enhanced option #7162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 104 additions & 98 deletions js/widgets/listview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
},

Expand Down Expand Up @@ -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 ) {
Copy link

@gabrielschulhof gabrielschulhof Jan 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The enhanced option cannot play a role in refresh(), because then subsequent calls to refresh() won't update the list. The correct way to handle the enhanced option is for _create() to not call refresh() if enhanced is true.

Copy link

@gabrielschulhof gabrielschulhof Jan 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we could do

if ( create && o.enhanced ) {
  return;
}

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 ) );

Expand Down
12 changes: 12 additions & 0 deletions tests/integration/listview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,5 +313,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>
21 changes: 21 additions & 0 deletions tests/integration/listview/listview_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);