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

Commit 8ea937f

Browse files
author
Gabriel Schulhof
committed
Navigation: When going forward, grab transition from current entry
Our history entries contain exactly one transition: The one used to arrive at the entry. In addition, the index of the current entry and that of the previous entry is updated before the value for the transition is computed. So, it makes sense, when going backwards, to read the transition value from the previous entry, because that value stores the transition that was used to get there from where history is currently at. However, when going forward, it makes no sense to read the transition value from the previous entry, because that one stores the transition that was used to reach it, not the transition that must be used to reach the next entry. Closes gh-7485 Fixes gh-1867 Fixes gh-4951
1 parent 8334371 commit 8ea937f

File tree

6 files changed

+259
-15
lines changed

6 files changed

+259
-15
lines changed

‎js/widgets/pagecontainer.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,8 @@ define( [
167167
return $.mobile.navigate.history;
168168
},
169169

170-
// TODO use _getHistory
171170
_getActiveHistory: function() {
172-
return $.mobile.navigate.history.getActive();
171+
return this._getHistory().getActive();
173172
},
174173

175174
// TODO the document base should be determined at creation
@@ -245,6 +244,13 @@ define( [
245244
return to || this._getInitialContent();
246245
},
247246

247+
_transitionFromHistory: function( direction, defaultTransition ) {
248+
var history = this._getHistory(),
249+
entry = ( direction === "back" ? history.getLast() : history.getActive() );
250+
251+
return ( entry && entry.transition ) || defaultTransition;
252+
},
253+
248254
_handleDialog: function( changePageOptions, data ) {
249255
var to, active, activeContent = this.getActivePage();
250256

@@ -271,7 +277,9 @@ define( [
271277
// as most of this is lost by the domCache cleaning
272278
$.extend( changePageOptions, {
273279
role: active.role,
274-
transition: active.transition,
280+
transition: this._transitionFromHistory(
281+
data.direction,
282+
changePageOptions.transition ),
275283
reverse: data.direction === "back"
276284
});
277285
}
@@ -286,7 +294,8 @@ define( [
286294

287295
// transition is false if it's the first page, undefined
288296
// otherwise (and may be overridden by default)
289-
transition = history.stack.length === 0 ? "none" : undefined,
297+
transition = history.stack.length === 0 ? "none" :
298+
this._transitionFromHistory( data.direction ),
290299

291300
// default options for the changPage calls made after examining
292301
// the current state of the page and the hash, NOTE that the
@@ -298,7 +307,7 @@ define( [
298307
};
299308

300309
$.extend( changePageOptions, data, {
301-
transition: ( history.getLast() || {} ).transition || transition
310+
transition: transition
302311
});
303312

304313
// TODO move to _handleDestination ?

‎tests/integration/pagecontainer/transition-choice-dialog-tests.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Popup Test Suite</title>
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+
14+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
15+
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
16+
<link rel="stylesheet" href="../../jqm-tests.css"/>
17+
<script src="../../../external/qunit/qunit.js"></script>
18+
<script>
19+
$.testHelper.asyncLoad([
20+
[ "widgets/dialog" ],
21+
[ "jquery.mobile.init" ],
22+
[
23+
"transition_choice_dialog_core.js"
24+
]
25+
]);
26+
</script>
27+
28+
<script src="../../swarminject.js"></script>
29+
</head>
30+
<body>
31+
<div id="qunit"></div>
32+
33+
<div data-nstest-role="page" id="a">
34+
<a id="go-to-b" data-nstest-transition="flip" data-nstest-rel="dialog" href="#b">Go to b</a>
35+
</div>
36+
37+
<div data-nstest-role="dialog" id="b">
38+
<a id="go-to-c" data-nstest-transition="slide" data-nstest-rel="dialog" href="#c">Go to c</a>
39+
</div>
40+
41+
<div data-nstest-role="dialog" id="c">
42+
</div>
43+
</body>
44+
</html>

‎tests/integration/pagecontainer/transition-choice-tests.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Popup Test Suite</title>
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+
14+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
15+
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
16+
<link rel="stylesheet" href="../../jqm-tests.css"/>
17+
<script src="../../../external/qunit/qunit.js"></script>
18+
<script>
19+
$.testHelper.asyncLoad([
20+
[ "jquery.mobile.init" ],
21+
[
22+
"transition_choice_core.js"
23+
]
24+
]);
25+
</script>
26+
27+
<script src="../../swarminject.js"></script>
28+
</head>
29+
<body>
30+
<div id="qunit"></div>
31+
32+
<div data-nstest-role="page" id="a">
33+
<a id="go-to-b" data-nstest-transition="flip" href="#b">Go to b</a>
34+
</div>
35+
36+
<div data-nstest-role="page" id="b">
37+
<a id="go-to-c" data-nstest-transition="slide" href="#c">Go to c</a>
38+
</div>
39+
40+
<div data-nstest-role="page" id="c">
41+
</div>
42+
</body>
43+
</html>

‎tests/integration/pagecontainer/transition_choice_core.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
( function() {
2+
3+
var origChange, callSequence;
4+
5+
module( "Pagecontainer transition choice", {
6+
setup: function() {
7+
callSequence = [];
8+
origChange = $.mobile.pagecontainer.prototype.change;
9+
$.mobile.pagecontainer.prototype.change = function( url, options ) {
10+
callSequence.push({
11+
transition: options.transition,
12+
reverse: !!( options.reverse )
13+
});
14+
return origChange.apply( this, arguments );
15+
};
16+
},
17+
teardown: function() {
18+
$.mobile.pagecontainer.prototype.change = origChange;
19+
}
20+
});
21+
22+
asyncTest( "Pagecontainer chooses correct transition", function() {
23+
debugger;
24+
25+
var pageContainer = $( ":mobile-pagecontainer" );
26+
27+
$.testHelper.pageSequence([
28+
function() {
29+
$( "#go-to-b" ).click();
30+
},
31+
function() {
32+
$( "#go-to-c" ).click();
33+
},
34+
function() {
35+
pageContainer.pagecontainer( "back" );
36+
},
37+
function() {
38+
pageContainer.pagecontainer( "forward" );
39+
},
40+
function() {
41+
pageContainer.pagecontainer( "back" );
42+
},
43+
function() {
44+
pageContainer.pagecontainer( "back" );
45+
},
46+
function() {
47+
pageContainer.pagecontainer( "forward" );
48+
},
49+
function() {
50+
pageContainer.pagecontainer( "back" );
51+
},
52+
function() {
53+
deepEqual( callSequence,
54+
[
55+
{ transition: "flip", reverse: false },
56+
{ transition: "slide", reverse: false },
57+
{ transition: "slide", reverse: true },
58+
{ transition: "slide", reverse: false },
59+
{ transition: "slide", reverse: true },
60+
{ transition: "flip", reverse: true },
61+
{ transition: "flip", reverse: false },
62+
{ transition: "flip", reverse: true }
63+
],
64+
"call sequence has resulted in the correct transitions" );
65+
66+
start();
67+
}
68+
]);
69+
});
70+
71+
})();

‎tests/integration/pagecontainer/transition_choice_dialog_core.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
( function() {
2+
3+
var origChange, callSequence;
4+
5+
module( "Pagecontainer transition choice", {
6+
setup: function() {
7+
callSequence = [];
8+
origChange = $.mobile.pagecontainer.prototype.change;
9+
$.mobile.pagecontainer.prototype.change = function( url, options ) {
10+
callSequence.push({
11+
transition: options.transition,
12+
reverse: !!( options.reverse )
13+
});
14+
return origChange.apply( this, arguments );
15+
};
16+
},
17+
teardown: function() {
18+
$.mobile.pagecontainer.prototype.change = origChange;
19+
}
20+
});
21+
22+
asyncTest( "Pagecontainer chooses correct transition", function() {
23+
debugger;
24+
25+
var pageContainer = $( ":mobile-pagecontainer" );
26+
27+
$.testHelper.pageSequence([
28+
function() {
29+
$( "#go-to-b" ).click();
30+
},
31+
function() {
32+
$( "#go-to-c" ).click();
33+
},
34+
function() {
35+
pageContainer.pagecontainer( "back" );
36+
},
37+
function() {
38+
pageContainer.pagecontainer( "back" );
39+
},
40+
function() {
41+
deepEqual( callSequence,
42+
[
43+
{ transition: "flip", reverse: false },
44+
{ transition: "slide", reverse: false },
45+
{ transition: "slide", reverse: true },
46+
{ transition: "flip", reverse: true }
47+
],
48+
"call sequence has resulted in the correct transitions" );
49+
50+
start();
51+
}
52+
]);
53+
});
54+
55+
})();

‎tests/unit/content/content_core.js‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -123,23 +123,45 @@
123123
return $( "<div>", {"class": "ui-dialog"} );
124124
};
125125

126-
proto._getActiveHistory = function() {
126+
proto._getHistory = function() {
127127
return {
128-
role: "foo",
129-
transition: "bar"
128+
length: 3,
129+
activeIndex: 1,
130+
lastIndex: 2,
131+
stack: [
132+
{
133+
role: "page",
134+
transition: "none"
135+
},
136+
{
137+
role: "foo",
138+
transition: "flip"
139+
},
140+
{
141+
role: "page",
142+
transition: "bar"
143+
}
144+
],
145+
getLast: function() {
146+
return this.stack[ this.lastIndex ];
147+
},
148+
getActive: function() {
149+
return this.stack[ this.activeIndex ];
150+
}
130151
};
131152
};
132153

133-
equal( opts.role, undefined );
134-
equal( opts.transition, undefined );
135-
equal( opts.reverse, undefined );
154+
deepEqual( opts.role, undefined, "Initially, role is undefined" );
155+
deepEqual( opts.transition, undefined, "Initially, transition is undefined" );
156+
deepEqual( opts.reverse, undefined, "Initially, reverse is undefined" );
136157

137158
// the pageUrl is returned for use as the target url when the active content is a dialog
138-
equal( proto._handleDialog( opts, {direction: "back", pageUrl: "baz" } ), "baz" );
159+
deepEqual( proto._handleDialog( opts, { direction: "back", pageUrl: "baz" } ), "baz",
160+
"pageUrl is returned" );
139161

140-
equal( opts.role, "foo" );
141-
equal( opts.transition, "bar" );
142-
equal( opts.reverse, true );
162+
deepEqual( opts.role, "foo", "Afterwards, role is 'foo'" );
163+
deepEqual( opts.transition, "bar", "Afterwards, transition is 'bar'" );
164+
deepEqual( opts.reverse, true, "Afterwards, reverse is true" );
143165
});
144166

145167
var base = "http://example.com/";

0 commit comments

Comments
 (0)