[Summary view] [Print] [Text view]

   1  /******/ (() => { // webpackBootstrap
   2  /******/     var __webpack_modules__ = ({
   3  
   4  /***/ 659:
   5  /***/ ((module) => {
   6  
   7  var l10n = wp.media.view.l10n,
   8      EditAttachmentMetadata;
   9  
  10  /**
  11   * wp.media.controller.EditAttachmentMetadata
  12   *
  13   * A state for editing an attachment's metadata.
  14   *
  15   * @memberOf wp.media.controller
  16   *
  17   * @class
  18   * @augments wp.media.controller.State
  19   * @augments Backbone.Model
  20   */
  21  EditAttachmentMetadata = wp.media.controller.State.extend(/** @lends wp.media.controller.EditAttachmentMetadata.prototype */{
  22      defaults: {
  23          id:      'edit-attachment',
  24          // Title string passed to the frame's title region view.
  25          title:   l10n.attachmentDetails,
  26          // Region mode defaults.
  27          content: 'edit-metadata',
  28          menu:    false,
  29          toolbar: false,
  30          router:  false
  31      }
  32  });
  33  
  34  module.exports = EditAttachmentMetadata;
  35  
  36  
  37  /***/ }),
  38  
  39  /***/ 682:
  40  /***/ ((module) => {
  41  
  42  
  43  var Button = wp.media.view.Button,
  44      l10n = wp.media.view.l10n,
  45      SelectModeToggle;
  46  
  47  /**
  48   * wp.media.view.SelectModeToggleButton
  49   *
  50   * @memberOf wp.media.view
  51   *
  52   * @class
  53   * @augments wp.media.view.Button
  54   * @augments wp.media.View
  55   * @augments wp.Backbone.View
  56   * @augments Backbone.View
  57   */
  58  SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.prototype */{
  59      initialize: function() {
  60          _.defaults( this.options, {
  61              size : ''
  62          } );
  63  
  64          Button.prototype.initialize.apply( this, arguments );
  65          this.controller.on( 'select:activate select:deactivate', this.toggleBulkEditHandler, this );
  66          this.controller.on( 'selection:action:done', this.back, this );
  67      },
  68  
  69      back: function () {
  70          this.controller.deactivateMode( 'select' ).activateMode( 'edit' );
  71      },
  72  
  73      click: function() {
  74          Button.prototype.click.apply( this, arguments );
  75          if ( this.controller.isModeActive( 'select' ) ) {
  76              this.back();
  77          } else {
  78              this.controller.deactivateMode( 'edit' ).activateMode( 'select' );
  79          }
  80      },
  81  
  82      render: function() {
  83          Button.prototype.render.apply( this, arguments );
  84          this.$el.addClass( 'select-mode-toggle-button' );
  85          return this;
  86      },
  87  
  88      toggleBulkEditHandler: function() {
  89          var toolbar = this.controller.content.get().toolbar, children;
  90  
  91          children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *' );
  92  
  93          // @todo The Frame should be doing all of this.
  94          if ( this.controller.isModeActive( 'select' ) ) {
  95              this.model.set( {
  96                  size: 'large',
  97                  text: l10n.cancel
  98              } );
  99              children.not( '.spinner, .media-button' ).hide();
 100              this.$el.show();
 101              toolbar.$el.addClass( 'media-toolbar-mode-select' );
 102              toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
 103          } else {
 104              this.model.set( {
 105                  size: '',
 106                  text: l10n.bulkSelect
 107              } );
 108              this.controller.content.get().$el.removeClass( 'fixed' );
 109              toolbar.$el.css( 'width', '' );
 110              toolbar.$el.removeClass( 'media-toolbar-mode-select' );
 111              toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
 112              children.not( '.media-button' ).show();
 113              this.controller.state().get( 'selection' ).reset();
 114          }
 115      }
 116  });
 117  
 118  module.exports = SelectModeToggle;
 119  
 120  
 121  /***/ }),
 122  
 123  /***/ 1003:
 124  /***/ ((module) => {
 125  
 126  var Frame = wp.media.view.Frame,
 127      MediaFrame = wp.media.view.MediaFrame,
 128  
 129      $ = jQuery,
 130      EditAttachments;
 131  
 132  /**
 133   * wp.media.view.MediaFrame.EditAttachments
 134   *
 135   * A frame for editing the details of a specific media item.
 136   *
 137   * Opens in a modal by default.
 138   *
 139   * Requires an attachment model to be passed in the options hash under `model`.
 140   *
 141   * @memberOf wp.media.view.MediaFrame
 142   *
 143   * @class
 144   * @augments wp.media.view.Frame
 145   * @augments wp.media.View
 146   * @augments wp.Backbone.View
 147   * @augments Backbone.View
 148   * @mixes wp.media.controller.StateMachine
 149   */
 150  EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAttachments.prototype */{
 151  
 152      className: 'edit-attachment-frame',
 153      template:  wp.template( 'edit-attachment-frame' ),
 154      regions:   [ 'title', 'content' ],
 155  
 156      events: {
 157          'click .left':  'previousMediaItem',
 158          'click .right': 'nextMediaItem'
 159      },
 160  
 161      initialize: function() {
 162          Frame.prototype.initialize.apply( this, arguments );
 163  
 164          _.defaults( this.options, {
 165              modal: true,
 166              state: 'edit-attachment'
 167          });
 168  
 169          this.controller = this.options.controller;
 170          this.gridRouter = this.controller.gridRouter;
 171          this.library = this.options.library;
 172  
 173          if ( this.options.model ) {
 174              this.model = this.options.model;
 175          }
 176  
 177          this.bindHandlers();
 178          this.createStates();
 179          this.createModal();
 180  
 181          this.title.mode( 'default' );
 182          this.toggleNav();
 183      },
 184  
 185      bindHandlers: function() {
 186          // Bind default title creation.
 187          this.on( 'title:create:default', this.createTitle, this );
 188  
 189          this.on( 'content:create:edit-metadata', this.editMetadataMode, this );
 190          this.on( 'content:create:edit-image', this.editImageMode, this );
 191          this.on( 'content:render:edit-image', this.editImageModeRender, this );
 192          this.on( 'refresh', this.rerender, this );
 193          this.on( 'close', this.detach );
 194  
 195          this.bindModelHandlers();
 196          this.listenTo( this.gridRouter, 'route:search', this.close, this );
 197      },
 198  
 199      bindModelHandlers: function() {
 200          // Close the modal if the attachment is deleted.
 201          this.listenTo( this.model, 'change:status destroy', this.close, this );
 202      },
 203  
 204      createModal: function() {
 205          // Initialize modal container view.
 206          if ( this.options.modal ) {
 207              this.modal = new wp.media.view.Modal({
 208                  controller:     this,
 209                  title:          this.options.title,
 210                  hasCloseButton: false
 211              });
 212  
 213              this.modal.on( 'open', _.bind( function () {
 214                  $( 'body' ).on( 'keydown.media-modal', _.bind( this.keyEvent, this ) );
 215              }, this ) );
 216  
 217              // Completely destroy the modal DOM element when closing it.
 218              this.modal.on( 'close', _.bind( function() {
 219                  // Remove the keydown event.
 220                  $( 'body' ).off( 'keydown.media-modal' );
 221                  // Move focus back to the original item in the grid if possible.
 222                  $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).trigger( 'focus' );
 223                  this.resetRoute();
 224              }, this ) );
 225  
 226              // Set this frame as the modal's content.
 227              this.modal.content( this );
 228              this.modal.open();
 229          }
 230      },
 231  
 232      /**
 233       * Add the default states to the frame.
 234       */
 235      createStates: function() {
 236          this.states.add([
 237              new wp.media.controller.EditAttachmentMetadata({
 238                  model:   this.model,
 239                  library: this.library
 240              })
 241          ]);
 242      },
 243  
 244      /**
 245       * Content region rendering callback for the `edit-metadata` mode.
 246       *
 247       * @param {Object} contentRegion Basic object with a `view` property, which
 248       *                               should be set with the proper region view.
 249       */
 250      editMetadataMode: function( contentRegion ) {
 251          contentRegion.view = new wp.media.view.Attachment.Details.TwoColumn({
 252              controller: this,
 253              model:      this.model
 254          });
 255  
 256          /**
 257           * Attach a subview to display fields added via the
 258           * `attachment_fields_to_edit` filter.
 259           */
 260          contentRegion.view.views.set( '.attachment-compat', new wp.media.view.AttachmentCompat({
 261              controller: this,
 262              model:      this.model
 263          }) );
 264  
 265          // Update browser url when navigating media details, except on load.
 266          if ( this.model && ! this.model.get( 'skipHistory' ) ) {
 267              this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) );
 268          }
 269      },
 270  
 271      /**
 272       * Render the EditImage view into the frame's content region.
 273       *
 274       * @param {Object} contentRegion Basic object with a `view` property, which
 275       *                               should be set with the proper region view.
 276       */
 277      editImageMode: function( contentRegion ) {
 278          var editImageController = new wp.media.controller.EditImage( {
 279              model: this.model,
 280              frame: this
 281          } );
 282          // Noop some methods.
 283          editImageController._toolbar = function() {};
 284          editImageController._router = function() {};
 285          editImageController._menu = function() {};
 286  
 287          contentRegion.view = new wp.media.view.EditImage.Details( {
 288              model: this.model,
 289              frame: this,
 290              controller: editImageController
 291          } );
 292  
 293          this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id + '&mode=edit' ) );
 294  
 295      },
 296  
 297      editImageModeRender: function( view ) {
 298          view.on( 'ready', view.loadEditor );
 299      },
 300  
 301      toggleNav: function() {
 302          this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
 303          this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
 304      },
 305  
 306      /**
 307       * Rerender the view.
 308       */
 309      rerender: function( model ) {
 310          this.stopListening( this.model );
 311  
 312          this.model = model;
 313  
 314          this.bindModelHandlers();
 315  
 316          // Only rerender the `content` region.
 317          if ( this.content.mode() !== 'edit-metadata' ) {
 318              this.content.mode( 'edit-metadata' );
 319          } else {
 320              this.content.render();
 321          }
 322  
 323          this.toggleNav();
 324      },
 325  
 326      /**
 327       * Click handler to switch to the previous media item.
 328       */
 329      previousMediaItem: function() {
 330          if ( ! this.hasPrevious() ) {
 331              return;
 332          }
 333  
 334          this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
 335          // Move focus to the Previous button. When there are no more items, to the Next button.
 336          this.focusNavButton( this.hasPrevious() ? '.left' : '.right' );
 337      },
 338  
 339      /**
 340       * Click handler to switch to the next media item.
 341       */
 342      nextMediaItem: function() {
 343          if ( ! this.hasNext() ) {
 344              return;
 345          }
 346  
 347          this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
 348          // Move focus to the Next button. When there are no more items, to the Previous button.
 349          this.focusNavButton( this.hasNext() ? '.right' : '.left' );
 350      },
 351  
 352      /**
 353       * Set focus to the navigation buttons depending on the browsing direction.
 354       *
 355       * @since 5.3.0
 356       *
 357       * @param {string} which A CSS selector to target the button to focus.
 358       */
 359      focusNavButton: function( which ) {
 360          $( which ).trigger( 'focus' );
 361      },
 362  
 363      getCurrentIndex: function() {
 364          return this.library.indexOf( this.model );
 365      },
 366  
 367      hasNext: function() {
 368          return ( this.getCurrentIndex() + 1 ) < this.library.length;
 369      },
 370  
 371      hasPrevious: function() {
 372          return ( this.getCurrentIndex() - 1 ) > -1;
 373      },
 374      /**
 375       * Respond to the keyboard events: right arrow, left arrow, except when
 376       * focus is in a textarea or input field.
 377       */
 378      keyEvent: function( event ) {
 379          if ( ( 'INPUT' === event.target.nodeName || 'TEXTAREA' === event.target.nodeName ) && ! event.target.disabled ) {
 380              return;
 381          }
 382  
 383          // The right arrow key.
 384          if ( 39 === event.keyCode ) {
 385              this.nextMediaItem();
 386          }
 387          // The left arrow key.
 388          if ( 37 === event.keyCode ) {
 389              this.previousMediaItem();
 390          }
 391      },
 392  
 393      resetRoute: function() {
 394          var searchTerm = this.controller.browserView.toolbar.get( 'search' ).$el.val(),
 395              url = '' !== searchTerm ? '?search=' + searchTerm : '';
 396          this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
 397      }
 398  });
 399  
 400  module.exports = EditAttachments;
 401  
 402  
 403  /***/ }),
 404  
 405  /***/ 1312:
 406  /***/ ((module) => {
 407  
 408  var Details = wp.media.view.Attachment.Details,
 409      TwoColumn;
 410  
 411  /**
 412   * wp.media.view.Attachment.Details.TwoColumn
 413   *
 414   * A similar view to media.view.Attachment.Details
 415   * for use in the Edit Attachment modal.
 416   *
 417   * @memberOf wp.media.view.Attachment.Details
 418   *
 419   * @class
 420   * @augments wp.media.view.Attachment.Details
 421   * @augments wp.media.view.Attachment
 422   * @augments wp.media.View
 423   * @augments wp.Backbone.View
 424   * @augments Backbone.View
 425   */
 426  TwoColumn = Details.extend(/** @lends wp.media.view.Attachment.Details.TwoColumn.prototype */{
 427      template: wp.template( 'attachment-details-two-column' ),
 428  
 429      initialize: function() {
 430          this.controller.on( 'content:activate:edit-details', _.bind( this.editAttachment, this ) );
 431  
 432          Details.prototype.initialize.apply( this, arguments );
 433      },
 434  
 435      editAttachment: function( event ) {
 436          if ( event ) {
 437              event.preventDefault();
 438          }
 439          this.controller.content.mode( 'edit-image' );
 440      },
 441  
 442      /**
 443       * Noop this from parent class, doesn't apply here.
 444       */
 445      toggleSelectionHandler: function() {}
 446  
 447  });
 448  
 449  module.exports = TwoColumn;
 450  
 451  
 452  /***/ }),
 453  
 454  /***/ 2429:
 455  /***/ ((module) => {
 456  
 457  /**
 458   * wp.media.view.MediaFrame.Manage.Router
 459   *
 460   * A router for handling the browser history and application state.
 461   *
 462   * @memberOf wp.media.view.MediaFrame.Manage
 463   *
 464   * @class
 465   * @augments Backbone.Router
 466   */
 467  var Router = Backbone.Router.extend(/** @lends wp.media.view.MediaFrame.Manage.Router.prototype */{
 468      routes: {
 469          'upload.php?item=:slug&mode=edit': 'editItem',
 470          'upload.php?item=:slug':           'showItem',
 471          'upload.php?search=:query':        'search',
 472          'upload.php':                      'reset'
 473      },
 474  
 475      // Map routes against the page URL.
 476      baseUrl: function( url ) {
 477          return 'upload.php' + url;
 478      },
 479  
 480      reset: function() {
 481          var frame = wp.media.frames.edit;
 482  
 483          if ( frame ) {
 484              frame.close();
 485          }
 486      },
 487  
 488      // Respond to the search route by filling the search field and triggering the input event.
 489      search: function( query ) {
 490          jQuery( '#media-search-input' ).val( query ).trigger( 'input' );
 491      },
 492  
 493      // Show the modal with a specific item.
 494      showItem: function( query ) {
 495          var media = wp.media,
 496              frame = media.frames.browse,
 497              library = frame.state().get('library'),
 498              item;
 499  
 500          // Trigger the media frame to open the correct item.
 501          item = library.findWhere( { id: parseInt( query, 10 ) } );
 502  
 503          if ( item ) {
 504              item.set( 'skipHistory', true );
 505              frame.trigger( 'edit:attachment', item );
 506          } else {
 507              item = media.attachment( query );
 508              frame.listenTo( item, 'change', function( model ) {
 509                  frame.stopListening( item );
 510                  frame.trigger( 'edit:attachment', model );
 511              } );
 512              item.fetch();
 513          }
 514      },
 515  
 516      // Show the modal in edit mode with a specific item.
 517      editItem: function( query ) {
 518          this.showItem( query );
 519          wp.media.frames.edit.content.mode( 'edit-details' );
 520      }
 521  });
 522  
 523  module.exports = Router;
 524  
 525  
 526  /***/ }),
 527  
 528  /***/ 5806:
 529  /***/ ((module) => {
 530  
 531  var Button = wp.media.view.Button,
 532      DeleteSelected = wp.media.view.DeleteSelectedButton,
 533      DeleteSelectedPermanently;
 534  
 535  /**
 536   * wp.media.view.DeleteSelectedPermanentlyButton
 537   *
 538   * When MEDIA_TRASH is true, a button that handles bulk Delete Permanently logic
 539   *
 540   * @memberOf wp.media.view
 541   *
 542   * @class
 543   * @augments wp.media.view.DeleteSelectedButton
 544   * @augments wp.media.view.Button
 545   * @augments wp.media.View
 546   * @augments wp.Backbone.View
 547   * @augments Backbone.View
 548   */
 549  DeleteSelectedPermanently = DeleteSelected.extend(/** @lends wp.media.view.DeleteSelectedPermanentlyButton.prototype */{
 550      initialize: function() {
 551          DeleteSelected.prototype.initialize.apply( this, arguments );
 552          this.controller.on( 'select:activate', this.selectActivate, this );
 553          this.controller.on( 'select:deactivate', this.selectDeactivate, this );
 554      },
 555  
 556      filterChange: function( model ) {
 557          this.canShow = ( 'trash' === model.get( 'status' ) );
 558      },
 559  
 560      selectActivate: function() {
 561          this.toggleDisabled();
 562          this.$el.toggleClass( 'hidden', ! this.canShow );
 563      },
 564  
 565      selectDeactivate: function() {
 566          this.toggleDisabled();
 567          this.$el.addClass( 'hidden' );
 568      },
 569  
 570      render: function() {
 571          Button.prototype.render.apply( this, arguments );
 572          this.selectActivate();
 573          return this;
 574      }
 575  });
 576  
 577  module.exports = DeleteSelectedPermanently;
 578  
 579  
 580  /***/ }),
 581  
 582  /***/ 6606:
 583  /***/ ((module) => {
 584  
 585  var Button = wp.media.view.Button,
 586      l10n = wp.media.view.l10n,
 587      DeleteSelected;
 588  
 589  /**
 590   * wp.media.view.DeleteSelectedButton
 591   *
 592   * A button that handles bulk Delete/Trash logic
 593   *
 594   * @memberOf wp.media.view
 595   *
 596   * @class
 597   * @augments wp.media.view.Button
 598   * @augments wp.media.View
 599   * @augments wp.Backbone.View
 600   * @augments Backbone.View
 601   */
 602  DeleteSelected = Button.extend(/** @lends wp.media.view.DeleteSelectedButton.prototype */{
 603      initialize: function() {
 604          Button.prototype.initialize.apply( this, arguments );
 605          if ( this.options.filters ) {
 606              this.options.filters.model.on( 'change', this.filterChange, this );
 607          }
 608          this.controller.on( 'selection:toggle', this.toggleDisabled, this );
 609          this.controller.on( 'select:activate', this.toggleDisabled, this );
 610      },
 611  
 612      filterChange: function( model ) {
 613          if ( 'trash' === model.get( 'status' ) ) {
 614              this.model.set( 'text', l10n.restoreSelected );
 615          } else if ( wp.media.view.settings.mediaTrash ) {
 616              this.model.set( 'text', l10n.trashSelected );
 617          } else {
 618              this.model.set( 'text', l10n.deletePermanently );
 619          }
 620      },
 621  
 622      toggleDisabled: function() {
 623          this.model.set( 'disabled', ! this.controller.state().get( 'selection' ).length );
 624      },
 625  
 626      render: function() {
 627          Button.prototype.render.apply( this, arguments );
 628          if ( this.controller.isModeActive( 'select' ) ) {
 629              this.$el.addClass( 'delete-selected-button' );
 630          } else {
 631              this.$el.addClass( 'delete-selected-button hidden' );
 632          }
 633          this.toggleDisabled();
 634          return this;
 635      }
 636  });
 637  
 638  module.exports = DeleteSelected;
 639  
 640  
 641  /***/ }),
 642  
 643  /***/ 8359:
 644  /***/ ((module) => {
 645  
 646  var MediaFrame = wp.media.view.MediaFrame,
 647      Library = wp.media.controller.Library,
 648  
 649      $ = Backbone.$,
 650      Manage;
 651  
 652  /**
 653   * wp.media.view.MediaFrame.Manage
 654   *
 655   * A generic management frame workflow.
 656   *
 657   * Used in the media grid view.
 658   *
 659   * @memberOf wp.media.view.MediaFrame
 660   *
 661   * @class
 662   * @augments wp.media.view.MediaFrame
 663   * @augments wp.media.view.Frame
 664   * @augments wp.media.View
 665   * @augments wp.Backbone.View
 666   * @augments Backbone.View
 667   * @mixes wp.media.controller.StateMachine
 668   */
 669  Manage = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.Manage.prototype */{
 670      /**
 671       * @constructs
 672       */
 673      initialize: function() {
 674          _.defaults( this.options, {
 675              title:     '',
 676              modal:     false,
 677              selection: [],
 678              library:   {}, // Options hash for the query to the media library.
 679              multiple:  'add',
 680              state:     'library',
 681              uploader:  true,
 682              mode:      [ 'grid', 'edit' ]
 683          });
 684  
 685          this.$body = $( document.body );
 686          this.$window = $( window );
 687          this.$adminBar = $( '#wpadminbar' );
 688          // Store the Add New button for later reuse in wp.media.view.UploaderInline.
 689          this.$uploaderToggler = $( '.page-title-action' )
 690              .attr( 'aria-expanded', 'false' )
 691              .on( 'click', _.bind( this.addNewClickHandler, this ) );
 692  
 693          this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
 694  
 695          // Ensure core and media grid view UI is enabled.
 696          this.$el.addClass('wp-core-ui');
 697  
 698          // Force the uploader off if the upload limit has been exceeded or
 699          // if the browser isn't supported.
 700          if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
 701              this.options.uploader = false;
 702          }
 703  
 704          // Initialize a window-wide uploader.
 705          if ( this.options.uploader ) {
 706              this.uploader = new wp.media.view.UploaderWindow({
 707                  controller: this,
 708                  uploader: {
 709                      dropzone:  document.body,
 710                      container: document.body
 711                  }
 712              }).render();
 713              this.uploader.ready();
 714              $('body').append( this.uploader.el );
 715  
 716              this.options.uploader = false;
 717          }
 718  
 719          this.gridRouter = new wp.media.view.MediaFrame.Manage.Router();
 720  
 721          // Call 'initialize' directly on the parent class.
 722          MediaFrame.prototype.initialize.apply( this, arguments );
 723  
 724          // Append the frame view directly the supplied container.
 725          this.$el.appendTo( this.options.container );
 726  
 727          this.createStates();
 728          this.bindRegionModeHandlers();
 729          this.render();
 730          this.bindSearchHandler();
 731  
 732          wp.media.frames.browse = this;
 733      },
 734  
 735      bindSearchHandler: function() {
 736          var search = this.$( '#media-search-input' ),
 737              searchView = this.browserView.toolbar.get( 'search' ).$el,
 738              listMode = this.$( '.view-list' ),
 739  
 740              input  = _.throttle( function (e) {
 741                  var val = $( e.currentTarget ).val(),
 742                      url = '';
 743  
 744                  if ( val ) {
 745                      url += '?search=' + val;
 746                      this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
 747                  }
 748              }, 1000 );
 749  
 750          // Update the URL when entering search string (at most once per second).
 751          search.on( 'input', _.bind( input, this ) );
 752  
 753          this.gridRouter
 754              .on( 'route:search', function () {
 755                  var href = window.location.href;
 756                  if ( href.indexOf( 'mode=' ) > -1 ) {
 757                      href = href.replace( /mode=[^&]+/g, 'mode=list' );
 758                  } else {
 759                      href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
 760                  }
 761                  href = href.replace( 'search=', 's=' );
 762                  listMode.prop( 'href', href );
 763              })
 764              .on( 'route:reset', function() {
 765                  searchView.val( '' ).trigger( 'input' );
 766              });
 767      },
 768  
 769      /**
 770       * Create the default states for the frame.
 771       */
 772      createStates: function() {
 773          var options = this.options;
 774  
 775          if ( this.options.states ) {
 776              return;
 777          }
 778  
 779          // Add the default states.
 780          this.states.add([
 781              new Library({
 782                  library:            wp.media.query( options.library ),
 783                  multiple:           options.multiple,
 784                  title:              options.title,
 785                  content:            'browse',
 786                  toolbar:            'select',
 787                  contentUserSetting: false,
 788                  filterable:         'all',
 789                  autoSelect:         false
 790              })
 791          ]);
 792      },
 793  
 794      /**
 795       * Bind region mode activation events to proper handlers.
 796       */
 797      bindRegionModeHandlers: function() {
 798          this.on( 'content:create:browse', this.browseContent, this );
 799  
 800          // Handle a frame-level event for editing an attachment.
 801          this.on( 'edit:attachment', this.openEditAttachmentModal, this );
 802  
 803          this.on( 'select:activate', this.bindKeydown, this );
 804          this.on( 'select:deactivate', this.unbindKeydown, this );
 805      },
 806  
 807      handleKeydown: function( e ) {
 808          if ( 27 === e.which ) {
 809              e.preventDefault();
 810              this.deactivateMode( 'select' ).activateMode( 'edit' );
 811          }
 812      },
 813  
 814      bindKeydown: function() {
 815          this.$body.on( 'keydown.select', _.bind( this.handleKeydown, this ) );
 816      },
 817  
 818      unbindKeydown: function() {
 819          this.$body.off( 'keydown.select' );
 820      },
 821  
 822      fixPosition: function() {
 823          var $browser, $toolbar;
 824          if ( ! this.isModeActive( 'select' ) ) {
 825              return;
 826          }
 827  
 828          $browser = this.$('.attachments-browser');
 829          $toolbar = $browser.find('.media-toolbar');
 830  
 831          // Offset doesn't appear to take top margin into account, hence +16.
 832          if ( ( $browser.offset().top + 16 ) < this.$window.scrollTop() + this.$adminBar.height() ) {
 833              $browser.addClass( 'fixed' );
 834              $toolbar.css('width', $browser.width() + 'px');
 835          } else {
 836              $browser.removeClass( 'fixed' );
 837              $toolbar.css('width', '');
 838          }
 839      },
 840  
 841      /**
 842       * Click handler for the `Add New` button.
 843       */
 844      addNewClickHandler: function( event ) {
 845          event.preventDefault();
 846          this.trigger( 'toggle:upload:attachment' );
 847  
 848          if ( this.uploader ) {
 849              this.uploader.refresh();
 850          }
 851      },
 852  
 853      /**
 854       * Open the Edit Attachment modal.
 855       */
 856      openEditAttachmentModal: function( model ) {
 857          // Create a new EditAttachment frame, passing along the library and the attachment model.
 858          if ( wp.media.frames.edit ) {
 859              wp.media.frames.edit.open().trigger( 'refresh', model );
 860          } else {
 861              wp.media.frames.edit = wp.media( {
 862                  frame:       'edit-attachments',
 863                  controller:  this,
 864                  library:     this.state().get('library'),
 865                  model:       model
 866              } );
 867          }
 868      },
 869  
 870      /**
 871       * Create an attachments browser view within the content region.
 872       *
 873       * @param {Object} contentRegion Basic object with a `view` property, which
 874       *                               should be set with the proper region view.
 875       * @this wp.media.controller.Region
 876       */
 877      browseContent: function( contentRegion ) {
 878          var state = this.state();
 879  
 880          // Browse our library of attachments.
 881          this.browserView = contentRegion.view = new wp.media.view.AttachmentsBrowser({
 882              controller: this,
 883              collection: state.get('library'),
 884              selection:  state.get('selection'),
 885              model:      state,
 886              sortable:   state.get('sortable'),
 887              search:     state.get('searchable'),
 888              filters:    state.get('filterable'),
 889              date:       state.get('date'),
 890              display:    state.get('displaySettings'),
 891              dragInfo:   state.get('dragInfo'),
 892              sidebar:    'errors',
 893  
 894              suggestedWidth:  state.get('suggestedWidth'),
 895              suggestedHeight: state.get('suggestedHeight'),
 896  
 897              AttachmentView: state.get('AttachmentView'),
 898  
 899              scrollElement: document
 900          });
 901          this.browserView.on( 'ready', _.bind( this.bindDeferred, this ) );
 902  
 903          this.errors = wp.Uploader.errors;
 904          this.errors.on( 'add remove reset', this.sidebarVisibility, this );
 905      },
 906  
 907      sidebarVisibility: function() {
 908          this.browserView.$( '.media-sidebar' ).toggle( !! this.errors.length );
 909      },
 910  
 911      bindDeferred: function() {
 912          if ( ! this.browserView.dfd ) {
 913              return;
 914          }
 915          this.browserView.dfd.done( _.bind( this.startHistory, this ) );
 916      },
 917  
 918      startHistory: function() {
 919          // Verify pushState support and activate.
 920          if ( window.history && window.history.pushState ) {
 921              if ( Backbone.History.started ) {
 922                  Backbone.history.stop();
 923              }
 924              Backbone.history.start( {
 925                  root: window._wpMediaGridSettings.adminUrl,
 926                  pushState: true
 927              } );
 928          }
 929      }
 930  });
 931  
 932  module.exports = Manage;
 933  
 934  
 935  /***/ }),
 936  
 937  /***/ 8521:
 938  /***/ ((module) => {
 939  
 940  var View = wp.media.View,
 941      EditImage = wp.media.view.EditImage,
 942      Details;
 943  
 944  /**
 945   * wp.media.view.EditImage.Details
 946   *
 947   * @memberOf wp.media.view.EditImage
 948   *
 949   * @class
 950   * @augments wp.media.view.EditImage
 951   * @augments wp.media.View
 952   * @augments wp.Backbone.View
 953   * @augments Backbone.View
 954   */
 955  Details = EditImage.extend(/** @lends wp.media.view.EditImage.Details.prototype */{
 956      initialize: function( options ) {
 957          this.editor = window.imageEdit;
 958          this.frame = options.frame;
 959          this.controller = options.controller;
 960          View.prototype.initialize.apply( this, arguments );
 961      },
 962  
 963      back: function() {
 964          this.frame.content.mode( 'edit-metadata' );
 965      },
 966  
 967      save: function() {
 968          this.model.fetch().done( _.bind( function() {
 969              this.frame.content.mode( 'edit-metadata' );
 970          }, this ) );
 971      }
 972  });
 973  
 974  module.exports = Details;
 975  
 976  
 977  /***/ })
 978  
 979  /******/     });
 980  /************************************************************************/
 981  /******/     // The module cache
 982  /******/     var __webpack_module_cache__ = {};
 983  /******/     
 984  /******/     // The require function
 985  /******/ 	function __webpack_require__(moduleId) {
 986  /******/         // Check if module is in cache
 987  /******/         var cachedModule = __webpack_module_cache__[moduleId];
 988  /******/         if (cachedModule !== undefined) {
 989  /******/             return cachedModule.exports;
 990  /******/         }
 991  /******/         // Create a new module (and put it into the cache)
 992  /******/         var module = __webpack_module_cache__[moduleId] = {
 993  /******/             // no module.id needed
 994  /******/             // no module.loaded needed
 995  /******/             exports: {}
 996  /******/         };
 997  /******/     
 998  /******/         // Execute the module function
 999  /******/         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
1000  /******/     
1001  /******/         // Return the exports of the module
1002  /******/         return module.exports;
1003  /******/     }
1004  /******/     
1005  /************************************************************************/
1006  /**
1007   * @output wp-includes/js/media-grid.js
1008   */
1009  
1010  var media = wp.media;
1011  
1012  media.controller.EditAttachmentMetadata = __webpack_require__( 659 );
1013  media.view.MediaFrame.Manage = __webpack_require__( 8359 );
1014  media.view.Attachment.Details.TwoColumn = __webpack_require__( 1312 );
1015  media.view.MediaFrame.Manage.Router = __webpack_require__( 2429 );
1016  media.view.EditImage.Details = __webpack_require__( 8521 );
1017  media.view.MediaFrame.EditAttachments = __webpack_require__( 1003 );
1018  media.view.SelectModeToggleButton = __webpack_require__( 682 );
1019  media.view.DeleteSelectedButton = __webpack_require__( 6606 );
1020  media.view.DeleteSelectedPermanentlyButton = __webpack_require__( 5806 );
1021  
1022  /******/ })()
1023  ;