WordPress.org

Make WordPress Core

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

File 25963.regex-route-concept.diff, 7.7 KB (added by matveb, 6 years ago)
  • wp-admin/js/theme.js

     
    7070
    7171                // Render and append after screen title
    7272                view.render();
    73                 $('#wpbody h2:first')
    74                         .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
    75                         .append( view.el );
     73                $('#wpbody h2:first').append( view.el );
    7674        },
    7775
    7876        // Checks when the user gets close to the bottom
     
    207205        activeTheme: function() {
    208206                if ( this.model.get( 'active' ) ) {
    209207                        this.$el.addClass( 'active' );
     208                        $( '.theme-overlay' ).addClass( 'active' );
    210209                }
    211210        },
    212211
     
    294293                                scroll = document.body.scrollTop;
    295294
    296295                                // Clean the url structure
    297                                 themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
     296                                themes.router.navigate( '' );
    298297
    299298                                // Restore scroll position
    300299                                document.body.scrollTop = scroll;
     
    302301                }
    303302        },
    304303
    305         // Handles .disabled classes for next/previous buttons
     304        // Handles arrow keys navigation for the overlay
     305        // Triggers theme:next and theme:previous events
    306306        navigation: function() {
     307                var self = this;
    307308
     309                $( 'body' ).on( 'keyup', function( event ) {
     310
     311                        // Pressing the right arrow key fires a theme:next event
     312                        if ( event.keyCode === 39 ) {
     313                                self.trigger( 'theme:next', self.model.cid );
     314                        }
     315
     316                        // Pressing the left arrow key fires a theme:previous event
     317                        if ( event.keyCode === 37 ) {
     318                                self.trigger( 'theme:previous', self.model.cid );
     319                        }
     320
     321                        // Pressing the escape key closes the theme details panel
     322                        if ( event.keyCode === 27 ) {
     323                                self.collapse();
     324                        }
     325                });
     326
    308327                // Disable Left/Right when at the start or end of the collection
    309328                if ( this.model.cid === this.model.collection.at(0).cid ) {
    310329                        this.$el.find( '.left' ).addClass( 'disabled' );
     
    340359        // Checks if the theme screenshot is the old 300px width version
    341360        // and adds a corresponding class if it's true
    342361        screenshotCheck: function( el ) {
    343                 var screenshot, image;
     362                var screenshot, image, width;
    344363
    345364                screenshot = el.find( '.screenshot img' );
    346365                image = new Image();
    347366                image.src = screenshot.attr( 'src' );
    348367
    349368                // Width check
    350                 if ( image.width && image.width <= 300 ) {
    351                         el.addClass( 'small-screenshot' );
     369                if ( image.width <= 300 ) {
     370                        el.addClass( 'small-screenshot' );
    352371                }
    353372        }
    354373});
     
    358377themes.view.Themes = wp.Backbone.View.extend({
    359378
    360379        className: 'themes',
    361         $overlay: $( 'div.theme-overlay' ),
    362380
    363381        // Number to keep track of scroll position
    364382        // while in theme-overlay mode
     
    389407                this.listenTo( this.parent, 'theme:scroll', function() {
    390408                        self.renderThemes( self.parent.page );
    391409                });
    392 
    393                 // Bind keyboard events.
    394                 $('body').on( 'keyup', function( event ) {
    395                         if ( ! self.overlay ) {
    396                                 return;
    397                         }
    398 
    399                         // Pressing the right arrow key fires a theme:next event
    400                         if ( event.keyCode === 39 ) {
    401                                 self.overlay.nextTheme();
    402                         }
    403 
    404                         // Pressing the left arrow key fires a theme:previous event
    405                         if ( event.keyCode === 37 ) {
    406                                 self.overlay.previousTheme();
    407                         }
    408 
    409                         // Pressing the escape key fires a theme:collapse event
    410                         if ( event.keyCode === 27 ) {
    411                                 self.overlay.collapse( event );
    412                         }
    413                 });
    414410        },
    415411
    416412        // Manages rendering of theme pages
     
    512508                this.model = self.collection.get( id );
    513509
    514510                // Trigger a route update for the current model
    515                 themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
     511                themes.router.navigate( 'themes.php?theme=' + this.model.id );
    516512
    517513                // Sets this.view to 'detail'
    518514                this.setView( 'detail' );
     
    524520                });
    525521
    526522                this.overlay.render();
    527                 this.$overlay.html( this.overlay.el );
     523                this.$el.append( this.overlay.el );
    528524
    529525                // Bind to theme:next and theme:previous
    530526                // triggered by the arrow keys
     
    562558                        this.overlay.closeOverlay();
    563559
    564560                        // Trigger a route update for the current model
    565                         self.theme.trigger( 'theme:expand', nextModel.cid );
    566 
     561                        // that renders the new theme's overlay
     562                        themes.router.navigate( 'themes.php?theme=' + nextModel.id, { trigger: true } );
    567563                }
    568564        },
    569565
     
    586582                        this.overlay.closeOverlay();
    587583
    588584                        // Trigger a route update for the current model
    589                         self.theme.trigger( 'theme:expand', previousModel.cid );
    590 
     585                        // that renders the new theme's overlay
     586                        themes.router.navigate( 'themes.php?theme=' + previousModel.id, { trigger: true } );
    591587                }
    592588        }
    593589});
     
    599595        className: 'theme-search',
    600596
    601597        attributes: {
    602                 placeholder: l10n.searchPlaceholder,
     598                placeholder: l10n.search,
    603599                type: 'search'
    604600        },
    605601
     
    621617
    622618                // Update the URL hash
    623619                if ( event.target.value ) {
    624                         themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
     620                        themes.router.navigate( 'search/' + event.target.value, { replace: true } );
    625621                } else {
    626                         themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
     622                        themes.router.navigate( '' );
    627623                }
    628624        }
    629625});
     
    633629themes.routes = Backbone.Router.extend({
    634630
    635631        initialize: function() {
    636                 this.routes = _.object([
    637                 ]);
     632                this.route( /^(.*?)/, 'parseThemeUri' );
    638633        },
    639634
    640         baseUrl: function( url ) {
    641                 return themes.data.settings.root + url;
     635        // Parse URL route
     636        parseThemeUri: function() {
     637                var regex = /([^&=]+)=?([^&]*)/g,
     638                        params, key, value;
     639
     640                // Gets the url params from Backbone.history
     641                params = regex.exec( Backbone.history.location.search );
     642
     643                // Bail if we have no parameters
     644                if ( ! params ) {
     645                        return;
     646                }
     647
     648                key = params[1];
     649                value = params[2]
     650
     651                // Handles theme route
     652                if ( key.indexOf( 'theme' ) !== -1 ) {
     653                        this.theme( value );
     654                }
     655
     656                // Handles search route
     657                if ( key.indexOf( 'search' ) !== -1 ) {
     658                        this.search( value );
     659                }
     660        },
     661
     662        theme: function( slug ) {
     663                // Trigger a route event of 'theme'
     664                this.trigger( 'route:theme', slug );
     665        },
     666
     667        search: function( term ) {
     668                // Set the search input value based on url
     669                $( '.theme-search' ).val( term );
     670                // Trigger a route event of 'search'
     671                this.trigger( 'route:search', term );
    642672        }
    643673});
    644674
     675// Make routes easily extendable
     676_.extend( themes.routes, themes.data.settings.extraRoutes );
     677
    645678// Execute and setup the application
    646679themes.Run = {
    647680        init: function() {
     
    660693        render: function() {
    661694                // Render results
    662695                this.view.render();
     696
     697                // Calls the routes functionality
    663698                this.routes();
    664699
    665                 // Set the initial theme
    666                 if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
    667                         this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
    668                 }
    669 
    670                 // Set the initial search
    671                 if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
    672                         $( '.theme-search' ).val( themes.data.settings.search );
    673                         this.themes.doSearch( themes.data.settings.search );
    674                 }
    675 
    676                 // Start the router if browser supports History API
    677                 if ( window.history && window.history.pushState ) {
    678                         // Calls the routes functionality
    679                         Backbone.history.start({ pushState: true, silent: true });
    680                 }
     700                // Set ups history with pushState and our root
     701                Backbone.history.start({ root: 'develop/src/wp-admin/', pushState: true });
    681702        },
    682703
    683704        routes: function() {
     705                var self = this;
    684706                // Bind to our global thx object
    685707                // so that the object is available to sub-views
    686708                themes.router = new themes.routes();
     709
     710                // Handles theme details route event
     711                themes.router.on( 'route:theme', function( slug ) {
     712                        self.view.view.expand( slug );
     713                });
     714
     715                // Handles search route event
     716                themes.router.on( 'route:search', function( query ) {
     717                        self.themes.doSearch( query );
     718                });
    687719        }
    688720};
    689721