WordPress.org
Get WordPress

Make WordPress Core

Ticket #31846: 31846.4.diff

File 31846.4.diff, 16.1 KB (added by adamsilverstein, 9 years ago)

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

    diff --git src/wp-includes/js/media-grid.js src/wp-includes/js/media-grid.js
index edf429e..4ddd034 100644
    media.view.DeleteSelectedPermanentlyButton = require( './views/button/delete-sel 
    5050 */
    5151var Router = Backbone.Router.extend({
    5252        routes: {
    53                 'upload.php?item=:slug':    'showItem',
    54                 'upload.php?search=:query': 'search'
     53                'upload.php?item=:slug&mode=edit': 'editItem',
     54                'upload.php?item=:slug':           'showItem',
     55                'upload.php?search=:query':        'search',
     56                'upload.php':                      'reset'
    5557        },
    5658
    5759        // Map routes against the page URL
    … … var Router = Backbone.Router.extend({ 
    5961                return 'upload.php' + url;
    6062        },
    6163
     64        reset: function( query ) {
     65                var frame = wp.media.frames.edit;
     66
     67                if ( frame ) {
     68                        frame.close();
     69                }
     70        },
     71
    6272        // Respond to the search route by filling the search field and trigggering the input event
    6373        search: function( query ) {
    6474                jQuery( '#media-search-input' ).val( query ).trigger( 'input' );
    … … var Router = Backbone.Router.extend({ 
    6777        // Show the modal with a specific item
    6878        showItem: function( query ) {
    6979                var media = wp.media,
    70                         library = media.frame.state().get('library'),
     80                        frame = media.frames.browse,
     81                        library = frame.state().get('library'),
    7182                        item;
    7283
    7384                // Trigger the media frame to open the correct item
    7485                item = library.findWhere( { id: parseInt( query, 10 ) } );
     86
    7587                if ( item ) {
    76                         media.frame.trigger( 'edit:attachment', item );
     88                        frame.trigger( 'edit:attachment', item );
    7789                } else {
    7890                        item = media.attachment( query );
    79                         media.frame.listenTo( item, 'change', function( model ) {
    80                                 media.frame.stopListening( item );
    81                                 media.frame.trigger( 'edit:attachment', model );
     91                        frame.listenTo( item, 'change', function( model ) {
     92                                frame.stopListening( item );
     93                                frame.trigger( 'edit:attachment', model );
    8294                        } );
    8395                        item.fetch();
    8496                }
     97        },
     98
     99        // Show the modal in edit mode with a specific item.
     100        editItem: function( query ) {
     101                this.showItem( query );
     102                wp.media.frames.edit.content.mode( 'edit-details' );
    85103        }
    86104});
    87105
    … … var Details = wp.media.view.Attachment.Details, 
    107125TwoColumn = Details.extend({
    108126        template: wp.template( 'attachment-details-two-column' ),
    109127
     128        initialize: function() {
     129                this.controller.on( 'content:activate:edit-details', _.bind( this.editAttachment, this ) );
     130
     131                Details.prototype.initialize.apply( this, arguments );
     132        },
     133
    110134        editAttachment: function( event ) {
    111                 event.preventDefault();
     135                if ( event ) {
     136                        event.preventDefault();
     137                }
    112138                this.controller.content.mode( 'edit-image' );
    113139        },
    114140
    … … EditAttachments = MediaFrame.extend({ 
    401427                // Bind default title creation.
    402428                this.on( 'title:create:default', this.createTitle, this );
    403429
    404                 // Close the modal if the attachment is deleted.
    405                 this.listenTo( this.model, 'change:status destroy', this.close, this );
    406 
    407430                this.on( 'content:create:edit-metadata', this.editMetadataMode, this );
    408431                this.on( 'content:create:edit-image', this.editImageMode, this );
    409432                this.on( 'content:render:edit-image', this.editImageModeRender, this );
     433                this.on( 'refresh', this.rerender, this );
    410434                this.on( 'close', this.detach );
     435
     436                this.bindModelHandlers();
     437                this.listenTo( this.gridRouter, 'route:search', this.close, this );
     438        },
     439
     440        bindModelHandlers: function() {
     441                // Close the modal if the attachment is deleted.
     442                this.listenTo( this.model, 'change:status destroy', this.close, this );
    411443        },
    412444
    413445        createModal: function() {
    … … EditAttachments = MediaFrame.extend({ 
    424456
    425457                        // Completely destroy the modal DOM element when closing it.
    426458                        this.modal.on( 'close', _.bind( function() {
    427                                 this.modal.remove();
    428459                                $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
    429460                                // Restore the original focus item if possible
    430461                                $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus();
    … … EditAttachments = MediaFrame.extend({ 
    442473         */
    443474        createStates: function() {
    444475                this.states.add([
    445                         new wp.media.controller.EditAttachmentMetadata( { model: this.model } )
     476                        new wp.media.controller.EditAttachmentMetadata({
     477                                model:   this.model,
     478                                library: this.library
     479                        })
    446480                ]);
    447481        },
    448482
    … … EditAttachments = MediaFrame.extend({ 
    494528                        frame: this,
    495529                        controller: editImageController
    496530                } );
     531
     532                this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id + '&mode=edit' ) );
     533
    497534        },
    498535
    499536        editImageModeRender: function( view ) {
    … … EditAttachments = MediaFrame.extend({ 
    508545        /**
    509546         * Rerender the view.
    510547         */
    511         rerender: function() {
     548        rerender: function( model ) {
     549                this.stopListening( this.model );
     550
     551                this.model = model;
     552
     553                this.bindModelHandlers();
     554
    512555                // Only rerender the `content` region.
    513556                if ( this.content.mode() !== 'edit-metadata' ) {
    514557                        this.content.mode( 'edit-metadata' );
    … … EditAttachments = MediaFrame.extend({ 
    527570                        this.$( '.left' ).blur();
    528571                        return;
    529572                }
    530                 this.model = this.library.at( this.getCurrentIndex() - 1 );
    531                 this.rerender();
     573                this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
    532574                this.$( '.left' ).focus();
    533575        },
    534576
    … … EditAttachments = MediaFrame.extend({ 
    540582                        this.$( '.right' ).blur();
    541583                        return;
    542584                }
    543                 this.model = this.library.at( this.getCurrentIndex() + 1 );
    544                 this.rerender();
     585                this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
    545586                this.$( '.right' ).focus();
    546587        },
    547588
    … … EditAttachments = MediaFrame.extend({ 
    576617        },
    577618
    578619        resetRoute: function() {
    579                 this.gridRouter.navigate( this.gridRouter.baseUrl( '' ) );
     620                var searchTerm = this.controller.browserView.toolbar.get( 'search' ).$el.val(),
     621                        url = '' !== searchTerm ? '?search=' + searchTerm : '';
     622
     623                this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
    580624        }
    581625});
    582626
    … … Manage = MediaFrame.extend({ 
    666710                this.bindRegionModeHandlers();
    667711                this.render();
    668712                this.bindSearchHandler();
     713
     714                wp.media.frames.browse = this;
    669715        },
    670716
    671717        bindSearchHandler: function() {
    … … Manage = MediaFrame.extend({ 
    686732
    687733                // Update the URL when entering search string (at most once per second)
    688734                search.on( 'input', _.bind( input, this ) );
    689                 searchView.val( currentSearch ).trigger( 'input' );
    690 
    691                 this.gridRouter.on( 'route:search', function () {
    692                         var href = window.location.href;
    693                         if ( href.indexOf( 'mode=' ) > -1 ) {
    694                                 href = href.replace( /mode=[^&]+/g, 'mode=list' );
    695                         } else {
    696                                 href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
    697                         }
    698                         href = href.replace( 'search=', 's=' );
    699                         listMode.prop( 'href', href );
    700                 } );
     735
     736                this.gridRouter
     737                        .on( 'route:search', function () {
     738                                var href = window.location.href;
     739                                if ( href.indexOf( 'mode=' ) > -1 ) {
     740                                        href = href.replace( /mode=[^&]+/g, 'mode=list' );
     741                                } else {
     742                                        href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
     743                                }
     744                                href = href.replace( 'search=', 's=' );
     745                                listMode.prop( 'href', href );
     746                        })
     747                        .on( 'route:reset', function() {
     748                                searchView.val( '' ).trigger( 'input' );
     749                        });
    701750        },
    702751
    703752        /**
    … … Manage = MediaFrame.extend({ 
    789838         */
    790839        openEditAttachmentModal: function( model ) {
    791840                // Create a new EditAttachment frame, passing along the library and the attachment model.
    792                 wp.media( {
    793                         frame:       'edit-attachments',
    794                         controller:  this,
    795                         library:     this.state().get('library'),
    796                         model:       model
    797                 } );
     841                if ( wp.media.frames.edit ) {
     842                        wp.media.frames.edit.open().trigger( 'refresh', model );
     843                } else {
     844                        wp.media.frames.edit = wp.media( {
     845                                frame:       'edit-attachments',
     846                                controller:  this,
     847                                library:     this.state().get('library'),
     848                                model:       model
     849                        } );
     850                }
    798851        },
    799852
    800853        /**

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

    diff --git src/wp-includes/js/media/routers/manage.js src/wp-includes/js/media/routers/manage.js
index 7395969..477150e 100644
     
    88 */
    99var Router = Backbone.Router.extend({
    1010        routes: {
    11                 'upload.php?item=:slug':    'showItem',
    12                 'upload.php?search=:query': 'search'
     11                'upload.php?item=:slug&mode=edit': 'editItem',
     12                'upload.php?item=:slug':           'showItem',
     13                'upload.php?search=:query':        'search',
     14                'upload.php':                      'reset'
    1315        },
    1416
    1517        // Map routes against the page URL
    … … var Router = Backbone.Router.extend({ 
    1719                return 'upload.php' + url;
    1820        },
    1921
     22        reset: function( query ) {
     23                var frame = wp.media.frames.edit;
     24
     25                if ( frame ) {
     26                        frame.close();
     27                }
     28        },
     29
    2030        // Respond to the search route by filling the search field and trigggering the input event
    2131        search: function( query ) {
    2232                jQuery( '#media-search-input' ).val( query ).trigger( 'input' );
    … … var Router = Backbone.Router.extend({ 
    2535        // Show the modal with a specific item
    2636        showItem: function( query ) {
    2737                var media = wp.media,
    28                         library = media.frame.state().get('library'),
     38                        frame = media.frames.browse,
     39                        library = frame.state().get('library'),
    2940                        item;
    3041
    3142                // Trigger the media frame to open the correct item
    3243                item = library.findWhere( { id: parseInt( query, 10 ) } );
     44
    3345                if ( item ) {
    34                         media.frame.trigger( 'edit:attachment', item );
     46                        frame.trigger( 'edit:attachment', item );
    3547                } else {
    3648                        item = media.attachment( query );
    37                         media.frame.listenTo( item, 'change', function( model ) {
    38                                 media.frame.stopListening( item );
    39                                 media.frame.trigger( 'edit:attachment', model );
     49                        frame.listenTo( item, 'change', function( model ) {
     50                                frame.stopListening( item );
     51                                frame.trigger( 'edit:attachment', model );
    4052                        } );
    4153                        item.fetch();
    4254                }
     55        },
     56
     57        // Show the modal in edit mode with a specific item.
     58        editItem: function( query ) {
     59                this.showItem( query );
     60                wp.media.frames.edit.content.mode( 'edit-details' );
    4361        }
    4462});
    4563

  • src/wp-includes/js/media/views/attachment/details-two-column.js 

    diff --git src/wp-includes/js/media/views/attachment/details-two-column.js src/wp-includes/js/media/views/attachment/details-two-column.js
index 708287d..96a8fed 100644
    var Details = wp.media.view.Attachment.Details, 
    1717TwoColumn = Details.extend({
    1818        template: wp.template( 'attachment-details-two-column' ),
    1919
     20        initialize: function() {
     21                this.controller.on( 'content:activate:edit-details', _.bind( this.editAttachment, this ) );
     22
     23                Details.prototype.initialize.apply( this, arguments );
     24        },
     25
    2026        editAttachment: function( event ) {
    21                 event.preventDefault();
     27                if ( event ) {
     28                        event.preventDefault();
     29                }
    2230                this.controller.content.mode( 'edit-image' );
    2331        },
    2432

  • src/wp-includes/js/media/views/frame/edit-attachments.js 

    diff --git src/wp-includes/js/media/views/frame/edit-attachments.js src/wp-includes/js/media/views/frame/edit-attachments.js
index 3d29ff5..7976eac 100644
    EditAttachments = MediaFrame.extend({ 
    5959                // Bind default title creation.
    6060                this.on( 'title:create:default', this.createTitle, this );
    6161
    62                 // Close the modal if the attachment is deleted.
    63                 this.listenTo( this.model, 'change:status destroy', this.close, this );
    64 
    6562                this.on( 'content:create:edit-metadata', this.editMetadataMode, this );
    6663                this.on( 'content:create:edit-image', this.editImageMode, this );
    6764                this.on( 'content:render:edit-image', this.editImageModeRender, this );
     65                this.on( 'refresh', this.rerender, this );
    6866                this.on( 'close', this.detach );
     67
     68                this.bindModelHandlers();
     69                this.listenTo( this.gridRouter, 'route:search', this.close, this );
     70        },
     71
     72        bindModelHandlers: function() {
     73                // Close the modal if the attachment is deleted.
     74                this.listenTo( this.model, 'change:status destroy', this.close, this );
    6975        },
    7076
    7177        createModal: function() {
    … … EditAttachments = MediaFrame.extend({ 
    8288
    8389                        // Completely destroy the modal DOM element when closing it.
    8490                        this.modal.on( 'close', _.bind( function() {
    85                                 this.modal.remove();
    8691                                $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
    8792                                // Restore the original focus item if possible
    8893                                $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus();
    … … EditAttachments = MediaFrame.extend({ 
    100105         */
    101106        createStates: function() {
    102107                this.states.add([
    103                         new wp.media.controller.EditAttachmentMetadata( { model: this.model } )
     108                        new wp.media.controller.EditAttachmentMetadata({
     109                                model:   this.model,
     110                                library: this.library
     111                        })
    104112                ]);
    105113        },
    106114
    … … EditAttachments = MediaFrame.extend({ 
    152160                        frame: this,
    153161                        controller: editImageController
    154162                } );
     163
     164                this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id + '&mode=edit' ) );
     165
    155166        },
    156167
    157168        editImageModeRender: function( view ) {
    … … EditAttachments = MediaFrame.extend({ 
    166177        /**
    167178         * Rerender the view.
    168179         */
    169         rerender: function() {
     180        rerender: function( model ) {
     181                this.stopListening( this.model );
     182
     183                this.model = model;
     184
     185                this.bindModelHandlers();
     186
    170187                // Only rerender the `content` region.
    171188                if ( this.content.mode() !== 'edit-metadata' ) {
    172189                        this.content.mode( 'edit-metadata' );
    … … EditAttachments = MediaFrame.extend({ 
    185202                        this.$( '.left' ).blur();
    186203                        return;
    187204                }
    188                 this.model = this.library.at( this.getCurrentIndex() - 1 );
    189                 this.rerender();
     205                this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
    190206                this.$( '.left' ).focus();
    191207        },
    192208
    … … EditAttachments = MediaFrame.extend({ 
    198214                        this.$( '.right' ).blur();
    199215                        return;
    200216                }
    201                 this.model = this.library.at( this.getCurrentIndex() + 1 );
    202                 this.rerender();
     217                this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
    203218                this.$( '.right' ).focus();
    204219        },
    205220
    … … EditAttachments = MediaFrame.extend({ 
    234249        },
    235250
    236251        resetRoute: function() {
    237                 this.gridRouter.navigate( this.gridRouter.baseUrl( '' ) );
     252                var searchTerm = this.controller.browserView.toolbar.get( 'search' ).$el.val(),
     253                        url = '' !== searchTerm ? '?search=' + searchTerm : '';
     254
     255                this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
    238256        }
    239257});
    240258

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

    diff --git src/wp-includes/js/media/views/frame/manage.js src/wp-includes/js/media/views/frame/manage.js
index a033d7b..ccf7849 100644
    Manage = MediaFrame.extend({ 
    8181                this.bindRegionModeHandlers();
    8282                this.render();
    8383                this.bindSearchHandler();
     84
     85                wp.media.frames.browse = this;
    8486        },
    8587
    8688        bindSearchHandler: function() {
    … … Manage = MediaFrame.extend({ 
    101103
    102104                // Update the URL when entering search string (at most once per second)
    103105                search.on( 'input', _.bind( input, this ) );
    104                 searchView.val( currentSearch ).trigger( 'input' );
    105 
    106                 this.gridRouter.on( 'route:search', function () {
    107                         var href = window.location.href;
    108                         if ( href.indexOf( 'mode=' ) > -1 ) {
    109                                 href = href.replace( /mode=[^&]+/g, 'mode=list' );
    110                         } else {
    111                                 href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
    112                         }
    113                         href = href.replace( 'search=', 's=' );
    114                         listMode.prop( 'href', href );
    115                 } );
     106
     107                this.gridRouter
     108                        .on( 'route:search', function () {
     109                                var href = window.location.href;
     110                                if ( href.indexOf( 'mode=' ) > -1 ) {
     111                                        href = href.replace( /mode=[^&]+/g, 'mode=list' );
     112                                } else {
     113                                        href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
     114                                }
     115                                href = href.replace( 'search=', 's=' );
     116                                listMode.prop( 'href', href );
     117                        })
     118                        .on( 'route:reset', function() {
     119                                searchView.val( '' ).trigger( 'input' );
     120                        });
    116121        },
    117122
    118123        /**
    … … Manage = MediaFrame.extend({ 
    204209         */
    205210        openEditAttachmentModal: function( model ) {
    206211                // Create a new EditAttachment frame, passing along the library and the attachment model.
    207                 wp.media( {
    208                         frame:       'edit-attachments',
    209                         controller:  this,
    210                         library:     this.state().get('library'),
    211                         model:       model
    212                 } );
     212                if ( wp.media.frames.edit ) {
     213                        wp.media.frames.edit.open().trigger( 'refresh', model );
     214                } else {
     215                        wp.media.frames.edit = wp.media( {
     216                                frame:       'edit-attachments',
     217                                controller:  this,
     218                                library:     this.state().get('library'),
     219                                model:       model
     220                        } );
     221                }
    213222        },
    214223
    215224        /**