wp-includes/js/media-grid.js

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