diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 33e8fd18..f3ed05e8 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -45,7 +45,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { } } - collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : ""); + collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : ""); collapsibleHeading //drop heading in before content @@ -61,7 +61,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { iconPos: "left", icon: "plus", theme: o.theme - }) + }); if ( !collapsibleSet.length ) { collapsibleHeading diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 7caa3224..8897fd60 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -118,7 +118,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { this.buttonCount = $( "" ) .addClass( "ui-li-count ui-btn-up-c ui-btn-corner-all" ) .hide() - .appendTo( button ); + .appendTo( button.addClass('ui-li-has-count') ); } // Disable if specified diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 8923e3ca..eb726934 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -662,7 +662,14 @@ && page.is(":jqmData(external-page='true')") ) { page.bind( 'pagehide.remove', function() { - $( this ).removeWithDependents(); + var $this = $( this ), + prEvent = new $.Event( "pageremove" ); + + $this.trigger( prEvent ); + + if( !prEvent.isDefaultPrevented() ){ + $this.removeWithDependents(); + } }); } }; diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index a0483dd4..03cf1735 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -18,7 +18,7 @@ function css3TransitionHandler( name, reverse, $to, $from ) { $to.add( $from ).removeClass( "out in reverse " + name ); - if ( $from ) { + if ( $from && $from[ 0 ] !== $to[ 0 ] ) { $from.removeClass( $.mobile.activePageClass ); } diff --git a/tests/unit/collapsible/collapsible_core.js b/tests/unit/collapsible/collapsible_core.js index 48907752..d353e8ac 100644 --- a/tests/unit/collapsible/collapsible_core.js +++ b/tests/unit/collapsible/collapsible_core.js @@ -129,9 +129,9 @@ 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-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a"); 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" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b"); + 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-c" ), "Heading of third collapsible should have class ui-btn-up-c"); - ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c"); + ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-c" ), "Content of third collapsible should have class ui-btn-up-c"); start(); } ]); @@ -147,15 +147,15 @@ 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-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a"); - ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of first collapsible should NOT have class ui-btn-up-d"); + 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" ).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" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b"); + 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" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d"); + 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" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d"); + ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of fourth collapsible should have class ui-btn-up-d"); start(); } ]); diff --git a/tests/unit/navigation/navigation_core.js b/tests/unit/navigation/navigation_core.js index 5888b9b5..2c2d3a7e 100644 --- a/tests/unit/navigation/navigation_core.js +++ b/tests/unit/navigation/navigation_core.js @@ -96,6 +96,56 @@ ]); }); + asyncTest( "preventDefault on pageremove event can prevent external page from being removed from the DOM", function(){ + var preventRemoval = true, + removeCallback = function( e ) { + if ( preventRemoval ) { + e.preventDefault(); + } + }; + + $( document ).bind( "pageremove", removeCallback ); + + $.testHelper.pageSequence([ + navigateTestRoot, + + function(){ + $.mobile.changePage( "external.html" ); + }, + + // page is pulled and displayed in the dom + function(){ + same( $( "#external-test" ).length, 1 ); + window.history.back(); + }, + + // external-test *IS* cached in the dom after transitioning away + function(){ + same( $( "#external-test" ).length, 1 ); + + // Switch back to the page again! + $.mobile.changePage( "external.html" ); + }, + + // page is still present and displayed in the dom + function(){ + same( $( "#external-test" ).length, 1 ); + + // Now turn off our removal prevention. + preventRemoval = false; + + window.history.back(); + }, + + // external-test is *NOT* cached in the dom after transitioning away + function(){ + same( $( "#external-test" ).length, 0 ); + $( document ).unbind( "pageremove", removeCallback ); + start(); + } + ]); + }); + asyncTest( "external page is cached in the DOM after pagehide", function(){ $.testHelper.pageSequence([ navigateTestRoot, diff --git a/themes/default/images/icon-search-black.png b/themes/default/images/icon-search-black.png deleted file mode 100644 index 5721120f..00000000 Binary files a/themes/default/images/icon-search-black.png and /dev/null differ diff --git a/themes/default/jquery.mobile.button.css b/themes/default/jquery.mobile.button.css index 31ef7117..c705112d 100644 --- a/themes/default/jquery.mobile.button.css +++ b/themes/default/jquery.mobile.button.css @@ -9,8 +9,8 @@ .ui-btn-inline { display: inline-block; } .ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; } .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; } -.ui-btn-icon-notext { width: 20px; height: 20px; padding: 2px 1px 2px 3px; text-indent: -9999px; } -.ui-btn-icon-notext .ui-btn-inner { padding: 0; } +.ui-btn-icon-notext { width: 24px; height: 24px; text-indent: -9999px; } +.ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; } .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999px; } .ui-btn-icon-left .ui-btn-inner { padding-left: 33px; } .ui-header .ui-btn-icon-left .ui-btn-inner, diff --git a/themes/default/jquery.mobile.controlgroup.css b/themes/default/jquery.mobile.controlgroup.css index 61dea4b6..bc21bd67 100644 --- a/themes/default/jquery.mobile.controlgroup.css +++ b/themes/default/jquery.mobile.controlgroup.css @@ -12,9 +12,8 @@ .ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; } .ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; } .ui-controlgroup-horizontal { padding: 0; } -.ui-controlgroup-horizontal .ui-btn, -.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { display: inline-block; margin: 0 -1px 0 0; } -.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; } +.ui-controlgroup-horizontal .ui-btn { display: inline-block; margin: 0 -5px 0 0; } +.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; margin: 0 -1px 0 0; } .ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn, .ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; } .ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; } diff --git a/themes/default/jquery.mobile.forms.select.css b/themes/default/jquery.mobile.forms.select.css index aea87643..623d8199 100644 --- a/themes/default/jquery.mobile.forms.select.css +++ b/themes/default/jquery.mobile.forms.select.css @@ -6,7 +6,7 @@ .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 select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } +.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; } diff --git a/themes/default/jquery.mobile.forms.textinput.css b/themes/default/jquery.mobile.forms.textinput.css index 8971c806..7e745bca 100644 --- a/themes/default/jquery.mobile.forms.textinput.css +++ b/themes/default/jquery.mobile.forms.textinput.css @@ -7,7 +7,8 @@ label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-we input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; } input.ui-input-text { -webkit-appearance: none; } textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; } -.ui-input-search { padding: 0 30px; width: 77%; background-position: 8px 50%; background-repeat: no-repeat; position: relative; } +.ui-input-search { padding: 0 30px; width: 77%; background-image: none; position: relative; } +.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; } .ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; } .ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -14px; } .ui-input-search .ui-input-clear-hidden { display: none; } diff --git a/themes/default/jquery.mobile.listview.css b/themes/default/jquery.mobile.listview.css index 22050728..2bab2263 100644 --- a/themes/default/jquery.mobile.listview.css +++ b/themes/default/jquery.mobile.listview.css @@ -38,9 +38,9 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid .ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 38px; } .ui-li-divider .ui-li-count, .ui-li-static .ui-li-count { right: 10px; } .ui-li-has-alt .ui-li-count { right: 55px; } -.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; } -.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; } -.ui-li-link-alt .ui-btn-inner { padding: 0; position: static; } +.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; } +.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; z-index: -1;} +.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;} .ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; } .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; } diff --git a/themes/default/jquery.mobile.theme.css b/themes/default/jquery.mobile.theme.css index e47cb364..5d2b064f 100644 --- a/themes/default/jquery.mobile.theme.css +++ b/themes/default/jquery.mobile.theme.css @@ -716,7 +716,8 @@ a.ui-link-inherit { /* Icons -----------------------------------------------------------------------------------------------------------*/ -.ui-icon { +.ui-icon, +.ui-icon-searchfield:after { background: #666 /*{global-icon-color}*/; background: rgba(0,0,0,.4) /*{global-icon-disc}*/; background-image: url(images/icons-18-white.png) /*{global-icon-set}*/; @@ -747,7 +748,7 @@ a.ui-link-inherit { .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back, - .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, + .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on { background-image: url(images/icons-36-white.png); -moz-background-size: 776px 18px; @@ -818,7 +819,8 @@ a.ui-link-inherit { .ui-icon-home { background-position: -576px 50%; } -.ui-icon-search { +.ui-icon-search, +.ui-icon-searchfield:after { background-position: -612px 50%; } .ui-icon-checkbox-off { @@ -849,10 +851,6 @@ a.ui-link-inherit { .ui-radio-on .ui-icon { background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */ } -.ui-icon-searchfield { - background-image: url(images/icon-search-black.png); - background-size: 16px 16px; -} /* loading icon */ .ui-icon-loading { diff --git a/themes/default/jquery.mobile.transitions.css b/themes/default/jquery.mobile.transitions.css index 15365581..82c78594 100644 --- a/themes/default/jquery.mobile.transitions.css +++ b/themes/default/jquery.mobile.transitions.css @@ -23,14 +23,20 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-duration: 350ms; } + +.slide.out { + -webkit-transform: translateX(-100%); + -webkit-animation-name: slideouttoleft; +} + .slide.in { -webkit-transform: translateX(0); -webkit-animation-name: slideinfromright; } -.slide.out { - -webkit-transform: translateX(-100%); - -webkit-animation-name: slideouttoleft; +.slide.out.reverse { + -webkit-transform: translateX(100%); + -webkit-animation-name: slideouttoright; } .slide.in.reverse { @@ -38,9 +44,9 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-name: slideinfromleft; } -.slide.out.reverse { - -webkit-transform: translateX(100%); - -webkit-animation-name: slideouttoright; +.slideup.out { + -webkit-animation-name: dontmove; + z-index: 0; } .slideup.in { @@ -49,9 +55,9 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 10; } -.slideup.out { - -webkit-animation-name: dontmove; +.slideup.in.reverse { z-index: 0; + -webkit-animation-name: dontmove; } .slideup.out.reverse { @@ -60,19 +66,20 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-name: slideouttobottom; } -.slideup.in.reverse { - z-index: 0; +.slidedown.out { -webkit-animation-name: dontmove; + z-index: 0; } + .slidedown.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfromtop; z-index: 10; } -.slidedown.out { - -webkit-animation-name: dontmove; +.slidedown.in.reverse { z-index: 0; + -webkit-animation-name: dontmove; } .slidedown.out.reverse { @@ -81,11 +88,6 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-name: slideouttotop; } -.slidedown.in.reverse { - z-index: 0; - -webkit-animation-name: dontmove; -} - @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } @@ -106,7 +108,6 @@ Built by David Kaneda and maintained by Jonathan Stark. to { -webkit-transform: translateX(100%); } } - @-webkit-keyframes slideinfromtop { from { -webkit-transform: translateY(-100%); } to { -webkit-transform: translateY(0); } @@ -136,15 +137,16 @@ Built by David Kaneda and maintained by Jonathan Stark. to { opacity: 0; } } +.fade.out { + z-index: 0; + -webkit-animation-name: fadeout; +} + .fade.in { opacity: 1; z-index: 10; -webkit-animation-name: fadein; } -.fade.out { - z-index: 0; - -webkit-animation-name: fadeout; -} /* The properties in this rule are only necessary for the 'flip' transition. * We need specify the perspective to create a projection matrix. This will add @@ -170,28 +172,28 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ } -.flip.in { - -webkit-transform: rotateY(0) scale(1); - -webkit-animation-name: flipinfromleft; -} - .flip.out { -webkit-transform: rotateY(-180deg) scale(.8); -webkit-animation-name: flipouttoleft; } -/* Shake it all about */ - -.flip.in.reverse { +.flip.in { -webkit-transform: rotateY(0) scale(1); - -webkit-animation-name: flipinfromright; + -webkit-animation-name: flipinfromleft; } +/* Shake it all about */ + .flip.out.reverse { -webkit-transform: rotateY(180deg) scale(.8); -webkit-animation-name: flipouttoright; } +.flip.in.reverse { + -webkit-transform: rotateY(0) scale(1); + -webkit-animation-name: flipinfromright; +} + @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } @@ -231,6 +233,11 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 10; } +.pop.in.reverse { + z-index: 0; + -webkit-animation-name: dontmove; +} + .pop.out.reverse { -webkit-transform: scale(.2); opacity: 0; @@ -238,11 +245,6 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 10; } -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: dontmove; -} - @-webkit-keyframes popin { from { -webkit-transform: scale(.2);