WordPress.org
Get WordPress

Make WordPress Core

Changeset 32466


Ignore:
Timestamp:
05/09/2015 05:41:01 AM (11 years ago)
Author:
wonderboymusic
Message:

Media Grid: clean up our flawed Backbone.Router implementation so that the browser forward/back buttons work the same way as the left/right keys when the Edit Attachment frame is open.

Fixes #31846.

Location:
trunk/src/wp-includes/js
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/js/media-grid.js

    r32125 r32466  
    5656 */
    5757var Router = Backbone.Router.extend({
     58    initialize: function ( options ) {
     59        this.controller = options.controller;
     60        this.library = options.library;
     61        this.on( 'route', this.checkRoute );
     62    },
     63
    5864    routes: {
    5965        'upload.php?item=:slug':    'showItem',
    60         'upload.php?search=:query': 'search'
     66        'upload.php?search=:query': 'search',
     67        'upload.php':               'defaultRoute'
     68    },
     69
     70    checkRoute: function ( event ) {
     71        if ( 'defaultRoute' !== event ) {
     72            this.modal = true;
     73        }
     74    },
     75
     76    defaultRoute: function () {
     77        if ( this.modal ) {
     78            wp.media.frame.close();
     79            this.modal = false;
     80        }
    6181    },
    6282
    … …  
    7393    // Show the modal with a specific item
    7494    showItem: function( query ) {
    75         var media = wp.media,
    76             library = media.frame.state().get('library'),
     95        var frame = this.controller,
    7796            item;
    78 
     97   
    7998        // Trigger the media frame to open the correct item
    80         item = library.findWhere( { id: parseInt( query, 10 ) } );
     99        item = this.library.findWhere( { id: parseInt( query, 10 ) } );
    81100        if ( item ) {
    82             media.frame.trigger( 'edit:attachment', item );
     101            frame.trigger( 'edit:attachment', item );
    83102        } else {
    84             item = media.attachment( query );
    85             media.frame.listenTo( item, 'change', function( model ) {
    86                 media.frame.stopListening( item );
    87                 media.frame.trigger( 'edit:attachment', model );
     103            item = wp.media.attachment( query );
     104            frame.listenTo( item, 'change', function( model ) {
     105                frame.stopListening( item );
     106                frame.trigger( 'edit:attachment', model );
    88107            } );
    89108            item.fetch();
    … …  
    656675            }).render();
    657676            this.uploader.ready();
    658             $('body').append( this.uploader.el );
     677            this.$body.append( this.uploader.el );
    659678
    660679            this.options.uploader = false;
    661680        }
    662 
    663         this.gridRouter = new wp.media.view.MediaFrame.Manage.Router();
    664681
    665682        // Call 'initialize' directly on the parent class.
    … …  
    669686        this.$el.appendTo( this.options.container );
    670687
     688        this.setLibrary( this.options );
     689        this.setRouter();
    671690        this.createStates();
    672691        this.bindRegionModeHandlers();
    673692        this.render();
    674693        this.bindSearchHandler();
     694    },
     695
     696    setLibrary: function ( options ) {
     697        this.library = wp.media.query( options.library );
     698    },
     699
     700    setRouter: function () {
     701        this.gridRouter = new wp.media.view.MediaFrame.Manage.Router({
     702            controller: this,
     703            library: this.library
     704        });
    675705    },
    676706
    … …  
    693723        // Update the URL when entering search string (at most once per second)
    694724        search.on( 'input', _.bind( input, this ) );
    695         searchView.val( currentSearch ).trigger( 'input' );
     725        if ( currentSearch ) {
     726            searchView.val( currentSearch ).trigger( 'input' );
     727        }
    696728
    697729        this.gridRouter.on( 'route:search', function () {
    … …  
    720752        this.states.add([
    721753            new Library({
    722                 library:            wp.media.query( options.library ),
     754                library:            this.library,
    723755                multiple:           options.multiple,
    724756                title:              options.title,

  • trunk/src/wp-includes/js/media/routers/manage.js

    r31492 r32466  
    1010 */
    1111var Router = Backbone.Router.extend({
     12    initialize: function ( options ) {
     13        this.controller = options.controller;
     14        this.library = options.library;
     15        this.on( 'route', this.checkRoute );
     16    },
     17
    1218    routes: {
    1319        'upload.php?item=:slug':    'showItem',
    14         'upload.php?search=:query': 'search'
     20        'upload.php?search=:query': 'search',
     21        'upload.php':               'defaultRoute'
     22    },
     23
     24    checkRoute: function ( event ) {
     25        if ( 'defaultRoute' !== event ) {
     26            this.modal = true;
     27        }
     28    },
     29
     30    defaultRoute: function () {
     31        if ( this.modal ) {
     32            wp.media.frame.close();
     33            this.modal = false;
     34        }
    1535    },
    1636
    … …  
    2747    // Show the modal with a specific item
    2848    showItem: function( query ) {
    29         var media = wp.media,
    30             library = media.frame.state().get('library'),
     49        var frame = this.controller,
    3150            item;
    32 
     51   
    3352        // Trigger the media frame to open the correct item
    34         item = library.findWhere( { id: parseInt( query, 10 ) } );
     53        item = this.library.findWhere( { id: parseInt( query, 10 ) } );
    3554        if ( item ) {
    36             media.frame.trigger( 'edit:attachment', item );
     55            frame.trigger( 'edit:attachment', item );
    3756        } else {
    38             item = media.attachment( query );
    39             media.frame.listenTo( item, 'change', function( model ) {
    40                 media.frame.stopListening( item );
    41                 media.frame.trigger( 'edit:attachment', model );
     57            item = wp.media.attachment( query );
     58            frame.listenTo( item, 'change', function( model ) {
     59                frame.stopListening( item );
     60                frame.trigger( 'edit:attachment', model );
    4261            } );
    4362            item.fetch();

  • trunk/src/wp-includes/js/media/views/frame/manage.js

    r31935 r32466  
    6363            }).render();
    6464            this.uploader.ready();
    65             $('body').append( this.uploader.el );
     65            this.$body.append( this.uploader.el );
    6666
    6767            this.options.uploader = false;
    6868        }
    69 
    70         this.gridRouter = new wp.media.view.MediaFrame.Manage.Router();
    7169
    7270        // Call 'initialize' directly on the parent class.
    … …  
    7674        this.$el.appendTo( this.options.container );
    7775
     76        this.setLibrary( this.options );
     77        this.setRouter();
    7878        this.createStates();
    7979        this.bindRegionModeHandlers();
    8080        this.render();
    8181        this.bindSearchHandler();
     82    },
     83
     84    setLibrary: function ( options ) {
     85        this.library = wp.media.query( options.library );
     86    },
     87
     88    setRouter: function () {
     89        this.gridRouter = new wp.media.view.MediaFrame.Manage.Router({
     90            controller: this,
     91            library: this.library
     92        });
    8293    },
    8394
    … …  
    100111        // Update the URL when entering search string (at most once per second)
    101112        search.on( 'input', _.bind( input, this ) );
    102         searchView.val( currentSearch ).trigger( 'input' );
     113        if ( currentSearch ) {
     114            searchView.val( currentSearch ).trigger( 'input' );
     115        }
    103116
    104117        this.gridRouter.on( 'route:search', function () {
    … …  
    127140        this.states.add([
    128141            new Library({
    129                 library:            wp.media.query( options.library ),
     142                library:            this.library,
    130143                multiple:           options.multiple,
    131144                title:              options.title,
Note: See TracChangeset for help on using the changeset viewer.