WordPress.org

Make WordPress Core

Changeset 27268


Ignore:
Timestamp:
02/25/2014 07:21:58 PM (6 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/theme.js

    r27248 r27268  
    6767        }
    6868
    69         view = new themes.view.Search({ collection: self.collection });
     69        view = new themes.view.Search({ collection: self.collection, parent: this });
    7070
    7171        // Render and append after screen title
     
    351351
    352352                // Clean the url structure
    353                 themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
     353                themes.router.navigate( themes.router.baseUrl( '' ) );
    354354
    355355                // Restore scroll position
     
    452452        });
    453453
     454        this.listenTo( this.parent, 'theme:close', function() {
     455            if ( self.overlay ) {
     456                self.overlay.closeOverlay();
     457            }
     458        } );
     459
    454460        // Bind keyboard events.
    455461        $('body').on( 'keyup', function( event ) {
     
    574580
    575581        // Trigger a route update for the current model
    576         themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
     582        themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ) );
    577583
    578584        // Sets this.view to 'detail'
     
    660666    className: 'theme-search',
    661667    id: 'theme-search-input',
     668    searching: false,
    662669
    663670    attributes: {
     
    670677        'keyup':  'search',
    671678        'change': 'search',
    672         'search': 'search'
     679        'search': 'search',
     680        'blur':   'pushState'
     681    },
     682
     683    initialize: function( options ) {
     684
     685        this.parent = options.parent;
     686
     687        this.listenTo( this.parent, 'theme:close', function() {
     688            this.searching = false;
     689        } );
     690
    673691    },
    674692
    675693    // Runs a search on the theme collection.
    676694    search: function( event ) {
     695        var options = {};
     696
    677697        // Clear on escape.
    678698        if ( event.type === 'keyup' && event.which === 27 ) {
     
    682702        this.collection.doSearch( event.target.value );
    683703
     704        // if search is initiated and key is not return
     705        if ( this.searching && event.which !== 13 ) {
     706            options.replace = true;
     707        } else {
     708            this.searching = true;
     709        }
     710
    684711        // Update the URL hash
    685712        if ( event.target.value ) {
    686             themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
     713            themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), options );
    687714        } else {
    688             themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
    689         }
     715            themes.router.navigate( themes.router.baseUrl( '' ) );
     716        }
     717    },
     718
     719    pushState: function( event ) {
     720        var url = themes.router.baseUrl( '' );
     721
     722        if ( event.target.value ) {
     723            url = themes.router.baseUrl( '?search=' + event.target.value );
     724        }
     725
     726        this.searching = false;
     727        themes.router.navigate( url );
     728
    690729    }
    691730});
     
    695734themes.routes = Backbone.Router.extend({
    696735
    697     initialize: function() {
    698         this.routes = _.object([
    699         ]);
     736    routes: {
     737        'themes.php?theme=:slug': 'theme',
     738        'themes.php?search=:query': 'search',
     739        'themes.php?s=:query': 'search',
     740        'themes.php': 'themes',
     741        '': 'themes'
    700742    },
    701743
    702744    baseUrl: function( url ) {
    703         return themes.data.settings.root + url;
     745        return 'themes.php' + url;
     746    },
     747
     748    search: function( query ) {
     749        $( '.theme-search' ).val( query );
     750    },
     751
     752    themes: function() {
     753        $( '.theme-search' ).val( '' );
    704754    }
     755
    705756});
    706757
     
    721772
    722773    render: function() {
     774
    723775        // Render results
    724776        this.view.render();
    725777        this.routes();
    726778
    727         // Set the initial theme
    728         if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
    729             this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
    730         }
    731 
    732         // Set the initial search
    733         if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
    734             $( '.theme-search' ).val( themes.data.settings.search );
    735             this.themes.doSearch( themes.data.settings.search );
    736         }
    737 
    738         // Start the router if browser supports History API
    739         if ( window.history && window.history.pushState ) {
    740             // Calls the routes functionality
    741             Backbone.history.start({ pushState: true, silent: true });
    742         }
     779        Backbone.history.start({
     780            root: themes.data.settings.adminUrl,
     781            pushState: true,
     782            hashChange: false
     783        });
    743784    },
    744785
    745786    routes: function() {
     787        var self = this;
    746788        // Bind to our global thx object
    747789        // so that the object is available to sub-views
    748790        themes.router = new themes.routes();
     791
     792        // Handles theme details route event
     793        themes.router.on( 'route:theme', function( slug ) {
     794            self.view.view.expand( slug );
     795        });
     796
     797        themes.router.on( 'route:themes', function() {
     798            self.themes.doSearch( '' );
     799            self.view.trigger( 'theme:close' );
     800        });
     801
     802        // Handles search route event
     803        themes.router.on( 'route:search', function( query ) {
     804            self.view.trigger( 'theme:close' );
     805            self.themes.doSearch( query );
     806        });
    749807    }
    750808};
  • trunk/src/wp-admin/themes.php

    r27119 r27268  
    100100        'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
    101101        'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
    102         'root'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
    103         'theme'         => esc_html( $theme ),
    104         'search'        => esc_html( $search ),
    105 
     102        'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
    106103    ),
    107104    'l10n' => array(
Note: See TracChangeset for help on using the changeset viewer.