Permalink
Browse files

Navigation: Hash processing demo updates page halfway through transition

(cherry picked from commit 4ef44a6)

Closes gh-7792
Fixes gh-7775
  • Loading branch information...
1 parent 780ac90 commit 2cca0f08d59c8223a9cb6d13b5d2a43ace0ee725 @gabrielschulhof gabrielschulhof committed Oct 20, 2014
Showing with 40 additions and 35 deletions.
  1. +40 −35 demos/navigation-hash-processing/index.php
@@ -17,54 +17,59 @@
// Helper function that splits a URL just the way we want it
var processHash = function( url ) {
var parsed = $.mobile.path.parseUrl( url ),
+ queryParameters = {},
hashQuery = parsed.hash.split( "?" );
+ // Create name: value pairs from the query parameters
+ $.each( ( hashQuery.length > 1 ? hashQuery[ 1 ] : "" ).split( "&" ), function() {
+ var pair = this.split( "=" );
+
+ if ( pair.length > 0 && pair[ 0 ] ) {
+ queryParameters[ pair[ 0 ] ] =
+ ( pair.length > 1 ? pair[ 1 ] : true );
+ }
+ });
+
return {
parsed: parsed,
cleanHash: ( hashQuery.length > 0 ? hashQuery[ 0 ] : "" ),
- queryParameters: ( hashQuery.length > 1 ? hashQuery[ 1 ] : "" )
+ queryParameters: queryParameters
};
};
$.mobile.document
- .on( "pagebeforechange", function( event, data ) {
- // When we go from #secondary-page to #secondary-page we wish to indicate
- // that a transition to the same page is allowed.
- if ( $.type( data.toPage ) === "string" &&
- data.options.fromPage &&
- data.options.fromPage.attr( "id" ) === "secondary-page" &&
- processHash( data.toPage ).cleanHash === "#secondary-page" ) {
+ // When the page is about to change, we may want to modify the navigation process to
+ // accommodate same-page navigation. Since we wish to make it appear as though we're navigating
+ // between different pages, we need to queue the page update to occur right at the halfway
+ // point of the transition associated with page-to-page navigation.
+ .on( "pagecontainerbeforechange", function( event, data ) {
+ var processedHash;
- data.options.allowSamePageTransition = true;
- }
- })
- .on( "pagecontainerbeforetransition", function( event, data ) {
- var queryParameters = {},
- processedHash = processHash( data.absUrl );
-
- // We only modify default behaviour when navigating to the secondary page
- if ( processedHash.cleanHash === "#secondary-page" ) {
-
- // Assemble query parameters object from the query string
- if ( processedHash.queryParameters ) {
- $.each( processedHash.queryParameters.split( "&" ),
- function( index, value ) {
- var pair = value.split( "=" );
-
- if ( pair.length > 0 && pair[ 0 ] ) {
- queryParameters[ pair[ 0 ] ] =
- ( pair.length > 1 ? pair[ 1 ] : true );
- }
- });
- }
+ if ( typeof data.toPage === "string" ) {
+ processedHash = processHash( data.toPage );
+
+ // We only affect navigation behavior when going to #secondary-page
+ if ( processedHash.cleanHash === "#secondary-page" ) {
+
+ // Set the url of the page - this will be used by navigation to set the
+ // URL in the location bar
+ $( "#secondary-page" ).jqmData( "url", processedHash.parsed.hash );
- // Set the title from the query parameters
- $( "#section" ).text( queryParameters.section );
+ // Allow same-page transition when coming from #secondary page
+ data.options.allowSamePageTransition = ( data.options.fromPage &&
+ data.options.fromPage.attr( "id" ) === "secondary-page" );
- // Set the url of the page - this will be used by navigation to set the
- // URL in the location bar
- $( "#secondary-page" ).jqmData( "url", processedHash.parsed.hash );
+ // Update the page when the outgoing animation completes. This involves two things:
+ // 1. Removing the active class from the button used for navigation.
+ // 2. Updating the page to make it look like the destination page.
+ $.mobile.activePage.animationComplete( function() {
+ $.mobile.removeActiveLinkClass( true );
+
+ // Set the title from the query parameters
+ $( "#section" ).text( processedHash.queryParameters.section );
+ });
+ }
}
});
})( jQuery );

0 comments on commit 2cca0f0

Please sign in to comment.