mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-23 01:27:36 +01:00
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
parent
74f2a32f52
commit
acb65e13c3
@ -66,7 +66,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
|
||||
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
|
||||
view.render();
|
||||
@ -350,7 +350,7 @@ themes.view.Details = wp.Backbone.View.extend({
|
||||
scroll = document.body.scrollTop;
|
||||
|
||||
// Clean the url structure
|
||||
themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
|
||||
themes.router.navigate( themes.router.baseUrl( '' ) );
|
||||
|
||||
// Restore scroll position
|
||||
document.body.scrollTop = scroll;
|
||||
@ -451,6 +451,12 @@ themes.view.Themes = wp.Backbone.View.extend({
|
||||
self.renderThemes( self.parent.page );
|
||||
});
|
||||
|
||||
this.listenTo( this.parent, 'theme:close', function() {
|
||||
if ( self.overlay ) {
|
||||
self.overlay.closeOverlay();
|
||||
}
|
||||
} );
|
||||
|
||||
// Bind keyboard events.
|
||||
$('body').on( 'keyup', function( event ) {
|
||||
if ( ! self.overlay ) {
|
||||
@ -573,7 +579,7 @@ themes.view.Themes = wp.Backbone.View.extend({
|
||||
this.model = self.collection.get( id );
|
||||
|
||||
// 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'
|
||||
this.setView( 'detail' );
|
||||
@ -659,6 +665,7 @@ themes.view.Search = wp.Backbone.View.extend({
|
||||
tagName: 'input',
|
||||
className: 'theme-search',
|
||||
id: 'theme-search-input',
|
||||
searching: false,
|
||||
|
||||
attributes: {
|
||||
placeholder: l10n.searchPlaceholder,
|
||||
@ -669,11 +676,24 @@ themes.view.Search = wp.Backbone.View.extend({
|
||||
'input': 'search',
|
||||
'keyup': '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.
|
||||
search: function( event ) {
|
||||
var options = {};
|
||||
|
||||
// Clear on escape.
|
||||
if ( event.type === 'keyup' && event.which === 27 ) {
|
||||
event.target.value = '';
|
||||
@ -681,12 +701,31 @@ themes.view.Search = wp.Backbone.View.extend({
|
||||
|
||||
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
|
||||
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 {
|
||||
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
|
||||
themes.routes = Backbone.Router.extend({
|
||||
|
||||
initialize: function() {
|
||||
this.routes = _.object([
|
||||
]);
|
||||
routes: {
|
||||
'themes.php?theme=:slug': 'theme',
|
||||
'themes.php?search=:query': 'search',
|
||||
'themes.php?s=:query': 'search',
|
||||
'themes.php': 'themes',
|
||||
'': 'themes'
|
||||
},
|
||||
|
||||
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
|
||||
@ -720,32 +771,39 @@ themes.Run = {
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
||||
// Render results
|
||||
this.view.render();
|
||||
this.routes();
|
||||
|
||||
// Set the initial theme
|
||||
if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
|
||||
this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
|
||||
}
|
||||
|
||||
// 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 });
|
||||
}
|
||||
Backbone.history.start({
|
||||
root: themes.data.settings.adminUrl,
|
||||
pushState: true,
|
||||
hashChange: false
|
||||
});
|
||||
},
|
||||
|
||||
routes: function() {
|
||||
var self = this;
|
||||
// Bind to our global thx object
|
||||
// so that the object is available to sub-views
|
||||
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 );
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
2
wp-admin/js/theme.min.js
vendored
2
wp-admin/js/theme.min.js
vendored
File diff suppressed because one or more lines are too long
@ -99,10 +99,7 @@ wp_localize_script( 'theme', '_wpThemeSettings', array(
|
||||
'canInstall' => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
|
||||
'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." ),
|
||||
'root' => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
|
||||
'theme' => esc_html( $theme ),
|
||||
'search' => esc_html( $search ),
|
||||
|
||||
'adminUrl' => parse_url( admin_url(), PHP_URL_PATH ),
|
||||
),
|
||||
'l10n' => array(
|
||||
'addNew' => __( 'Add New Theme' ),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user