Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 98ece81

Browse files
cgackarschmitz
cgack
authored and
arschmitz
committed
Toolbar: Sorts our proper destroy methods for toolbar and fixedtoolbar
Fixes gh-6987 Fixes gh-6939 Closes gh-7252 (cherry picked from commit 3efe6fe)
1 parent 7f3f585 commit 98ece81

File tree

6 files changed

+269
-7
lines changed

6 files changed

+269
-7
lines changed

‎js/widgets/fixedToolbar.js‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque
3535

3636
_create: function() {
3737
this._super();
38+
this.pagecontainer = $( ":mobile-pagecontainer" );
3839
if ( this.options.position === "fixed" && !this.options.supportBlacklist() ) {
3940
this._makeFixed();
4041
}
@@ -277,12 +278,30 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque
277278
},
278279

279280
_destroy: function() {
280-
var $el = this.element,
281-
header = $el.hasClass( "ui-header" );
281+
var pageClasses, toolbarClasses, hasFixed, header, hasFullscreen,
282+
page = this.pagecontainer.pagecontainer( "getActivePage" );
282283

283-
$el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), "" );
284-
$el.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
285-
$el.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
284+
this._super();
285+
if ( this.options.position === "fixed" ) {
286+
hasFixed = $( "body>.ui-" + this.role + "-fixed" )
287+
.add( page.find( ".ui-" + this.options.role + "-fixed" ) )
288+
.not( this.element ).length > 0;
289+
hasFullscreen = $( "body>.ui-" + this.role + "-fixed" )
290+
.add( page.find( ".ui-" + this.options.role + "-fullscreen" ) )
291+
.not( this.element ).length > 0;
292+
toolbarClasses = "ui-header-fixed ui-footer-fixed ui-header-fullscreen in out" +
293+
" ui-footer-fullscreen fade slidedown slideup ui-fixed-hidden";
294+
this.element.removeClass( toolbarClasses );
295+
if ( !hasFullscreen ) {
296+
pageClasses = "ui-page-" + this.role + "-fullscreen";
297+
}
298+
if ( !hasFixed ) {
299+
header = this.role === "header";
300+
pageClasses += " ui-page-" + this.role + "-fixed";
301+
page.css( "padding-" + ( header ? "top" : "bottom" ), "" );
302+
}
303+
page.removeClass( pageClasses );
304+
}
286305
}
287306

288307
});

