From 3080b2a9c4fd7d39bd504c257ac97f2e1e7a9ef4 Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Tue, 1 Nov 2011 14:34:53 +0100 Subject: [PATCH 01/88] removing now also the ui-btn-down-x class when button loses focus --- js/jquery.mobile.buttonMarkup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.buttonMarkup.js b/js/jquery.mobile.buttonMarkup.js index be891837..2ee8a5e3 100644 --- a/js/jquery.mobile.buttonMarkup.js +++ b/js/jquery.mobile.buttonMarkup.js @@ -165,7 +165,7 @@ var attachEvents = function() { if ( btn ) { $btn = $( btn ); theme = $btn.attr( "data-" + $.mobile.ns + "theme" ); - $btn.removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme ); + $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); } } }); From 0e14c98efe8fa1cb29db8bf13b66f3d66a171e81 Mon Sep 17 00:00:00 2001 From: Gabriele Rabbiosi Date: Wed, 2 Nov 2011 23:58:50 +0100 Subject: [PATCH 02/88] Corrected some tests for the slider widget --- tests/unit/slider/slider_events.js | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index 19c8e33a..feca782d 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/slider_events.js @@ -203,16 +203,16 @@ var integerLeft, compare, css, threshold; css = obj.css('left'); - threshold = opts.pxThreshold || 10; + threshold = opts.pxThreshold || 0; if( css.indexOf( "px" ) > -1 ) { // parse the actual pixel value returned by the left css value // and the pixels passed in for comparison - integerLeft = parseInt(css.replace("px", ""), 10 ), + integerLeft = Math.round( parseFloat( css.replace("px", "") ) ), compare = parseInt( opts.pixels.replace( "px", "" ), 10 ); - // check that the pixel value provided is within a given threshold default is 10px - ok( compare > integerLeft - threshold && compare < integerLeft + threshold, opts.message ); + // check that the pixel value provided is within a given threshold; default is 0px + ok( compare >= integerLeft - threshold && compare <= integerLeft + threshold, opts.message ); } else { equal( css, opts.percent, opts.message ); } @@ -235,7 +235,7 @@ function() { assertLeftCSS(handle, { percent: '100%', - pixels: handle.css('width'), + pixels: handle.parent().css('width'), message: 'handle starts on the right side' }); @@ -249,10 +249,9 @@ function() { assertLeftCSS(handle, { percent: '100%', - pixels: handle.css('width'), + pixels: handle.parent().css('width'), message: 'handle ends on the right side' }); - // equals(handle.css('left'), '100%', 'handle ends on the right side'); // initialize the switch control.val('on').slider('refresh'); @@ -261,7 +260,7 @@ function() { assertLeftCSS(handle, { percent: '100%', - pixels: handle.css('width'), + pixels: handle.parent().css('width'), message: 'handle starts on the right side' }); @@ -269,7 +268,6 @@ offset = handle.offset(); slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) ); slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) ); - //slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - width + 20, offset.top + 10 ) ); slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) ); }, @@ -277,7 +275,7 @@ assertLeftCSS(handle, { percent: '0%', pixels: '0px', - message: 'handle starts on the right side' + message: 'handle ends on the left side' }); start(); @@ -302,14 +300,14 @@ function() { assertLeftCSS(handle, { percent: '100%', - pixels: handle.css('width'), + pixels: handle.parent().css('width'), message: 'handle starts on the right side' }); // simulate dragging more than a half offset = handle.offset(); slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) ); - slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - width + 70, offset.top + 10 ) ); + slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) ); }, function() { @@ -319,14 +317,14 @@ max = "100%"; } else { min = "0px"; - max = handle.css( 'width' ); + max = handle.parent().css( 'width' ); } notEqual(handle.css('left'), min, 'handle is not on the left side'); notEqual(handle.css('left'), max, 'handle is not on the right side'); // reset slider state so it is ready for other tests - slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - width + 20, offset.top + 10 ) ); + slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) ); start(); } @@ -358,8 +356,8 @@ function() { assertLeftCSS(handle, { percent: '100%', - pixels: handle.css( 'width' ), - message: 'handle ends on the left side' + pixels: handle.parent().css( 'width' ), + message: 'handle ends on the right side' }); // reset slider state so it is ready for other tests From 8177ec4bb5c5cecc4cee14dc633f321b9702b8d6 Mon Sep 17 00:00:00 2001 From: "jblas@adobe.com" Date: Mon, 7 Nov 2011 12:38:54 -0800 Subject: [PATCH 03/88] Shave another 200-300ms off the 400 listview item page by simply reducing the number of function calls we make during enhancement. - Got rid of _itemApply() and moved it's functionality to the bottom of refresh(), doing finds from $list where we can, and li where we can't. Boom, at least 1200+ less function calls. --- js/jquery.mobile.listview.js | 40 +++++++++++++++++------------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index 317875ad..2008827b 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -35,19 +35,6 @@ $.widget( "mobile.listview", $.mobile.widget, { t.refresh( true ); }, - _itemApply: function( $list, item ) { - var $countli = item.find( ".ui-li-count" ); - if ( $countli.length ) { - item.addClass( "ui-li-has-count" ); - $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" ); - } - - // TODO class has to be defined in markup - item.find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() { - item.addClass( $(this).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" ); - }); - }, - _removeCorners: function( li, which ) { var top = "ui-corner-top ui-corner-tr ui-corner-tl", bot = "ui-corner-bottom ui-corner-br ui-corner-bl"; @@ -205,17 +192,28 @@ $.widget( "mobile.listview", $.mobile.widget, { } item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass ); - - self._itemApply( $list, item ); } - $list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end() - .find( "p, dl" ).addClass( "ui-li-desc" ).end() - .find( ".ui-li-aside" ).each(function() { - var $this = $(this); - $this.prependTo( $this.parent() ); //shift aside to front for css float - }); + $list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ) + .end() + .find( "p, dl" ).addClass( "ui-li-desc" ) + .end() + + .find( ".ui-li-aside" ).each(function() { + var $this = $(this); + $this.prependTo( $this.parent() ); //shift aside to front for css float + }) + .end() + + .find( ".ui-li-count" ).each( function() { + $( this ).closest( "li" ).addClass( "ui-li-has-count" ); + }).addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme) + " ui-btn-corner-all" ); + + li.find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() { + var $this = $( this ); + $this.closest( "li" ).addClass( $this.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" ); + }); this._refreshCorners( create ); }, From 56f0af4cdfaf8060afabf6ed0b1e455bc2df4b4f Mon Sep 17 00:00:00 2001 From: toddparker Date: Mon, 7 Nov 2011 16:02:27 -0500 Subject: [PATCH 04/88] Added an intro message that links to the ns global option --- docs/api/data-attributes.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index 9e562f50..19d3f076 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -23,6 +23,8 @@
+

Data- attribute reference

+

The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use data- attributes, set a custom namespace by modifying the ns global option.

- + diff --git a/experiments/scrollview/lists-divider.html b/experiments/scrollview/lists-divider.html index 08207ba6..9a9ea0b7 100644 --- a/experiments/scrollview/lists-divider.html +++ b/experiments/scrollview/lists-divider.html @@ -20,7 +20,7 @@ } - + diff --git a/experiments/scrollview/scrollview-direction.html b/experiments/scrollview/scrollview-direction.html index beb5113e..26859af0 100644 --- a/experiments/scrollview/scrollview-direction.html +++ b/experiments/scrollview/scrollview-direction.html @@ -59,7 +59,7 @@ } - + diff --git a/experiments/scrollview/scrollview-nested.html b/experiments/scrollview/scrollview-nested.html index bc0ecd72..35f82851 100644 --- a/experiments/scrollview/scrollview-nested.html +++ b/experiments/scrollview/scrollview-nested.html @@ -83,7 +83,7 @@ - + diff --git a/experiments/scrollview/sv-test-01.html b/experiments/scrollview/sv-test-01.html index 69f63754..4c60b941 100644 --- a/experiments/scrollview/sv-test-01.html +++ b/experiments/scrollview/sv-test-01.html @@ -7,7 +7,7 @@ - + - + diff --git a/tests/unit/buttonMarkup/index.html b/tests/unit/buttonMarkup/index.html index 32f714f7..57bbb378 100644 --- a/tests/unit/buttonMarkup/index.html +++ b/tests/unit/buttonMarkup/index.html @@ -10,7 +10,7 @@ - + diff --git a/tests/unit/collapsible/index.html b/tests/unit/collapsible/index.html index 6eaac1fc..6741193c 100644 --- a/tests/unit/collapsible/index.html +++ b/tests/unit/collapsible/index.html @@ -9,7 +9,7 @@ - + diff --git a/tests/unit/core/index.html b/tests/unit/core/index.html index 8cafe48d..eefc587c 100644 --- a/tests/unit/core/index.html +++ b/tests/unit/core/index.html @@ -11,7 +11,7 @@ - + diff --git a/tests/unit/event/index.html b/tests/unit/event/index.html index bdcc89de..a495c9f2 100644 --- a/tests/unit/event/index.html +++ b/tests/unit/event/index.html @@ -9,7 +9,7 @@ - + diff --git a/tests/unit/init/index.html b/tests/unit/init/index.html index 6e0403b8..0cff9c32 100644 --- a/tests/unit/init/index.html +++ b/tests/unit/init/index.html @@ -13,7 +13,7 @@ - + diff --git a/tests/unit/init/nopage.html b/tests/unit/init/nopage.html index 3074b8b5..218b01c3 100644 --- a/tests/unit/init/nopage.html +++ b/tests/unit/init/nopage.html @@ -10,7 +10,7 @@ - + diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html index 9a6ed594..92f42d67 100644 --- a/tests/unit/listview/index.html +++ b/tests/unit/listview/index.html @@ -9,7 +9,7 @@ - + diff --git a/tests/unit/listview/pushstate-tests.html b/tests/unit/listview/pushstate-tests.html index 77126325..5ed009bf 100644 --- a/tests/unit/listview/pushstate-tests.html +++ b/tests/unit/listview/pushstate-tests.html @@ -9,7 +9,7 @@ - + diff --git a/tests/unit/select/cached-tests.html b/tests/unit/select/cached-tests.html index 3f8f74b9..f001e83f 100644 --- a/tests/unit/select/cached-tests.html +++ b/tests/unit/select/cached-tests.html @@ -9,7 +9,7 @@ - + diff --git a/tests/unit/select/index.html b/tests/unit/select/index.html index 047cce92..8043ab76 100644 --- a/tests/unit/select/index.html +++ b/tests/unit/select/index.html @@ -9,7 +9,7 @@ - + diff --git a/tests/unit/textinput/index.html b/tests/unit/textinput/index.html index 849b38c5..738f2f07 100644 --- a/tests/unit/textinput/index.html +++ b/tests/unit/textinput/index.html @@ -10,7 +10,7 @@ - + From a213cfa28161d67cbaadf1fe38629829ae1f26e5 Mon Sep 17 00:00:00 2001 From: Eddie Monge Date: Wed, 9 Nov 2011 01:39:25 -0800 Subject: [PATCH 50/88] Complete overhaul of Make process to be cleaner, clearer and server-friendly --- Makefile | 274 ++++++++++++++++++-------------------- js/jquery.mobile.intro.js | 9 ++ 2 files changed, 140 insertions(+), 143 deletions(-) create mode 100644 js/jquery.mobile.intro.js diff --git a/Makefile b/Makefile index 55f403e8..4306b10c 100644 --- a/Makefile +++ b/Makefile @@ -1,44 +1,3 @@ -# The system generated date in YYYYMMDD format -DATE = $(shell date "+%Y%m%d") - -# The version according to the source file. If this is the nightly build, use a different version -VER = $(shell cat version.txt) - -# The command to replace the @VERSION in the files with the actual version -SED_VER = sed "s/@VERSION/$(shell git log -1 --format=format:" Git > Date: %cd Info SHA1: %H")/" -deploy: SED_VER = sed "s/@VERSION/${VER}/" -MIN_VER = "/*! jQuery Mobile v@VERSION jquerymobile.com | jquery.org/license */" - -# The version of jQuery core used -JQUERY = $(shell grep Library js/jquery.js | sed s'/ \* jQuery JavaScript Library v//') - -# The directory to create the zipped files in and also serves as the filenames -DIR = jquery.mobile-${VER} -STRUCTUREFILE = jquery.mobile.structure-${VER} -nightly: DIR = jquery.mobile - -# The output folder for the finished files -OUTPUT = compiled - -# Command to remove the latest directory from the CDN before uploading, only if using latest target -RMLATEST = echo "" - -# The output folder for the nightly files. -NIGHTLY_OUTPUT = nightlies/${DATE} -ifeq (${NIGHTLY_OUTPUT}, latest) - RMLATEST = ssh jqadmin@code.origin.jquery.com 'rm -rf /var/www/html/code.jquery.com/mobile/latest' -endif -NIGHTLY_WEBPATH = http://code.jquery.com/mobile/${NIGHTLY_OUTPUT} - -# The filenames -JS = ${DIR}.js -MIN = ${DIR}.min.js -CSS = ${DIR}.css -CSSMIN = ${DIR}.min.css -CSSSTRUCTURE = ${STRUCTUREFILE}.css -CSSSTRUCTUREMIN = ${STRUCTUREFILE}.min.css -CSSTHEME = default - # The files to include when compiling the JS files JSFILES = js/jquery.ui.widget.js \ js/jquery.mobile.widget.js \ @@ -75,8 +34,8 @@ JSFILES = js/jquery.ui.widget.js \ js/jquery.mobile.fixHeaderFooter.native.js \ js/jquery.mobile.init.js -CSSTHEMEFILES = css/themes/${CSSTHEME}/jquery.mobile.theme.css -CSSSTRUCTUREFILES = css/structure/jquery.mobile.core.css \ +# The files to include when compiling the CSS files +CSSFILES = css/structure/jquery.mobile.core.css \ css/structure/jquery.mobile.transitions.css \ css/structure/jquery.mobile.grids.css \ css/structure/jquery.mobile.headerfooter.css \ @@ -91,129 +50,158 @@ CSSSTRUCTUREFILES = css/structure/jquery.mobile.core.css \ css/structure/jquery.mobile.forms.textinput.css \ css/structure/jquery.mobile.listview.css \ css/structure/jquery.mobile.forms.slider.css +CSSTHEMEFILES = css/themes/${THEME}/jquery.mobile.theme.css -# The files to include when compiling the CSS files -CSSFILES = ${CSSTHEMEFILES} ${CSSSTRUCTUREFILES} -# By default, this is what get runs when make is called without any arguments. -# Min and un-min CSS and JS files are the only things built -all: init js min css cssmin notify -# Build the normal CSS file. + +# Helper Variables +# The command to replace the @VERSION in the files with the actual version +VER = sed "s/v@VERSION/$$(git log -1 --format=format:"Git Build: SHA1: %H <> Date: %cd")/" +VER_MIN = "/*! jQuery Mobile v${VER_OFFICIAL} jquerymobile.com | jquery.org/license */" +VER_OFFICIAL = $(shell cat version.txt) + +# The output folder for the finished files +OUTPUT = compiled + +# The name of the files +NAME = jquery.mobile +STRUCTURE = jquery.mobile.structure +deploy: NAME = jquery.mobile-${VER_OFFICIAL} +deploy: STRUCTURE = jquery.mobile.structure-${VER_OFFICIAL} + +# The CSS theme being used +THEME = default + + + + + +# Build Targets + +# When no build target is specified, all gets ran +all: init css js zip notify + + +# Build and minify the CSS files css: init - # Build the CSS file - @@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${CSS} - @@cat ${CSSFILES} >> ${OUTPUT}/${CSS} - @@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTURE} - @@cat ${CSSSTRUCTUREFILES} >> ${OUTPUT}/${CSSSTRUCTURE} + # Build the CSS file with the theme included + @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${NAME}.css + @@cat ${CSSTHEMEFILES} ${CSSFILES} >> ${OUTPUT}/${NAME}.css + # ..... and then minify it + @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.css + @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${NAME}.css >> ${OUTPUT}/${NAME}.min.css + # Build the CSS Structure-only file + @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${STRUCTURE}.css + @@cat ${CSSFILES} >> ${OUTPUT}/${STRUCTURE}.css + # ..... and then minify it + @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.structure.min.css + @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${STRUCTURE}.css >> ${OUTPUT}/${STRUCTURE}.min.css + # ..... and then copy in the images + @@cp -R css/themes/${THEME}/images ${OUTPUT}/ + # Css portion is complete. + # ------------------------------------------------- -# Build the minified CSS file -cssmin: init css - # Build the minified CSS file - @@echo ${MIN_VER} | ${SED_VER} > ${OUTPUT}/${CSSMIN} - @@echo ${MIN_VER} | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTUREMIN} - @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${CSS} >> ${OUTPUT}/${CSSMIN} - @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${CSSSTRUCTURE} >> ${OUTPUT}/${CSSSTRUCTUREMIN} -# Build the normal JS file -js: init - # Build the JavaScript file - @@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${JS} - @@cat ${JSFILES} >> ${OUTPUT}/${JS} +docs: init css js + # Create the Demos/Docs/Tests/Tools + @@mkdir -p tmp/${NAME} + @@cp -r index.html docs experiments external js/jquery.js tests tmp/${NAME}/ + @@cp ${OUTPUT}/${NAME}.min.css ${OUTPUT}/${NAME}.min.js tmp/${NAME}/ + # ... Update the JavaScript and CSS paths + @@find tmp/${NAME} -type f \ + \( -name '*.html' -o -name '*.php' \) \ + -exec sed -i '' 's|js/"|${NAME}.min.js"|g' {} \; \ + -exec sed -i '' 's|css/themes/default/|${NAME}.min.css|g' {} \; \ + -exec sed -i '' 's|js/jquery.js"|jquery.js"|g' {} \; + # ... And then move it the finished directory + @@mv tmp/${NAME} ${OUTPUT}/demos + # Last, zip up the the whole folder + @@zip -rq tmp/${NAME}.zip ${OUTPUT} + @@mv tmp/${NAME}.zip ${OUTPUT}/${NAME}.docs.zip + # Remove the temporary files + @@rm -rf tmp + # ------------------------------------------------- + # Create the output directory. This is in a separate step so its not dependant on other targets init: + # ------------------------------------------------- # Building jQuery Mobile in the "${OUTPUT}" folder @@rm -rf ${OUTPUT} - @@mkdir ${OUTPUT} + @@rm -rf tmp + @@mkdir -p ${OUTPUT} + # ------------------------------------------------- -# Build the minified JS file -min: init js - # Build the minified JavaScript file - @@echo ${MIN_VER} | ${SED_VER} > ${OUTPUT}/${MIN} - @@java -jar build/google-compiler-20111003.jar --js ${OUTPUT}/${JS} --warning_level QUIET --js_output_file ${MIN}.tmp - @@cat ${MIN}.tmp >> ${OUTPUT}/${MIN} - @@rm -f ${MIN}.tmp -# Let the user know the files were built and where they are -notify: +# Build and minify the JS files +js: init + # Build the JavaScript file + @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${NAME}.js + @@cat ${JSFILES} >> ${OUTPUT}/${NAME}.js + # ..... and then minify it + @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.js + @@java -jar build/google-compiler-20111003.jar --js ${OUTPUT}/${NAME}.js --warning_level QUIET >> ${OUTPUT}/${NAME}.min.js + # ------------------------------------------------- + + +# Output a message saying the process is complete +notify: init @@echo "The files have been built and are in: " $$(pwd)/${OUTPUT} - -# Pull the latest commits. This is used for the nightly build but can be used to save some keystrokes -pull: - @@git pull --quiet - -# Zip the 4 files and the theme images into one convenient package -zip: init js min css cssmin - @@mkdir -p ${DIR} - @@cp ${OUTPUT}/*.js ${DIR}/ - @@cp ${OUTPUT}/*.css ${DIR}/ - @@cp -R css/themes/${CSSTHEME}/images ${DIR}/ - @@zip -rq ${OUTPUT}/${DIR}.zip ${DIR} - @@rm -fr ${DIR} + # ------------------------------------------------- -# Used by the jQuery team to make the nightly builds -nightly: pull zip - # Create the folder to hold the files for the demos - @@mkdir -p ${VER} +# Zip up the jQm files without docs +zip: init css js + # Packaging up the files into a zip archive + @@zip -rq ${NAME}.tmp.zip ${OUTPUT} + @@mv ${NAME}.tmp.zip ${OUTPUT}/${NAME}.zip + # ------------------------------------------------- + - # Copy in the base stuff for the demos - @@cp -r index.html css experiments docs tools ${VER}/ - # First change all the paths from super deep to the same level for JS files - @@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../../../js|src="js|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../../js|src="js|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../js|src="js|g' {} \; - # Then change all the paths from super deep to the same level for CSS files - @@find ${VER} -type f -name '*.html' -exec sed -i 's|media="only all"||g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|rel="stylesheet" href="../../../|rel="stylesheet" href="|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|rel="stylesheet" href="../../|rel="stylesheet" href="|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|rel="stylesheet" href="../|rel="stylesheet" href="|g' {} \; +# ------------------------------------------------- +# ------------------------------------------------- +# ------------------------------------------------- +# +# For jQuery Team Use Only +# +# ------------------------------------------------- - # Change the empty paths to the location of this nightly file - @@find ${VER} -type f -name '*.html' -exec sed -i 's|href="css/themes/${CSSTHEME}/"|href="${NIGHTLY_WEBPATH}/${DIR}.min.css"|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|src="js/jquery.js"|src="http://code.jquery.com/jquery-${JQUERY}.min.js"|' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i 's|src="js/"|src="${NIGHTLY_WEBPATH}/${DIR}.min.js"|g' {} \; - - # Move the demos into the output folder - @@mv ${VER} ${OUTPUT}/demos - - # Copy the images as well - @@cp -R css/themes/${CSSTHEME}/images ${OUTPUT} - - @@${RMLATEST} - @@scp -r ${OUTPUT} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/${NIGHTLY_OUTPUT} +# Push the latest git version to the CDN. This is done on a post commit hook +latest: init js css zip + # Time to put these on the CDN + @@scp -r ${OUTPUT}/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/latest/ + # Do some cleanup to wrap it up @@rm -rf ${OUTPUT} + # ------------------------------------------------- -# Used by the jQuery team to deploy a build to the CDN -deploy: zip - # Deploy to CDN - @@mv ${OUTPUT} ${VER} - @@scp -r ${VER} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/ - @@mv ${VER} ${OUTPUT} +# Build the nightly backups. This is done on a server cronjob +nightlies: init js css zip docs + # Time to put these on the CDN + @@mkdir -p tmp/nightlies + @@mv ${OUTPUT} tmp/nightlies/$$(date "+%Y%m%d") + @@scp -r nightlies/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/ + # Do some cleanup to wrap it up + @@rm -rf tmp + # ------------------------------------------------- - # Deploy Demos to the jQueryMobile.com site - @@mkdir -p ${VER} - @@cp -r index.html css experiments docs tools ${VER}/ - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../../js|src="js|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../js|src="js|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../js|src="js|g' {} \; +# Deploy a finished release. This is manually done. +deploy: init js css docs zip + # Deploying all the files to the CDN + @@mkdir tmp + @@cp -r ${OUTPUT} tmp/${VER_OFFICIAL} + @@scp -r tmp/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/ + @@rm -rf tmp/${VER_OFFICIAL} + # Create the Demos/Docs/Tests/Tools for jQueryMobile.com + @@mv ${OUTPUT}/demos tmp/${VER_OFFICIAL} + # ... And copied to the CDN and the jquerymobile.com server + @@scp -r tmp/* jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/ + # Do some cleanup to wrap it up + @@rm -rf tmp + @@rm -rf ${OUTPUT} + # ------------------------------------------------- - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|media="only all"||g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet" href="../../../|rel="stylesheet" href="|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet" href="../../|rel="stylesheet" href="|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet" href="../|rel="stylesheet" href="|g' {} \; - - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|href="css/themes/${CSSTHEME}/"|href="http://code.jquery.com/mobile/${VER}/${DIR}.min.css"|g' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/jquery.js"|src="http://code.jquery.com/jquery-${JQUERY}.min.js"|' {} \; - @@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/"|src="http://code.jquery.com/mobile/${VER}/${DIR}.min.js"|g' {} \; - - @@scp -r ${VER} jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/ - - # Clean up the local files - @@rm -rf ${VER} - @@echo "All Done" diff --git a/js/jquery.mobile.intro.js b/js/jquery.mobile.intro.js new file mode 100644 index 00000000..4b990893 --- /dev/null +++ b/js/jquery.mobile.intro.js @@ -0,0 +1,9 @@ +/* +* jQuery Mobile Framework v@VERSION +* http://jquerymobile.com +* +* Copyright 2011 (c) jQuery Project +* Dual licensed under the MIT or GPL Version 2 licenses. +* http://jquery.org/license +* +*/ From 6b5ca6311adfa60ed791bcd3373e77c70c244a21 Mon Sep 17 00:00:00 2001 From: "Eddie Monge Jr." Date: Wed, 9 Nov 2011 08:32:00 -0800 Subject: [PATCH 51/88] Remove unneeded css as height will suffice. Trigger the inputs keyup. Im not sure calling $(keyup) called the function on the element. --- js/jquery.mobile.forms.textinput.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index d52084e4..1d1eb280 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -89,9 +89,7 @@ $.widget( "mobile.textinput", $.mobile.widget, { clientHeight = input[ 0 ].clientHeight; if ( clientHeight < scrollHeight ) { - input.css({ - height: (scrollHeight + extraLineHeight) - }); + input.height(scrollHeight + extraLineHeight); } }, keyupTimeout; @@ -103,8 +101,10 @@ $.widget( "mobile.textinput", $.mobile.widget, { // Issue 509: the browser is not giving scrollHeight properly until after the document // is ready. - if ($.trim(input.text())) { - $(keyup); + if ( $.trim( input.val() ) ) { + $(function() { + input.keyup() + }); } } }, From fb2544b8a1e8fcab4065eb4e71ef205ade8c8824 Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 10:10:57 -0800 Subject: [PATCH 52/88] add some maring to account for silly large number strings on our perf charts --- tests/speed/stats/visualize/visualize.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/speed/stats/visualize/visualize.css b/tests/speed/stats/visualize/visualize.css index 2999fe1d..01d40488 100644 --- a/tests/speed/stats/visualize/visualize.css +++ b/tests/speed/stats/visualize/visualize.css @@ -41,6 +41,6 @@ table { div.visualize { float: left; - margin-left: 50px; + margin-left: 100px; margin-right: 50px; } \ No newline at end of file From 3f52c482d0dccfe8e4c940a9ad6dcabb4ba3d633 Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 11:32:04 -0800 Subject: [PATCH 53/88] account for css load in initial document load and page transition with text area autogrow --- js/jquery.mobile.forms.textinput.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index 1d1eb280..bcc3fe1d 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -99,12 +99,16 @@ $.widget( "mobile.textinput", $.mobile.widget, { keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); }); - // Issue 509: the browser is not giving scrollHeight properly until after the document - // is ready. + // Issue 509: the browser is not giving scrollHeight properly until the styles load + // for the input if ( $.trim( input.val() ) ) { - $(function() { - input.keyup() - }); + // bind to the window load to make sure the height is calculated + // the document as a whole on the initial page load + $(window).load(keyup); + + // after a page is loaded into the document the height has to be + // initially triggered to make sure it accomodates loaded content + $(document).one("pagechange", keyup); } } }, From 50204053bcf0da7af040a25a93c094ad83c4c692 Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 11:32:39 -0800 Subject: [PATCH 54/88] test for page load text area autogrow --- tests/unit/textinput/external.html | 38 ++++++++++++++++++++++++++ tests/unit/textinput/index.html | 1 + tests/unit/textinput/textinput_core.js | 19 +++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 tests/unit/textinput/external.html diff --git a/tests/unit/textinput/external.html b/tests/unit/textinput/external.html new file mode 100644 index 00000000..2d10dd62 --- /dev/null +++ b/tests/unit/textinput/external.html @@ -0,0 +1,38 @@ + + + + + +

