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.

Built from https://develop.svn.wordpress.org/trunk@32466


git-svn-id: http://core.svn.wordpress.org/trunk@32436 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2015-05-09 05:42:28 +00:00
parent bb02256966
commit 4af6d6f305
3 changed files with 49 additions and 17 deletions

View File

@ -55,9 +55,29 @@ media.view.DeleteSelectedPermanentlyButton = require( './views/button/delete-sel
* @augments Backbone.Router * @augments Backbone.Router
*/ */
var Router = Backbone.Router.extend({ var Router = Backbone.Router.extend({
initialize: function ( options ) {
this.controller = options.controller;
this.library = options.library;
this.on( 'route', this.checkRoute );
},
routes: { routes: {
'upload.php?item=:slug': 'showItem', 'upload.php?item=:slug': 'showItem',
'upload.php?search=:query': 'search' 'upload.php?search=:query': 'search',
'upload.php': 'defaultRoute'
},
checkRoute: function ( event ) {
if ( 'defaultRoute' !== event ) {
this.modal = true;
}
},
defaultRoute: function () {
if ( this.modal ) {
wp.media.frame.close();
this.modal = false;
}
}, },
// Map routes against the page URL // Map routes against the page URL
@ -72,19 +92,18 @@ var Router = Backbone.Router.extend({
// Show the modal with a specific item // Show the modal with a specific item
showItem: function( query ) { showItem: function( query ) {
var media = wp.media, var frame = this.controller,
library = media.frame.state().get('library'),
item; item;
// Trigger the media frame to open the correct item // Trigger the media frame to open the correct item
item = library.findWhere( { id: parseInt( query, 10 ) } ); item = this.library.findWhere( { id: parseInt( query, 10 ) } );
if ( item ) { if ( item ) {
media.frame.trigger( 'edit:attachment', item ); frame.trigger( 'edit:attachment', item );
} else { } else {
item = media.attachment( query ); item = wp.media.attachment( query );
media.frame.listenTo( item, 'change', function( model ) { frame.listenTo( item, 'change', function( model ) {
media.frame.stopListening( item ); frame.stopListening( item );
media.frame.trigger( 'edit:attachment', model ); frame.trigger( 'edit:attachment', model );
} ); } );
item.fetch(); item.fetch();
} }
@ -655,25 +674,36 @@ Manage = MediaFrame.extend({
} }
}).render(); }).render();
this.uploader.ready(); this.uploader.ready();
$('body').append( this.uploader.el ); this.$body.append( this.uploader.el );
this.options.uploader = false; this.options.uploader = false;
} }
this.gridRouter = new wp.media.view.MediaFrame.Manage.Router();
// Call 'initialize' directly on the parent class. // Call 'initialize' directly on the parent class.
MediaFrame.prototype.initialize.apply( this, arguments ); MediaFrame.prototype.initialize.apply( this, arguments );
// Append the frame view directly the supplied container. // Append the frame view directly the supplied container.
this.$el.appendTo( this.options.container ); this.$el.appendTo( this.options.container );
this.setLibrary( this.options );
this.setRouter();
this.createStates(); this.createStates();
this.bindRegionModeHandlers(); this.bindRegionModeHandlers();
this.render(); this.render();
this.bindSearchHandler(); this.bindSearchHandler();
}, },
setLibrary: function ( options ) {
this.library = wp.media.query( options.library );
},
setRouter: function () {
this.gridRouter = new wp.media.view.MediaFrame.Manage.Router({
controller: this,
library: this.library
});
},
bindSearchHandler: function() { bindSearchHandler: function() {
var search = this.$( '#media-search-input' ), var search = this.$( '#media-search-input' ),
currentSearch = this.options.container.data( 'search' ), currentSearch = this.options.container.data( 'search' ),
@ -692,7 +722,9 @@ Manage = MediaFrame.extend({
// Update the URL when entering search string (at most once per second) // Update the URL when entering search string (at most once per second)
search.on( 'input', _.bind( input, this ) ); search.on( 'input', _.bind( input, this ) );
if ( currentSearch ) {
searchView.val( currentSearch ).trigger( 'input' ); searchView.val( currentSearch ).trigger( 'input' );
}
this.gridRouter.on( 'route:search', function () { this.gridRouter.on( 'route:search', function () {
var href = window.location.href; var href = window.location.href;
@ -719,7 +751,7 @@ Manage = MediaFrame.extend({
// Add the default states. // Add the default states.
this.states.add([ this.states.add([
new Library({ new Library({
library: wp.media.query( options.library ), library: this.library,
multiple: options.multiple, multiple: options.multiple,
title: options.title, title: options.title,
content: 'browse', content: 'browse',

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.3-alpha-32465'; $wp_version = '4.3-alpha-32466';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.