Ticket #24716: 24716.25.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

@@ -1 @@
-/* global _wpMediaViewsL10n, setUserSetting, deleteUserSetting, MediaElementPlayer */
+/* global _wpMediaViewsL10n, setUserSetting, deleteUserSetting, MediaElementPlayer, mediaGridSettings*/
 (function($, _, Backbone, wp) {
         var media = wp.media, l10n;
 
@@ -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();
+
+                        // Set up the Backbone router after a brief delay
+                        _.delay( function(){
+                                wp.media.mediarouter = new media.view.Frame.Router( self );
+                                // Verify pushState support and activate
+                                if ( window.history && window.history.pushState ) {
+                                        Backbone.history.start({
+                                                root: mediaGridSettings.adminUrl,
+                                                pushState: true
+                                        });
+                                }
+                        }, 150);
+
+                        // Update the URL when entering search string (at most once per second)
+                        $( '#media-search-input' ).on( 'input', _.debounce( function() {
+                                if ( '' !== $( this ).val() ) {
+                                        wp.media.mediarouter.navigate( wp.media.mediarouter.baseUrl( '?search=' + $( this ).val() ), { trigger: false, replace: false } );
+                                }
+                        }, 1000 ) );
                 },
 
                 createSelection: function() {
@@ -210 +230 @@
                 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 );
@@ -247 +268 @@
                                 hasNext = false;
                         }
 
-                        new media.view.Frame.EditAttachment({
+                        wp.media.editAttachmentFrame = new media.view.Frame.EditAttachment({
                                 hasPrevious:    hasPrevious,
                                 hasNext:        hasNext,
                                 model:          model,
@@ -324 +345 @@
         });
 
         /**
+         * A router for handling the browser history and application state
+         */
+        media.view.Frame.Router = Backbone.Router.extend({
+
+                mediaFrame: '',
+
+                initialize: function( mediaFrame ){
+                        this.mediaFrame = mediaFrame;
+                },
+
+                routes: {
+                        'upload.php?item=:slug':    'showitem',
+                        'upload.php?search=:query': 'search',
+                        ':default':                 'defaultRoute'
+                },
+
+                // Map routes against the page URL
+                baseUrl: function( url ) {
+                        return 'upload.php' + url;
+                },
+
+                // Respond to the search route by filling the search field and trigggering the input event
+                search: function( query ) {
+                        // Ensure modal closed, see back button
+                        this.closeModal();
+                        $( '#media-search-input' ).val( query ).trigger( 'input' );
+                },
+
+                // Show the modal with a specific item
+                showitem: function( query ) {
+                        var library = this.mediaFrame.state().get('library');
+
+                        // Remove existing modal if present
+                        this.closeModal();
+                        // Trigger the media frame to open the correct item
+                        this.mediaFrame.trigger( 'edit:attachment', library.findWhere( { id: parseInt( query, 10 ) } ) );
+                },
+
+                // Close the modal if set up
+                closeModal: function() {
+                        if ( 'undefined' !== typeof wp.media.editAttachmentFrame ) {
+                                wp.media.editAttachmentFrame.modal.remove();
+                        }
+                },
+
+                // Default route: make sure the modal and search are reset
+                defaultRoute: function() {
+                        this.closeModal();
+                        $( '#media-search-input' ).val( '' ).trigger( 'input' );
+                }
+        });
+
+        /**
          * A frame for editing the details of a specific media item.
          *
          * Opens in a modal by default.
@@ -340 +414 @@
                         'click':                    'collapse',
                         'click .delete-media-item': 'deleteMediaItem',
                         'click .left':              'previousMediaItem',
-                        'click .right':             'nextMediaItem'
-                },
+                        'click .right':             'nextMediaItem',
+                        'keydown':                  'keyEvent'
+                        },
 
                 initialize: function() {
                         var self = this;
@@ -373 +448 @@
                                 // 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( '?item=' + 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 +567 @@
                                 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, replace: false } );
+                        return;
                 }
 
         });