WordPress.org
Get WordPress

Make WordPress Core

Ticket #31846: 31846.6.diff

File 31846.6.diff, 18.4 KB (added by adamsilverstein, 9 years ago)

  • Gruntfile.js 

    diff --git Gruntfile.js Gruntfile.js
index c7e7f73b2b..1172b6221c 100644
    module.exports = function(grunt) { 
    687687                if ( ! this.args.length || this.args.indexOf( 'browserify' ) > -1 ) {
    688688                        grunt.config( 'browserify.options', {
    689689                                browserifyOptions: {
    690                                         debug: true
     690                                        debug: false
    691691                                },
    692692                                watch: true
    693693                        } );

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

    diff --git src/wp-includes/js/media-grid.js src/wp-includes/js/media-grid.js
index edf429e896..b6128a3755 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() {
     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                item.set( 'skipHistory', true );
     87
    7588                if ( item ) {
    76                         media.frame.trigger( 'edit:attachment', item );
     89                        frame.trigger( 'edit:attachment', item );
    7790                } else {
    7891                        item = media.attachment( query );
    79                         media.frame.listenTo( item, 'change', function( model ) {
    80                                 media.frame.stopListening( item );
    81                                 media.frame.trigger( 'edit:attachment', model );
     92                        frame.listenTo( item, 'change', function( model ) {
     93                                frame.stopListening( item );
     94                                frame.trigger( 'edit:attachment', model );
    8295                        } );
    8396                        item.fetch();
    8497                }
     98        },
     99
     100        // Show the modal in edit mode with a specific item.
     101        editItem: function( query ) {
     102                this.showItem( query );
     103                wp.media.frames.edit.content.mode( 'edit-details' );
    85104        }
    86105});
    87106
    … … var Details = wp.media.view.Attachment.Details, 
    107126TwoColumn = Details.extend({
    108127        template: wp.template( 'attachment-details-two-column' ),
    109128
     129        initialize: function() {
     130                this.controller.on( 'content:activate:edit-details', _.bind( this.editAttachment, this ) );
     131
     132                Details.prototype.initialize.apply( this, arguments );
     133        },
     134
    110135        editAttachment: function( event ) {
    111                 event.preventDefault();
     136                if ( event ) {
     137                        event.preventDefault();
     138                }
    112139                this.controller.content.mode( 'edit-image' );
    113140        },
    114141
    … … EditAttachments = MediaFrame.extend({ 
    401428                // Bind default title creation.
    402429                this.on( 'title:create:default', this.createTitle, this );
    403430
    404                 // Close the modal if the attachment is deleted.
    405                 this.listenTo( this.model, 'change:status destroy', this.close, this );
    406 
    407431                this.on( 'content:create:edit-metadata', this.editMetadataMode, this );
    408432                this.on( 'content:create:edit-image', this.editImageMode, this );
    409433                this.on( 'content:render:edit-image', this.editImageModeRender, this );
     434                this.on( 'refresh', this.rerender, this );
    410435                this.on( 'close', this.detach );
     436
     437                this.bindModelHandlers();
     438                this.listenTo( this.gridRouter, 'route:search', this.close, this );
     439        },
     440
     441        bindModelHandlers: function() {
     442                // Close the modal if the attachment is deleted.
     443                this.listenTo( this.model, 'change:status destroy', this.close, this );
    411444        },
    412445
    413446        createModal: function() {
    … … EditAttachments = MediaFrame.extend({ 
    424457
    425458                        // Completely destroy the modal DOM element when closing it.
    426459                        this.modal.on( 'close', _.bind( function() {
    427                                 this.modal.remove();
    428460                                $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
    429461                                // Restore the original focus item if possible
    430462                                $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus();
    … … EditAttachments = MediaFrame.extend({ 
    442474         */
    443475        createStates: function() {
    444476                this.states.add([
    445                         new wp.media.controller.EditAttachmentMetadata( { model: this.model } )
     477                        new wp.media.controller.EditAttachmentMetadata({
     478                                model:   this.model,
     479                                library: this.library
     480                        })
    446481                ]);
    447482        },
    448483
    … … EditAttachments = MediaFrame.extend({ 
    467502                        model:      this.model
    468503                }) );
    469504
    470                 // Update browser url when navigating media details
    471                 if ( this.model ) {
     505                // Update browser url when navigating media details, except on load.
     506                if ( this.model && ! this.model.get( 'skipHistory' ) ) {
    472507                        this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) );
    473508                }
    474509        },
    … … EditAttachments = MediaFrame.extend({ 
    494529                        frame: this,
    495530                        controller: editImageController
    496531                } );
     532
     533                this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id + '&mode=edit' ) );
     534
    497535        },
    498536
    499537        editImageModeRender: function( view ) {
    … … EditAttachments = MediaFrame.extend({ 
    508546        /**
    509547         * Rerender the view.
    510548         */
    511         rerender: function() {
     549        rerender: function( model ) {
     550                this.stopListening( this.model );
     551
     552                this.model = model;
     553
     554                this.bindModelHandlers();
     555
    512556                // Only rerender the `content` region.
    513557                if ( this.content.mode() !== 'edit-metadata' ) {
    514558                        this.content.mode( 'edit-metadata' );
    … … EditAttachments = MediaFrame.extend({ 
    527571                        this.$( '.left' ).blur();
    528572                        return;
    529573                }
    530                 this.model = this.library.at( this.getCurrentIndex() - 1 );
    531                 this.rerender();
     574                this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
    532575                this.$( '.left' ).focus();
    533576        },
    534577
    … … EditAttachments = MediaFrame.extend({ 
    540583                        this.$( '.right' ).blur();
    541584                        return;
    542585                }
    543                 this.model = this.library.at( this.getCurrentIndex() + 1 );
    544                 this.rerender();
     586                this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
    545587                this.$( '.right' ).focus();
    546588        },
    547589
    … … EditAttachments = MediaFrame.extend({ 
    576618        },
    577619
    578620        resetRoute: function() {
    579                 this.gridRouter.navigate( this.gridRouter.baseUrl( '' ) );
     621                var searchTerm = this.controller.browserView.toolbar.get( 'search' ).$el.val(),
     622                        url = '' !== searchTerm ? '?search=' + searchTerm : '';
     623                this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
    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() {
    672718                var search = this.$( '#media-search-input' ),
    673                         currentSearch = this.options.container.data( 'search' ),
    674719                        searchView = this.browserView.toolbar.get( 'search' ).$el,
    675720                        listMode = this.$( '.view-list' ),
    676721
    677                         input  = _.debounce( function (e) {
     722                        input  = _.throttle( function (e) {
    678723                                var val = $( e.currentTarget ).val(),
    679724                                        url = '';
    680725
    681726                                if ( val ) {
    682727                                        url += '?search=' + val;
     728                                        this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
    683729                                }
    684                                 this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
    685730                        }, 1000 );
    686731
    687732                // Update the URL when entering search string (at most once per second)
    688733                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                 } );
     734
     735                this.gridRouter
     736                        .on( 'route:search', function () {
     737                                var href = window.location.href;
     738                                if ( href.indexOf( 'mode=' ) > -1 ) {
     739                                        href = href.replace( /mode=[^&]+/g, 'mode=list' );
     740                                } else {
     741                                        href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
     742                                }
     743                                href = href.replace( 'search=', 's=' );
     744                                listMode.prop( 'href', href );
     745                        })
     746                        .on( 'route:reset', function() {
     747                                searchView.val( '' ).trigger( 'input' );
     748                        });
    701749        },
    702750
    703751        /**
    … … Manage = MediaFrame.extend({ 
    789837         */
    790838        openEditAttachmentModal: function( model ) {
    791839                // 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                 } );
     840                if ( wp.media.frames.edit ) {
     841                        wp.media.frames.edit.open().trigger( 'refresh', model );
     842                } else {
     843                        wp.media.frames.edit = wp.media( {
     844                                frame:       'edit-attachments',
     845                                controller:  this,
     846                                library:     this.state().get('library'),
     847                                model:       model
     848                        } );
     849                }
    798850        },
    799851
    800852        /**

  • 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 73959699b1..4b88aa3e01 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() {
     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                item.set( 'skipHistory', true );
     45
    3346                if ( item ) {
    34                         media.frame.trigger( 'edit:attachment', item );
     47                        frame.trigger( 'edit:attachment', item );
    3548                } else {
    3649                        item = media.attachment( query );
    37                         media.frame.listenTo( item, 'change', function( model ) {
    38                                 media.frame.stopListening( item );
    39                                 media.frame.trigger( 'edit:attachment', model );
     50                        frame.listenTo( item, 'change', function( model ) {
     51                                frame.stopListening( item );
     52                                frame.trigger( 'edit:attachment', model );
    4053                        } );
    4154                        item.fetch();
    4255                }
     56        },
     57
     58        // Show the modal in edit mode with a specific item.
     59        editItem: function( query ) {
     60                this.showItem( query );
     61                wp.media.frames.edit.content.mode( 'edit-details' );
    4362        }
    4463});
    4564

  • 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 708287dd15..96a8fed8f2 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 3d29ff5111..c0f4e15a7b 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({ 
    125133                        model:      this.model
    126134                }) );
    127135
    128                 // Update browser url when navigating media details
    129                 if ( this.model ) {
     136                // Update browser url when navigating media details, except on load.
     137                if ( this.model && ! this.model.get( 'skipHistory' ) ) {
    130138                        this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) );
    131139                }
    132140        },
    … … 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                this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
    238255        }
    239256});
    240257

  • 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 a033d7bf28..c260feb7f6 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() {
    8789                var search = this.$( '#media-search-input' ),
    88                         currentSearch = this.options.container.data( 'search' ),
    8990                        searchView = this.browserView.toolbar.get( 'search' ).$el,
    9091                        listMode = this.$( '.view-list' ),
    9192
    92                         input  = _.debounce( function (e) {
     93                        input  = _.throttle( function (e) {
    9394                                var val = $( e.currentTarget ).val(),
    9495                                        url = '';
    9596
    9697                                if ( val ) {
    9798                                        url += '?search=' + val;
     99                                        this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
    98100                                }
    99                                 this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
    100101                        }, 1000 );
    101102
    102103                // Update the URL when entering search string (at most once per second)
    103104                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                 } );
     105
     106                this.gridRouter
     107                        .on( 'route:search', function () {
     108                                var href = window.location.href;
     109                                if ( href.indexOf( 'mode=' ) > -1 ) {
     110                                        href = href.replace( /mode=[^&]+/g, 'mode=list' );
     111                                } else {
     112                                        href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
     113                                }
     114                                href = href.replace( 'search=', 's=' );
     115                                listMode.prop( 'href', href );
     116                        })
     117                        .on( 'route:reset', function() {
     118                                searchView.val( '' ).trigger( 'input' );
     119                        });
    116120        },
    117121
    118122        /**
    … … Manage = MediaFrame.extend({ 
    204208         */
    205209        openEditAttachmentModal: function( model ) {
    206210                // 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                 } );
     211                if ( wp.media.frames.edit ) {
     212                        wp.media.frames.edit.open().trigger( 'refresh', model );
     213                } else {
     214                        wp.media.frames.edit = wp.media( {
     215                                frame:       'edit-attachments',
     216                                controller:  this,
     217                                library:     this.state().get('library'),
     218                                model:       model
     219                        } );
     220                }
    213221        },
    214222
    215223        /**