Ticket #24716: 24716.24.diff

src/wp-admin/upload.php

@@ -24 +24 @@
         wp_enqueue_media();
         wp_enqueue_script( 'media-grid' );
         wp_enqueue_script( 'media' );
+        wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )  ) );
 
         require_once( ABSPATH . 'wp-admin/admin-header.php' );
         include( ABSPATH . 'wp-admin/admin-footer.php' );

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

@@ -120 +120 @@
                  * @global wp.Uploader
                  */
                 initialize: function() {
+                        var self = this;
                         _.defaults( this.options, {
                                 title:     l10n.mediaLibraryTitle,
                                 modal:     false,
@@ -168 +169 @@
                         this.createStates();
                         this.bindHandlers();
                         this.render();
+
+                        _.defer( function(){
+                                wp.media.mediarouter = new media.view.Frame.Router( self );
+                                if ( window.history && window.history.pushState ) {
+                                        Backbone.history.start({
+                                                root: mediaGridSettings.adminUrl,
+                                                pushState: true
+                                        });
+                                }
+                        });
+
+                        $( '#media-search-input' ).on( 'input', _.debounce( function() {
+                                wp.media.mediarouter.searchWith( this );
+                        }, 250) )
+
                 },
 
                 createSelection: function() {
@@ -210 +226 @@
                 bindHandlers: function() {
                         this.on( 'content:create:browse', this.browseContent, this );
                         this.on( 'content:render:edit-image', this.editImageContent, this );
+                        this.on( 'input #media-search-input', this.search, this );
 
+
                         // Handle a frame-level event for editing an attachment.
                         this.on( 'edit:attachment', this.editAttachment, this );
                         this.on( 'edit:attachment:next', this.editNextAttachment, this );
@@ -324 +342 @@
         });
 
         /**
+         * A router for handling the browser history and application state
+         */
+        media.view.Frame.Router = Backbone.Router.extend({
+
+                initialize: function( passedview ){
+                        this.passedview = passedview;
+                },
+
+                passedview: '',
+
+                routes: {
+                        'upload.php?image=:slug': 'showimage',
+                        'upload.php?search=:query': 'search'
+                },
+
+                baseUrl: function( url ) {
+                        return 'upload.php' + url;
+                },
+
+                search: function( query ) {
+                        $( '#media-search-input' ).val( query ).trigger( 'input' );
+                },
+
+                searchWith: function( s ) {
+                        this.navigate( this.baseUrl( '?search=' + $( s ).val() ), {trigger: false, replace: false} );
+                },
+
+                showimage: function( query ) {
+                        var library = this.passedview.state().get('library');
+                        this.passedview.trigger( 'edit:attachment', library.findWhere( { id: parseInt( query ) } ) );
+                },
+
+        });
+
+
+        /**
          * A frame for editing the details of a specific media item.
          *
          * Opens in a modal by default.
@@ -340 +394 @@
                         'click':                    'collapse',
                         'click .delete-media-item': 'deleteMediaItem',
                         'click .left':              'previousMediaItem',
-                        'click .right':             'nextMediaItem'
-                },
+                        'click .right':             'nextMediaItem',
+                        'keydown':                  'keyEvent'
+                        },
 
                 initialize: function() {
                         var self = this;
@@ -373 +428 @@
                                 // Completely destroy the modal DOM element when closing it.
                                 this.modal.close = function() {
                                         self.modal.remove();
+                                        // Reset the browser URL
                                 };
 
                                 this.modal.content( this );
                                 this.modal.open();
+
+                                // Update browser url when navigating media details
+                                wp.media.mediarouter.navigate( wp.media.mediarouter.baseUrl( '?image=' + this.options.model.id ), {trigger: false, replace: false} );
+
+                                // Ensure modal gains focus, otherwise keyboard events lost
+                                $( '.attachment-fields input:first' ).focus();
+                                $( '.media-modal-backdrop, .media-modal-close' ).on( 'click', function() {
+                                        self.resetRoute();
+                                         } );
                         }
                 },
 
@@ -482 +547 @@
                                 return;
                         this.modal.close();
                         this.options.gridController.trigger( 'edit:attachment:next', this.model );
+                },
+                /**
+                 * Respond to the keyboard events: right arrow, left arrow, escape .
+                 */
+                keyEvent: function( event ) {
+                        // The right arrow key
+                        if ( event.keyCode === 39 ) {
+                                if ( ! this.options.hasNext ) { return; }
+                                _.once( this.nextMediaItem() );
+                        }
+
+                        // The left arrow key
+                        if ( event.keyCode === 37 ) {
+                                if ( ! this.options.hasPrevious ) { return; }
+                                _.once( this.previousMediaItem() );
+                        }
+                        // Pressing the escape key routes back to main url
+                        if ( event.keyCode === 27 ) {
+                                this.resetRoute();
+                                return event;
+                        }
+                },
+
+                resetRoute: function() {
+                        wp.media.mediarouter.navigate( wp.media.mediarouter.baseUrl( '' ), { trigger: false } );
+                        return;
                 }
 
         });