Permalink
Browse files

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.

Built from https://develop.svn.wordpress.org/trunk@40107


git-svn-id: http://core.svn.wordpress.org/trunk@40044 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information...
adamsilverstein committed Feb 24, 2017
1 parent eb8457d commit 33286df4c10f9db9e438ded1b074a0c6463c6863
Showing with 31 additions and 9 deletions.
  1. +29 −7 wp-admin/js/theme.js
  2. +1 −1 wp-admin/js/theme.min.js
  3. +1 −1 wp-includes/version.php
View
@@ -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.
Oops, something went wrong.

0 comments on commit 33286df

Please sign in to comment.