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 );
251