+ +
+ + diff --git a/tests/unit/textinput/index.html b/tests/unit/textinput/index.html index 738f2f07..1e6add37 100644 --- a/tests/unit/textinput/index.html +++ b/tests/unit/textinput/index.html @@ -46,6 +46,7 @@ + external
diff --git a/tests/unit/textinput/textinput_core.js b/tests/unit/textinput/textinput_core.js index 106e3975..41381f51 100644 --- a/tests/unit/textinput/textinput_core.js +++ b/tests/unit/textinput/textinput_core.js @@ -39,4 +39,23 @@ test.val("foo\n\n\n\n\n\n\n\n\n\n\n\n\n\n").trigger("keyup"); }); + + asyncTest( "text area should auto grow when the parent page is loaded via ajax", function() { + $.testHelper.pageSequence([ + function() { + $("#external").click(); + }, + + function() { + setTimeout(function() { + ok($.mobile.activePage.find( "textarea" )[0].clientHeight > 100, "text area's height has grown"); + window.history.back(); + }, 1000); + }, + + function() { + start(); + } + ]); + }); })(jQuery); \ No newline at end of file From d50aa91e6df45c645e2c5fc45cfd984f6be1d98b Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 11:42:57 -0800 Subject: [PATCH 55/88] comment clarification --- js/jquery.mobile.forms.textinput.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index bcc3fe1d..ef21bb72 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -99,15 +99,14 @@ $.widget( "mobile.textinput", $.mobile.widget, { keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); }); - // Issue 509: the browser is not giving scrollHeight properly until the styles load - // for the input + // Issue 509: the browser is not providing scrollHeight properly until the styles load if ( $.trim( input.val() ) ) { - // bind to the window load to make sure the height is calculated - // the document as a whole on the initial page load + // bind to the window load to make sure the height is calculated based on BOTH + // the DOM and CSS $(window).load(keyup); - // after a page is loaded into the document the height has to be - // initially triggered to make sure it accomodates loaded content + // binding to pagechange here ensures that for pages loaded via + // ajax the height is recalculated without user input $(document).one("pagechange", keyup); } } From 1d4109295d2fed384b31db4359e1acfcd4213ccb Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 11:43:40 -0800 Subject: [PATCH 56/88] textinput whitespace --- js/jquery.mobile.forms.textinput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index ef21bb72..42109c74 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -103,11 +103,11 @@ $.widget( "mobile.textinput", $.mobile.widget, { if ( $.trim( input.val() ) ) { // bind to the window load to make sure the height is calculated based on BOTH // the DOM and CSS - $(window).load(keyup); + $( window ).load( keyup ); // binding to pagechange here ensures that for pages loaded via // ajax the height is recalculated without user input - $(document).one("pagechange", keyup); + $( document ).one( "pagechange", keyup ); } } }, From 75341c6ca70b665e3492774bddcd932dc3fbee15 Mon Sep 17 00:00:00 2001 From: Eddie Monge Date: Wed, 9 Nov 2011 14:56:38 -0800 Subject: [PATCH 57/88] Update the README to include instructions for including a custom theme --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index abd45ef9..6a4511dc 100644 --- a/README.md +++ b/README.md @@ -77,9 +77,8 @@ theme's name. For testing locally, make sure the index.php file is copied as wel 2. Edit the `jquery.mobile.theme.css` file so it contains your custom fonts and colors. 3. Once you are done editing your files and saving them, open a terminal. 4. Navigate to the jQuery-Mobile folder's root. -5. Run the following command to build jQuery-Mobile. The CSSTHEME specifies what theme to include. If you leave it off, -it will build using the "default" theme. +5. Run the following command to build jQuery-Mobile (THEME is the name of the folder for your theme from step 1.): - make CSSTHEME=YourThemeName + make THEME=YourThemeName -6. The compiled files will be located in the "compiled" folder in the root of jQuery-Mobile. \ No newline at end of file +6. The compiled files will be located in the "compiled" folder in the root of jQuery-Mobile. From 01c77fa9e1006028c6d6182504687ad7e875cb82 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Wed, 9 Nov 2011 18:25:06 -0500 Subject: [PATCH 58/88] =?UTF-8?q?Fixes=20#2588=20=E2=80=94=20When=20Window?= =?UTF-8?q?s=20Phone=207.5=20(Mango)=20tries=20to=20calculate=20a=20numeri?= =?UTF-8?q?c=20opacity=20for=20a=20select=E2=80=94including=20=E2=80=9Cinh?= =?UTF-8?q?erit=E2=80=9D=E2=80=94without=20explicitly=20specifying=20an=20?= =?UTF-8?q?opacity=20on=20the=20parent=20to=20give=20it=20context,=20a=20b?= =?UTF-8?q?ug=20appears=20where=20clicking=20elsewhere=20on=20the=20page?= =?UTF-8?q?=20after=20opening=20the=20select=20will=20open=20the=20select?= =?UTF-8?q?=20again.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/structure/jquery.mobile.forms.select.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/css/structure/jquery.mobile.forms.select.css b/css/structure/jquery.mobile.forms.select.css index 67580449..b77e396e 100644 --- a/css/structure/jquery.mobile.forms.select.css +++ b/css/structure/jquery.mobile.forms.select.css @@ -6,7 +6,13 @@ .ui-select { display: block; position: relative; } .ui-select select { position: absolute; left: -9999px; top: -9999px; } .ui-select .ui-btn { overflow: hidden; } + + +.ui-select .ui-btn { opacity: 1; } +/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */ .ui-select .ui-btn select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; } + + @-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }} .ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; } From 989f7f154261d12cd41352055bf775ae44b73480 Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 15:45:08 -0800 Subject: [PATCH 59/88] move intro to text for css combine, js combine, and makefile use --- INTRO.txt | 9 +++++++++ Makefile | 6 +++--- css/structure/index.php | 2 +- css/themes/valencia/index.php | 2 +- js/index.php | 2 +- 5 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 INTRO.txt diff --git a/INTRO.txt b/INTRO.txt new file mode 100644 index 00000000..4b990893 --- /dev/null +++ b/INTRO.txt @@ -0,0 +1,9 @@ +/* +* jQuery Mobile Framework v@VERSION +* http://jquerymobile.com +* +* Copyright 2011 (c) jQuery Project +* Dual licensed under the MIT or GPL Version 2 licenses. +* http://jquery.org/license +* +*/ diff --git a/Makefile b/Makefile index eb22f56b..f78eb3bb 100644 --- a/Makefile +++ b/Makefile @@ -103,9 +103,9 @@ all: init js min css cssmin notify # Build the normal CSS file. css: init # Build the CSS file - @@cat js/jquery.mobile.intro.js | ${SED_VER} > ${OUTPUT}/${CSS} + @@cat INTRO.txt | ${SED_VER} > ${OUTPUT}/${CSS} @@cat ${CSSFILES} >> ${OUTPUT}/${CSS} - @@cat js/jquery.mobile.intro.js | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTURE} + @@cat INTRO.txt | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTURE} @@cat ${CSSSTRUCTUREFILES} >> ${OUTPUT}/${CSSSTRUCTURE} # Build the minified CSS file @@ -119,7 +119,7 @@ cssmin: init css # Build the normal JS file js: init # Build the JavaScript file - @@cat js/jquery.mobile.intro.js | ${SED_VER} > ${OUTPUT}/${JS} + @@cat INTRO.txt | ${SED_VER} > ${OUTPUT}/${JS} @@cat ${JSFILES} >> ${OUTPUT}/${JS} # Create the output directory. This is in a separate step so its not dependant on other targets diff --git a/css/structure/index.php b/css/structure/index.php index 2895eb18..44cd9bd2 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -1,6 +1,6 @@ Date: Wed, 9 Nov 2011 16:00:25 -0800 Subject: [PATCH 60/88] moved info text to license-info.txt --- INTRO.txt => LICENSE-INFO.txt | 0 Makefile | 6 +++--- css/structure/index.php | 2 +- css/themes/default/index.php | 2 +- css/themes/valencia/index.php | 2 +- js/index.php | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) rename INTRO.txt => LICENSE-INFO.txt (100%) diff --git a/INTRO.txt b/LICENSE-INFO.txt similarity index 100% rename from INTRO.txt rename to LICENSE-INFO.txt diff --git a/Makefile b/Makefile index f78eb3bb..42e0118c 100644 --- a/Makefile +++ b/Makefile @@ -103,9 +103,9 @@ all: init js min css cssmin notify # Build the normal CSS file. css: init # Build the CSS file - @@cat INTRO.txt | ${SED_VER} > ${OUTPUT}/${CSS} + @@cat LICENSE-INFO.txt | ${SED_VER} > ${OUTPUT}/${CSS} @@cat ${CSSFILES} >> ${OUTPUT}/${CSS} - @@cat INTRO.txt | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTURE} + @@cat LICENSE-INFO.txt | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTURE} @@cat ${CSSSTRUCTUREFILES} >> ${OUTPUT}/${CSSSTRUCTURE} # Build the minified CSS file @@ -119,7 +119,7 @@ cssmin: init css # Build the normal JS file js: init # Build the JavaScript file - @@cat INTRO.txt | ${SED_VER} > ${OUTPUT}/${JS} + @@cat LICENSE-INFO.txt | ${SED_VER} > ${OUTPUT}/${JS} @@cat ${JSFILES} >> ${OUTPUT}/${JS} # Create the output directory. This is in a separate step so its not dependant on other targets diff --git a/css/structure/index.php b/css/structure/index.php index 44cd9bd2..ab08918d 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -1,6 +1,6 @@ Date: Wed, 9 Nov 2011 17:43:37 -0800 Subject: [PATCH 61/88] Update Makefile to actually work on the server --- Makefile | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/Makefile b/Makefile index 241589df..56c0aae4 100644 --- a/Makefile +++ b/Makefile @@ -111,15 +111,13 @@ docs: init css js # ... Update the JavaScript and CSS paths @@find tmp/${NAME} -type f \ \( -name '*.html' -o -name '*.php' \) \ - -exec sed -i '' 's|js/"|${NAME}.min.js"|g' {} \; \ - -exec sed -i '' 's|css/themes/default/|${NAME}.min.css|g' {} \; \ - -exec sed -i '' 's|js/jquery.js"|jquery.js"|g' {} \; - # ... And then move it the finished directory - @@mv tmp/${NAME} ${OUTPUT}/demos - # Last, zip up the the whole folder - @@zip -rq tmp/${NAME}.zip ${OUTPUT} - @@mv tmp/${NAME}.zip ${OUTPUT}/${NAME}.docs.zip - # Remove the temporary files + -exec perl -pi -e \ + 's|js/"|${NAME}.min.js"|g;s|css/themes/default/|${NAME}.min.css|g;s|js/jquery.js"|jquery.js"|g' {} \; + # ... Move and zip up the the whole folder + @@mv tmp/${NAME} ${OUTPUT}/${NAME} + @@zip -rq ${OUTPUT}/${NAME}.docs.zip ${OUTPUT}/${NAME} + @@mv ${OUTPUT}/${NAME} ${OUTPUT}/demos + # Finish by removing the temporary files @@rm -rf tmp # ------------------------------------------------- @@ -182,7 +180,7 @@ nightlies: init js css zip docs # Time to put these on the CDN @@mkdir -p tmp/nightlies @@mv ${OUTPUT} tmp/nightlies/$$(date "+%Y%m%d") - @@scp -r nightlies/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/ + @@scp -r tmp/nightlies/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/ # Do some cleanup to wrap it up @@rm -rf tmp # ------------------------------------------------- From b7cd2128dd7b8743f79ffad604c0329ef699a399 Mon Sep 17 00:00:00 2001 From: Eddie Monge Date: Wed, 9 Nov 2011 17:57:50 -0800 Subject: [PATCH 62/88] Why three lines when 2 will suffice? --- Makefile | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Makefile b/Makefile index 56c0aae4..7c78838d 100644 --- a/Makefile +++ b/Makefile @@ -114,9 +114,8 @@ docs: init css js -exec perl -pi -e \ 's|js/"|${NAME}.min.js"|g;s|css/themes/default/|${NAME}.min.css|g;s|js/jquery.js"|jquery.js"|g' {} \; # ... Move and zip up the the whole folder - @@mv tmp/${NAME} ${OUTPUT}/${NAME} - @@zip -rq ${OUTPUT}/${NAME}.docs.zip ${OUTPUT}/${NAME} - @@mv ${OUTPUT}/${NAME} ${OUTPUT}/demos + @@zip -rq ${OUTPUT}/${NAME}.docs.zip tmp/${NAME} + @@mv tmp/${NAME} ${OUTPUT}/demos # Finish by removing the temporary files @@rm -rf tmp # ------------------------------------------------- From 8e23813d255e8d2c4eccd6f025154ca7e4c8d863 Mon Sep 17 00:00:00 2001 From: "jblas@adobe.com" Date: Wed, 9 Nov 2011 17:59:25 -0800 Subject: [PATCH 63/88] Got rid of pseudo selectors :header and :eq(0) since they take a long time on WP7.5 (Mango). This shaves off 300 msecs when loading the form gallery page. --- js/jquery.mobile.collapsible.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index f2eb368a..bdf7b48d 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -11,7 +11,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { expandCueText: " click to expand contents", collapseCueText: " click to collapse contents", collapsed: true, - heading: ">:header,>legend", + heading: "h1,h2,h3,h4,h5,h6,legend", theme: null, contentTheme: null, iconTheme: "d", @@ -22,7 +22,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { var $el = this.element, o = this.options, collapsible = $el.addClass( "ui-collapsible" ), - collapsibleHeading = $el.find( o.heading ).eq( 0 ), + collapsibleHeading = $el.children( o.heading ).first(), collapsibleContent = collapsible.wrapInner( "
" ).find( ".ui-collapsible-content" ), collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ), colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" ); @@ -54,7 +54,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .addClass( "ui-collapsible-heading" ) .append( "" ) .wrapInner( "" ) - .find( "a:eq(0)" ) + .find( "a" ) + .first() .buttonMarkup({ shadow: false, corners: false, @@ -65,7 +66,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { if ( !collapsibleSet.length ) { collapsibleHeading - .find( "a:eq(0), .ui-btn-inner" ) + .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) ) .addClass( "ui-corner-top ui-corner-bottom" ); } else { // If we are in a collapsible set @@ -86,14 +87,16 @@ $.widget( "mobile.collapsible", $.mobile.widget, { } colllapsiblesInSet.first() - .find( "a:eq(0)" ) + .find( "a" ) + .first() .addClass( "ui-corner-top" ) .find( ".ui-btn-inner" ) .addClass( "ui-corner-top" ); colllapsiblesInSet.last() .jqmData( "collapsible-last", true ) - .find( "a:eq(0)" ) + .find( "a" ) + .first() .addClass( "ui-corner-bottom" ) .find( ".ui-btn-inner" ) .addClass( "ui-corner-bottom" ); @@ -101,7 +104,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { if ( collapsible.jqmData( "collapsible-last" ) ) { collapsibleHeading - .find( "a:eq(0), .ui-btn-inner" ) + .find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) ) .addClass( "ui-corner-bottom" ); } } @@ -131,7 +134,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) { collapsibleHeading - .find( "a:eq(0), .ui-btn-inner" ) + .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) ) .toggleClass( "ui-corner-bottom", isCollapse ); collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse ); } From 8ef15e82cc34dbdb08e49a98095d08660d889cd6 Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 9 Nov 2011 22:35:21 -0800 Subject: [PATCH 64/88] correction to license include in js/index.php --- js/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/index.php b/js/index.php index 8183563b..766c2b1c 100644 --- a/js/index.php +++ b/js/index.php @@ -1,7 +1,7 @@ Date: Thu, 10 Nov 2011 10:50:59 +0000 Subject: [PATCH 65/88] Update docs/pages/page-cache.html --- docs/pages/page-cache.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/page-cache.html b/docs/pages/page-cache.html index 85db2d33..e4ac2077 100644 --- a/docs/pages/page-cache.html +++ b/docs/pages/page-cache.html @@ -28,7 +28,7 @@

Usually, it's a good idea to store your app's pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page's DOM.

-

When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:

+

When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:


 <a href="prefetchThisPage.html" data-prefetch> ... </a>
@@ -51,7 +51,7 @@ $.mobile.loadPage( pageUrl, { showLoadMsg: false } );
 
 		
For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.

 
-		
jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)

+		
jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)

     
     
Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.

 

