This commit decouples all widgets from the page plugin so that they c…

…an be used ad-hoc. - Internally, each plugin self-initializes by binding to the pagecreate event. - Unit tests have been added and adjusted to support some internal changes involved in this commit. - In the process, the portions of the page plugin that were used to enhance the header,content,and footer sections of a native-app style page layout are now located in jquery.mobile.page.sections.js. - No public API options have changed, except that the page plugin no longer has options for keepNative, and degradeInputs, as plugins now handle these internally (keepNative was never documented, and degradeInputs only affected slider, so it lives there now. Page options related to the page sections are now located in the page.sections script, but they are still configurable via the page plugin's options api. - Make, Ant, and index files are updated with a new load order for all JS files.
jguang · Jul 20, 2011 · 2a6c7fc · 2a6c7fc
1 parent c7b6392
commit 2a6c7fc
Show file tree

Hide file tree

Showing 27 changed files with 577 additions and 407 deletions.
diff --git a/Makefile b/Makefile
@@ -46,21 +46,25 @@ JSFILES = 	  js/jquery.ui.widget.js \
 			  js/jquery.mobile.core.js \
 			  js/jquery.mobile.navigation.js \
 			  js/jquery.mobile.transition.js \
-			  js/jquery.mobile.fixHeaderFooter.js \
+			  js/jquery.mobile.dialog.js \
+			  js/jquery.mobile.page.sections.js \
+			  js/jquery.mobile.collapsible.js \
+			  js/jquery.mobile.fieldContain.js \
+			  js/jquery.mobile.grid.js \
+			  js/jquery.mobile.navbar.js \
+			  js/jquery.mobile.listview.js \
+			  js/jquery.mobile.listview.filter.js \
+			  js/jquery.mobile.nojs.js \
 			  js/jquery.mobile.forms.checkboxradio.js \
+			  js/jquery.mobile.forms.button.js \
+			  js/jquery.mobile.forms.slider.js \
 			  js/jquery.mobile.forms.textinput.js \
 			  js/jquery.mobile.forms.select.js \
 			  js/jquery.mobile.buttonMarkup.js \
-			  js/jquery.mobile.forms.button.js \
-			  js/jquery.mobile.forms.slider.js \
-			  js/jquery.mobile.collapsible.js \
 			  js/jquery.mobile.controlGroup.js \
-			  js/jquery.mobile.fieldContain.js \
-			  js/jquery.mobile.listview.js \
-			  js/jquery.mobile.listview.filter.js \
-			  js/jquery.mobile.dialog.js \
-			  js/jquery.mobile.navbar.js \
-			  js/jquery.mobile.grid.js \
+			  js/jquery.mobile.links.js \
+			  js/jquery.mobile.fixHeaderFooter.js \
+			  js/jquery.mobile.media.classes.js \
 			  js/jquery.mobile.init.js
 
 # The files to include when compiling the CSS files

diff --git a/build.xml b/build.xml
@@ -19,33 +19,37 @@
 	jquery.mobile.forms.textinput.css,
 	jquery.mobile.listview.css,
 	jquery.mobile.forms.slider.css"/>
-	<property name="js-sources" value="jquery.ui.widget.js,
-	jquery.mobile.widget.js,
-	jquery.mobile.media.js,
-	jquery.mobile.support.js,
-	jquery.mobile.vmouse.js,
-	jquery.mobile.event.js,
-	jquery.mobile.hashchange.js,
-	jquery.mobile.page.js,
-	jquery.mobile.core.js,
-	jquery.mobile.navigation.js,
-	jquery.mobile.transition.js,
-	jquery.mobile.fixHeaderFooter.js,
-	jquery.mobile.forms.checkboxradio.js,
-	jquery.mobile.forms.textinput.js,
-	jquery.mobile.forms.select.js,
-	jquery.mobile.buttonMarkup.js,
-	jquery.mobile.forms.button.js,
-	jquery.mobile.forms.slider.js,
-	jquery.mobile.collapsible.js,
-	jquery.mobile.controlGroup.js,
-	jquery.mobile.fieldContain.js,
-	jquery.mobile.listview.js,
-	jquery.mobile.listview.filter.js,
-	jquery.mobile.dialog.js,
-	jquery.mobile.navbar.js,
-	jquery.mobile.grid.js,
-	jquery.mobile.init.js"/>
+	<property name="js-sources" value="js/jquery.ui.widget.js,
+		  js/jquery.mobile.widget.js,
+		  js/jquery.mobile.media.js,
+		  js/jquery.mobile.support.js,
+		  js/jquery.mobile.vmouse.js,
+		  js/jquery.mobile.event.js,
+		  js/jquery.mobile.hashchange.js,
+		  js/jquery.mobile.page.js,
+		  js/jquery.mobile.core.js,
+		  js/jquery.mobile.navigation.js,
+		  js/jquery.mobile.transition.js,
+		  js/jquery.mobile.dialog.js,
+		  js/jquery.mobile.page.sections.js,
+		  js/jquery.mobile.collapsible.js,
+		  js/jquery.mobile.fieldContain.js,
+		  js/jquery.mobile.grid.js,
+		  js/jquery.mobile.navbar.js,
+		  js/jquery.mobile.listview.js,
+		  js/jquery.mobile.listview.filter.js,
+		  js/jquery.mobile.nojs.js,
+		  js/jquery.mobile.forms.checkboxradio.js,
+		  js/jquery.mobile.forms.button.js,
+		  js/jquery.mobile.forms.slider.js,
+		  js/jquery.mobile.forms.textinput.js,
+		  js/jquery.mobile.forms.select.js,
+		  js/jquery.mobile.buttonMarkup.js,
+		  js/jquery.mobile.controlGroup.js,
+		  js/jquery.mobile.links.js,
+		  js/jquery.mobile.fixHeaderFooter.js,
+		  js/jquery.mobile.media.classes.js,
+		  js/jquery.mobile.init.js"/>
 
 	<target name="merge">
 		<antcall target="merge_css" />

diff --git a/js/index.php b/js/index.php
@@ -12,21 +12,26 @@
 	'jquery.mobile.core.js',
 	'jquery.mobile.navigation.js',
 	'jquery.mobile.transition.js',
-	'jquery.mobile.fixHeaderFooter.js',
+
+	'jquery.mobile.dialog.js',
+	'jquery.mobile.page.sections.js',
+	'jquery.mobile.collapsible.js',
+	'jquery.mobile.fieldContain.js',
+	'jquery.mobile.grid.js',
+	'jquery.mobile.navbar.js',
+	'jquery.mobile.listview.js',
+	'jquery.mobile.listview.filter.js',
+	'jquery.mobile.nojs.js',
 	'jquery.mobile.forms.checkboxradio.js',
+	'jquery.mobile.forms.button.js',
+	'jquery.mobile.forms.slider.js',
 	'jquery.mobile.forms.textinput.js',
 	'jquery.mobile.forms.select.js',
 	'jquery.mobile.buttonMarkup.js',
-	'jquery.mobile.forms.button.js',
-	'jquery.mobile.forms.slider.js',
-	'jquery.mobile.collapsible.js',
 	'jquery.mobile.controlGroup.js',
-	'jquery.mobile.fieldContain.js',
-	'jquery.mobile.listview.js',
-	'jquery.mobile.listview.filter.js',
-	'jquery.mobile.dialog.js',
-	'jquery.mobile.navbar.js',
-	'jquery.mobile.grid.js',
+	'jquery.mobile.links.js',
+	'jquery.mobile.fixHeaderFooter.js',
+	'jquery.mobile.media.classes.js',
 	'jquery.mobile.init.js'
 );
 

