WordPress.org

Make WordPress Core

Ticket #25963: 25963.5.diff

File 25963.5.diff, 6.3 KB (added by adamsilverstein, 7 years ago)

routing following revisions.js pattern

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

     
    260260                this.$el.toggleClass( 'active', this.model.get( 'active' ) );
    261261        },
    262262
     263        baseUrl: function( url ) {
     264                return themes.data.settings.root + url;
     265        },
     266
    263267        // Single theme overlay screen
    264268        // It's shown when clicking a theme
    265269        collapse: function( event ) {
     
    292296                                scroll = document.body.scrollTop;
    293297
    294298                                // Clean the url structure
    295                                 themes.router.navigate( '' );
     299                                themes.router.navigate( themes.data.settings.root );
    296300
    297301                                // Restore scroll position
    298302                                document.body.scrollTop = scroll;
     
    380384themes.view.Themes = wp.Backbone.View.extend({
    381385
    382386        className: 'themes',
     387        $overlay: $( 'div.theme-overlay' ),
    383388
    384389        // Number to keep track of scroll position
    385390        // while in theme-overlay mode
     
    502507                return view;
    503508        },
    504509
     510        baseUrl: function( url ) {
     511                return themes.data.settings.root + url;
     512        },
     513
     514
    505515        // Renders the overlay with the ThemeDetails view
    506516        // Uses the current model data
    507517        expand: function( id ) {
     
    511521                this.model = self.collection.get( id );
    512522
    513523                // Trigger a route update for the current model
    514                 themes.router.navigate( 'theme/' + this.model.id );
     524                themes.router.navigate( this.baseUrl( '?theme=' + this.model.id ) );
    515525
    516526                // Sets this.view to 'detail'
    517527                this.setView( 'detail' );
     
    523533                });
    524534
    525535                this.overlay.render();
    526                 this.$el.append( this.overlay.el );
     536                this.$overlay.html( this.overlay.el );
    527537
    528538                this.overlay.screenshotGallery();
    529539
     
    566576
    567577                        // Trigger a route update for the current model
    568578                        // that renders the new theme's overlay
    569                         themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
     579                        //themes.router.navigate( this.baseUrl( '?theme=' + nextModel.id ) );
     580                        self.theme.trigger( 'theme:expand', nextModel.cid );
     581
    570582                }
    571583        },
    572584
     
    590602
    591603                        // Trigger a route update for the current model
    592604                        // that renders the new theme's overlay
    593                         themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
     605                        //themes.router.navigate( baseUrl( '?theme=' + previousModel.id ) );
     606                        self.theme.trigger( 'theme:expand', previousModel.cid );
     607
    594608                }
    595609        }
    596610});
     
    615629
    616630        // Runs a search on the theme collection.
    617631        search: function( event ) {
     632                var self = this;
     633
    618634                // Clear on escape.
    619635                if ( event.type === 'keyup' && event.which === 27 ) {
    620636                        event.target.value = '';
    621637                }
    622638
    623                 this.collection.doSearch( event.target.value );
     639                self.collection.doSearch( event.target.value );
    624640
    625641                // Update the URL hash
    626642                if ( event.target.value ) {
    627                         themes.router.navigate( 'search/' + event.target.value, { replace: true } );
     643                        themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
    628644                } else {
    629                         themes.router.navigate( '' );
     645                        themes.router.navigate( themes.router.baseUrl( '' ) );
    630646                }
    631647        }
    632648});
     
    635651// Listens to [theme] and [search] params
    636652themes.routes = Backbone.Router.extend({
    637653
    638         routes: {
    639                 'search/*query': 'search',
    640                 'theme/*slug': 'theme'
     654        initialize: function() {
     655                this.routes = _.object([
     656                        [ this.baseUrl( '?theme=:theme' ), 'showTheme' ],
     657                        [ this.baseUrl( '?theme=:theme' ), 'showTheme' ],
     658                        [ this.baseUrl( '?search=:search' ), 'search' ],
     659                        [ this.baseUrl( '?search=:search' ), 'search' ]
     660                ]);
    641661        },
    642662
     663        showTheme: function( theme ) {
     664                alert( theme );
     665        },
     666
     667        baseUrl: function( url ) {
     668                return themes.data.settings.root + url;
     669        },
     670
    643671        // Set the search input value based on url
    644672        search: function( query ) {
    645673                $( '.theme-search' ).val( query );
     674                _.debounce( self.themes.doSearch( query ), 200 );
    646675        }
    647676});
    648677
     
    667696        render: function() {
    668697                // Render results
    669698                this.view.render();
    670 
    671                 // Calls the routes functionality
    672699                this.routes();
    673700
    674                 // Set ups history with pushState and our root
    675                 Backbone.history.start({ root: themes.data.settings.root });
     701                // Set the initial theme
     702                if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
     703                        this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
     704                }
     705
     706                // Set the initial search
     707                if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
     708                        $( '.theme-search' ).val( themes.data.settings.search );
     709                        this.themes.doSearch( themes.data.settings.search );
     710                }
     711
     712                // Start the router if browser supports History API
     713                if ( window.history && window.history.pushState ) {
     714                        // Calls the routes functionality
     715                        Backbone.history.start({ pushState: true });
     716                }
    676717        },
    677718
    678719        routes: function() {
     
    680721                // Bind to our global thx object
    681722                // so that the object is available to sub-views
    682723                themes.router = new themes.routes();
    683 
     724                console.log(themes.router);
    684725                // Handles theme details route event
    685                 themes.router.on( 'route:theme', function( slug ) {
    686                         self.view.view.expand( slug );
    687                 });
    688 
    689                 // Handles search route event
    690                 themes.router.on( 'route:search', function( query ) {
    691                         self.themes.doSearch( query );
    692                 });
    693726        }
    694727};
    695728
  • src/wp-admin/themes.php

     
    9191} else {
    9292        $themes = wp_prepare_themes_for_js( array( wp_get_theme() ) );
    9393}
     94wp_reset_vars( array( 'theme', 'search' ) );
    9495
    9596wp_localize_script( 'theme', '_wpThemeSettings', array(
    9697        'themes'   => $themes,
     
    9899                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
    99100                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
    100101                'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
    101                 'root'          => admin_url( 'themes.php' ),
     102                'root'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
    102103                'extraRoutes'   => '',
     104                'theme'         => esc_html( $theme ),
     105                'search'        => esc_html( $search ),
     106
    103107        ),
    104108        'l10n' => array(
    105109                'addNew' => __( 'Add New Theme' ),
     
    180184?>
    181185
    182186<div class="theme-browser"></div>
     187<div class="theme-overlay"></div>
    183188
    184189<?php
    185190// List broken themes, if any.