From 245669f2dd366bd432a5e4a55cec4399742eb38f Mon Sep 17 00:00:00 2001
From: Anne-Gaelle Colom 
Date: Thu, 10 Nov 2011 11:05:27 +0000
Subject: [PATCH 66/88] Update docs/pages/page-scripting.html

---
 docs/pages/page-scripting.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/pages/page-scripting.html b/docs/pages/page-scripting.html
index 30c01d90..33df6700 100644
--- a/docs/pages/page-scripting.html
+++ b/docs/pages/page-scripting.html
@@ -22,11 +22,11 @@
 
 	

 		
		
-			
Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on global configuration options, events, and methods or dig into the technical details of the Ajax navigation model.
 
+			
Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on global configuration options, events, and methods or dig into the technical details of the Ajax navigation model.
 
 			
 			
Scripts & styles in the head
 
 			
-			
When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided), meaning nothing in the head of the page will be used (with the exception of the page title, which is fetched specifically).

+			
When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided), meaning nothing in the head of the page will be used (with the exception of the page title, which is fetched specifically).

 			
 			
 This means that any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the head of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.

 			
@@ -36,7 +36,7 @@
 			
 			
pagecreate = DOM ready
 
 
-			
One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pagecreate event. 

+			
One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pagecreate event. 

 			
 			
