From dbfd852fc2f8e6590c8483c1f93b1d3fdb09bb00 Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamsilverstein@git.wordpress.org>
Date: Fri, 24 Feb 2017 17:47:30 +0000
Subject: [PATCH] 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
---
 src/wp-admin/js/theme.js | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index f919067329..6f12363b84 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -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.