From e7310d4140fe5eb91f53db8a6188f3c798aff676 Mon Sep 17 00:00:00 2001
From: Sven Franck
Date: Sun, 23 Feb 2014 16:36:58 +0100
Subject: [PATCH] Listview: add support for enhanced option
---
js/widgets/listview.js | 202 ++++++++++----------
tests/integration/listview/index.html | 12 ++
tests/integration/listview/listview_core.js | 21 ++
3 files changed, 137 insertions(+), 98 deletions(-)
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
+
+
+