Make the Backbone routes pushSTate capable with ?theme=themename type urls instead of hashes. Same applies to search queries.

Props adamsilverstein, nacin
fixes #25963

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


git-svn-id: http://core.svn.wordpress.org/trunk@26655 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/theme.js

@@ -293,7 +293,7 @@ themes.view.Details = wp.Backbone.View.extend({
 				scroll = document.body.scrollTop;
 
 				// Clean the url structure
-				themes.router.navigate( '' );
+				themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 
 				// Restore scroll position
 				document.body.scrollTop = scroll;
@@ -301,28 +301,8 @@ themes.view.Details = wp.Backbone.View.extend({
 		}
 	},
 
-	// Handles arrow keys navigation for the overlay
+	// Handles .disabled classes for next/previous buttons
-	// Triggers theme:next and theme:previous events
 	navigation: function() {
-		var self = this;
-
-		$( 'body' ).on( 'keyup', function( event ) {
-
-			// Pressing the right arrow key fires a theme:next event
-			if ( event.keyCode === 39 ) {
-				self.trigger( 'theme:next', self.model.cid );
-			}
-
-			// Pressing the left arrow key fires a theme:previous event
-			if ( event.keyCode === 37 ) {
-				self.trigger( 'theme:previous', self.model.cid );
-			}
-
-			// Pressing the escape key closes the theme details panel
-			if ( event.keyCode === 27 ) {
-				self.collapse();
-			}
-		});
 
 		// Disable Left/Right when at the start or end of the collection
 		if ( this.model.cid === this.model.collection.at(0).cid ) {
@@ -377,6 +357,7 @@ themes.view.Details = wp.Backbone.View.extend({
 themes.view.Themes = wp.Backbone.View.extend({
 
 	className: 'themes',
+	$overlay: $( 'div.theme-overlay' ),
 
 	// Number to keep track of scroll position
 	// while in theme-overlay mode
@@ -407,6 +388,24 @@ themes.view.Themes = wp.Backbone.View.extend({
 		this.listenTo( this.parent, 'theme:scroll', function() {
 			self.renderThemes( self.parent.page );
 		});
+
+		// Bind keyboard events.
+		$('body').on( 'keyup', function( event ) {
+			// Pressing the right arrow key fires a theme:next event
+			if ( event.keyCode === 39 ) {
+				self.overlay.nextTheme();
+			}
+
+			// Pressing the left arrow key fires a theme:previous event
+			if ( event.keyCode === 37 ) {
+				self.overlay.previousTheme();
+			}
+
+			// Pressing the escape key fires a theme:collapse event
+			if ( event.keyCode === 27 ) {
+				self.overlay.collapse( event );
+			}
+		});
 	},
 
 	// Manages rendering of theme pages
@@ -508,7 +507,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 		this.model = self.collection.get( id );
 
 		// Trigger a route update for the current model
-		themes.router.navigate( 'theme/' + this.model.id );
+		themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
 
 		// Sets this.view to 'detail'
 		this.setView( 'detail' );
@@ -520,7 +519,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 		});
 
 		this.overlay.render();
-		this.$el.append( this.overlay.el );
+		this.$overlay.html( this.overlay.el );
 
 		// Bind to theme:next and theme:previous
 		// triggered by the arrow keys
@@ -558,8 +557,8 @@ themes.view.Themes = wp.Backbone.View.extend({
 			this.overlay.closeOverlay();
 
 			// Trigger a route update for the current model
-			// that renders the new theme's overlay
+			self.theme.trigger( 'theme:expand', nextModel.cid );
-			themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
+
 		}
 	},
 
@@ -582,8 +581,8 @@ themes.view.Themes = wp.Backbone.View.extend({
 			this.overlay.closeOverlay();
 
 			// Trigger a route update for the current model
-			// that renders the new theme's overlay
+			self.theme.trigger( 'theme:expand', previousModel.cid );
-			themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
+
 		}
 	}
 });
@@ -617,9 +616,9 @@ themes.view.Search = wp.Backbone.View.extend({
 
 		// Update the URL hash
 		if ( event.target.value ) {
-			themes.router.navigate( 'search/' + event.target.value, { replace: true } );
+			themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
 		} else {
-			themes.router.navigate( '' );
+			themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 		}
 	}
 });
@@ -628,20 +627,22 @@ themes.view.Search = wp.Backbone.View.extend({
 // Listens to [theme] and [search] params
 themes.routes = Backbone.Router.extend({
 
-	routes: {
+	initialize: function() {
-		'search/*query': 'search',
+		this.routes = _.object([
-		'theme/*slug': 'theme'
+		]);
+	},
+
+	baseUrl: function( url ) {
+		return themes.data.settings.root + url;
 	},
 
 	// Set the search input value based on url
 	search: function( query ) {
 		$( '.theme-search' ).val( query );
+		self.themes.doSearch( query );
 	}
 });
 
-// Make routes easily extendable
-_.extend( themes.routes, themes.data.settings.extraRoutes );
-
 // Execute and setup the application
 themes.Run = {
 	init: function() {
@@ -660,12 +661,24 @@ themes.Run = {
 	render: function() {
 		// Render results
 		this.view.render();
-
-		// Calls the routes functionality
 		this.routes();
 
-		// Set ups history with pushState and our root
+		// Set the initial theme
-		Backbone.history.start({ root: themes.data.settings.root });
+		if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
+			this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
+		}
+
+		// Set the initial search
+		if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
+			$( '.theme-search' ).val( themes.data.settings.search );
+			this.themes.doSearch( themes.data.settings.search );
+		}
+
+		// Start the router if browser supports History API
+		if ( window.history && window.history.pushState ) {
+			// Calls the routes functionality
+			Backbone.history.start({ pushState: true, silent: true });
+		}
 	},
 
 	routes: function() {
@@ -673,16 +686,6 @@ themes.Run = {
 		// Bind to our global thx object
 		// so that the object is available to sub-views
 		themes.router = new themes.routes();
-
-		// Handles theme details route event
-		themes.router.on( 'route:theme', function( slug ) {
-			self.view.view.expand( slug );
-		});
-
-		// Handles search route event
-		themes.router.on( 'route:search', function( query ) {
-			self.themes.doSearch( query );
-		});
 	}
 };
 

wp-admin/themes.php

@@ -91,6 +91,7 @@ if ( current_user_can( 'switch_themes' ) ) {
 } else {
 	$themes = wp_prepare_themes_for_js( array( wp_get_theme() ) );
 }
+wp_reset_vars( array( 'theme', 'search' ) );
 
 wp_localize_script( 'theme', '_wpThemeSettings', array(
 	'themes'   => $themes,
@@ -98,8 +99,10 @@ wp_localize_script( 'theme', '_wpThemeSettings', array(
 		'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
 		'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
 		'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
-		'root'          => admin_url( 'themes.php' ),
+		'root'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
-		'extraRoutes'   => '',
+		'theme'         => esc_html( $theme ),
+		'search'        => esc_html( $search ),
+
 	),
  	'l10n' => array(
  		'addNew' => __( 'Add New Theme' ),
@@ -227,6 +230,7 @@ foreach ( $themes as $theme ) : ?>
 	<br class="clear" />
 	</div>
 </div>
+<div class="theme-overlay"></div>
 
 <?php
 // List broken themes, if any.