[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              previousSuccessElement = null;
 149  
 150          // Opens a manage media frame into the grid.
 151          if ( $mediaGridWrap.length && window.wp && window.wp.media ) {
 152              settings = _wpMediaGridSettings;
 153  
 154              var frame = window.wp.media({
 155                  frame: 'manage',
 156                  container: $mediaGridWrap,
 157                  library: settings.queryVars
 158              }).open();
 159  
 160              // Fire a global ready event.
 161              $mediaGridWrap.trigger( 'wp-media-grid-ready', frame );
 162          }
 163  
 164          // Prevents form submission if no post has been selected.
 165          $( '#find-posts-submit' ).on( 'click', function( event ) {
 166              if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
 167                  event.preventDefault();
 168          });
 169  
 170          // Submits the search query when hitting the enter key in the search input.
 171          $( '#find-posts .find-box-search :input' ).on( 'keypress', function( event ) {
 172              if ( 13 == event.which ) {
 173                  findPosts.send();
 174                  return false;
 175              }
 176          });
 177  
 178          // Binds the click event to the search button.
 179          $( '#find-posts-search' ).on( 'click', findPosts.send );
 180  
 181          // Binds the close dialog click event.
 182          $( '#find-posts-close' ).on( 'click', findPosts.close );
 183  
 184          // Binds the bulk action events to the submit buttons.
 185          $( '#doaction' ).on( 'click', function( event ) {
 186  
 187              /*
 188               * Handle the bulk action based on its value.
 189               */
 190              $( 'select[name="action"]' ).each( function() {
 191                  var optionValue = $( this ).val();
 192  
 193                  if ( 'attach' === optionValue ) {
 194                      event.preventDefault();
 195                      findPosts.open();
 196                  } else if ( 'delete' === optionValue ) {
 197                      if ( ! showNotice.warn() ) {
 198                          event.preventDefault();
 199                      }
 200                  }
 201              });
 202          });
 203  
 204          /**
 205           * Enables clicking on the entire table row.
 206           *
 207           * @return {void}
 208           */
 209          $( '.find-box-inside' ).on( 'click', 'tr', function() {
 210              $( this ).find( '.found-radio input' ).prop( 'checked', true );
 211          });
 212  
 213          /**
 214           * Handles media list copy media URL button.
 215           *
 216           * @since 6.0.0
 217           *
 218           * @param {MouseEvent} event A click event.
 219           * @return {void}
 220           */
 221          copyAttachmentURLClipboard.on( 'success', function( event ) {
 222              var triggerElement = $( event.trigger ),
 223                  successElement = $( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
 224  
 225              // Clear the selection and move focus back to the trigger.
 226              event.clearSelection();
 227  
 228              // Checking if the previousSuccessElement is present, adding the hidden class to it.
 229              if ( previousSuccessElement ) {
 230                  previousSuccessElement.addClass( 'hidden' );
 231              }
 232  
 233              // Show success visual feedback.
 234              clearTimeout( copyAttachmentURLSuccessTimeout );
 235              successElement.removeClass( 'hidden' );
 236  
 237              // Hide success visual feedback after 3 seconds since last success and unfocus the trigger.
 238              copyAttachmentURLSuccessTimeout = setTimeout( function() {
 239                  successElement.addClass( 'hidden' );
 240                  // No need to store the previous success element further.
 241                  previousSuccessElement = null;
 242              }, 3000 );
 243  
 244              previousSuccessElement = successElement;
 245  
 246              // Handle success audible feedback.
 247              wp.a11y.speak( wp.i18n.__( 'The file URL has been copied to your clipboard' ) );
 248          } );
 249      });
 250  })( jQuery );