‎js/widgets/toolbar.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ define( [
145145

146146
// Skip back button creation if one is already present
147147
if ( !backButton.attached ) {
148-
backButton.element = ( backButton.element ||
148+
this.backButton = backButton.element = ( backButton.element ||
149149
$( "<a role='button' href='javascript:void(0);' " +
150150
"class='ui-btn ui-corner-all ui-shadow ui-btn-left " +
151151
( theme ? "ui-btn-" + theme + " " : "" ) +
@@ -170,6 +170,27 @@ define( [
170170
"role": "heading",
171171
"aria-level": "1"
172172
});
173+
},
174+
_destroy: function() {
175+
var currentTheme;
176+
177+
this.element.children( "h1, h2, h3, h4, h5, h6" )
178+
.removeClass( "ui-title" )
179+
.removeAttr( "role" )
180+
.removeAttr( "aria-level" );
181+
182+
if ( this.role === "header" ) {
183+
this.element.children( "a, button" )
184+
.removeClass( "ui-btn-left ui-btn-right ui-btn ui-shadow ui-corner-all" );
185+
if ( this.backButton) {
186+
this.backButton.remove();
187+
}
188+
}
189+
190+
currentTheme = this.options.theme ? this.options.theme : "inherit";
191+
this.element.removeClass( "ui-bar-" + currentTheme );
192+
193+
this.element.removeClass( "ui-" + this.role ).removeAttr( "role" );
173194
}
174195
});
175196

‎tests/integration/fixed-toolbar/fixedToolbar.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,4 +313,66 @@
313313
asyncTest( "data-visible-on-page-show shows toolbars when undefined", function() {
314314
asyncTestFooterAndHeader( "#page-show-visible-undefined", true );
315315
});
316+
317+
asyncTest( "page-retains-fixed-header-on-popup-remove" , function() {
318+
expect( 1 );
319+
320+
var page = $( "#page-retains-fixed-header-on-popup-removed" ).page();
321+
322+
$.testHelper.pageSequence([
323+
function() {
324+
$( ":mobile-pagecontainer" ).pagecontainer( "change", page );
325+
},
326+
327+
function() {
328+
var popup;
329+
330+
popup = $( "<div data-nstest-role='popup' />" )
331+
.append( "<div data-nstest-role='header' />" )
332+
.append( "<h1>Dynamic Popup</h1>" );
333+
334+
page.append( popup );
335+
336+
popup.popup( { positionTo: "window" } ).trigger( "create" );
337+
338+
popup.on( "popupafterclose", function() {
339+
popup.remove();
340+
ok( $( ":mobile-pagecontainer" ).pagecontainer( "getActivePage" )
341+
.hasClass( "ui-page-header-fixed" ),
342+
"page should retain the fixed header after popup is removed" );
343+
start();
344+
});
345+
346+
popup.popup( "open" ).popup( "close" );
347+
},
348+
349+
function() {
350+
351+
$.mobile.pageContainer.change( "#default" );
352+
353+
}
354+
]);
355+
});
356+
357+
asyncTest( "destroy preserves original markup" , function() {
358+
expect( 1 );
359+
360+
$.testHelper.pageSequence([
361+
function() {
362+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#page-destroy-test" );
363+
},
364+
function() {
365+
var unEnhanced = $("#testDestroyFixedFullscreen").clone(),
366+
destroyed = $("#testDestroyFixedFullscreen").toolbar().toolbar("destroy");
367+
368+
ok( $.testHelper.domEqual( destroyed, unEnhanced ),
369+
"unEnhanced equals destroyed" );
370+
start();
371+
},
372+
function() {
373+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
374+
}
375+
]);
376+
});
377+
316378
})(jQuery);

‎tests/integration/fixed-toolbar/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"jquery.mobile.buttonMarkup",
1919
"navigation/method",
2020
"widgets/toolbar",
21-
"widgets/fixedToolbar"
21+
"widgets/fixedToolbar",
22+
"widgets/popup"
2223
],
2324
[ "jquery.mobile.init" ],
2425
[ "./fixedToolbar.js" ]
@@ -101,5 +102,13 @@ <h1>foo</h1>
101102
<div data-nstest-role="header" data-nstest-fullscreen="true" data-nstest-position="fixed"></div>
102103
<div data-nstest-role="footer" data-nstest-fullscreen="true" data-nstest-position="fixed"></div>
103104
</div>
105+
<div data-nstest-role="page" id="page-retains-fixed-header-on-popup-removed">
106+
<div data-nstest-role="header" data-nstest-position="fixed"></div>
107+
</div>
108+
<div data-nstest-role="page" id="page-destroy-test">
109+
<div id="testDestroyFixedFullscreen" data-nstest-position="fixed" data-nstest-fullscreen="true" >
110+
<h1>title</h1>
111+
</div>
112+
</div>
104113
</body>
105114
</html>

‎tests/unit/toolbar/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>jQuery Mobile Toolbar Test Suite</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<script src="../../../external/requirejs/require.js"></script>
9+
<script src="../../../js/requirejs.config.js"></script>
10+
<script src="../../../js/jquery.tag.inserter.js"></script>
11+
<script src="../../jquery.setNameSpace.js"></script>
12+
<script src="../../../tests/jquery.testHelper.js"></script>
13+
<script src="../../../external/qunit/qunit.js"></script>
14+
<script>
15+
$.testHelper.asyncLoad([
16+
[
17+
"navigation/method",
18+
"buttonMarkup",
19+
"widgets/toolbar",
20+
],
21+
[ "init"],
22+
[ "./toolbar_core.js" ]
23+
]);
24+
</script>
25+
26+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
27+
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
28+
<link rel="stylesheet" href="../../jqm-tests.css"/>
29+
30+
<script src="../../swarminject.js"></script>
31+
</head>
32+
<body>
33+
34+
<div id="qunit"></div>
35+
<div data-nstest-role="page" id="default">
36+
<div data-nstest-role="header" id="testHeaderClasses">
37+
<h1>Header</h1>
38+
</div>
39+
<div data-nstest-role="footer" id="testFooterClasses">
40+
<h1>Footer</h1>
41+
</div>
42+
<div id="testInit">
43+
<h1>Header</h1>
44+
</div>
45+
</div>
46+
<div data-nstest-role="page" id="destroyPage">
47+
<div id="testDestroy" >
48+
<h1>title</h1>
49+
</div>
50+
</div>
51+
52+
<div data-nstest-role="header" class="ui-screen-hidden" id="testExternalHeader">
53+
<h1>External Header</h1>
54+
</div>
55+
56+
<div data-nstest-role="footer" class="ui-screen-hidden" id="testExternalFooter">
57+
<h1>External Footer</h1>
58+
</div>
59+
60+
</body>
61+
</html>

