This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Toolbar: Back button correctly appears/disappears on external toolbar
This commit makes the following modifications: 1. Rename _addBackButton() to _updateBackButton() and move the decision making as to whether to add or remove a back button from _setOptions() into _updateBackButton(). 2. Call _updateBackButton() from refresh() as well. This will cause the back button to be updated whenever the page changes, because the "pageshow" handler is hooked up to refresh(). 3. Modify _addHeaderButtonClasses to not recognize the back button as a left button. 4. Modify the preconditions for adding a button to include an alternative to checking the page's URL for instances where there is no page present - i.e. when the toolbar is external. In such cases one must add a back button if the active item on the history stack is not the first item. (cherry picked from commit b0685b3) Closes gh-7188 Fixes gh-6950
- Loading branch information
Gabriel Schulhof
committed
Jun 6, 2014
1 parent
ea0533f
commit da816e7
Showing
3 changed files
with
160 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<!doctype html> | ||
|
||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<title>jQuery Mobile Toolbar Test Suite</title> | ||
|
||
<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([ | ||
[ | ||
"widgets/toolbar", | ||
"jquery.mobile.buttonMarkup" | ||
], | ||
[ "jquery.mobile.init" ], | ||
[ "external_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 id="header" data-nstest-role="header" data-nstest-add-back-btn="true"> | ||
<h1>Header</h1> | ||
</div> | ||
<div data-nstest-role="page"> | ||
<div class="ui-content" role="main"> | ||
<a href="#page2" id="go-to-page-2">Go to page 2</a> | ||
</div> | ||
</div> | ||
<div data-nstest-role="page" id="page2"> | ||
<div data-nstest-role="content"> | ||
<a href="#page3" id="go-to-page-3">Go to page 3</a> | ||
<p>Content</p> | ||
</div> | ||
</div> | ||
<div data-nstest-role="page" id="page3"> | ||
<div data-nstest-role="content"> | ||
<p>Content</p> | ||
</div> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
asyncTest( "Back button added to external toolbar", function() { | ||
$( "#header" ).toolbar(); | ||
$.testHelper.pageSequence([ | ||
function() { | ||
$( "#go-to-page-2" ).click(); | ||
}, | ||
function() { | ||
deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1, | ||
"After navigating to page 2 exactly one back button " + | ||
"appears on the external toolbar" ); | ||
$.mobile.back(); | ||
}, | ||
function() { | ||
deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 0, | ||
"After going back from page 2 no back button appears on the external toolbar" ); | ||
$( "#go-to-page-2" ).click(); | ||
}, | ||
function() { | ||
deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1, | ||
"After navigating to page 2 again exactly one back button " + | ||
"appears on the external toolbar" ); | ||
$( "#go-to-page-3" ).click(); | ||
}, | ||
function() { | ||
deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1, | ||
"After navigating to page 3 exactly one back button " + | ||
"appears on the external toolbar" ); | ||
$.mobile.back(); | ||
}, | ||
function() { | ||
deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1, | ||
"After navigating back to page 2 exactly one back button " + | ||
"appears on the external toolbar" ); | ||
$.mobile.back(); | ||
}, | ||
function() { | ||
deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 0, | ||
"After navigating back from page 2 no back button " + | ||
"appears on the external toolbar" ); | ||
start(); | ||
}, | ||
]); | ||
}); |