wp/wp-admin/js/media.js
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 9 177826044cd9
equal deleted inserted replaced
6:490d5cc509ed 7:cf61fcea0001
     1 /* global ajaxurl, attachMediaBoxL10n, _wpMediaGridSettings */
     1 /* global ajaxurl, attachMediaBoxL10n, _wpMediaGridSettings, showNotice */
     2 
     2 
       
     3 /**
       
     4  * @summary Creates a dialog containing posts that can have a particular media attached to it.
       
     5  *
       
     6  * @since 2.7.0
       
     7  *
       
     8  * @global
       
     9  * @namespace
       
    10  *
       
    11  * @requires jQuery
       
    12  */
     3 var findPosts;
    13 var findPosts;
       
    14 
     4 ( function( $ ){
    15 ( function( $ ){
     5 	findPosts = {
    16 	findPosts = {
       
    17 		/**
       
    18 		 * @summary 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 		 * @returns {boolean} Always returns false.
       
    30 		 */
     6 		open: function( af_name, af_val ) {
    31 		open: function( af_name, af_val ) {
     7 			var overlay = $( '.ui-find-overlay' );
    32 			var overlay = $( '.ui-find-overlay' );
     8 
    33 
     9 			if ( overlay.length === 0 ) {
    34 			if ( overlay.length === 0 ) {
    10 				$( 'body' ).append( '<div class="ui-find-overlay"></div>' );
    35 				$( 'body' ).append( '<div class="ui-find-overlay"></div>' );
    12 			}
    37 			}
    13 
    38 
    14 			overlay.show();
    39 			overlay.show();
    15 
    40 
    16 			if ( af_name && af_val ) {
    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.
    17 				$( '#affected' ).attr( 'name', af_name ).val( af_val );
    43 				$( '#affected' ).attr( 'name', af_name ).val( af_val );
    18 			}
    44 			}
    19 
    45 
    20 			$( '#find-posts' ).show();
    46 			$( '#find-posts' ).show();
    21 
    47 
       
    48 			// Close the dialog when the escape key is pressed.
    22 			$('#find-posts-input').focus().keyup( function( event ){
    49 			$('#find-posts-input').focus().keyup( function( event ){
    23 				if ( event.which == 27 ) {
    50 				if ( event.which == 27 ) {
    24 					findPosts.close();
    51 					findPosts.close();
    25 				} // close on Escape
    52 				}
    26 			});
    53 			});
    27 
    54 
    28 			// Pull some results up by default
    55 			// Retrieves a list of applicable posts for media attachment and shows them.
    29 			findPosts.send();
    56 			findPosts.send();
    30 
    57 
    31 			return false;
    58 			return false;
    32 		},
    59 		},
    33 
    60 
       
    61 		/**
       
    62 		 * @summary Clears the found posts lists before hiding the attach media dialog.
       
    63 		 *
       
    64 		 * @since 2.7.0
       
    65 		 *
       
    66 		 * @memberOf findPosts
       
    67 		 *
       
    68 		 * @returns {void}
       
    69 		 */
    34 		close: function() {
    70 		close: function() {
    35 			$('#find-posts-response').empty();
    71 			$('#find-posts-response').empty();
    36 			$('#find-posts').hide();
    72 			$('#find-posts').hide();
    37 			$( '.ui-find-overlay' ).hide();
    73 			$( '.ui-find-overlay' ).hide();
    38 		},
    74 		},
    39 
    75 
       
    76 		/**
       
    77 		 * @summary Binds a click event listener to the overlay which closes the attach media dialog.
       
    78 		 *
       
    79 		 * @since 3.5.0
       
    80 		 *
       
    81 		 * @memberOf findPosts
       
    82 		 *
       
    83 		 * @returns {void}
       
    84 		 */
    40 		overlay: function() {
    85 		overlay: function() {
    41 			$( '.ui-find-overlay' ).on( 'click', function () {
    86 			$( '.ui-find-overlay' ).on( 'click', function () {
    42 				findPosts.close();
    87 				findPosts.close();
    43 			});
    88 			});
    44 		},
    89 		},
    45 
    90 
       
    91 		/**
       
    92 		 * @summary Retrieves and displays posts based on the search term.
       
    93 		 *
       
    94 		 * Sends a post request to the admin_ajax.php, requesting posts based on the search term provided by the user.
       
    95 		 * Defaults to all posts if no search term is provided.
       
    96 		 *
       
    97 		 * @since 2.7.0
       
    98 		 *
       
    99 		 * @memberOf findPosts
       
   100 		 *
       
   101 		 * @returns {void}
       
   102 		 */
    46 		send: function() {
   103 		send: function() {
    47 			var post = {
   104 			var post = {
    48 					ps: $( '#find-posts-input' ).val(),
   105 					ps: $( '#find-posts-input' ).val(),
    49 					action: 'find_posts',
   106 					action: 'find_posts',
    50 					_ajax_nonce: $('#_ajax_nonce').val()
   107 					_ajax_nonce: $('#_ajax_nonce').val()
    51 				},
   108 				},
    52 				spinner = $( '.find-box-search .spinner' );
   109 				spinner = $( '.find-box-search .spinner' );
    53 
   110 
    54 			spinner.addClass( 'is-active' );
   111 			spinner.addClass( 'is-active' );
    55 
   112 
       
   113 			/**
       
   114 			 * Send a POST request to admin_ajax.php, hide the spinner and replace the list of posts with the response data.
       
   115 			 * If an error occurs, display it.
       
   116 			 */
    56 			$.ajax( ajaxurl, {
   117 			$.ajax( ajaxurl, {
    57 				type: 'POST',
   118 				type: 'POST',
    58 				data: post,
   119 				data: post,
    59 				dataType: 'json'
   120 				dataType: 'json'
    60 			}).always( function() {
   121 			}).always( function() {
    69 				$( '#find-posts-response' ).text( attachMediaBoxL10n.error );
   130 				$( '#find-posts-response' ).text( attachMediaBoxL10n.error );
    70 			});
   131 			});
    71 		}
   132 		}
    72 	};
   133 	};
    73 
   134 
       
   135 	/**
       
   136 	 * @summary Initializes the file once the DOM is fully loaded and attaches events to the various form elements.
       
   137 	 *
       
   138 	 * @returns {void}
       
   139 	 */
    74 	$( document ).ready( function() {
   140 	$( document ).ready( function() {
    75 		var settings, $mediaGridWrap = $( '#wp-media-grid' );
   141 		var settings, $mediaGridWrap = $( '#wp-media-grid' );
    76 
   142 
    77 		// Open up a manage media frame into the grid.
   143 		// Opens a manage media frame into the grid.
    78 		if ( $mediaGridWrap.length && window.wp && window.wp.media ) {
   144 		if ( $mediaGridWrap.length && window.wp && window.wp.media ) {
    79 			settings = _wpMediaGridSettings;
   145 			settings = _wpMediaGridSettings;
    80 
   146 
    81 			window.wp.media({
   147 			window.wp.media({
    82 				frame: 'manage',
   148 				frame: 'manage',
    83 				container: $mediaGridWrap,
   149 				container: $mediaGridWrap,
    84 				library: settings.queryVars
   150 				library: settings.queryVars
    85 			}).open();
   151 			}).open();
    86 		}
   152 		}
    87 
   153 
       
   154 		// Prevents form submission if no post has been selected.
    88 		$( '#find-posts-submit' ).click( function( event ) {
   155 		$( '#find-posts-submit' ).click( function( event ) {
    89 			if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
   156 			if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
    90 				event.preventDefault();
   157 				event.preventDefault();
    91 		});
   158 		});
       
   159 
       
   160 		// Submits the search query when hitting the enter key in the search input.
    92 		$( '#find-posts .find-box-search :input' ).keypress( function( event ) {
   161 		$( '#find-posts .find-box-search :input' ).keypress( function( event ) {
    93 			if ( 13 == event.which ) {
   162 			if ( 13 == event.which ) {
    94 				findPosts.send();
   163 				findPosts.send();
    95 				return false;
   164 				return false;
    96 			}
   165 			}
    97 		});
   166 		});
       
   167 
       
   168 		// Binds the click event to the search button.
    98 		$( '#find-posts-search' ).click( findPosts.send );
   169 		$( '#find-posts-search' ).click( findPosts.send );
       
   170 
       
   171 		// Binds the close dialog click event.
    99 		$( '#find-posts-close' ).click( findPosts.close );
   172 		$( '#find-posts-close' ).click( findPosts.close );
       
   173 
       
   174 		// Binds the bulk action events to the submit buttons.
   100 		$( '#doaction, #doaction2' ).click( function( event ) {
   175 		$( '#doaction, #doaction2' ).click( function( event ) {
       
   176 
       
   177 			/*
       
   178 			 * Retrieves all select elements for bulk actions that have a name starting with `action`
       
   179 			 * and handle its action based on its value.
       
   180 			 */
   101 			$( 'select[name^="action"]' ).each( function() {
   181 			$( 'select[name^="action"]' ).each( function() {
   102 				if ( $(this).val() === 'attach' ) {
   182 				var optionValue = $( this ).val();
       
   183 
       
   184 				if ( 'attach' === optionValue ) {
   103 					event.preventDefault();
   185 					event.preventDefault();
   104 					findPosts.open();
   186 					findPosts.open();
       
   187 				} else if ( 'delete' === optionValue ) {
       
   188 					if ( ! showNotice.warn() ) {
       
   189 						event.preventDefault();
       
   190 					}
   105 				}
   191 				}
   106 			});
   192 			});
   107 		});
   193 		});
   108 
   194 
   109 		// Enable whole row to be clicked
   195 		/**
       
   196 		 * @summary Enables clicking on the entire table row.
       
   197 		 *
       
   198 		 * @returns {void}
       
   199 		 */
   110 		$( '.find-box-inside' ).on( 'click', 'tr', function() {
   200 		$( '.find-box-inside' ).on( 'click', 'tr', function() {
   111 			$( this ).find( '.found-radio input' ).prop( 'checked', true );
   201 			$( this ).find( '.found-radio input' ).prop( 'checked', true );
   112 		});
   202 		});
   113 	});
   203 	});
   114 })( jQuery );
   204 })( jQuery );