Permalink
Browse files

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.
  • Loading branch information...
1 parent c7b6392 commit 2a6c7fc1b982c4308a0450a308f5a66a10e949cf scottjehl committed Jul 19, 2011
View
@@ -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
View
@@ -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" />
View
@@ -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'
);
@@ -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 );
@@ -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",
@@ -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 ) {
@@ -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" );
@@ -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" );
};
@@ -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 ) {
@@ -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,
@@ -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
@@ -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,
@@ -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,
@@ -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
@@ -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 );
@@ -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
Oops, something went wrong.

0 comments on commit 2a6c7fc

Please sign in to comment.