Changeset 32466

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:

• media-grid.js (modified) (6 diffs)
• media/routers/manage.js (modified) (2 diffs)
• media/views/frame/manage.js (modified) (4 diffs)

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

@@ -56 +56 @@
  */
 var Router = Backbone.Router.extend({
+        initialize: function ( options ) {
+                this.controller = options.controller;
+                this.library = options.library;
+                this.on( 'route', this.checkRoute );
+        },
+
         routes: {
                 '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;
+                }
         },
 
@@ -73 +93 @@
         // Show the modal with a specific item
         showItem: function( query ) {
-                var media = wp.media,
-                        library = media.frame.state().get('library'),
+                var frame = this.controller,
                         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 ) {
-                        media.frame.trigger( 'edit:attachment', item );
+                        frame.trigger( 'edit:attachment', item );
                 } else {
-                        item = media.attachment( query );
-                        media.frame.listenTo( item, 'change', function( model ) {
-                                media.frame.stopListening( item );
-                                media.frame.trigger( 'edit:attachment', model );
+                        item = wp.media.attachment( query );
+                        frame.listenTo( item, 'change', function( model ) {
+                                frame.stopListening( item );
+                                frame.trigger( 'edit:attachment', model );
                         } );
                         item.fetch();
@@ -656 +675 @@
                         }).render();
                         this.uploader.ready();
-                        $('body').append( this.uploader.el );
+                        this.$body.append( this.uploader.el );
 
                         this.options.uploader = false;
                 }
-
-                this.gridRouter = new wp.media.view.MediaFrame.Manage.Router();
 
                 // Call 'initialize' directly on the parent class.
@@ -669 +686 @@
                 this.$el.appendTo( this.options.container );
 
+                this.setLibrary( this.options );
+                this.setRouter();
                 this.createStates();
                 this.bindRegionModeHandlers();
                 this.render();
                 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
+                });
         },
 
@@ -693 +723 @@
                 // Update the URL when entering search string (at most once per second)
                 search.on( 'input', _.bind( input, this ) );
-                searchView.val( currentSearch ).trigger( 'input' );
+                if ( currentSearch ) {
+                        searchView.val( currentSearch ).trigger( 'input' );
+                }
 
                 this.gridRouter.on( 'route:search', function () {
@@ -720 +752 @@
                 this.states.add([
                         new Library({
-                                library:            wp.media.query( options.library ),
+                                library:            this.library,
                                 multiple:           options.multiple,
                                 title:              options.title,

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

@@ -10 +10 @@
  */
 var Router = Backbone.Router.extend({
+        initialize: function ( options ) {
+                this.controller = options.controller;
+                this.library = options.library;
+                this.on( 'route', this.checkRoute );
+        },
+
         routes: {
                 '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;
+                }
         },
 
@@ -27 +47 @@
         // Show the modal with a specific item
         showItem: function( query ) {
-                var media = wp.media,
-                        library = media.frame.state().get('library'),
+                var frame = this.controller,
                         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 ) {
-                        media.frame.trigger( 'edit:attachment', item );
+                        frame.trigger( 'edit:attachment', item );
                 } else {
-                        item = media.attachment( query );
-                        media.frame.listenTo( item, 'change', function( model ) {
-                                media.frame.stopListening( item );
-                                media.frame.trigger( 'edit:attachment', model );
+                        item = wp.media.attachment( query );
+                        frame.listenTo( item, 'change', function( model ) {
+                                frame.stopListening( item );
+                                frame.trigger( 'edit:attachment', model );
                         } );
                         item.fetch();

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

@@ -63 +63 @@
                         }).render();
                         this.uploader.ready();
-                        $('body').append( this.uploader.el );
+                        this.$body.append( this.uploader.el );
 
                         this.options.uploader = false;
                 }
-
-                this.gridRouter = new wp.media.view.MediaFrame.Manage.Router();
 
                 // Call 'initialize' directly on the parent class.
@@ -76 +74 @@
                 this.$el.appendTo( this.options.container );
 
+                this.setLibrary( this.options );
+                this.setRouter();
                 this.createStates();
                 this.bindRegionModeHandlers();
                 this.render();
                 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
+                });
         },
 
@@ -100 +111 @@
                 // Update the URL when entering search string (at most once per second)
                 search.on( 'input', _.bind( input, this ) );
-                searchView.val( currentSearch ).trigger( 'input' );
+                if ( currentSearch ) {
+                        searchView.val( currentSearch ).trigger( 'input' );
+                }
 
                 this.gridRouter.on( 'route:search', function () {
@@ -127 +140 @@
                 this.states.add([
                         new Library({
-                                library:            wp.media.query( options.library ),
+                                library:            this.library,
                                 multiple:           options.multiple,
                                 title:              options.title,