Changeset 26767

Timestamp:

12/07/2013 03:10:44 AM (10 years ago)

Author:

ryan

Message:

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

Props adamsilverstein, nacin
fixes #25963

Location:

trunk

Files:

• Gruntfile.js (modified) (1 diff)
• src/wp-admin/js/theme.js (modified) (13 diffs)
• src/wp-admin/themes.php (modified) (3 diffs)

trunk/Gruntfile.js

@@ -37 +37 @@
                             '**',
                             '!**/.{svn,git}/**', // Ignore version control directories.
-                            '!wp-includes/version.php' // Exclude version.php
+                            '!wp-includes/version.php', // Exclude version.php
+                            '!wp-content/themes/wpcom-themes/**'
                         ],
                         dest: BUILD_DIR

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

@@ -294 +294 @@
 
                 // Clean the url structure
-                themes.router.navigate( '' );
+                themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 
                 // Restore scroll position
@@ -302 +302 @@
     },
 
-    // Handles arrow keys navigation for the overlay
-    // Triggers theme:next and theme:previous events
+    // Handles .disabled classes for next/previous buttons
     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
@@ -378 +358 @@
 
     className: 'themes',
+    $overlay: $( 'div.theme-overlay' ),
 
     // Number to keep track of scroll position
@@ -408 +389 @@
             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 );
+            }
+        });
     },
 
@@ -509 +508 @@
 
         // 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'
@@ -521 +520 @@
 
         this.overlay.render();
-        this.$el.append( this.overlay.el );
+        this.$overlay.html( this.overlay.el );
 
         // Bind to theme:next and theme:previous
@@ -559 +558 @@
 
             // Trigger a route update for the current model
-            // that renders the new theme's overlay
-            themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
+            self.theme.trigger( 'theme:expand', nextModel.cid );
+
         }
     },
@@ -583 +582 @@
 
             // Trigger a route update for the current model
-            // that renders the new theme's overlay
-            themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
+            self.theme.trigger( 'theme:expand', previousModel.cid );
+
         }
     }
@@ -618 +617 @@
         // 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 } );
         }
     }
@@ -629 +628 @@
 themes.routes = Backbone.Router.extend({
 
-    routes: {
-        'search/*query': 'search',
-        'theme/*slug': 'theme'
+    initialize: function() {
+        this.routes = _.object([
+        ]);
+    },
+
+    baseUrl: function( url ) {
+        return themes.data.settings.root + url;
     },
 
@@ -637 +640 @@
     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
@@ -661 +662 @@
         // 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, silent: true });
+        }
     },
 
@@ -674 +687 @@
         // 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 );
-        });
     }
 };

trunk/src/wp-admin/themes.php

@@ -92 +92 @@
     $themes = wp_prepare_themes_for_js( array( wp_get_theme() ) );
 }
+wp_reset_vars( array( 'theme', 'search' ) );
 
 wp_localize_script( 'theme', '_wpThemeSettings', array(
@@ -99 +100 @@
         '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' ),
-        'extraRoutes'   => '',
+        'root'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
+        'theme'         => esc_html( $theme ),
+        'search'        => esc_html( $search ),
+
     ),
     'l10n' => array(
@@ -228 +231 @@
     </div>
 </div>
+<div class="theme-overlay"></div>
 
 <?php