Improve pushState, replaceState and routing for Themes page

* Uses `pushState()` generally
* Uses `replaceState()` when updating a search query (so no history cruft from typing)

fixes #27198. props gcorne, adamsilverstein.
Built from https://develop.svn.wordpress.org/trunk@27268


git-svn-id: http://core.svn.wordpress.org/trunk@27124 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2014-02-25 19:22:13 +00:00
parent 74f2a32f52
commit acb65e13c3
3 changed files with 86 additions and 31 deletions

View File

@ -66,7 +66,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
return; return;
} }
view = new themes.view.Search({ collection: self.collection }); view = new themes.view.Search({ collection: self.collection, parent: this });
// Render and append after screen title // Render and append after screen title
view.render(); view.render();
@ -350,7 +350,7 @@ themes.view.Details = wp.Backbone.View.extend({
scroll = document.body.scrollTop; scroll = document.body.scrollTop;
// Clean the url structure // Clean the url structure
themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); themes.router.navigate( themes.router.baseUrl( '' ) );
// Restore scroll position // Restore scroll position
document.body.scrollTop = scroll; document.body.scrollTop = scroll;
@ -451,6 +451,12 @@ themes.view.Themes = wp.Backbone.View.extend({
self.renderThemes( self.parent.page ); self.renderThemes( self.parent.page );
}); });
this.listenTo( this.parent, 'theme:close', function() {
if ( self.overlay ) {
self.overlay.closeOverlay();
}
} );
// Bind keyboard events. // Bind keyboard events.
$('body').on( 'keyup', function( event ) { $('body').on( 'keyup', function( event ) {
if ( ! self.overlay ) { if ( ! self.overlay ) {
@ -573,7 +579,7 @@ themes.view.Themes = wp.Backbone.View.extend({
this.model = self.collection.get( id ); this.model = self.collection.get( id );
// Trigger a route update for the current model // Trigger a route update for the current model
themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } ); themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ) );
// Sets this.view to 'detail' // Sets this.view to 'detail'
this.setView( 'detail' ); this.setView( 'detail' );
@ -659,6 +665,7 @@ themes.view.Search = wp.Backbone.View.extend({
tagName: 'input', tagName: 'input',
className: 'theme-search', className: 'theme-search',
id: 'theme-search-input', id: 'theme-search-input',
searching: false,
attributes: { attributes: {
placeholder: l10n.searchPlaceholder, placeholder: l10n.searchPlaceholder,
@ -669,11 +676,24 @@ themes.view.Search = wp.Backbone.View.extend({
'input': 'search', 'input': 'search',
'keyup': 'search', 'keyup': 'search',
'change': 'search', 'change': 'search',
'search': 'search' 'search': 'search',
'blur': 'pushState'
},
initialize: function( options ) {
this.parent = options.parent;
this.listenTo( this.parent, 'theme:close', function() {
this.searching = false;
} );
}, },
// Runs a search on the theme collection. // Runs a search on the theme collection.
search: function( event ) { search: function( event ) {
var options = {};
// Clear on escape. // Clear on escape.
if ( event.type === 'keyup' && event.which === 27 ) { if ( event.type === 'keyup' && event.which === 27 ) {
event.target.value = ''; event.target.value = '';
@ -681,12 +701,31 @@ themes.view.Search = wp.Backbone.View.extend({
this.collection.doSearch( event.target.value ); this.collection.doSearch( event.target.value );
// if search is initiated and key is not return
if ( this.searching && event.which !== 13 ) {
options.replace = true;
} else {
this.searching = true;
}
// Update the URL hash // Update the URL hash
if ( event.target.value ) { if ( event.target.value ) {
themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } ); themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), options );
} else { } else {
themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); themes.router.navigate( themes.router.baseUrl( '' ) );
} }
},
pushState: function( event ) {
var url = themes.router.baseUrl( '' );
if ( event.target.value ) {
url = themes.router.baseUrl( '?search=' + event.target.value );
}
this.searching = false;
themes.router.navigate( url );
} }
}); });
@ -694,14 +733,26 @@ themes.view.Search = wp.Backbone.View.extend({
// Listens to [theme] and [search] params // Listens to [theme] and [search] params
themes.routes = Backbone.Router.extend({ themes.routes = Backbone.Router.extend({
initialize: function() { routes: {
this.routes = _.object([ 'themes.php?theme=:slug': 'theme',
]); 'themes.php?search=:query': 'search',
'themes.php?s=:query': 'search',
'themes.php': 'themes',
'': 'themes'
}, },
baseUrl: function( url ) { baseUrl: function( url ) {
return themes.data.settings.root + url; return 'themes.php' + url;
},
search: function( query ) {
$( '.theme-search' ).val( query );
},
themes: function() {
$( '.theme-search' ).val( '' );
} }
}); });
// Execute and setup the application // Execute and setup the application
@ -720,32 +771,39 @@ themes.Run = {
}, },
render: function() { render: function() {
// Render results // Render results
this.view.render(); this.view.render();
this.routes(); this.routes();
// Set the initial theme Backbone.history.start({
if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){ root: themes.data.settings.adminUrl,
this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) ); pushState: true,
} hashChange: false
});
// Set the initial search
if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
$( '.theme-search' ).val( themes.data.settings.search );
this.themes.doSearch( themes.data.settings.search );
}
// Start the router if browser supports History API
if ( window.history && window.history.pushState ) {
// Calls the routes functionality
Backbone.history.start({ pushState: true, silent: true });
}
}, },
routes: function() { routes: function() {
var self = this;
// Bind to our global thx object // Bind to our global thx object
// so that the object is available to sub-views // so that the object is available to sub-views
themes.router = new themes.routes(); themes.router = new themes.routes();
// Handles theme details route event
themes.router.on( 'route:theme', function( slug ) {
self.view.view.expand( slug );
});
themes.router.on( 'route:themes', function() {
self.themes.doSearch( '' );
self.view.trigger( 'theme:close' );
});
// Handles search route event
themes.router.on( 'route:search', function( query ) {
self.view.trigger( 'theme:close' );
self.themes.doSearch( query );
});
} }
}; };

File diff suppressed because one or more lines are too long

View File

@ -99,10 +99,7 @@ wp_localize_script( 'theme', '_wpThemeSettings', array(
'canInstall' => ( ! is_multisite() && current_user_can( 'install_themes' ) ), 'canInstall' => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
'installURI' => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null, 'installURI' => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ), 'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
'root' => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ), 'adminUrl' => parse_url( admin_url(), PHP_URL_PATH ),
'theme' => esc_html( $theme ),
'search' => esc_html( $search ),
), ),
'l10n' => array( 'l10n' => array(
'addNew' => __( 'Add New Theme' ), 'addNew' => __( 'Add New Theme' ),