‎tests/unit/toolbar/toolbar_core.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*
2+
* mobile Fixed Toolbar unit tests
3+
*/
4+
(function($){
5+
module( "toolbar" );
6+
7+
test( "header classes and roles assigned correctly", function() {
8+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
9+
var toolbar = $( "#testHeaderClasses" );
10+
11+
ok( toolbar.hasClass( "ui-header" ), "toolbar gets ui-header after init" );
12+
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "toolbar title assigned correctly");
13+
ok( toolbar.attr( "role" ) === "banner", "header gets banner role assigned" );
14+
ok( toolbar.find( "h1" ).attr( "role" ) === "heading", "heading role properly assigned");
15+
});
16+
17+
18+
test( "footer classes and roles assigned correctly", function() {
19+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
20+
var toolbar = $( "#testFooterClasses" );
21+
22+
ok( toolbar.hasClass( "ui-footer" ), "toolbar gets ui-footer after init" );
23+
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "toolbar title assigned correctly");
24+
ok( toolbar.attr( "role" ) === "contentinfo", "footer gets contentinfo role assigned" );
25+
ok( toolbar.find( "h1" ).attr( "role" ) === "heading", "heading role properly assigned");
26+
});
27+
28+
29+
asyncTest( "manual init works properly", function() {
30+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
31+
expect( 3 );
32+
33+
var toolbar = $( "#testInit" ).toolbar({
34+
create: function( event, ui ) {
35+
ok( true, "create event fired" );
36+
start();
37+
}
38+
});
39+
40+
ok( toolbar.hasClass( "ui-footer" ), "manual init gets footer class" );
41+
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "ui-title assigned");
42+
});
43+
44+
asyncTest( "external headers are created properly", function() {
45+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
46+
expect( 3 );
47+
48+
var toolbar = $( "#testExternalHeader" ).toolbar({
49+
create: function( event, ui ) {
50+
ok( true, "external toolbar create event" );
51+
start();
52+
}
53+
});
54+
55+
ok( toolbar.hasClass( "ui-header" ), "external toolbar gets ui-header class" );
56+
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "ui-title assigned properly" );
57+
});
58+
59+
asyncTest( "external footers are created properly", function() {
60+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#default" );
61+
expect( 3 );
62+
63+
var toolbar = $( "#testExternalFooter" ).toolbar({
64+
create: function( event, ui ) {
65+
ok( true, "external toolbar create event" );
66+
start();
67+
}
68+
});
69+
70+
ok( toolbar.hasClass( "ui-footer" ), "external toolbar gets ui-footer class" );
71+
ok( toolbar.find( "h1" ).hasClass( "ui-title" ), "ui-title assigned properly" );
72+
});
73+
74+
test( "destroy preserves original structure", function() {
75+
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#destroyPage" );
76+
77+
var unEnhanced = $("#testDestroy").clone(),
78+
destroyed = $("#testDestroy").toolbar().toolbar("destroy"),
79+
unEnhancedHeader = $( "<div data-" + ( $.mobile.ns || "" ) + "role='header'>" +
80+
"<h1>title</h1>" +
81+
"</div>" ),
82+
headerClone = unEnhancedHeader.clone();
83+
$( "#destroyPage" ).append( headerClone );
84+
headerClone.toolbar().toolbar("destroy");
85+
86+
ok( $.testHelper.domEqual( destroyed, unEnhanced ), "unEnhanced footer equals destroyed" );
87+
ok( $.testHelper.domEqual( headerClone, unEnhancedHeader), "headers match after destroy" );
88+
});
89+
90+
})(jQuery);

0 commit comments

Comments
 (0)