The pagecreate event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.

 

@@ -74,8 +74,8 @@ $.mobile.loadPage( "about/us.html" );
 

 
 			
Enhancing new markup
 
-			
The page plugin dispatches a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.
		
-			
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
 
+			
The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.
		
+			
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
 
 			
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
 
 
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
 
 

From 810781ef8705ddbba87809413724d5da96bd14da Mon Sep 17 00:00:00 2001
From: Jason Crane 
Date: Thu, 10 Nov 2011 16:57:09 +0000
Subject: [PATCH 67/88] Rewording for clarity and added a couple links

---
 docs/lists/docs-lists.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/lists/docs-lists.html b/docs/lists/docs-lists.html
index 38025a0d..10963752 100755
--- a/docs/lists/docs-lists.html
+++ b/docs/lists/docs-lists.html
@@ -35,41 +35,41 @@
 
 			Basic list example
 
-			
Style note: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists fill to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.

+			
Style note on non-inset lists: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists fill to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.

 			
Nested lists

-			
By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple level deep and all pages and linking will be automatically handled by the framework.

-			
To set the swatch color of the child list views,  data-theme attribute on each list inside.

+			
By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework.

+			
To set the swatch color of the child list views, set the data-theme attribute on each list inside.

 			Nested list example
 
 			
Numbered lists

-			
Lists can also be created from ordered lists (ol) which is useful when presented items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.

+			
Lists can also be created from ordered lists (ol) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.

 
 			Numbered list example
 
 			
Read-only lists

 			
List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch (flat white in the default theme) and sets the text size to a smaller size than the clickable lists to save a bit of space.

 
-			Read-only list example
+			Read-only list example
 
 			
Split button lists

-			
In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the li and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the title attribute of the link to the text the link for accessibility. 

+			
In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the li and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the title attribute of the link to the text the link for accessibility. 

 			
You can set the icon for the right split icon by specifying a data-split-icon attribute with the icon name you want. The theme swatch color of the split button can be set by specifying a swatch letter in the data-split-theme attribute

 
 			Split list example
 
 
 			
List dividers

-			
List items can be turned into dividers to organize and group the list items. This is done by adding the  data-role="list-divider" to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the data-dividertheme attribute to the list element (ul or ol) and specifying a theme swatch letter.

+			
List items can be turned into dividers to organize and group the list items. This is done by adding the  data-role="list-divider" to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the data-dividertheme attribute to the list element (ul or ol) and specifying a theme swatch letter.

 
 			List divider example
 
 
 			
Search filter

-			
jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either bind to the mobileinit event and set the $.mobile.listview.prototype.options.filterPlaceholder option to a string of your choosing, or use the data-attribute data-filter-placeholder on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute data-filter-theme on your listview.

+			
jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either bind to the mobileinit event and set the $.mobile.listview.prototype.options.filterPlaceholder option to a string of your choosing, or use the data-attribute data-filter-placeholder on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute data-filter-theme on your listview.

 
 			Search filter example
 
-      
If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining $.mobile.listview.prototype.options.filterCallback during mobileinit or after the widget has been created with $("#mylist").listview('option', 'filterCallback', yourFilterFunction). Any function defined for the callback will be provided two arguments. First, the text of the current list item and second the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the searchValue as a substring is described below:
+      
If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining $.mobile.listview.prototype.options.filterCallback during mobileinit or after the widget has been created with $("#mylist").listview('option', 'filterCallback', yourFilterFunction). Any function defined for the callback will be provided two arguments. First, the text of the current list item and second, the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the searchValue as a substring is described below:
       

 
       
