From dfea9e2b8351a7724a020ef2b7a5eca5f465a09a Mon Sep 17 00:00:00 2001 From: Rick Waldron Date: Wed, 29 Jun 2011 09:27:58 -0400 Subject: [PATCH] jQuery core style guide conformance: jquery.mobile.page.js --- js/jquery.mobile.page.js | 99 +++++++++++++++++++++++----------------- 1 file changed, 58 insertions(+), 41 deletions(-) diff --git a/js/jquery.mobile.page.js b/js/jquery.mobile.page.js index 3f4e6f25..f63f9944 100644 --- a/js/jquery.mobile.page.js +++ b/js/jquery.mobile.page.js @@ -4,7 +4,8 @@ * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ -(function($, undefined ) { + +(function( $, undefined ) { $.widget( "mobile.page", $.mobile.widget, { options: { @@ -33,38 +34,43 @@ $.widget( "mobile.page", $.mobile.widget, { var $elem = this.element, o = this.options; - this.keepNative = ":jqmData(role='none'), :jqmData(role='nojs')" + (o.keepNative ? ", " + o.keepNative : ""); + this.keepNative = ":jqmData(role='none'), :jqmData(role='nojs')" + + ( o.keepNative ? ", " + o.keepNative : "" ); if ( this._trigger( "beforeCreate" ) === false ) { return; } - //some of the form elements currently rely on the presence of ui-page and ui-content + // Some of the form elements currently rely on the presence of ui-page and ui-content // classes so we'll handle page and content roles outside of the main role processing // loop below. $elem.find( ":jqmData(role='page'), :jqmData(role='content')" ).andSelf().each(function() { - $(this).addClass( "ui-" + $(this).jqmData( "role" ) ); + var $this = $( this ); + + $this.addClass( "ui-" + $this.jqmData( "role" ) ); }); $elem.find( ":jqmData(role='nojs')" ).addClass( "ui-nojs" ); - // pre-find data els + // Pre-find data els var $dataEls = $elem.find( ":jqmData(role)" ).andSelf().each(function() { var $this = $( this ), role = $this.jqmData( "role" ), - theme = $this.jqmData( "theme" ); + theme = $this.jqmData( "theme" ), + $headeranchors, + leftbtn, rightbtn, backBtn; //apply theming and markup modifications to page,header,content,footer if ( role === "header" || role === "footer" ) { $this.addClass( "ui-bar-" + (theme || $this.parent( ":jqmData(role='page')" ).jqmData( "theme" ) || "a") ); - // add ARIA role + // Add ARIA role $this.attr( "role", role === "header" ? "banner" : "contentinfo" ); - //right,left buttons - var $headeranchors = $this.children( "a" ), - leftbtn = $headeranchors.hasClass( "ui-btn-left" ), - rightbtn = $headeranchors.hasClass( "ui-btn-right" ); + // Right,left buttons + $headeranchors = $this.children( "a" ); + leftbtn = $headeranchors.hasClass( "ui-btn-left" ); + rightbtn = $headeranchors.hasClass( "ui-btn-right" ); if ( !leftbtn ) { leftbtn = $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length; @@ -74,39 +80,44 @@ $.widget( "mobile.page", $.mobile.widget, { rightbtn = $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length; } - // auto-add back btn on pages beyond first view + // Auto-add back btn on pages beyond first view if ( o.addBackBtn && role === "header" && $( ".ui-page" ).length > 1 && $elem.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) && !leftbtn && $this.jqmData( "backbtn" ) !== false ) { - var backBtn = $( ""+ o.backBtnText +"" ).prependTo( $this ); - - //if theme is provided, override default inheritance - if( o.backBtnTheme ){ + backBtn = $( ""+ o.backBtnText +"" ).prependTo( $this ); + + // If theme is provided, override default inheritance + if ( o.backBtnTheme ) { backBtn.attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme ); } } - //page title + // Page title $this.children( "h1, h2, h3, h4, h5, h6" ) .addClass( "ui-title" ) - //regardless of h element number in src, it becomes h1 for the enhanced page - .attr({ "tabindex": "0", "role": "heading", "aria-level": "1" }); + // Regardless of h element number in src, it becomes h1 for the enhanced page + .attr({ + "tabindex": "0", + "role": "heading", + "aria-level": "1" + }); } else if ( role === "content" ) { + if ( theme ) { $this.addClass( "ui-body-" + theme ); } - // add ARIA role + // Add ARIA role $this.attr( "role", "main" ); } else if ( role === "page" ) { $this.addClass( "ui-body-" + (theme || "c") ); } - switch(role) { + switch ( role ) { case "header": case "footer": case "page": @@ -129,36 +140,41 @@ $.widget( "mobile.page", $.mobile.widget, { //links in bars, or those with data-role become buttons $elem.find( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a" ) .not( ".ui-btn" ) - .not(this.keepNative) + .not( this.keepNative ) .buttonMarkup(); - $elem - .find(":jqmData(role='controlgroup')") - .controlgroup({dontFilterOutInvisible: true}); + $elem.find( ":jqmData(role='controlgroup')" ) + .controlgroup({ + dontFilterOutInvisible: true + }); - //links within content areas + // Links within content areas $elem.find( "a:not(.ui-btn):not(.ui-link-inherit)" ) - .not(this.keepNative) + .not( this.keepNative ) .addClass( "ui-link" ); - //fix toolbars + // Fix toolbars $elem.fixHeaderFooter(); }, _typeAttributeRegex: /\s+type=["']?\w+['"]?/, _enhanceControls: function() { - var o = this.options, self = this; + var o = this.options, self = this, + $this = $( this ), + type, optType, + allControls, nonNativeControls, textInputs; // degrade inputs to avoid poorly implemented native functionality this.element.find( "input" ).not(this.keepNative).each(function() { - var type = this.getAttribute( "type" ), - optType = o.degradeInputs[ type ] || "text"; + type = this.getAttribute( "type" ); + optType = o.degradeInputs[ type ] || "text"; if ( o.degradeInputs[ type ] ) { - $( this ).replaceWith( - $( "
" ).html( $(this).clone() ).html() - .replace( self._typeAttributeRegex, " type=\""+ optType +"\" data-" + $.mobile.ns + "type=\""+type+"\" " ) ); + $this.replaceWith( + $( "
" ).html( $this.clone() ).html() + .replace( self._typeAttributeRegex, " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\" " ) + ); } }); @@ -166,21 +182,22 @@ $.widget( "mobile.page", $.mobile.widget, { // may have injected new elements. We cache the non-native control // query to reduce the number of times we search through the entire page. - var allControls = this.element.find("input, textarea, select, button"), - nonNativeControls = allControls.not(this.keepNative); + allControls = this.element.find("input, textarea, select, button"); + nonNativeControls = allControls.not(this.keepNative); // XXX: Temporary workaround for issue 785. Turn off autocorrect and // autocomplete since the popup they use can't be dismissed by // the user. Note that we test for the presence of the feature // by looking for the autocorrect property on the input element. - var textInputs = allControls.filter( "input[type=text]" ); - if (textInputs.length && typeof textInputs[0].autocorrect !== "undefined") { - textInputs.each(function(){ + textInputs = allControls.filter( "input[type=text]" ); + + if ( textInputs.length && typeof textInputs[0].autocorrect !== "undefined" ) { + textInputs.each(function() { // Set the attribute instead of the property just in case there // is code that attempts to make modifications via HTML. - this.setAttribute("autocorrect", "off"); - this.setAttribute("autocomplete", "off"); + this.setAttribute( "autocorrect", "off" ); + this.setAttribute( "autocomplete", "off" ); }); }