diff --git a/js/jquery.mobile.buttonMarkup.js b/js/jquery.mobile.buttonMarkup.js
@@ -138,4 +138,13 @@ var attachEvents = function() {
 	attachEvents = null;
 };
 
+//links in bars, or those with  data-role become buttons
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+
+	$( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a", e.target )
+		.not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
+		.buttonMarkup();
+});
+
 })( jQuery );
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
@@ -6,6 +6,11 @@
 */
 (function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( ":jqmData(role='collapsible')", e.target ).collapsible();
+});
+
 $.widget( "mobile.collapsible", $.mobile.widget, {
 	options: {
 		expandCueText: " click to expand contents",

diff --git a/js/jquery.mobile.controlGroup.js b/js/jquery.mobile.controlGroup.js
@@ -4,15 +4,22 @@
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 */
-(function($, undefined ) {
+(function( $, undefined ) {
+
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( ":jqmData(role='controlgroup')", e.target ).controlgroup({ excludeInvisible: false });
+});
 
 $.fn.controlgroup = function( options ) {
 
 	return this.each(function() {
+
 		var $el = $( this ),
 			o = $.extend({
 						direction: $el.jqmData( "type" ) || "vertical",
-						shadow: false
+						shadow: false,
+						excludeInvisible: true
 					}, options ),
 			groupheading = $el.find( ">legend" ),
 			flCorners = o.direction == "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
@@ -36,7 +43,7 @@ $.fn.controlgroup = function( options ) {
 				.filter( ":last" ).addClass( flCorners[ 1 ] ).addClass( "ui-controlgroup-last" );
 		}
 
-		flipClasses( $el.find( ".ui-btn" + ( o.dontFilterOutInvisible ? "" : ":visible" ) ) );
+		flipClasses( $el.find( ".ui-btn" + ( o.excludeInvisible ? ":visible" : "" ) ) );
 		flipClasses( $el.find( ".ui-btn-inner" ) );
 
 		if ( o.shadow ) {

diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js
@@ -6,25 +6,30 @@
 
 (function( $, window, undefined ) {
 
+//auto self-init widgets
+$( ":jqmData(role='dialog')" ).live( "pagecreate", function(){
+	$( this ).dialog();
+});
+
 $.widget( "mobile.dialog", $.mobile.widget, {
 	options: {
-		closeBtnText: "Close"
+		closeBtnText 	: "Close",
+		theme			: "a"
 	},
 	_create: function() {
 		var $el = this.element;
+
+		$el.jqmData( "theme", this.options.theme );
 
 		// Class the markup for dialog styling
 		// Set aria role
 		$el.attr( "role", "dialog" )
-			.addClass( "ui-page ui-dialog ui-body-a" )
-			.find( ":jqmData(role=header)" )
+			.addClass( "ui-dialog" )
+			.find( ":jqmData(role='header')" )
 			.addClass( "ui-corner-top ui-overlay-shadow" )
 				.prepend( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" )
 			.end()
-			.find( ".ui-content:not([class*='ui-body-'])" )
-				.addClass( 'ui-body-c' )
-			.end()
-			.find( ".ui-content,:jqmData(role='footer')" )
+			.find( ":jqmData(role='content'),:jqmData(role='footer')" )
 				.last()
 				.addClass( "ui-corner-bottom ui-overlay-shadow" );
 

diff --git a/js/jquery.mobile.fieldContain.js b/js/jquery.mobile.fieldContain.js
@@ -7,6 +7,11 @@
 
 (function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( ":jqmData(role='fieldcontain')", e.target ).fieldcontain();
+});
+
 $.fn.fieldcontain = function( options ) {
 	return this.addClass( "ui-field-contain ui-body ui-br" );
 };

diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js
@@ -6,6 +6,35 @@
 */
 
 (function( $, undefined ) {
+
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+
+	if( $( ":jqmData(position='fixed')", e.target ).length ){
+		$( e.target ).each(function(){
+
+			if ( !$.support.scrollTop ) {
+				return this;
+			}
+
+			var $this = $( this );
+
+			if ( $this.jqmData( "fullscreen" ) ) {
+				$this.addClass( "ui-page-fullscreen" );
+			}
+
+			// Should be slidedown
+			$this.find( ".ui-header:jqmData(position='fixed')" ).addClass( "ui-header-fixed ui-fixed-inline fade" );
+
+			// Should be slideup
+			$this.find( ".ui-footer:jqmData(position='fixed')" ).addClass( "ui-footer-fixed ui-fixed-inline fade" );
+
+		})
+
+	}
+});
+
+
 
 $.fn.fixHeaderFooter = function( options ) {
 

diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js
@@ -7,6 +7,13 @@
 
 (function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( "button, [type='button'], [type='submit'], [type='reset'], [type='image']", e.target )
+		.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+		.button();
+});
+
 $.widget( "mobile.button", $.mobile.widget, {
 	options: {
 		theme: null,

diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js
@@ -7,6 +7,13 @@
 
 (function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( "input[type='checkbox'],input[type='radio']", e.target )
+		.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+		.checkboxradio();
+});
+
 $.widget( "mobile.checkboxradio", $.mobile.widget, {
 	options: {
 		theme: null

diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js
@@ -7,6 +7,13 @@
 
 (function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( "select:not(:jqmData(role='slider'))", e.target )
+		.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+		.selectmenu();
+});
+
 $.widget( "mobile.selectmenu", $.mobile.widget, {
 	options: {
 		theme: null,

diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
@@ -7,6 +7,23 @@
 
 ( function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+
+	var nativeSel = ":jqmData(role='none'), :jqmData(role='nojs')";
+
+	//degrade range back to number type
+	$( "input[type='range']:not("+ nativeSel +")", e.target ).each(function(){
+		$(this).replaceWith(
+			$( "<div>" ).html( $(this).clone() ).html()
+				.replace( /\s+type=["']?\w+['"]?/, " type=\"number\" data-" + $.mobile.ns + "role=\"slider\" " ) );
+	});				
+
+	//now self-init
+	$( ":jqmData(role='slider'):not("+ nativeSel +")", e.target ).slider();
+
+});
+
 $.widget( "mobile.slider", $.mobile.widget, {
 	options: {
 		theme: null,

diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js
@@ -7,6 +7,13 @@
 
 (function( $, undefined ) {
 
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( "input[type='text'], input[type='search'], input[type='number'], input[type='password'], textarea", e.target )
+		.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+		.textinput();
+});
+
 $.widget( "mobile.textinput", $.mobile.widget, {
 	options: {
 		theme: null

diff --git a/js/jquery.mobile.links.js b/js/jquery.mobile.links.js
@@ -0,0 +1,20 @@
+/*
+* jQuery Mobile Framework : "fieldcontain" plugin - simple class additions to make form row separators
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT or GPL Version 2 licenses.
+* http://jquery.org/license
+*/
+
+(function( $, undefined ) {
+
+$( document ).bind( "pagecreate", function( e ){
+
+	//links within content areas
+	$( e.target )
+		.find( "a" )
+		.not( ".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')" )
+		.addClass( "ui-link" );
+
+});
+
+})( jQuery );
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
@@ -6,6 +6,12 @@
 */
 
 (function( $, undefined ) {
+
+//auto self-init widgets
+$( document ).bind( "pagecreate", function( e ){
+	$( ":jqmData(role='listview')", e.target ).listview();
+});
+
 //Keeps track of the number of lists per page UID
 //This allows support for multiple nested list in the same page
 //https://github.com/jquery/jquery-mobile/issues/1617