@@ -81,7 +81,7 @@ function( text, searchValue ){
       

 
 			
Text formatting & counts

-			
The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup. 

+			
The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.

 
 			
    
 				
  • To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count
    • 
@@ -92,7 +92,7 @@ function( text, searchValue ){
 			List with text formatting
 
 			
    Thumbnails & icons
    
-			
    To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element to size.
    
+			
    To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element.
    
 			List with thumbnail images
 		 	List with icon images
 

From f74d117aec2709790eb95fc7f26b07d6336c3c76 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 00:16:29 -0800
Subject: [PATCH 68/88] simple user agent tracking and collection added to perf
 javascript

---
 tests/speed/stats/index.php  | 10 +++++----
 tests/speed/stats/perf.js    | 41 ++++++++++++++++++++++++++++++++----
 tests/speed/stats/startup.js |  2 --
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/tests/speed/stats/index.php b/tests/speed/stats/index.php
index 5922f256..6121d7c7 100644
--- a/tests/speed/stats/index.php
+++ b/tests/speed/stats/index.php
@@ -1,21 +1,23 @@
 query('CREATE TABLE IF NOT EXISTS stats (id INTEGER, agent TEXT, point TEXT, value REAL, time TIMESTAMP, pathname TEXT, PRIMARY KEY (id))');
+  $db->query('CREATE TABLE IF NOT EXISTS stats (id INTEGER, agent TEXT, agent_version Text, agent_full TEXT, point TEXT, value REAL, time TIMESTAMP, pathname TEXT, PRIMARY KEY (id))');
 
   // making a sad attempt here to provide a clean REST-respecting url scheme.
   // stats with a GET returns - wait for it - the stats, and a post with the
   // the right params will create a new entry
   if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
      $json = Array();
-     $st = $db->prepare( 'SELECT point, avg(value) as avg_value, pathname, strftime(\'%Y-%m-%d\', time) as day FROM stats GROUP BY pathname, point, strftime(\'%Y-%m-%d\', time) ORDER BY time;' );
+     $st = $db->prepare( "SELECT agent, agent_version, point, avg(value) as avg_value, pathname, strftime('%Y-%m-%d', time) as day FROM stats WHERE agent_full like '%Mobile%' or agent_full like '%mobile%' GROUP BY agent, agent_version, pathname, point, strftime('%Y-%m-%d', time) ORDER BY time;");
      $st->execute();
      $result = $st->fetchAll(PDO::FETCH_ASSOC);
      header("Content-Type: application/json");
      echo json_encode($result);
-  }  elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] && $_POST['pathname']) {
-     $st = $db->prepare('INSERT INTO stats (agent, point, value, pathname, time) VALUES (:agent,  :data_point, :value, :pathname, DATETIME(\'now\'))');
+  }  elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] && $_POST['pathname'] && $_POST['agentVersion']) {
+     $st = $db->prepare('INSERT INTO stats (agent, agent_full, agent_version, point, value, pathname, time) VALUES (:agent, :agent_full, :agent_version, :data_point, :value, :pathname, DATETIME(\'now\'))');
      $st->execute(array(
             ':agent' => $_POST['agent'],
+						':agent_full' => $_POST['agentFull'],
+            ':agent_version' => $_POST['agentVersion'],
             ':data_point' => $_POST['datapoint'],
             ':value' => $_POST['value'],
             ':pathname' => $_POST['pathname']
diff --git a/tests/speed/stats/perf.js b/tests/speed/stats/perf.js
index 06873378..d59c7d23 100644
--- a/tests/speed/stats/perf.js
+++ b/tests/speed/stats/perf.js
@@ -6,12 +6,22 @@ window.Perf = (function($, Perf) {
 		// should be defined before report or poll are run
 		currentRev: undefined,
 
+		agents: {
+			ANDROID: "Android",
+			WP: "Windows Phone OS"
+		},
+
+		vRegexs: {},
+
 		report: function( data, after ) {
-			var self = this;
+			$.extend(data, {
+				pathname: location.pathname,
+				agent: this.agent(),
+				agentFull: window.navigator.userAgent,
+				agentVersion: this.agentVersion()
+			});
 
-			data.pathname = location.pathname;
-
-			$.post( self.reportUrl, data, after );
+			$.post( this.reportUrl, data, after );
 		},
 
 		poll: function() {
@@ -34,8 +44,31 @@ window.Perf = (function($, Perf) {
 			$.get( self.revUrl, function( data ) {
 				self.currentRev = data;
 			});
+		},
+
+		agent: function() {
+			var agent = window.navigator.userAgent;
+
+			for( name in this.agents ) {
+				if( agent.indexOf( this.agents[name] ) > -1 ) {
+					return this.agents[name];
+				}
+			}
+
+			return agent;
+		},
+
+		agentVersion: function() {
+			var agent = window.navigator.userAgent;
+
+			agent.search(this.vRegexs[this.agent()] || "");
+
+			return RegExp.$1 ? RegExp.$1 : "0.0";
 		}
 	});
 
+	Perf.vRegexs[Perf.agents.ANDROID] = /([0-9].[0-9].[0-9]);/;
+	Perf.vRegexs[Perf.agents.WP] = /Windows Phone OS ([0-9].[0-9]);/;
+
 	return Perf;
 })(jQuery, window.Perf || {});
diff --git a/tests/speed/stats/startup.js b/tests/speed/stats/startup.js
index c3e5bccd..6bb389dd 100644
--- a/tests/speed/stats/startup.js
+++ b/tests/speed/stats/startup.js
@@ -22,7 +22,6 @@
 
 		// report the time taken for a full app boot
 		Perf.report({
-			agent: window.navigator.userAgent,
 			datapoint: "fullboot",
 			value: Perf.pageLoadEnd - Perf.pageLoadStart
 		});
@@ -30,7 +29,6 @@
 		// record the time taken to load and enhance the page
 		// start polling for a new revision
 		Perf.report({
-			agent: window.navigator.userAgent,
 			datapoint: "pageload",
 			value: Perf.pageCreateStart - Perf.pageLoadStart,
 			after: function() {

From 5734ca62c64412c477ea9e29c07a8f992276ae98 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 09:00:14 -0800
Subject: [PATCH 69/88] add ability to refine data display to a user agent or
 data point

---
 tests/speed/stats/index.php               | 13 +++++++++---
 tests/speed/stats/visualize/visualize.css |  3 +--
 tests/speed/stats/visualize/visualize.js  | 24 ++++++++++++++++++++---
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/tests/speed/stats/index.php b/tests/speed/stats/index.php
index 6121d7c7..4152f89d 100644
--- a/tests/speed/stats/index.php
+++ b/tests/speed/stats/index.php
@@ -6,9 +6,16 @@
   // stats with a GET returns - wait for it - the stats, and a post with the
   // the right params will create a new entry
   if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
-     $json = Array();
-     $st = $db->prepare( "SELECT agent, agent_version, point, avg(value) as avg_value, pathname, strftime('%Y-%m-%d', time) as day FROM stats WHERE agent_full like '%Mobile%' or agent_full like '%mobile%' GROUP BY agent, agent_version, pathname, point, strftime('%Y-%m-%d', time) ORDER BY time;");
-     $st->execute();
+     $agent = (empty($_GET['agent'])) ? '' : $_GET['agent'];
+     $data_point = (empty($_GET['data_point'])) ? '' : $_GET['data_point'];
+
+     $st = $db->prepare( "SELECT agent, agent_version, point, avg(value) as avg_value, pathname, strftime('%Y-%m-%d', time) as day FROM stats WHERE (agent_full like '%Mobile%' or agent_full like '%mobile%') and agent like :agent and point like :data_point GROUP BY agent, agent_version, pathname, point, strftime('%Y-%m-%d', time) ORDER BY time;");
+
+     $st->execute(array(
+        ':agent' => '%' . $agent . '%',
+        ':data_point' => '%' . $data_point . '%'
+     ));
+
      $result = $st->fetchAll(PDO::FETCH_ASSOC);
      header("Content-Type: application/json");
      echo json_encode($result);
diff --git a/tests/speed/stats/visualize/visualize.css b/tests/speed/stats/visualize/visualize.css
index 01d40488..5269fd40 100644
--- a/tests/speed/stats/visualize/visualize.css
+++ b/tests/speed/stats/visualize/visualize.css
@@ -41,6 +41,5 @@ table {
 
 div.visualize {
   float: left;
-  margin-left: 100px;
-  margin-right: 50px;
+  margin: 0 50px 70px 100px;
 }
\ No newline at end of file
diff --git a/tests/speed/stats/visualize/visualize.js b/tests/speed/stats/visualize/visualize.js
index 32de8c8d..db4b9d6c 100644
--- a/tests/speed/stats/visualize/visualize.js
+++ b/tests/speed/stats/visualize/visualize.js
@@ -1,8 +1,26 @@
 (function($) {
 	$(function() {
-		$.get("../", function(data) {
+		var searchMap = (function() {
+			var searchSplit, searchMap = {};
+
+			if ( !location.search ){
+				return searchMap;
+			}
+
+			searchSplit = location.search.replace(/^\?/, "").split( /&|;/ );
+
+			for( var i = 0; i < searchSplit.length; i++ ) {
+				var kv = searchSplit[i].split(/=/);
+				searchMap[ kv[0] ] = kv[1];
+			}
+
+			return searchMap;
+		})();
+
+		$.get("../", searchMap, function(data) {
 			$.each(data, function( i, avg ) {
-				var $table = $( "#" + avg.point + "[data-pathname='" + avg.pathname + "']");
+				var tablename = avg.point + " " + avg.agent + " " + avg.pathname,
+          $table = $( "table > caption:contains(" + tablename + ")");
 
 				if( !$table.length ) {
 					$table = $( "", {
@@ -10,7 +28,7 @@
 						"data-pathname": avg.pathname
 					});
 
-					$table.append( "");
+					$table.append( "");
 					$table.append( "" );
 					$table.append( "" );
 				}

From c1a6ea10e53daa275bca221d0424c33f599037fd Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 09:04:00 -0800
Subject: [PATCH 70/88] formatting in php for sanity

---
 tests/speed/stats/index.php | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/tests/speed/stats/index.php b/tests/speed/stats/index.php
index 4152f89d..cf81efcb 100644
--- a/tests/speed/stats/index.php
+++ b/tests/speed/stats/index.php
@@ -9,7 +9,15 @@
      $agent = (empty($_GET['agent'])) ? '' : $_GET['agent'];
      $data_point = (empty($_GET['data_point'])) ? '' : $_GET['data_point'];
 
-     $st = $db->prepare( "SELECT agent, agent_version, point, avg(value) as avg_value, pathname, strftime('%Y-%m-%d', time) as day FROM stats WHERE (agent_full like '%Mobile%' or agent_full like '%mobile%') and agent like :agent and point like :data_point GROUP BY agent, agent_version, pathname, point, strftime('%Y-%m-%d', time) ORDER BY time;");
+     $st = $db->prepare( '
+     SELECT agent, agent_version, point, avg(value) as avg_value,
+            pathname, strftime(\'%Y-%m-%d\', time) as day
+     FROM stats
+     WHERE (agent_full like \'%Mobile%\' or agent_full like \'%mobile%\')
+           and agent like :agent and point like :data_point
+     GROUP BY agent, agent_version, pathname, point, strftime(\'%Y-%m-%d\', time)
+     ORDER BY time;
+     ');
 
      $st->execute(array(
         ':agent' => '%' . $agent . '%',
@@ -19,8 +27,18 @@
      $result = $st->fetchAll(PDO::FETCH_ASSOC);
      header("Content-Type: application/json");
      echo json_encode($result);
-  }  elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] && $_POST['pathname'] && $_POST['agentVersion']) {
-     $st = $db->prepare('INSERT INTO stats (agent, agent_full, agent_version, point, value, pathname, time) VALUES (:agent, :agent_full, :agent_version, :data_point, :value, :pathname, DATETIME(\'now\'))');
+
+  }  elseif ( $_POST['datapoint'] &&
+              $_POST['value'] &&
+              $_POST['agent'] &&
+              $_POST['pathname'] &&
+              $_POST['agentVersion'] ) {
+
+     $st = $db->prepare('
+     INSERT INTO stats (agent, agent_full, agent_version, point, value, pathname, time)
+     VALUES (:agent, :agent_full, :agent_version, :data_point, :value, :pathname, DATETIME(\'now\'))
+     ');
+
      $st->execute(array(
             ':agent' => $_POST['agent'],
 						':agent_full' => $_POST['agentFull'],

From acdbd8f1b774ede3d10d6f891e2160586fbaae6f Mon Sep 17 00:00:00 2001
From: Ghislain Seguin 
Date: Wed, 9 Nov 2011 15:21:20 -0800
Subject: [PATCH 71/88] Renamed variable

---
 js/jquery.mobile.collapsible.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index 27bb2805..115e83e2 100644
--- a/js/jquery.mobile.collapsible.js
+++ b/js/jquery.mobile.collapsible.js
@@ -23,7 +23,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
 			collapsibleHeading = $el.children( o.heading ).first(),
 			collapsibleContent = collapsible.wrapInner( "
    " ).find( ".ui-collapsible-content" ),
 			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
-			colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
+			collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
 
 		// Replace collapsibleHeading if it's a legend
 		if ( collapsibleHeading.is( "legend" ) ) {
@@ -84,14 +84,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
 					});
 			}
 
-			colllapsiblesInSet.first()
+			collapsiblesInSet.first()
 				.find( "a" )
 					.first()
 					.addClass( "ui-corner-top" )
 						.find( ".ui-btn-inner" )
 							.addClass( "ui-corner-top" );
 
-			colllapsiblesInSet.last()
+			collapsiblesInSet.last()
 				.jqmData( "collapsible-last", true )
 				.find( "a" )
 					.first()

From 4bba8939400b1950cb092bbd3c629e6af3ec6106 Mon Sep 17 00:00:00 2001
From: Ghislain Seguin 
Date: Wed, 9 Nov 2011 16:37:11 -0800
Subject: [PATCH 72/88] Fixed custom select dialog header styling

---
 js/jquery.mobile.forms.select.custom.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/jquery.mobile.forms.select.custom.js b/js/jquery.mobile.forms.select.custom.js
index b895c99e..cd8ada09 100644
--- a/js/jquery.mobile.forms.select.custom.js
+++ b/js/jquery.mobile.forms.select.custom.js
@@ -30,7 +30,9 @@
 				"aria-labelledby": buttonId
 			}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
 
-			header = $( "
    " ).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).prependTo( listbox ),
+			header = $( "
    ", {
+				"class": "ui-header ui-bar-" + widget.options.theme
+			}).prependTo( listbox ),
 
 			headerTitle = $( "
    ", {
 				"class": "ui-title"

From 9a13fc0b358c70bcf46f69b3d7623c12d8233df6 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 09:21:35 -0800
Subject: [PATCH 73/88] added iPhone and iPad UA strings

---
 tests/speed/stats/perf.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/tests/speed/stats/perf.js b/tests/speed/stats/perf.js
index d59c7d23..a093d144 100644
--- a/tests/speed/stats/perf.js
+++ b/tests/speed/stats/perf.js
@@ -6,13 +6,6 @@ window.Perf = (function($, Perf) {
 		// should be defined before report or poll are run
 		currentRev: undefined,
 
-		agents: {
-			ANDROID: "Android",
-			WP: "Windows Phone OS"
-		},
-
-		vRegexs: {},
-
 		report: function( data, after ) {
 			$.extend(data, {
 				pathname: location.pathname,
@@ -64,11 +57,22 @@ window.Perf = (function($, Perf) {
 			agent.search(this.vRegexs[this.agent()] || "");
 
 			return RegExp.$1 ? RegExp.$1 : "0.0";
-		}
+		},
+
+		agents: {
+			ANDROID: "Android",
+			WP: "Windows Phone OS",
+			IPHONE: "iPhone OS",
+			IPAD: "iPad; U; CPU OS"
+		},
+
+		vRegexs: {}
 	});
 
 	Perf.vRegexs[Perf.agents.ANDROID] = /([0-9].[0-9].[0-9]);/;
 	Perf.vRegexs[Perf.agents.WP] = /Windows Phone OS ([0-9].[0-9]);/;
+	Perf.vRegexs[Perf.agents.IPHONE] = /iPhone OS ([0-9]_[0-9])/;
+	Perf.vRegexs[Perf.agents.IPAD] = /iPad; U; CPU OS ([0-9]_[0-9])/;
 
 	return Perf;
 })(jQuery, window.Perf || {});

From 1296abb80f4d1d9ae51fad2e28b90798d54a6abe Mon Sep 17 00:00:00 2001
From: "Eddie Monge Jr." 
Date: Thu, 10 Nov 2011 09:53:48 -0800
Subject: [PATCH 74/88] Update README.md

---
 README.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/README.md b/README.md
index 6a4511dc..fb4c2b50 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,16 @@ Clone this repo and build the js and css files (you'll need Git and Make install
 A full version and a minified version of the jQuery Mobile JavaScript and CSS files will be created 
 in a folder named "compiled". There is also now a Structure only css file so you can add your own theme on top of it.
 
+How to build a self-contained version of the Docs/Demos
+=======================================================
+Once you have your own cloned repo on your computer:
+
+    make docs
+
+The docs will be built and available in the compiled/demos folder. You can move this folder to your web server or 
+other location. It has no dependencies on anything other than a basic HTML web server.
+
+
 Submitting bugs
 ===============
 If you think you've found a bug, please report it by following these instructions:  

From 477f85c50033a479435a2dd5c4c72b3818bb3a35 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 10:00:50 -0800
Subject: [PATCH 75/88] blackberry ua support

---
 tests/speed/stats/perf.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/speed/stats/perf.js b/tests/speed/stats/perf.js
index a093d144..7bf21931 100644
--- a/tests/speed/stats/perf.js
+++ b/tests/speed/stats/perf.js
@@ -63,7 +63,8 @@ window.Perf = (function($, Perf) {
 			ANDROID: "Android",
 			WP: "Windows Phone OS",
 			IPHONE: "iPhone OS",
-			IPAD: "iPad; U; CPU OS"
+			IPAD: "iPad; U; CPU OS",
+			BLACKBERRY: "BlackBerry"
 		},
 
 		vRegexs: {}
@@ -73,6 +74,7 @@ window.Perf = (function($, Perf) {
 	Perf.vRegexs[Perf.agents.WP] = /Windows Phone OS ([0-9].[0-9]);/;
 	Perf.vRegexs[Perf.agents.IPHONE] = /iPhone OS ([0-9]_[0-9])/;
 	Perf.vRegexs[Perf.agents.IPAD] = /iPad; U; CPU OS ([0-9]_[0-9])/;
+	Perf.vRegexs[Perf.agents.BLACKBERRY] = /BlackBerry ([0-9]{4})/;
 
 	return Perf;
 })(jQuery, window.Perf || {});

From b4df2ecfb2715138534c92de6c7bf79333b1ee0e Mon Sep 17 00:00:00 2001
From: Ghislain Seguin 
Date: Thu, 10 Nov 2011 10:09:47 -0800
Subject: [PATCH 76/88] Added some more negative testing for theming

---
 tests/unit/collapsible/collapsible_core.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/unit/collapsible/collapsible_core.js b/tests/unit/collapsible/collapsible_core.js
index d353e8ac..2aa8d516 100644
--- a/tests/unit/collapsible/collapsible_core.js
+++ b/tests/unit/collapsible/collapsible_core.js
@@ -147,14 +147,17 @@
 			function() {
 				var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
 				ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
-				ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-body-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
+				ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of first collapsible should NOT have class ui-btn-up-[a,b,c]");
 				ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
 				ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
+				ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-c,.ui-body-d" ), "Content of second collapsible should NOT have class ui-btn-up-[a,c,d]");
 				ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
 				ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
+				ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of third collapsible should NOT have class ui-btn-up-[a,b,c]");
 				ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of third collapsible should have class ui-btn-up-d");
 				ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
 				ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
+				ok( !collapsibles.eq(3).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of fourth collapsible should NOT have class ui-btn-up-[a,b,c]");
 				ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
 				start();
 			}

From cdfe8d157af8af8254cc263815e18beea5a29dc6 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 10:17:53 -0800
Subject: [PATCH 77/88] remove id dependency on the data point

---
 tests/speed/stats/visualize/visualize.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tests/speed/stats/visualize/visualize.js b/tests/speed/stats/visualize/visualize.js
index db4b9d6c..bf56fc7e 100644
--- a/tests/speed/stats/visualize/visualize.js
+++ b/tests/speed/stats/visualize/visualize.js
@@ -24,8 +24,9 @@
 
 				if( !$table.length ) {
 					$table = $( "
    " + avg.point + " " + avg.pathname + "" + tablename + "
    ", {
-						id: avg.point,
-						"data-pathname": avg.pathname
+						"data-pathname": avg.pathname,
+						"data-point": avg.point,
+						"data-agent": avg.agent
 					});
 
 					$table.append( "");

From be1852827cefc2c62507cf853d29f1d155936bb9 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 10:29:15 -0800
Subject: [PATCH 78/88] close element creation tags

---
 tests/speed/stats/visualize/visualize.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/speed/stats/visualize/visualize.js b/tests/speed/stats/visualize/visualize.js
index bf56fc7e..b71e8f1d 100644
--- a/tests/speed/stats/visualize/visualize.js
+++ b/tests/speed/stats/visualize/visualize.js
@@ -20,10 +20,10 @@
 		$.get("../", searchMap, function(data) {
 			$.each(data, function( i, avg ) {
 				var tablename = avg.point + " " + avg.agent + " " + avg.pathname,
-          $table = $( "table > caption:contains(" + tablename + ")");
+					$table = $( "table > caption:contains(" + tablename + ")");
 
 				if( !$table.length ) {
-					$table = $( "
    " + tablename + "
    ", {
+					$table = $( "
    ", {
 						"data-pathname": avg.pathname,
 						"data-point": avg.point,
 						"data-agent": avg.agent
@@ -38,7 +38,7 @@
 				var $heading = $table.find("thead > tr > th:contains(" + avg.day + ")");
 
 				if( !$heading.length ) {
-					$heading = $("", {
+					$heading = $("", {
 						text: avg.day,
 						scope: "column"
 					});
@@ -50,7 +50,7 @@
 					$row = $table.find( "tbody > tr" );
 
 				if( !$rowHeading.length ) {
-					$rowHeading = $("", {
+					$rowHeading = $("", {
 						text: avg.point,
 						scope: "row"
 					});
@@ -60,7 +60,7 @@
 
 				$row.append( "" + avg.avg_value + "" );
 
-        $("#tables").append($table);
+				$("#tables").append($table);
 			});
 
 			$("#tables table").visualize({ type: "line", width: 400, height: 400 }).appendTo("#graphs");

From 4da7e378c2844d654b622673fb5c9979727a3f49 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 10:52:04 -0800
Subject: [PATCH 79/88] create new tables based on agent version

---
 tests/speed/stats/visualize/visualize.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tests/speed/stats/visualize/visualize.js b/tests/speed/stats/visualize/visualize.js
index b71e8f1d..6dd95b9b 100644
--- a/tests/speed/stats/visualize/visualize.js
+++ b/tests/speed/stats/visualize/visualize.js
@@ -19,14 +19,15 @@
 
 		$.get("../", searchMap, function(data) {
 			$.each(data, function( i, avg ) {
-				var tablename = avg.point + " " + avg.agent + " " + avg.pathname,
+				var tablename = avg.point + " " + avg.agent + " " + avg.pathname + " " + avg.agent_version,
 					$table = $( "table > caption:contains(" + tablename + ")");
 
 				if( !$table.length ) {
 					$table = $( "
    ", {
 						"data-pathname": avg.pathname,
 						"data-point": avg.point,
-						"data-agent": avg.agent
+						"data-agent": avg.agent,
+						"data-agent": avg.agent_version
 					});
 
 					$table.append( "" + tablename + "");

From 157286714766688fa650ba740309ad443b827d1e Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 10:55:14 -0800
Subject: [PATCH 80/88] decode get params when refining stats data

---
 tests/speed/stats/index.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/speed/stats/index.php b/tests/speed/stats/index.php
index cf81efcb..d90e13ac 100644
--- a/tests/speed/stats/index.php
+++ b/tests/speed/stats/index.php
@@ -6,8 +6,8 @@
   // stats with a GET returns - wait for it - the stats, and a post with the
   // the right params will create a new entry
   if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
-     $agent = (empty($_GET['agent'])) ? '' : $_GET['agent'];
-     $data_point = (empty($_GET['data_point'])) ? '' : $_GET['data_point'];
+     $agent = (empty($_GET['agent'])) ? '' : urldecode($_GET['agent']);
+     $data_point = (empty($_GET['data_point'])) ? '' : urldecode($_GET['data_point']);
 
      $st = $db->prepare( '
      SELECT agent, agent_version, point, avg(value) as avg_value,

From eedb9ce8acabbd7d0b16f65b171f850052956fdd Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 11:24:54 -0800
Subject: [PATCH 81/88] todo added to the chart display

---
 tests/speed/stats/visualize/visualize.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/speed/stats/visualize/visualize.js b/tests/speed/stats/visualize/visualize.js
index 6dd95b9b..a366546c 100644
--- a/tests/speed/stats/visualize/visualize.js
+++ b/tests/speed/stats/visualize/visualize.js
@@ -1,4 +1,5 @@
 (function($) {
+	// TODO this is entire thing sucks
 	$(function() {
 		var searchMap = (function() {
 			var searchSplit, searchMap = {};

From 458ba656817563904dca7f8f93cdc0aac9f71680 Mon Sep 17 00:00:00 2001
From: John Bender 
Date: Thu, 10 Nov 2011 11:42:28 -0800
Subject: [PATCH 82/88] switched to bar chart per @toddparker

---
 tests/speed/stats/visualize/visualize.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/speed/stats/visualize/visualize.js b/tests/speed/stats/visualize/visualize.js
index a366546c..70eda316 100644
--- a/tests/speed/stats/visualize/visualize.js
+++ b/tests/speed/stats/visualize/visualize.js
@@ -65,7 +65,7 @@
 				$("#tables").append($table);
 			});
 
-			$("#tables table").visualize({ type: "line", width: 400, height: 400 }).appendTo("#graphs");
+			$("#tables table").visualize({ type: "bar", width: 400, height: 400 }).appendTo("#graphs");
 		});
 	});
 })(jQuery);
\ No newline at end of file

From 87070cc6907ee1feb56969efe451abefea95bde3 Mon Sep 17 00:00:00 2001
From: "jblas@adobe.com" 
Date: Thu, 10 Nov 2011 14:15:12 -0800
Subject: [PATCH 83/88] Reclaiming another 700-800 msecs on the 400 listview
 item test for WP7.5 (Mango) with a few minor tweaks:

- Added _findFirstElementByTagName() which does basic DOM traversal to find the first of an element with the given nodeName. Use this in place of $.fn.closest() and $.fn.children() calls that filter with ":eq(0)".
- Avoid calling $.fn.add() if you can. The creation of the new collection is costing about 400 msecs.
- Avoid calling $() with markup for a single node, just use document.createElement() and pass it to $().
---
 js/jquery.mobile.listview.js | 50 ++++++++++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 62578ece..f80184ca 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -92,6 +92,42 @@ $.widget( "mobile.listview", $.mobile.widget, {
 		}
 	},
 
+	// This is a generic utility method for finding the first
+	// node with a given nodeName. It uses basic DOM traversal
+	// to be fast and is meant to be a substitute for simple
+	// $.fn.closest() and $.fn.children() calls on a single
+	// element. Note that callers must pass both the lowerCase
+	// and upperCase version of the nodeName they are looking for.
+	// The main reason for this is that this function will be
+	// called many times and we want to avoid having to lowercase
+	// the nodeName from the element every time to ensure we have
+	// a match. Note that this function lives here for now, but may
+	// be moved into $.mobile if other components need a similar method.
+	_findFirstElementByTagName: function( ele, nextProp, lcName, ucName )
+	{
+		var dict = {};
+		dict[ lcName ] = dict[ ucName ] = true;
+		while ( ele ) {
+			if ( dict[ ele.nodeName ] ) {
+				return ele;
+			}
+			ele = ele[ nextProp ];
+		}
+		return null;
+	},
+	
+	_addThumbClasses: function( containers )
+	{
+		var i, img, len = containers.length;
+		for ( i = 0; i < len; i++ ) {
+			img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
+			if ( img.length ) {
+				img.addClass( "ui-li-thumb" );
+				$( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+			}
+		}
+	},
+
 	refresh: function( create ) {
 		this.parentPage = this.element.closest( ".ui-page" );
 		this._createSubPages();
@@ -157,7 +193,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
 							})
 							.find( ".ui-btn-inner" )
 								.append(
-									$( "" ).buttonMarkup({
+									$( document.createElement( "span" ) ).buttonMarkup({
 										shadow: true,
 										corners: true,
 										theme: splittheme,
@@ -188,7 +224,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
 					.prepend( "" + (counter++) + ". " );
 			}
 
-			item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );
+			item.addClass( itemClass ).children( ".ui-btn-inner" ).addClass( itemClass );
 		}
 
 		$list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" )
@@ -219,14 +255,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
 		// allows the 400 listview item page to load in about 3 seconds as
 		// opposed to 30 seconds.
 
-		imgParents = li.add( $list.find( ".ui-link-inherit" ) );
-
-		for ( pos = 0; pos < imgParents.length; pos++ ) {
-			img = imgParents.eq( pos ).children( "img" ).first();
-			if ( img.length ) {
-				img.addClass( "ui-li-thumb" ).closest( "li" ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
-			}
-		}
+		this._addThumbClasses( li );
+		this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
 
 		this._refreshCorners( create );
 	},

From 2a1f95d7c7a908e582a74251b886cbffd2a96494 Mon Sep 17 00:00:00 2001
From: toddparker 
Date: Thu, 10 Nov 2011 21:59:50 -0500
Subject: [PATCH 84/88] Added new PhoneGap page, updated navigation

---
 docs/pages/api-pages.html        |  43 ------------
 docs/pages/index.html            |   3 +-
 docs/pages/page-anatomy.html     |   3 +-
 docs/pages/page-cache.html       |   3 +-
 docs/pages/page-dialogs.html     |   3 +-
 docs/pages/page-dynamic.html     |   3 +-
 docs/pages/page-links.html       |   3 +-
 docs/pages/page-navmodel.html    |   3 +-
 docs/pages/page-scripting.html   |   3 +-
 docs/pages/page-titles.html      |   3 +-
 docs/pages/page-transitions.html |   3 +-
 docs/pages/pages-themes.html     |   3 +-
 docs/pages/phonegap.html         | 110 +++++++++++++++++++++++++++++++
 13 files changed, 132 insertions(+), 54 deletions(-)
 delete mode 100755 docs/pages/api-pages.html
 create mode 100644 docs/pages/phonegap.html

diff --git a/docs/pages/api-pages.html b/docs/pages/api-pages.html
deleted file mode 100755
index 233c16d5..00000000
--- a/docs/pages/api-pages.html
+++ /dev/null
@@ -1,43 +0,0 @@
- 
- 
-	
-	
-	 
-	jQuery Mobile Docs - Pages API 
-	  
-	
-	
-	
-	
-	
- 
- 
-
-	
    
-
-		
    
-		
    Pages API
    
-		Home
-	
    
-
-	
    
-			
-			
    Dependencies
    
-			
    To be documented
    
-			
-			
    Options
    
-			
    To be documented
    
-			
-			
    Methods
    
-			
    To be documented
    
-			
-			
    Known Issues
    
-			
    To be documented
    
-			
-			
-		
-	
    
-
    
-
-
-
\ No newline at end of file
diff --git a/docs/pages/index.html b/docs/pages/index.html
index 2ab11247..3e8e63f2 100755
--- a/docs/pages/index.html
+++ b/docs/pages/index.html
@@ -35,8 +35,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 		

 
diff --git a/docs/pages/page-anatomy.html b/docs/pages/page-anatomy.html
index 24c8eeed..7ea52d3b 100644
--- a/docs/pages/page-anatomy.html
+++ b/docs/pages/page-anatomy.html
@@ -200,8 +200,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-cache.html b/docs/pages/page-cache.html
index e4ac2077..059377f8 100644
--- a/docs/pages/page-cache.html
+++ b/docs/pages/page-cache.html
@@ -101,8 +101,9 @@ $.mobile.page.prototype.options.domCache = true;
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-dialogs.html b/docs/pages/page-dialogs.html
index 63dccdb8..ffe05646 100755
--- a/docs/pages/page-dialogs.html
+++ b/docs/pages/page-dialogs.html
@@ -106,8 +106,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 				
diff --git a/docs/pages/page-dynamic.html b/docs/pages/page-dynamic.html
index 8ce8dfb9..f15f2512 100644
--- a/docs/pages/page-dynamic.html
+++ b/docs/pages/page-dynamic.html
@@ -277,8 +277,9 @@ function showCategory( urlObj, options )
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-links.html b/docs/pages/page-links.html
index 9d6c8f47..38971138 100755
--- a/docs/pages/page-links.html
+++ b/docs/pages/page-links.html
@@ -118,8 +118,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-navmodel.html b/docs/pages/page-navmodel.html
index 0a0e49e7..c37eeaca 100644
--- a/docs/pages/page-navmodel.html
+++ b/docs/pages/page-navmodel.html
@@ -158,8 +158,9 @@ $.ajaxPrefilter( function(options, originalOptions, jqXHR) {
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-scripting.html b/docs/pages/page-scripting.html
index 33df6700..fbb61964 100644
--- a/docs/pages/page-scripting.html
+++ b/docs/pages/page-scripting.html
@@ -125,8 +125,9 @@ $.mobile.silentScroll(300);
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-titles.html b/docs/pages/page-titles.html
index 31c340c0..e8cae86a 100644
--- a/docs/pages/page-titles.html
+++ b/docs/pages/page-titles.html
@@ -59,8 +59,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html
index ef34ce39..a386c5f3 100755
--- a/docs/pages/page-transitions.html
+++ b/docs/pages/page-transitions.html
@@ -69,8 +69,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/pages-themes.html b/docs/pages/pages-themes.html
index 5ef7b19c..d51bbbf6 100755
--- a/docs/pages/pages-themes.html
+++ b/docs/pages/pages-themes.html
@@ -205,8 +205,9 @@
 								
  • Dialogs
    • 
 								
  • Prefetching & caching pages
    • 
 								
  • Ajax, hashes & history
    • 
-								
  • Dynamically Injecting Pages
    • 
+								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
+								
  • PhoneGap apps
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/phonegap.html b/docs/pages/phonegap.html
new file mode 100644
index 00000000..3875cc34
--- /dev/null
+++ b/docs/pages/phonegap.html
@@ -0,0 +1,110 @@
+
+
+	
+	
+	
+	jQuery Mobile Docs - Phonegap
+	
+	
+	
+	
+	
+	
+
+
+
+	
    
+
+		
    
+		
    Dynamically Injecting Pages
    
+		Home
+	
    
+
+	
    
+		
    
+			
+		
+			
    Building PhoneGap apps with jQuery Mobile
    
+			
+			
    PhoneGap is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a Web View (a chrome-less browser). PhoneGap commonly used in conjunction with to jQuery Mobile so we wanted to offer a few things to keep in mind to avoid common issues. 
    
+
+			
    First, your initial application document is loaded by the PhoneGap application by a file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request. 
    
+			
+			
    Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by 2 key things: $.support.cors and $.mobile.allowCrossDomainPages, and can also be influenced by the white list fueature in later builds of PhoneGap.
    
+
+			
    $.support.cors
    
+
+			
    In jQuery core, there is a $.support.cors boolean that indicates whether or not jQuery thinks the browser supports the W3C "Cross-Origin Resource Sharing" feature to support cross-domain requests.
    
+
+			
    Since jQuery Mobile relies on jQuery core's $.ajax() functionality, $.support.cors must be set to true to tell $.ajax to load cross-domain pages. We've heard reports that Web Views on some platforms, like BlackBerry, support cross-domain loading, but that jQuery core incorrectly sets $.support.cors value to false which disables cross-domain $.ajax() requests and will cause the page or assets to fail to load. 
    
+
+			
    $.mobile.allowCrossDomainPages
    
+
+			
    When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for an XSS attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of it's choice. This is the main reason that the default setting for $.mobile.allowCrossDomainPages is set to false.
    
+
+			
    So PhoneGap apps that must "phone home" by loading assets off a remote server, both the $.support.cors AND $.mobile.allowCrossDomainPages must be set to true.  The  $.mobile.allowCrossDomainPages option must set before any cross-domain request is made so we recommend wrapping this in a mobileinit handler:
    
+
+
    $( document ).bind( "mobileinit", function() {
+    // Make your jQuery Mobile framework configuration changes here!
+
+    $.mobile.allowCrossDomainPages = true;
+});
    
+
+			
    PhoneGap White Listing
    
+
+			
    PhoneGap 1.0 introduced the idea of white-listing servers that it's internal WebView is allowed to make cross-domain requests to. You can find info about it here on the PhoneGap wiki:
    
+
+			
    However, not all platforms support this whitelisting feature so check the PhoneGap documentation for details. Older versions of PhoneGap prior to 1.0 defaulted to allowing cross-domain requests to any server.
    
+
+			
    Still having issues?
    
+
+			
    Here are a few more tips that aren't specifically related to PhoneGap but are good to know:
    
+
+			
    We recommend disabling the pushState feature for installed apps because there are edge cases where this feature can cause unexpected navigation behavior and since URLs aren't visible in a WebView, it's not worth keeping this active in these situations. 
    
+
+			
    Android enforces a timeout when loading URLs in a webview which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:
    
+
+			super.setIntegerProperty("loadUrlTimeoutValue", 60000);
+			
+			
+			
+      
    
+		
+
+				
    
+
+					
+				
    
+
+			
    
+
+			
    
+					
    © 2011 The jQuery Project
    
+			
    
+
+			
    
+
+			
+			

From 915b9e528bdaa59d2689bb03cd9c3331c6e021d9 Mon Sep 17 00:00:00 2001
From: toddparker 
Date: Thu, 10 Nov 2011 23:28:49 -0500
Subject: [PATCH 85/88] AddedTouchoverflow docs page, re-vamped transitions
 page to add info on adding cutom CSS and JS transitions

---
 docs/pages/index.html            |   1 +
 docs/pages/page-anatomy.html     |   1 +
 docs/pages/page-cache.html       |   1 +
 docs/pages/page-dialogs.html     |   2 +-
 docs/pages/page-dynamic.html     |   2 +-
 docs/pages/page-links.html       |   2 +-
 docs/pages/page-navmodel.html    |   2 +-
 docs/pages/page-scripting.html   |   2 +-
 docs/pages/page-titles.html      |   2 +-
 docs/pages/page-transitions.html | 234 ++++++++++++++++++++++++++++---
 docs/pages/pages-themes.html     |   2 +-
 docs/pages/phonegap.html         |   3 +-
 docs/pages/touchoverflow.html    | 104 ++++++++++++++
 13 files changed, 332 insertions(+), 26 deletions(-)
 create mode 100644 docs/pages/touchoverflow.html

diff --git a/docs/pages/index.html b/docs/pages/index.html
index 3e8e63f2..0ebbebb4 100755
--- a/docs/pages/index.html
+++ b/docs/pages/index.html
@@ -38,6 +38,7 @@
 								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
 								
  • PhoneGap apps
    • 
+								
  • touchOverflow feature
    • 
 								
  • Theming pages
    • 
 		
 
diff --git a/docs/pages/page-anatomy.html b/docs/pages/page-anatomy.html
index 7ea52d3b..7268df68 100644
--- a/docs/pages/page-anatomy.html
+++ b/docs/pages/page-anatomy.html
@@ -203,6 +203,7 @@
 								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
 								
  • PhoneGap apps
    • 
+								
  • touchOverflow feature
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-cache.html b/docs/pages/page-cache.html
index 059377f8..833af07c 100644
--- a/docs/pages/page-cache.html
+++ b/docs/pages/page-cache.html
@@ -104,6 +104,7 @@ $.mobile.page.prototype.options.domCache = true;
 								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
 								
  • PhoneGap apps
    • 
+								
  • touchOverflow feature
    • 
 								
  • Theming pages
    • 
 
 							
diff --git a/docs/pages/page-dialogs.html b/docs/pages/page-dialogs.html
index ffe05646..73138f3b 100755
--- a/docs/pages/page-dialogs.html
+++ b/docs/pages/page-dialogs.html
@@ -109,8 +109,8 @@
 								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
 								
  • PhoneGap apps
    • 
+								
  • touchOverflow feature
    • 
 								
  • Theming pages
    • 
-
 				
 		
    
 	
    		
diff --git a/docs/pages/page-dynamic.html b/docs/pages/page-dynamic.html
index f15f2512..80d70a6a 100644
--- a/docs/pages/page-dynamic.html
+++ b/docs/pages/page-dynamic.html
@@ -280,8 +280,8 @@ function showCategory( urlObj, options )
 								
  • Dynamically injecting pages
    • 
 								
  • Scripting pages
    • 
 								
  • PhoneGap apps
    • 
+								
  • touchOverflow feature
    • 
 								
  • Theming pages
    • 
-
    diff --git a/docs/pages/page-links.html b/docs/pages/page-links.html index 38971138..322679a5 100755 --- a/docs/pages/page-links.html +++ b/docs/pages/page-links.html @@ -121,8 +121,8 @@
  • Dynamically injecting pages
  • Scripting pages
  • PhoneGap apps
    • +
  • touchOverflow feature
  • Theming pages
    • - diff --git a/docs/pages/page-navmodel.html b/docs/pages/page-navmodel.html index c37eeaca..ab24521d 100644 --- a/docs/pages/page-navmodel.html +++ b/docs/pages/page-navmodel.html @@ -161,8 +161,8 @@ $.ajaxPrefilter( function(options, originalOptions, jqXHR) {
  • Dynamically injecting pages
  • Scripting pages
  • PhoneGap apps
    • +
  • touchOverflow feature
  • Theming pages
    • - diff --git a/docs/pages/page-scripting.html b/docs/pages/page-scripting.html index fbb61964..230dc0e5 100644 --- a/docs/pages/page-scripting.html +++ b/docs/pages/page-scripting.html @@ -128,8 +128,8 @@ $.mobile.silentScroll(300);
  • Dynamically injecting pages
  • Scripting pages
  • PhoneGap apps
    • +
  • touchOverflow feature
  • Theming pages
    • - diff --git a/docs/pages/page-titles.html b/docs/pages/page-titles.html index e8cae86a..4744729a 100644 --- a/docs/pages/page-titles.html +++ b/docs/pages/page-titles.html @@ -62,8 +62,8 @@
  • Dynamically injecting pages
  • Scripting pages
  • PhoneGap apps
    • +
  • touchOverflow feature
  • Theming pages
    • - diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index a386c5f3..aa7daeb1 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -24,29 +24,230 @@

    Page transitions

    -

    The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.

    +

    The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission if Ajax navigation is active:

    -

    To set a custom transition effect, add the data-transition attribute to the link. Possible values include:

    - -<a href="index.html" data-transition="pop">I'll pop</a> - - -

    +

    +
    slide slideup slidedown - pop +
    +
    + pop fade - flip * -

    + flip* +
    +
    + +

    Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.

    + +

    NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.

    + + +

    Setting a transition on a link or form submit

    +

    By default, the framework applies the right to left slide transition. To set a custom transition effect, add the data-transition attribute to the link.

    + + +<a href="index.html" data-transition="pop">I'll pop</a> + -

    NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.

    -

    In addition, you can also force a "backwards" transition by specifying data-direction="reverse" on your link. Note: (this was formerly data-back="true", which will remain supported until 1.0)

    +

    When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the data-direction="reverse" attribute to a link. Note: (this was formerly data-back="true", which will remain supported until 1.0)

    -
    -

    Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.

    -
    +

    For smoother page transitions, consider enabling the touchOverflow feature.

    + +

    Global configuration of transitions

    + +

    Set the defaultPageTransition global option if you'd prefer a different default transition. Dialogs have a different option called defaultDialogTransition that can also set configured.

    + + + + +

    Creating custom CSS-based transitions

    + + +

    To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:

    + + 
    .slide.in {
+	    -webkit-transform: translateX(0);
+	    -webkit-animation-name: slideinfromright;
+	}
+
+	.slide.out {
+	    -webkit-transform: translateX(-100%);
+	    -webkit-animation-name: slideouttoleft;
+	}
+
+	@-webkit-keyframes slideinfromright {
+	    from { -webkit-transform: translateX(100%); }
+	    to { -webkit-transform: translateX(0); }
+	}
+	@-webkit-keyframes slideouttoleft {
+	    from { -webkit-transform: translateX(0); }
+	    to { -webkit-transform: translateX(-100%); }
+	}
+
    + +

    During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above.

    + +

    If your transition supports a reverse direction, you need to create CSS rules that use the reverse class in addition to the transition class name and the "in" and "out" classes:

    + + 
    .slide.in.reverse {
+		    -webkit-transform: translateX(0);
+		    -webkit-animation-name: slideinfromleft;
+		}
+
+		.slide.out.reverse {
+		    -webkit-transform: translateX(100%);
+		    -webkit-animation-name: slideouttoright;
+		}
+
+		@-webkit-keyframes slideinfromleft {
+		    from { -webkit-transform: translateX(-100%); }
+		    to { -webkit-transform: translateX(0); }
+		}
+
+		@-webkit-keyframes slideouttoright {
+		    from { -webkit-transform: translateX(0); }
+		    to { -webkit-transform: translateX(100%); }
+		}
+
    + +

    After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:

    + + 
    <a href="#page2" data-transition="slide">Page 2</a>
+
    + +

    When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.

    + +

    In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:

    + + 
    
+.in, .out {
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-duration: 350ms;
+}
+
    + +

    If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.

    + +

    Creating custom JavaScript-based transitions

    + +

    When a user clicks on a link within a page, jQuery Mobile checks if the link specifies a @data-transition attribute. The value of this attribute is the name of the transition to use when displaying the page referred to by the link. If there is no @data-transition attribute, the transition name specified by the configuration option $.mobile.defaultPageTransition is used for pages, and $.mobile.defaultDialogTransition is used for dialogs.

    + +

    After the new page is loaded, the $.mobile.transitionHandlers dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option $.mobile.defaultTransitionHandler is invoked.

    + +

    By default, the $.mobile.transitionHandlers dictionary is only populated with a single handler entry called "none". This handler simply removes the "ui-page-active" class from the page we are transitioning "from", and places it on the page we are transitioning "to". The transition is instantaneous; no animation, no fanfare.

    + +

    The $.defaultTransitionHandler points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.

    + +

    Both the "none" and "css3" transition handlers are available off of the $.mobile namespace:

    + + 
    
+$.mobile.noneTransitionHandler
+$.mobile.css3TransitionHandler
+
    + +

    Transition Handlers

    + +

    A transition handler is a function with the following call signature:

    + + 
    function myTransitionHandler(name, reverse, $to, $from)
+{
+    var deferred = new $.Deferred();
+
+    // Perform any actions or set-up necessary to kick-off
+    // your transition here. The only requirement is that
+    // whenever the transition completes, your code calls
+    // deferred.resolve(name, reverse, $to, $from).
+
+    // Return a promise.
+    return deferred.promise();
+}
+
    + +

    Your handler must create a Deferred object and return a promise to the caller. The promise is used to communicate to the caller when your transition is actually complete. It is up to you to call deferred.resolve() at the correct time. If you are new to Deferred objects, you can find documentation here.

    + +

    Registering and Invoking Your Transition Handler

    + +

    Once you have created a transition handler function, you need to tell jQuery Mobile about it. To do this, simply add your handler to the $.mobile.transitionHandlers dictionary. Remember, the key used should be the name of your transition. This name is also the same name that will be used within the @data-transition attribute of any navigation links.

    + + 
    // Define your transition handler:
+
+function myTransitionHandler(name, reverse, $to, $from)
+{
+    var deferred = new $.Deferred();
+
+    // Perform any actions or set-up necessary to kick-off
+    // your transition here. The only requirement is that
+    // whenever the transition completes, your code calls
+    // deferred.resolve(name, reverse, $to, $from).
+
+    // Return a promise.
+    return deferred.promise();
+}
+
+// Register it with jQuery Mobile:
+
+$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;
+
    + +

    Once you've registered your handler, you can invoke your transition by placing a data-transition attribute on a link:

    + + 
    <a href="#page2" data-transition="myTransition">Page 2</a>
+
    + +

    When the user clicks the link above, your transition handler will be invoked after the page is loaded and it is ready to be shown.

    + +

    Overriding a CSS Transition With Your Own Handler

    + +

    As previously mentioned the default transition handler assumes that any transition name other than "none" is a CSS class to be placed on the "from" and "to" elements to kick off a CSS3 animation. If you would like to override one of these built-in CSS transitions, you simply register your own handler with the same name as the CSS page transition you want to override. So for example, if I wanted to override the built-in "slide" CSS transition with my own JavaScript based transition, I would simply do the following:

    + + 
    // Define your transition handler:
+
+function myTransitionHandler(name, reverse, $to, $from)
+{
+    var deferred = new $.Deferred();
+
+    // Perform any actions or set-up necessary to kick-off
+    // your transition here. The only requirement is that
+    // whenever the transition completes, your code calls
+    // deferred.resolve(name, reverse, $to, $from).
+
+    // Return a promise.
+    return deferred.promise();
+}
+
+// Register it with jQuery Mobile:
+
+$.mobile.transitionHandlers["slide"] = myTransitionHandler;
+
    + +

    Once you do this, anytime the "slide" transition is invoked, your handler, instead of the default one, will be called to perform the transition.

    + +

    Overriding the Default Transition Handler

    + +

    The $.mobile.css3TransitionHandler function is the default transition handler that gets invoked when a transition name is used and not found in the $.mobile.transitionHandlers dictionary. If you want to install your own custom default handler, you simply set the $.mobile.defaultTransitionHandler to your handler:

    + + 
    // Define your default transition handler:
+
+function myTransitionHandler(name, reverse, $to, $from)
+{
+    var deferred = new $.Deferred();
+
+    // Perform any actions or set-up necessary to kick-off
+    // your transition here. The only requirement is that
+    // whenever the transition completes, your code calls
+    // deferred.resolve(name, reverse, $to, $from).
+
+    // Return a promise.
+    return deferred.promise();
+}
+
+$.mobile.defaultTransitionHandler = myTransitionHandler;
+
    + +

    Once you do this, your handler will be invoked any time a transition name is used but not found within the $.mobile.transitionHandlers dictionary.

    @@ -58,7 +259,6 @@

    More in this section

    diff --git a/docs/pages/pages-themes.html b/docs/pages/pages-themes.html index d51bbbf6..5008a450 100755 --- a/docs/pages/pages-themes.html +++ b/docs/pages/pages-themes.html @@ -208,8 +208,8 @@
  • Dynamically injecting pages
  • Scripting pages
  • PhoneGap apps
    • +
  • touchOverflow feature
  • Theming pages
    • - diff --git a/docs/pages/phonegap.html b/docs/pages/phonegap.html index 3875cc34..836f3e51 100644 --- a/docs/pages/phonegap.html +++ b/docs/pages/phonegap.html @@ -78,7 +78,6 @@

    More in this section

    diff --git a/docs/pages/touchoverflow.html b/docs/pages/touchoverflow.html new file mode 100644 index 00000000..cf396c3a --- /dev/null +++ b/docs/pages/touchoverflow.html @@ -0,0 +1,104 @@ + + + + + + jQuery Mobile Docs - touchOverflow + + + + + + + + + +
    + +
    +

    touchOverflow

    + Home +
    + +
    +
    + +

    touchOverflow: Dramatically improved page transitions and true fixed toolbars

    + +

    Currently, both the page you're viewing and the one you're navigating to are both sitting next to each other in the viewport which lets us leverage native scrolling for the broadest possible device support. The downside to this approach is that since both pages share the same viewport, when a page transition stars, we must first scroll to the top of the document, then start animating to ensure that the pages are lined up vertically. If you hit the Back button, we need to scroll up, transition, then restore the previous scroll position. Since mobile browsers are pretty slow, these scroll movements can detract from the flow of the experience.

    + +

    The way to really improve this situation is to have both pages in separate containers, each with it's own internal scroll bar. The means no more scrolling the document or needing to restore scroll positions for a smoother experience. It also has the benefit of making fixed toolbars very easy to implement by simply placing them outside the containers with internal scrolling.

    + +

    How it works

    + +

    To leverage iOS5′s support for a touch-targeted version of overflow:auto which allows for internal scrolling regions with the native momentum scrolling, we've added an feature called touchOverflow that leverages these new CSS capabilities to enable us to bring both true “fixed” toolbars and super smooth transitions in iOS5, all by using web standards and very little additional code.

    + +

    A feature called touchOverflowEnabled is designed to leverage the upcoming wave of browsers that support overflow scrolling in CSS. Note that this feature is off by default to give us more time to test and debug this for best performance but we hope to turn it on by default at a later point. Here's to to enable this global option:

    + +
    <script>
+$(document).bind("mobileinit", function(){
+  $.mobile.touchOverflowEnabled = true;
+});
+</script>
    + +

    When this feature is activated, the framework looks for browser support for both the overflow: and -webkit-overflow-scrolling:touch CSS properties. In browsers that support both, it switches to a dual page container model with native overflow: scrolling within each which brings true fixed toolbars smooth transitions. Coupled with iOS’s already-excellent hardware-accelerated transitions, it's now possible to build interfaces that are very close to native performance.

    + +

    To demo this feature, check out this page in iOS5

    + +

    A few downsides

    + +

    Nothing is perfect, especially a new feature so there are a few downsides to keep in mind.

    + +
      +
    • Sometimes child elements like lists and forms wouldn't render when embedded in a page with overflow: in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a translate-z CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.
      • +
    • The -webkit-overflow-scrolling:touch property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.
      • +
    + + + +

    Don’t other mobile platforms already support overflow?

    +

    Yes, but there’s a catch. Both Android Honeycomb and the Blackberry PlayBook support overflow: properties, but we found in testing that their implementation of overflow was't smooth enough so pages would stutter and hang during scrolling, leading to an unusable experience. We're working with device makers to ensure that they are included when performance improves.

    +

    More importantly, targeting overflow correctly is a major issue. If we simply placed an overflow: auto CSS rule on the pages, other popular mobile platforms like older versions of Android and iOS would essentially just clip off the content and make it effectively inaccessible (yes, you can can do a two-finger scroll gesture in iOS but nobody knows that). The smart thing about Apple’s implementation for iOS5 is that they added an additional CSS property -webkit-overflow-scrolling:touch that allows us to test for this touch scrolling property and, if supported, add in the overflow rules for just those browsers. This is the only safe way to target overflow without resorting to complex and unmaintainable user agent detection.

    +

    We will be working with device and browser makers to encourage support for both these CSS-based properties because we strongly believe that this a critical piece needed to build rich mobile web apps. The project will add any vendor-prefixed additions to touch scrolling property if, for example, Opera, Firefox or Microsoft added this support. Once people see how much better page transitions and fixed toolbars are on iOS5, we’re hoping this will be supported quickly by other browsers. JS-based scroller scripts may still have a place in this new world as a polyfill for browsers that don’t yet support these new CSS capabilities but we see this as a brief, interim tool in the evolution of the mobile web.

    + + + +
    + +
    + + +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + From 3af9d83e51cc80ceb34ca3bf0d8bae03425d2c77 Mon Sep 17 00:00:00 2001 From: toddparker Date: Thu, 10 Nov 2011 23:32:06 -0500 Subject: [PATCH 86/88] Language tweak --- docs/pages/page-transitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index aa7daeb1..b4093d96 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -24,7 +24,7 @@

    Page transitions

    -

    The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission if Ajax navigation is active:

    +

    The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:

    From 6ac52d855a344f8d287929f3ff4a10dc7fed086c Mon Sep 17 00:00:00 2001 From: toddparker Date: Fri, 11 Nov 2011 10:27:18 -0500 Subject: [PATCH 87/88] Added more info on how to add custom and HD icons --- docs/buttons/buttons-icons.html | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/buttons/buttons-icons.html b/docs/buttons/buttons-icons.html index 00e416e8..f148112d 100755 --- a/docs/buttons/buttons-icons.html +++ b/docs/buttons/buttons-icons.html @@ -107,8 +107,24 @@ Delete

    Custom Icons

    -

    To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

    - +

    To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button: ui-icon-myapp-email.

    +

    You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

    +

    In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.

    + +
    .ui-icon-myapp-email {
+	background-image: url("app-icon-email.png");
+}
    + +

    This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second rule that uses the -webkit-min-device-pixel-ratio: 2 media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:

    +
    
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+	.ui-icon-myapp-email {
+		background-image: url("app-icon-email-highres.png");
+		background-size: 18px 18px;
+	}
+	...more HD icon rules go here...
+}
+

    Icons and themes

    The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches in out theme.

    From b6deb4327420f4cdcb2beb1753739a7c75ce243e Mon Sep 17 00:00:00 2001 From: Anne-Gaelle Colom Date: Fri, 11 Nov 2011 16:44:46 +0000 Subject: [PATCH 88/88] Update docs/pages/page-links.html --- docs/pages/page-links.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-links.html b/docs/pages/page-links.html index 322679a5..7d7f2f67 100755 --- a/docs/pages/page-links.html +++ b/docs/pages/page-links.html @@ -60,7 +60,7 @@

    "Back" button links

    -

    If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute instead.

    +

    If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, although browsers that support this feature will not use the specified href attribute, be sure to still provide a meaningful value that actually points to the URL of the referring page to allow the feature to work for users in C-Grade browsers. If users can reach this page from more than one referring pages, specify a sensible href so that the navigation remains logical for all users. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute instead.

    Redirects and linking to directories