Changeset 40107 for trunk

Timestamp:

02/24/2017 05:47:30 PM (8 years ago)

Author:

adamsilverstein

Message:

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.

File:

• trunk/src/wp-admin/js/theme.js (modified) (5 diffs)

trunk/src/wp-admin/js/theme.js

@@ -493 +493 @@
 
         // Construct a new Preview view.
-        preview = new themes.view.Preview({
+        themes.currentPreview = preview = new themes.view.Preview({
             model: this.model
         });
@@ -572 +572 @@
         this.listenTo( preview, 'preview:close', function() {
             self.current = self.model;
+        });
+
+        // Listen for closepreview events, closing the preview.
+        this.listenTo( preview, 'closepreview', function() {
+            preview.close();
         });
     },
@@ -886 +891 @@
         }
 
-        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() {
@@ -1909 +1914 @@
         // 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' );
+                })
+
+            }
         });
 
@@ -1924 +1942 @@
             }
             self.view.sort( sort );
-            self.view.trigger( 'theme:close' );
+
+            // Close the preview if open.
+            if ( themes.currentPreview ) {
+                themes.currentPreview.trigger( 'closepreview' );
+            }
         });