[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/js/ -> media-grid.js (source)

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


Generated : Wed Jul 1 08:20:12 2026 Cross-referenced by PHPXref