sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Themes: enable browser history support in add new theme screen. 

Enable history support for the new theme screen, including navigating theme details and closing the details modal. Theme selection is now also bookmark-able, so linking to a URL like `/wp-admin/theme-install.php?theme=twentyseventeen` correctly opens the theme preview.

Props dd32.
Fixes #36613.


git-svn-id: https://develop.svn.wordpress.org/trunk@40107 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein 2017-02-24 17:47:30 +00:00
parent 0f9dd5f88f
commit dbfd852fc2
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/wp-admin/js/theme.js
View File

@ -492,7 +492,7 @@ themes.view.Theme = wp.Backbone.View.extend({
themes.focusedTheme = this.$el;
// Construct a new Preview view.
preview = new themes.view.Preview({
themes.currentPreview = preview = new themes.view.Preview({
model: this.model
});
@ -572,6 +572,11 @@ themes.view.Theme = wp.Backbone.View.extend({
this.listenTo( preview, 'preview:close', function() {
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
@ -885,7 +890,7 @@ themes.view.Preview = themes.view.Details.extend({
self.tooglePreviewDeviceButtons( currentPreviewDevice );
}
themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: false } );
this.$el.fadeIn( 200, function() {
$body.addClass( 'theme-installer-active full-overlay-active' );
@ -1908,11 +1913,24 @@ themes.RunInstaller = {
// Handles `theme` route event
// Queries the API for the passed theme slug
themes.router.on( 'route:preview', function( slug ) {
request.theme = slug;
self.view.collection.query( request );
self.view.collection.once( 'update', function() {
// 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 } );
self.view.view.theme.preview();
});
} else {
// Select the theme by slug.
request.theme = slug;
self.view.collection.query( request );
self.view.collection.trigger( 'update' );
// Open the theme preview.
self.view.collection.once( 'query:success', function() {
$( 'div[data-slug="' + slug + '"]' ).trigger( 'click' );
})
}
});
// Handles sorting / browsing routes
@ -1923,7 +1941,11 @@ themes.RunInstaller = {
sort = 'featured';
}
self.view.sort( sort );
self.view.trigger( 'theme:close' );
// Close the preview if open.
if ( themes.currentPreview ) {
themes.currentPreview.trigger( 'closepreview' );
}
});
// The `search` route event. The router populates the input field.