WordPress.org

Make WordPress Core

Changeset 26767


Ignore:
Timestamp:
12/07/2013 03:10:44 AM (7 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Gruntfile.js

    r26745 r26767  
    3737                            '**',
    3838                            '!**/.{svn,git}/**', // Ignore version control directories.
    39                             '!wp-includes/version.php' // Exclude version.php
     39                            '!wp-includes/version.php', // Exclude version.php
     40                            '!wp-content/themes/wpcom-themes/**'
    4041                        ],
    4142                        dest: BUILD_DIR
  • trunk/src/wp-admin/js/theme.js

    r26765 r26767  
    294294
    295295                // Clean the url structure
    296                 themes.router.navigate( '' );
     296                themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
    297297
    298298                // Restore scroll position
     
    302302    },
    303303
    304     // Handles arrow keys navigation for the overlay
    305     // Triggers theme:next and theme:previous events
     304    // Handles .disabled classes for next/previous buttons
    306305    navigation: function() {
    307         var self = this;
    308 
    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         });
    326306
    327307        // Disable Left/Right when at the start or end of the collection
     
    378358
    379359    className: 'themes',
     360    $overlay: $( 'div.theme-overlay' ),
    380361
    381362    // Number to keep track of scroll position
     
    408389            self.renderThemes( self.parent.page );
    409390        });
     391
     392        // Bind keyboard events.
     393        $('body').on( 'keyup', function( event ) {
     394            // Pressing the right arrow key fires a theme:next event
     395            if ( event.keyCode === 39 ) {
     396                self.overlay.nextTheme();
     397            }
     398
     399            // Pressing the left arrow key fires a theme:previous event
     400            if ( event.keyCode === 37 ) {
     401                self.overlay.previousTheme();
     402            }
     403
     404            // Pressing the escape key fires a theme:collapse event
     405            if ( event.keyCode === 27 ) {
     406                self.overlay.collapse( event );
     407            }
     408        });
    410409    },
    411410
     
    509508
    510509        // Trigger a route update for the current model
    511         themes.router.navigate( 'theme/' + this.model.id );
     510        themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
    512511
    513512        // Sets this.view to 'detail'
     
    521520
    522521        this.overlay.render();
    523         this.$el.append( this.overlay.el );
     522        this.$overlay.html( this.overlay.el );
    524523
    525524        // Bind to theme:next and theme:previous
     
    559558
    560559            // Trigger a route update for the current model
    561             // that renders the new theme's overlay
    562             themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
     560            self.theme.trigger( 'theme:expand', nextModel.cid );
     561
    563562        }
    564563    },
     
    583582
    584583            // Trigger a route update for the current model
    585             // that renders the new theme's overlay
    586             themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
     584            self.theme.trigger( 'theme:expand', previousModel.cid );
     585
    587586        }
    588587    }
     
    618617        // Update the URL hash
    619618        if ( event.target.value ) {
    620             themes.router.navigate( 'search/' + event.target.value, { replace: true } );
     619            themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
    621620        } else {
    622             themes.router.navigate( '' );
     621            themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
    623622        }
    624623    }
     
    629628themes.routes = Backbone.Router.extend({
    630629
    631     routes: {
    632         'search/*query': 'search',
    633         'theme/*slug': 'theme'
     630    initialize: function() {
     631        this.routes = _.object([
     632        ]);
     633    },
     634
     635    baseUrl: function( url ) {
     636        return themes.data.settings.root + url;
    634637    },
    635638
     
    637640    search: function( query ) {
    638641        $( '.theme-search' ).val( query );
     642        self.themes.doSearch( query );
    639643    }
    640644});
    641 
    642 // Make routes easily extendable
    643 _.extend( themes.routes, themes.data.settings.extraRoutes );
    644645
    645646// Execute and setup the application
     
    661662        // Render results
    662663        this.view.render();
    663 
    664         // Calls the routes functionality
    665664        this.routes();
    666665
    667         // Set ups history with pushState and our root
    668         Backbone.history.start({ root: themes.data.settings.root });
     666        // Set the initial theme
     667        if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
     668            this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
     669        }
     670
     671        // Set the initial search
     672        if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
     673            $( '.theme-search' ).val( themes.data.settings.search );
     674            this.themes.doSearch( themes.data.settings.search );
     675        }
     676
     677        // Start the router if browser supports History API
     678        if ( window.history && window.history.pushState ) {
     679            // Calls the routes functionality
     680            Backbone.history.start({ pushState: true, silent: true });
     681        }
    669682    },
    670683
     
    674687        // so that the object is available to sub-views
    675688        themes.router = new themes.routes();
    676 
    677         // Handles theme details route event
    678         themes.router.on( 'route:theme', function( slug ) {
    679             self.view.view.expand( slug );
    680         });
    681 
    682         // Handles search route event
    683         themes.router.on( 'route:search', function( query ) {
    684             self.themes.doSearch( query );
    685         });
    686689    }
    687690};
  • trunk/src/wp-admin/themes.php

    r26759 r26767  
    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(
     
    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         'extraRoutes'   => '',
     102        'root'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
     103        'theme'         => esc_html( $theme ),
     104        'search'        => esc_html( $search ),
     105
    103106    ),
    104107    'l10n' => array(
     
    228231    </div>
    229232</div>
     233<div class="theme-overlay"></div>
    230234
    231235<?php
Note: See TracChangeset for help on using the changeset viewer.