Themes: improve browser history support on new themes page.

When closing the theme preview, restore the previously selected tab. Avoid an issue where duplicate entries in the history prevented navigation. When re-opening the preview, remove bound event handlers before re-adding them.

Props afercia.
Fixes #36613.


git-svn-id: https://develop.svn.wordpress.org/trunk@40824 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein 2017-05-23 20:32:00 +00:00
parent 4f83e56f58
commit b83c9d4e7f
1 changed files with 20 additions and 8 deletions

View File

@ -492,7 +492,7 @@ themes.view.Theme = wp.Backbone.View.extend({
themes.focusedTheme = this.$el;
// Construct a new Preview view.
themes.currentPreview = preview = new themes.view.Preview({
themes.preview = preview = new themes.view.Preview({
model: this.model
});
@ -573,10 +573,6 @@ themes.view.Theme = wp.Backbone.View.extend({
self.current = self.model;
});
// Listen for closepreview events, closing the preview.
this.listenTo( preview, 'closepreview', function() {
preview.close();
});
},
// Handles .disabled classes for previous/next buttons in theme installer preview
@ -916,7 +912,13 @@ themes.view.Preview = themes.view.Details.extend({
}
}).removeClass( 'iframe-ready' );
themes.router.navigate( themes.router.baseUrl( '' ) );
// Restore the previous browse tab if available.
if ( themes.router.selectedTab ) {
themes.router.navigate( themes.router.baseUrl( '?browse=' + themes.router.selectedTab ) );
themes.router.selectedTab = false;
} else {
themes.router.navigate( themes.router.baseUrl( '' ) );
}
this.trigger( 'preview:close' );
this.undelegateEvents();
this.unbind();
@ -1651,6 +1653,9 @@ themes.view.Installer = themes.view.Appearance.extend({
sort: function( sort ) {
this.clearSearch();
// Track sorting so we can restore the correct tab when closing preview.
themes.router.selectedTab = sort;
$( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
@ -1914,6 +1919,12 @@ themes.RunInstaller = {
// Queries the API for the passed theme slug
themes.router.on( 'route:preview', function( slug ) {
// Remove existing handlers.
if ( themes.preview ) {
themes.preview.undelegateEvents();
themes.preview.unbind();
}
// If the theme preview is active, set the current theme.
if ( self.view.view.theme && self.view.view.theme.preview ) {
self.view.view.theme.model = self.view.collection.findWhere( { 'slug': slug } );
@ -1939,12 +1950,13 @@ themes.RunInstaller = {
themes.router.on( 'route:sort', function( sort ) {
if ( ! sort ) {
sort = 'featured';
themes.router.navigate( themes.router.baseUrl( '?browse=featured' ), { replace: true } );
}
self.view.sort( sort );
// Close the preview if open.
if ( themes.currentPreview ) {
themes.currentPreview.trigger( 'closepreview' );
if ( themes.preview ) {
themes.preview.close();
}
});