Ticket #25963: 25963.regex-route-concept.diff

wp-admin/js/theme.js

@@ -70 +70 @@
 
                 // Render and append after screen title
                 view.render();
-                $('#wpbody h2:first')
-                        .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
-                        .append( view.el );
+                $('#wpbody h2:first').append( view.el );
         },
 
         // Checks when the user gets close to the bottom
@@ -207 +205 @@
         activeTheme: function() {
                 if ( this.model.get( 'active' ) ) {
                         this.$el.addClass( 'active' );
+                        $( '.theme-overlay' ).addClass( 'active' );
                 }
         },
 
@@ -294 +293 @@
                                 scroll = document.body.scrollTop;
 
                                 // Clean the url structure
-                                themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+                                themes.router.navigate( '' );
 
                                 // Restore scroll position
                                 document.body.scrollTop = scroll;
@@ -302 +301 @@
                 }
         },
 
-        // Handles .disabled classes for next/previous buttons
+        // Handles arrow keys navigation for the overlay
+        // 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 ) {
                         this.$el.find( '.left' ).addClass( 'disabled' );
@@ -340 +359 @@
         // Checks if the theme screenshot is the old 300px width version
         // and adds a corresponding class if it's true
         screenshotCheck: function( el ) {
-                var screenshot, image;
+                var screenshot, image, width;
 
                 screenshot = el.find( '.screenshot img' );
                 image = new Image();
                 image.src = screenshot.attr( 'src' );
 
                 // Width check
-                if ( image.width && image.width <= 300 ) {
-                        el.addClass( 'small-screenshot' );
+                if ( image.width <= 300 ) {
+                        el.addClass( 'small-screenshot' );
                 }
         }
 });
@@ -358 +377 @@
 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
@@ -389 +407 @@
                 this.listenTo( this.parent, 'theme:scroll', function() {
                         self.renderThemes( self.parent.page );
                 });
-
-                // Bind keyboard events.
-                $('body').on( 'keyup', function( event ) {
-                        if ( ! self.overlay ) {
-                                return;
-                        }
-
-                        // 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
@@ -512 +508 @@
                 this.model = self.collection.get( id );
 
                 // Trigger a route update for the current model
-                themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
+                themes.router.navigate( 'themes.php?theme=' + this.model.id );
 
                 // Sets this.view to 'detail'
                 this.setView( 'detail' );
@@ -524 +520 @@
                 });
 
                 this.overlay.render();
-                this.$overlay.html( this.overlay.el );
+                this.$el.append( this.overlay.el );
 
                 // Bind to theme:next and theme:previous
                 // triggered by the arrow keys
@@ -562 +558 @@
                         this.overlay.closeOverlay();
 
                         // Trigger a route update for the current model
-                        self.theme.trigger( 'theme:expand', nextModel.cid );
-
+                        // that renders the new theme's overlay
+                        themes.router.navigate( 'themes.php?theme=' + nextModel.id, { trigger: true } );
                 }
         },
 
@@ -586 +582 @@
                         this.overlay.closeOverlay();
 
                         // Trigger a route update for the current model
-                        self.theme.trigger( 'theme:expand', previousModel.cid );
-
+                        // that renders the new theme's overlay
+                        themes.router.navigate( 'themes.php?theme=' + previousModel.id, { trigger: true } );
                 }
         }
 });
@@ -599 +595 @@
         className: 'theme-search',
 
         attributes: {
-                placeholder: l10n.searchPlaceholder,
+                placeholder: l10n.search,
                 type: 'search'
         },
 
@@ -621 +617 @@
 
                 // Update the URL hash
                 if ( event.target.value ) {
-                        themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
+                        themes.router.navigate( 'search/' + event.target.value, { replace: true } );
                 } else {
-                        themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+                        themes.router.navigate( '' );
                 }
         }
 });
@@ -633 +629 @@
 themes.routes = Backbone.Router.extend({
 
         initialize: function() {
-                this.routes = _.object([
-                ]);
+                this.route( /^(.*?)/, 'parseThemeUri' );
         },
 
-        baseUrl: function( url ) {
-                return themes.data.settings.root + url;
+        // Parse URL route
+        parseThemeUri: function() {
+                var regex = /([^&=]+)=?([^&]*)/g,
+                        params, key, value;
+
+                // Gets the url params from Backbone.history
+                params = regex.exec( Backbone.history.location.search );
+
+                // Bail if we have no parameters
+                if ( ! params ) {
+                        return;
+                }
+
+                key = params[1];
+                value = params[2]
+
+                // Handles theme route
+                if ( key.indexOf( 'theme' ) !== -1 ) {
+                        this.theme( value );
+                }
+
+                // Handles search route
+                if ( key.indexOf( 'search' ) !== -1 ) {
+                        this.search( value );
+                }
+        },
+
+        theme: function( slug ) {
+                // Trigger a route event of 'theme'
+                this.trigger( 'route:theme', slug );
+        },
+
+        search: function( term ) {
+                // Set the search input value based on url
+                $( '.theme-search' ).val( term );
+                // Trigger a route event of 'search'
+                this.trigger( 'route:search', term );
         }
 });
 
+// Make routes easily extendable
+_.extend( themes.routes, themes.data.settings.extraRoutes );
+
 // Execute and setup the application
 themes.Run = {
         init: function() {
@@ -660 +693 @@
         render: function() {
                 // Render results
                 this.view.render();
+
+                // Calls the routes functionality
                 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 });
-                }
+                // Set ups history with pushState and our root
+                Backbone.history.start({ root: 'develop/src/wp-admin/', pushState: true });
         },
 
         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 );
+                });
+
+                // Handles search route event
+                themes.router.on( 'route:search', function( query ) {
+                        self.themes.doSearch( query );
+                });
         }
 };