Permalink
Browse files

Toolbar: Sorts our proper destroy methods for toolbar and fixedtoolbar

Fixes gh-6987
Fixes gh-6939
Closes gh-7252

(cherry picked from commit 3efe6fe)
  • Loading branch information...
cgack authored and arschmitz committed Mar 17, 2014
1 parent 7f3f585 commit 98ece81ee34cf1a7ef0ad9e3f95b89172fac45da
View
@@ -35,6 +35,7 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque
_create: function() {
this._super();
this.pagecontainer = $( ":mobile-pagecontainer" );
if ( this.options.position === "fixed" && !this.options.supportBlacklist() ) {
this._makeFixed();
}
@@ -277,12 +278,30 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque
},
_destroy: function() {
var $el = this.element,
header = $el.hasClass( "ui-header" );
var pageClasses, toolbarClasses, hasFixed, header, hasFullscreen,
page = this.pagecontainer.pagecontainer( "getActivePage" );
$el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), "" );
$el.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
$el.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
this._super();
if ( this.options.position === "fixed" ) {
hasFixed = $( "body>.ui-" + this.role + "-fixed" )
.add( page.find( ".ui-" + this.options.role + "-fixed" ) )
.not( this.element ).length > 0;
hasFullscreen = $( "body>.ui-" + this.role + "-fixed" )
.add( page.find( ".ui-" + this.options.role + "-fullscreen" ) )
.not( this.element ).length > 0;
toolbarClasses = "ui-header-fixed ui-footer-fixed ui-header-fullscreen in out" +
" ui-footer-fullscreen fade slidedown slideup ui-fixed-hidden";
this.element.removeClass( toolbarClasses );
if ( !hasFullscreen ) {
pageClasses = "ui-page-" + this.role + "-fullscreen";
}
if ( !hasFixed ) {
header = this.role === "header";
pageClasses += " ui-page-" + this.role + "-fixed";
page.css( "padding-" + ( header ? "top" : "bottom" ), "" );
}
page.removeClass( pageClasses );
}
}
});
View
@@ -145,7 +145,7 @@ define( [
// Skip back button creation if one is already present
if ( !backButton.attached ) {
backButton.element = ( backButton.element ||
this.backButton = backButton.element = ( backButton.element ||
$( "<a role='button' href='javascript:void(0);' " +
"class='ui-btn ui-corner-all ui-shadow ui-btn-left " +
( theme ? "ui-btn-" + theme + " " : "" ) +
@@ -170,6 +170,27 @@ define( [
"role": "heading",
"aria-level": "1"
});
},
_destroy: function() {
var currentTheme;
this.element.children( "h1, h2, h3, h4, h5, h6" )
.removeClass( "ui-title" )
.removeAttr( "role" )
.removeAttr( "aria-level" );
if ( this.role === "header" ) {
this.element.children( "a, button" )
.removeClass( "ui-btn-left ui-btn-right ui-btn ui-shadow ui-corner-all" );
if ( this.backButton) {
this.backButton.remove();
}
}
currentTheme = this.options.theme ? this.options.theme : "inherit";
this.element.removeClass( "ui-bar-" + currentTheme );
this.element.removeClass( "ui-" + this.role ).removeAttr( "role" );
}
});
@@ -313,4 +313,66 @@
asyncTest( "data-visible-on-page-show shows toolbars when undefined", function() {
asyncTestFooterAndHeader( "#page-show-visible-undefined", true );
});
asyncTest( "page-retains-fixed-header-on-popup-remove" , function() {
expect( 1 );
var page = $( "#page-retains-fixed-header-on-popup-removed" ).page();
$.testHelper.pageSequence([
function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", page );
},
function() {
var popup;
popup = $( "<div data-nstest-role='popup' />" )
.append( "<div data-nstest-role='header' />" )
.append( "<h1>Dynamic Popup</h1>" );
page.append( popup );
popup.popup( { positionTo: "window" } ).trigger( "create" );
popup.on( "popupafterclose", function() {
popup.remove();
ok( $( ":mobile-pagecontainer" ).pagecontainer( "getActivePage" )
.hasClass( "ui-page-header-fixed" ),
"page should retain the fixed header after popup is removed" );
start();
});
popup.popup( "open" ).popup( "close" );
},
function() {
$.mobile.pageContainer.change( "#default" );
}
]);
});
asyncTest( "destroy preserves original markup" , function() {
expect( 1 );
$.testHelper.pageSequence([
function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#page-destroy-test" );
},
function() {
var unEnhanced = $("#testDestroyFixedFullscreen").clone(),
destroyed = $("#testDestroyFixedFullscreen").toolbar().toolbar("destroy");
ok( $.testHelper.domEqual( destroyed, unEnhanced ),
"unEnhanced equals destroyed" );
start();
},
function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
}
]);
});
})(jQuery);
@@ -18,7 +18,8 @@
"jquery.mobile.buttonMarkup",
"navigation/method",
"widgets/toolbar",
"widgets/fixedToolbar"
"widgets/fixedToolbar",
"widgets/popup"
],
[ "jquery.mobile.init" ],
[ "./fixedToolbar.js" ]
@@ -101,5 +102,13 @@ <h1>foo</h1>
<div data-nstest-role="header" data-nstest-fullscreen="true" data-nstest-position="fixed"></div>
<div data-nstest-role="footer" data-nstest-fullscreen="true" data-nstest-position="fixed"></div>
</div>
<div data-nstest-role="page" id="page-retains-fixed-header-on-popup-removed">
<div data-nstest-role="header" data-nstest-position="fixed"></div>
</div>
<div data-nstest-role="page" id="page-destroy-test">
<div id="testDestroyFixedFullscreen" data-nstest-position="fixed" data-nstest-fullscreen="true" >
<h1>title</h1>
</div>
</div>
</body>
</html>
@@ -0,0 +1,61 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Toolbar Test Suite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad([
[
"navigation/method",
"buttonMarkup",
"widgets/toolbar",
],
[ "init"],
[ "./toolbar_core.js" ]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page" id="default">
<div data-nstest-role="header" id="testHeaderClasses">
<h1>Header</h1>
</div>
<div data-nstest-role="footer" id="testFooterClasses">
<h1>Footer</h1>
</div>
<div id="testInit">
<h1>Header</h1>
</div>
</div>
<div data-nstest-role="page" id="destroyPage">
<div id="testDestroy" >
<h1>title</h1>
</div>
</div>
<div data-nstest-role="header" class="ui-screen-hidden" id="testExternalHeader">
<h1>External Header</h1>
</div>
<div data-nstest-role="footer" class="ui-screen-hidden" id="testExternalFooter">
<h1>External Footer</h1>
</div>
</body>
</html>
@@ -0,0 +1,90 @@
/*
* mobile Fixed Toolbar unit tests
*/
(function($){
module( "toolbar" );
test( "header classes and roles assigned correctly", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
var toolbar = $( "#testHeaderClasses" );
ok( toolbar.hasClass( "ui-header" ), "toolbar gets ui-header after init" );
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "toolbar title assigned correctly");
ok( toolbar.attr( "role" ) === "banner", "header gets banner role assigned" );
ok( toolbar.find( "h1" ).attr( "role" ) === "heading", "heading role properly assigned");
});
test( "footer classes and roles assigned correctly", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
var toolbar = $( "#testFooterClasses" );
ok( toolbar.hasClass( "ui-footer" ), "toolbar gets ui-footer after init" );
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "toolbar title assigned correctly");
ok( toolbar.attr( "role" ) === "contentinfo", "footer gets contentinfo role assigned" );
ok( toolbar.find( "h1" ).attr( "role" ) === "heading", "heading role properly assigned");
});
asyncTest( "manual init works properly", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
expect( 3 );
var toolbar = $( "#testInit" ).toolbar({
create: function( event, ui ) {
ok( true, "create event fired" );
start();
}
});
ok( toolbar.hasClass( "ui-footer" ), "manual init gets footer class" );
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "ui-title assigned");
});
asyncTest( "external headers are created properly", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
expect( 3 );
var toolbar = $( "#testExternalHeader" ).toolbar({
create: function( event, ui ) {
ok( true, "external toolbar create event" );
start();
}
});
ok( toolbar.hasClass( "ui-header" ), "external toolbar gets ui-header class" );
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "ui-title assigned properly" );
});
asyncTest( "external footers are created properly", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
expect( 3 );
var toolbar = $( "#testExternalFooter" ).toolbar({
create: function( event, ui ) {
ok( true, "external toolbar create event" );
start();
}
});
ok( toolbar.hasClass( "ui-footer" ), "external toolbar gets ui-footer class" );
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "ui-title assigned properly" );
});
test( "destroy preserves original structure", function() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#destroyPage" );
var unEnhanced = $("#testDestroy").clone(),
destroyed = $("#testDestroy").toolbar().toolbar("destroy"),
unEnhancedHeader = $( "<div data-" + ( $.mobile.ns || "" ) + "role='header'>" +
"<h1>title</h1>" +
"</div>" ),
headerClone = unEnhancedHeader.clone();
$( "#destroyPage" ).append( headerClone );
headerClone.toolbar().toolbar("destroy");
ok( $.testHelper.domEqual( destroyed, unEnhanced ), "unEnhanced footer equals destroyed" );
ok( $.testHelper.domEqual( headerClone, unEnhancedHeader), "headers match after destroy" );
});
})(jQuery);

0 comments on commit 98ece81

Please sign in to comment.