Permalink
Browse files

Navigation: Remove $.mobile.changePage

Fixes gh-6691
Fixes gh-7946
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Jan 28, 2015
1 parent 88b088a commit 6ca700e64afdd53cd88af626090893c545f6156d
@@ -42,7 +42,7 @@
<h2>jQuery Mobile configuration</h2>
<p>The technique used in this <a href="backbone-require.html" rel="external">example page</a> is by no means the only technique available, but it is one of the most elegant. The Backbone.js router is used exclusively to handle all hashchange events, and the jQuery Mobile <code>$.mobile.changePage()</code> method is used to programmatically change the page.</p>
<p>The technique used in this <a href="backbone-require.html" rel="external">example page</a> is by no means the only technique available, but it is one of the most elegant. The Backbone.js router is used exclusively to handle all hashchange events, and the jQuery Mobile <code>$.mobile.pageContainer.pagecontainer( "change", url, options )</code> method is used to programmatically change the page.</p>
<p>Below are two internal jQuery Mobile properties that are turned off to allow this to happen:</p>
@@ -115,7 +115,7 @@
} );
</code>
</pre>
<p>Next, inside of the Backbone.js Router class object, we can respond to haschange events and manually call the jQuery Mobile <code>changePage()</code> method. Below is a small snippet of <strong>mobileRouter.js</strong>.</p>
<p>Next, inside of the Backbone.js Router class object, we can respond to haschange events and manually call the <code>$.mobile.pageContainer.pagecontainer( "change" )</code> method. Below is a small snippet of <strong>mobileRouter.js</strong>.</p>
<pre>
<code>
// Backbone.js Routes
@@ -133,7 +133,10 @@
home: function() {
// Programatically changes to the categories page
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
$.mobile.pageContainer.pagecontainer( "change", "#categories" , {
reverse: false,
changeHash: false
});
}
</code>
@@ -83,7 +83,8 @@ define([
// Triggers the custom `added` method (which the Category View listens for)
self.trigger( "added" );
// Resolves the deferred object (this triggers the changePage method inside of the Category Router)
// Resolves the deferred object (this triggers the pagecontainer change() method
// inside of the Category Router)
deferred.resolve();
}, 1000);
@@ -98,4 +99,4 @@ define([
// Returns the Model class
return Collection;
} );
} );
@@ -45,7 +45,10 @@ define([
home: function() {
// Programatically changes to the categories page
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
$.mobile.pageContainer.pagecontainer( "change", "#categories", {
reverse: false,
changeHash: false
});
},
@@ -65,7 +68,10 @@ define([
currentView.collection.fetch().done( function() {
// Programatically changes to the current categories page
$.mobile.changePage( "#" + type, { reverse: false, changeHash: false } );
$.mobile.pageContainer.pagecontainer( "change", "#" + type, {
reverse: false,
changeHash: false
});
} );
@@ -75,7 +81,10 @@ define([
else {
// Programatically changes to the current categories page
$.mobile.changePage( "#" + type, { reverse: false, changeHash: false } );
$.mobile.pageContainer.pagecontainer( "change", "#" + type, {
reverse: false,
changeHash: false
});
}
@@ -86,4 +95,4 @@ define([
// Returns the Router class
return CategoryRouter;
} );
} );
@@ -33,7 +33,7 @@ <h1>same page transitions</h1>
<div role="main" class="ui-content">
<h1>same page transitions</h1>
<div>All links within this page navigate to the page itself having the <code>allowSamePageTransition</code> option at <code>changePage()</code> method set to <strong>true</strong>. It seems, just the slide transition raises an issue so the page gets hidden.
<div>All links within this page navigate to the page itself having the <code>allowSamePageTransition</code> option at the <code>$.mobile.pageContainer.pagecontainer( "change" )</code> method set to <strong>true</strong>. It seems, just the slide transition raises an issue so the page gets hidden.
<label><input type="checkbox" id="cb1" data-theme="b"> reverse transition </label>
<label><input type="checkbox" id="cb2" data-theme="b"> add ui-page-active on pageshow </label>
</div>
@@ -59,9 +59,11 @@ <h1>same page transitions</h1>
var trans = $(this).text() || 'none',
rev = !!$('#cb1').attr('checked');
$.mobile.changePage('#page1', { transition: trans,
allowSamePageTransition: true,
reverse: rev } );
$.mobile.pageContainer.pagecontainer( "change", "#page1", {
transition: trans,
allowSamePageTransition: true,
reverse: rev
});
$('#p1').text( 'last transition: ' + trans + ' - reverse: ' + rev );
});
});
@@ -15,9 +15,11 @@
var trans = $(this).text() || 'none',
rev = !!$('#cb1').attr('checked');
$.mobile.changePage('#page1', { transition: trans,
allowSamePageTransition: true,
reverse: rev } );
$.mobile.pageContainer.pagecontainer( "change", "#page1", {
transition: trans,
allowSamePageTransition: true,
reverse: rev
});
$('#p1').text( 'last transition: ' + trans + ' - reverse: ' + rev );
});
});
View
@@ -132,7 +132,7 @@ $.extend( $.mobile, {
$.mobile.navigate.navigator.squash( path.parseLocation().href );
}
$.mobile.changePage( $.mobile.firstPage, {
$.mobile.pageContainer.pagecontainer( "change", $.mobile.firstPage, {
transition: "none",
reverse: true,
changeHash: false,
View
@@ -122,25 +122,6 @@ $.mobile._maybeDegradeTransition = $.mobile._maybeDegradeTransition || function(
};
// Exposed $.mobile methods
$.mobile.changePage = function( to, options ) {
$.mobile.pageContainer.pagecontainer( "change", to, options );
};
$.mobile.changePage.defaults = {
transition: undefined,
reverse: false,
changeHash: true,
fromHashChange: false,
role: undefined, // By default we rely on the role defined by the @data-role attribute.
duplicateCachedPage: undefined,
pageContainer: undefined,
showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
dataUrl: undefined,
fromPage: undefined,
allowSamePageTransition: false
};
$.mobile._registerInternalEvents = function() {
var getAjaxFormData = function( $form, calculateOnly ) {
var url,
@@ -231,7 +212,7 @@ $.mobile._registerInternalEvents = function() {
if ( !event.isDefaultPrevented() ) {
formData = getAjaxFormData( $( this ) );
if ( formData ) {
$.mobile.changePage( formData.url, formData.options );
$.mobile.pageContainer.pagecontainer( "change", formData.url, formData.options );
event.preventDefault();
}
}
@@ -394,7 +375,12 @@ $.mobile._registerInternalEvents = function() {
//this may need to be more specific as we use data-rel more
role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined;
$.mobile.changePage( href, { transition: transition, reverse: reverse, role: role, link: $link } );
$.mobile.pageContainer.pagecontainer( "change", href, {
transition: transition,
reverse: reverse,
role: role,
link: $link
});
event.preventDefault();
} );
@@ -48,7 +48,24 @@ $.widget( "mobile.pagecontainer", {
>>>>>>> Page: Style fixes powered by esformatter
options: {
theme: "a"
theme: "a",
changeOptions: {
transition: undefined,
reverse: false,
changeHash: true,
fromHashChange: false,
// By default we rely on the role defined by the @data-role attribute.
role: undefined,
duplicateCachedPage: undefined,
pageContainer: undefined,
//loading message shows by default when pages are being fetched during change()
showLoadMsg: true,
dataUrl: undefined,
fromPage: undefined,
allowSamePageTransition: false
}
},
initSelector: false,
@@ -284,7 +301,7 @@ $.widget( "mobile.pagecontainer", {
this.forward();
}
// Prevent changePage call
// Prevent change() call
return false;
} else {
@@ -347,11 +364,7 @@ $.widget( "mobile.pagecontainer", {
}
}
this._changeContent( this._handleDestination( to ), changePageOptions );
},
_changeContent: function( to, opts ) {
$.mobile.changePage( to, opts );
this.change( this._handleDestination( to ), changePageOptions );
},
_getBase: function() {
@@ -861,7 +874,7 @@ $.widget( "mobile.pagecontainer", {
// Release transition lock so navigation is free again
isPageTransitioning = false;
if ( pageTransitionQueue.length > 0 ) {
$.mobile.changePage.apply( null, pageTransitionQueue.pop() );
this.change.apply( this, pageTransitionQueue.pop() );
}
},
@@ -886,7 +899,7 @@ $.widget( "mobile.pagecontainer", {
isPageTransitioning = false;
// Store the original absolute url so that it can be provided to events in the
// triggerData of the subsequent changePage call
// triggerData of the subsequent change() call
options.absUrl = triggerData.absUrl;
this.transition( content, triggerData, options );
@@ -938,13 +951,13 @@ $.widget( "mobile.pagecontainer", {
change: function( to, options ) {
// If we are in the midst of a transition, queue the current request. We'll call
// changePage() once we're done with the current transition to service the request.
// change() once we're done with the current transition to service the request.
if ( isPageTransitioning ) {
pageTransitionQueue.unshift( arguments );
return;
}
var settings = $.extend( {}, $.mobile.changePage.defaults, options ),
var settings = $.extend( {}, this.options.changeOptions, options ),
triggerData = {};
// Make sure we have a fromPage.
@@ -980,7 +993,7 @@ $.widget( "mobile.pagecontainer", {
isDialog, alreadyThere, newPageTitle, params, cssTransitionDeferred, beforeTransition;
// If we are in the midst of a transition, queue the current request. We'll call
// changePage() once we're done with the current transition to service the request.
// change() once we're done with the current transition to service the request.
if ( isPageTransitioning ) {
// Make sure to only queue the to and settings values so the arguments work with a call
@@ -1035,11 +1048,11 @@ $.widget( "mobile.pagecontainer", {
toPage.jqmData( "role" ) === "dialog" ) &&
toPage.jqmData( "dialog" ) !== true;
// By default, we prevent changePage requests when the fromPage and toPage are the same
// By default, we prevent change() requests when the fromPage and toPage are the same
// element, but folks that generate content manually/dynamically and reuse pages want to be
// able to transition to the same page. To allow this, they will need to change the default
// value of allowSamePageTransition to true, *OR*, pass it in as an option when they
// manually call changePage(). It should be noted that our default transition animations
// manually call change(). It should be noted that our default transition animations
// assume that the formPage and toPage are different elements, so they may behave
// unexpectedly. It is up to the developer that turns on the allowSamePageTransitiona
// option to either turn off transition animations, or make sure that an appropriate
@@ -1063,7 +1076,7 @@ $.widget( "mobile.pagecontainer", {
// We need to make sure the page we are given has already been enhanced.
toPage.page( { role: settings.role } );
// If the changePage request was sent from a hashChange event, check to see if the page is
// If the change() request was sent from a hashChange event, check to see if the page is
// already within the urlHistory stack. If so, we'll assume the user hit the forward/back
// button and will try to match the transition accordingly.
if ( settings.fromHashChange ) {
@@ -22,7 +22,7 @@
if ( !!~location.search.indexOf( "no-history" ) ) {
$.mobile.pushStateEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.pagecontainer.prototype.options.changeOptions.changeHash = false;
}
});
})( jQuery );
Oops, something went wrong.

0 comments on commit 6ca700e

Please sign in to comment.