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