Changeset 27268

Timestamp:

02/25/2014 07:21:58 PM (12 years ago)

Author:

markjaquith

Message:

Improve pushState, replaceState and routing for Themes page

• Uses pushState() generally
• Uses replaceState() when updating a search query (so no history cruft from typing)

fixes #27198. props gcorne, adamsilverstein.

Location:

trunk/src/wp-admin

Files:

• js/theme.js (modified) (9 diffs)
• themes.php (modified) (1 diff)

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

@@ -67 +67 @@
         }
 
-        view = new themes.view.Search({ collection: self.collection });
+        view = new themes.view.Search({ collection: self.collection, parent: this });
 
         // Render and append after screen title
@@ -351 +351 @@
 
                 // Clean the url structure
-                themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+                themes.router.navigate( themes.router.baseUrl( '' ) );
 
                 // Restore scroll position
@@ -452 +452 @@
         });
 
+        this.listenTo( this.parent, 'theme:close', function() {
+            if ( self.overlay ) {
+                self.overlay.closeOverlay();
+            }
+        } );
+
         // Bind keyboard events.
         $('body').on( 'keyup', function( event ) {
@@ -574 +580 @@
 
         // Trigger a route update for the current model
-        themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
+        themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ) );
 
         // Sets this.view to 'detail'
@@ -660 +666 @@
     className: 'theme-search',
     id: 'theme-search-input',
+    searching: false,
 
     attributes: {
@@ -670 +677 @@
         'keyup':  'search',
         'change': 'search',
-        'search': 'search'
+        'search': 'search',
+        'blur':   'pushState'
+    },
+
+    initialize: function( options ) {
+
+        this.parent = options.parent;
+
+        this.listenTo( this.parent, 'theme:close', function() {
+            this.searching = false;
+        } );
+
     },
 
     // Runs a search on the theme collection.
     search: function( event ) {
+        var options = {};
+
         // Clear on escape.
         if ( event.type === 'keyup' && event.which === 27 ) {
@@ -682 +702 @@
         this.collection.doSearch( event.target.value );
 
+        // if search is initiated and key is not return
+        if ( this.searching && event.which !== 13 ) {
+            options.replace = true;
+        } else {
+            this.searching = true;
+        }
+
         // Update the URL hash
         if ( event.target.value ) {
-            themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
+            themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), options );
         } else {
-            themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
-        }
+            themes.router.navigate( themes.router.baseUrl( '' ) );
+        }
+    },
+
+    pushState: function( event ) {
+        var url = themes.router.baseUrl( '' );
+
+        if ( event.target.value ) {
+            url = themes.router.baseUrl( '?search=' + event.target.value );
+        }
+
+        this.searching = false;
+        themes.router.navigate( url );
+
     }
 });
@@ -695 +734 @@
 themes.routes = Backbone.Router.extend({
 
-    initialize: function() {
-        this.routes = _.object([
-        ]);
+    routes: {
+        'themes.php?theme=:slug': 'theme',
+        'themes.php?search=:query': 'search',
+        'themes.php?s=:query': 'search',
+        'themes.php': 'themes',
+        '': 'themes'
     },
 
     baseUrl: function( url ) {
-        return themes.data.settings.root + url;
+        return 'themes.php' + url;
+    },
+
+    search: function( query ) {
+        $( '.theme-search' ).val( query );
+    },
+
+    themes: function() {
+        $( '.theme-search' ).val( '' );
     }
+
 });
 
@@ -721 +772 @@
 
     render: function() {
+
         // Render results
         this.view.render();
         this.routes();
 
-        // 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 });
-        }
+        Backbone.history.start({
+            root: themes.data.settings.adminUrl,
+            pushState: true,
+            hashChange: false
+        });
     },
 
     routes: function() {
+        var self = this;
         // 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 );
+        });
+
+        themes.router.on( 'route:themes', function() {
+            self.themes.doSearch( '' );
+            self.view.trigger( 'theme:close' );
+        });
+
+        // Handles search route event
+        themes.router.on( 'route:search', function( query ) {
+            self.view.trigger( 'theme:close' );
+            self.themes.doSearch( query );
+        });
     }
 };

trunk/src/wp-admin/themes.php

@@ -100 +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'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
-        'theme'         => esc_html( $theme ),
-        'search'        => esc_html( $search ),
-
+        'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
     ),
     'l10n' => array(