[Summary view] [Print] [Text view]

   1  /**
   2   * Creates a dialog containing posts that can have a particular media attached
   3   * to it.
   4   *
   5   * @since 2.7.0
   6   * @output wp-admin/js/media.js
   7   *
   8   * @namespace findPosts
   9   *
  10   * @requires jQuery
  11   */
  12  
  13  /* global ajaxurl, _wpMediaGridSettings, showNotice, findPosts, ClipboardJS */
  14  
  15  ( function( $ ){
  16      window.findPosts = {
  17          /**
  18           * Opens a dialog to attach media to a post.
  19           *
  20           * Adds an overlay prior to retrieving a list of posts to attach the media to.
  21           *
  22           * @since 2.7.0
  23           *
  24           * @memberOf findPosts
  25           *
  26           * @param {string} af_name The name of the affected element.
  27           * @param {string} af_val The value of the affected post element.
  28           *
  29           * @return {boolean} Always returns false.
  30           */
  31          open: function( af_name, af_val ) {
  32              var overlay = $( '.ui-find-overlay' );
  33  
  34              if ( overlay.length === 0 ) {
  35                  $( 'body' ).append( '<div class="ui-find-overlay"></div>' );
  36                  findPosts.overlay();
  37              }
  38  
  39              overlay.show();
  40  
  41              if ( af_name && af_val ) {
  42                  // #affected is a hidden input field in the dialog that keeps track of which media should be attached.
  43                  $( '#affected' ).attr( 'name', af_name ).val( af_val );
  44              }
  45  
  46              $( '#find-posts' ).show();
  47  
  48              // Close the dialog when the escape key is pressed.
  49              $('#find-posts-input').trigger( 'focus' ).on( 'keyup', function( event ){
  50                  if ( event.which == 27 ) {
  51                      findPosts.close();
  52                  }
  53              });
  54  
  55              // Retrieves a list of applicable posts for media attachment and shows them.
  56              findPosts.send();
  57  
  58              return false;
  59          },
  60  
  61          /**
  62           * Clears the found posts lists before hiding the attach media dialog.
  63           *
  64           * @since 2.7.0
  65           *
  66           * @memberOf findPosts
  67           *
  68           * @return {void}
  69           */
  70          close: function() {
  71              $('#find-posts-response').empty();
  72              $('#find-posts').hide();
  73              $( '.ui-find-overlay' ).hide();
  74          },
  75  
  76          /**
  77           * Binds a click event listener to the overlay which closes the attach media
  78           * dialog.
  79           *
  80           * @since 3.5.0
  81           *
  82           * @memberOf findPosts
  83           *
  84           * @return {void}
  85           */
  86          overlay: function() {
  87              $( '.ui-find-overlay' ).on( 'click', function () {
  88                  findPosts.close();
  89              });
  90          },
  91  
  92          /**
  93           * Retrieves and displays posts based on the search term.
  94           *
  95           * Sends a post request to the admin_ajax.php, requesting posts based on the
  96           * search term provided by the user. Defaults to all posts if no search term is
  97           * provided.
  98           *
  99           * @since 2.7.0
 100           *
 101           * @memberOf findPosts
 102           *
 103           * @return {void}
 104           */
 105          send: function() {
 106              var post = {
 107                      ps: $( '#find-posts-input' ).val(),
 108                      action: 'find_posts',
 109                      _ajax_nonce: $('#_ajax_nonce').val()
 110                  },
 111                  spinner = $( '.find-box-search .spinner' );
 112  
 113              spinner.addClass( 'is-active' );
 114  
 115              /**
 116               * Send a POST request to admin_ajax.php, hide the spinner and replace the list
 117               * of posts with the response data. If an error occurs, display it.
 118               */
 119              $.ajax( ajaxurl, {
 120                  type: 'POST',
 121                  data: post,
 122                  dataType: 'json'
 123              }).always( function() {
 124                  spinner.removeClass( 'is-active' );
 125              }).done( function( x ) {
 126                  if ( ! x.success ) {
 127                      $( '#find-posts-response' ).text( wp.i18n.__( 'An error has occurred. Please reload the page and try again.' ) );
 128                  }
 129  
 130                  $( '#find-posts-response' ).html( x.data );
 131              }).fail( function() {
 132                  $( '#find-posts-response' ).text( wp.i18n.__( 'An error has occurred. Please reload the page and try again.' ) );
 133              });
 134          }
 135      };
 136  
 137      /**
 138       * Initializes the file once the DOM is fully loaded and attaches events to the
 139       * various form elements.
 140       *
 141       * @return {void}
 142       */
 143      $( function() {
 144          var settings,
 145              $mediaGridWrap             = $( '#wp-media-grid' ),
 146              copyAttachmentURLClipboard = new ClipboardJS( '.copy-attachment-url.media-library' ),
 147              copyAttachmentURLSuccessTimeout;
 148  
 149          // Opens a manage media frame into the grid.
 150          if ( $mediaGridWrap.length && window.wp && window.wp.media ) {
 151              settings = _wpMediaGridSettings;
 152  
 153              var frame = window.wp.media({
 154                  frame: 'manage',
 155                  container: $mediaGridWrap,
 156                  library: settings.queryVars
 157              }).open();
 158  
 159              // Fire a global ready event.
 160              $mediaGridWrap.trigger( 'wp-media-grid-ready', frame );
 161          }
 162  
 163          // Prevents form submission if no post has been selected.
 164          $( '#find-posts-submit' ).on( 'click', function( event ) {
 165              if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
 166                  event.preventDefault();
 167          });
 168  
 169          // Submits the search query when hitting the enter key in the search input.
 170          $( '#find-posts .find-box-search :input' ).on( 'keypress', function( event ) {
 171              if ( 13 == event.which ) {
 172                  findPosts.send();
 173                  return false;
 174              }
 175          });
 176  
 177          // Binds the click event to the search button.
 178          $( '#find-posts-search' ).on( 'click', findPosts.send );
 179  
 180          // Binds the close dialog click event.
 181          $( '#find-posts-close' ).on( 'click', findPosts.close );
 182  
 183          // Binds the bulk action events to the submit buttons.
 184          $( '#doaction' ).on( 'click', function( event ) {
 185  
 186              /*
 187               * Handle the bulk action based on its value.
 188               */
 189              $( 'select[name="action"]' ).each( function() {
 190                  var optionValue = $( this ).val();
 191  
 192                  if ( 'attach' === optionValue ) {
 193                      event.preventDefault();
 194                      findPosts.open();
 195                  } else if ( 'delete' === optionValue ) {
 196                      if ( ! showNotice.warn() ) {
 197                          event.preventDefault();
 198                      }
 199                  }
 200              });
 201          });
 202  
 203          /**
 204           * Enables clicking on the entire table row.
 205           *
 206           * @return {void}
 207           */
 208          $( '.find-box-inside' ).on( 'click', 'tr', function() {
 209              $( this ).find( '.found-radio input' ).prop( 'checked', true );
 210          });
 211  
 212          /**
 213           * Handles media list copy media URL button.
 214           *
 215           * @since 6.0.0
 216           *
 217           * @param {MouseEvent} event A click event.
 218           * @return {void}
 219           */
 220          copyAttachmentURLClipboard.on( 'success', function( event ) {
 221              var triggerElement = $( event.trigger ),
 222                  successElement = $( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
 223  
 224              // Clear the selection and move focus back to the trigger.
 225              event.clearSelection();
 226              // Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680.
 227              triggerElement.trigger( 'focus' );
 228  
 229              // Show success visual feedback.
 230              clearTimeout( copyAttachmentURLSuccessTimeout );
 231              successElement.removeClass( 'hidden' );
 232  
 233              // Hide success visual feedback after 3 seconds since last success and unfocus the trigger.
 234              copyAttachmentURLSuccessTimeout = setTimeout( function() {
 235                  successElement.addClass( 'hidden' );
 236              }, 3000 );
 237  
 238              // Handle success audible feedback.
 239              wp.a11y.speak( wp.i18n.__( 'The file URL has been copied to your clipboard' ) );
 240          } );
 241      });
 242  })( jQuery );