Ticket #25963: 25963.5.diff

src/wp-admin/js/theme.js

@@ -260 +260 @@
                 this.$el.toggleClass( 'active', this.model.get( 'active' ) );
         },
 
+        baseUrl: function( url ) {
+                return themes.data.settings.root + url;
+        },
+
         // Single theme overlay screen
         // It's shown when clicking a theme
         collapse: function( event ) {
@@ -292 +296 @@
                                 scroll = document.body.scrollTop;
 
                                 // Clean the url structure
-                                themes.router.navigate( '' );
+                                themes.router.navigate( themes.data.settings.root );
 
                                 // Restore scroll position
                                 document.body.scrollTop = scroll;
@@ -380 +384 @@
 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
@@ -502 +507 @@
                 return view;
         },
 
+        baseUrl: function( url ) {
+                return themes.data.settings.root + url;
+        },
+
+
         // Renders the overlay with the ThemeDetails view
         // Uses the current model data
         expand: function( id ) {
@@ -511 +521 @@
                 this.model = self.collection.get( id );
 
                 // Trigger a route update for the current model
-                themes.router.navigate( 'theme/' + this.model.id );
+                themes.router.navigate( this.baseUrl( '?theme=' + this.model.id ) );
 
                 // Sets this.view to 'detail'
                 this.setView( 'detail' );
@@ -523 +533 @@
                 });
 
                 this.overlay.render();
-                this.$el.append( this.overlay.el );
+                this.$overlay.html( this.overlay.el );
 
                 this.overlay.screenshotGallery();
 
@@ -566 +576 @@
 
                         // Trigger a route update for the current model
                         // that renders the new theme's overlay
-                        themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
+                        //themes.router.navigate( this.baseUrl( '?theme=' + nextModel.id ) );
+                        self.theme.trigger( 'theme:expand', nextModel.cid );
+
                 }
         },
 
@@ -590 +602 @@
 
                         // Trigger a route update for the current model
                         // that renders the new theme's overlay
-                        themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
+                        //themes.router.navigate( baseUrl( '?theme=' + previousModel.id ) );
+                        self.theme.trigger( 'theme:expand', previousModel.cid );
+
                 }
         }
 });
@@ -615 +629 @@
 
         // Runs a search on the theme collection.
         search: function( event ) {
+                var self = this;
+
                 // Clear on escape.
                 if ( event.type === 'keyup' && event.which === 27 ) {
                         event.target.value = '';
                 }
 
-                this.collection.doSearch( event.target.value );
+                self.collection.doSearch( event.target.value );
 
                 // 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( '' ) );
                 }
         }
 });
@@ -635 +651 @@
 // Listens to [theme] and [search] params
 themes.routes = Backbone.Router.extend({
 
-        routes: {
-                'search/*query': 'search',
-                'theme/*slug': 'theme'
+        initialize: function() {
+                this.routes = _.object([
+                        [ this.baseUrl( '?theme=:theme' ), 'showTheme' ],
+                        [ this.baseUrl( '?theme=:theme' ), 'showTheme' ],
+                        [ this.baseUrl( '?search=:search' ), 'search' ],
+                        [ this.baseUrl( '?search=:search' ), 'search' ]
+                ]);
         },
 
+        showTheme: function( theme ) {
+                alert( 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 );
+                _.debounce( self.themes.doSearch( query ), 200 );
         }
 });
 
@@ -667 +696 @@
         render: function() {
                 // Render results
                 this.view.render();
-
-                // Calls the routes functionality
                 this.routes();
 
-                // Set ups history with pushState and our root
-                Backbone.history.start({ root: themes.data.settings.root });
+                // Set the initial theme
+                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 });
+                }
         },
 
         routes: function() {
@@ -680 +721 @@
                 // Bind to our global thx object
                 // so that the object is available to sub-views
                 themes.router = new themes.routes();
-
+                console.log(themes.router);
                 // 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 );
-                });
         }
 };
 

src/wp-admin/themes.php

@@ -91 +91 @@
 } 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 +99 @@
                 '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' ),
@@ -180 +184 @@
 ?>
 
 <div class="theme-browser"></div>
+<div class="theme-overlay"></div>
 
 <?php
 // List broken themes, if any.