wp/wp-admin/js/inline-edit-post.js
changeset 9 177826044cd9
parent 7 cf61fcea0001
child 16 a86126ab1dd4
equal deleted inserted replaced
8:c7c34916027a 9:177826044cd9
     1 /* global inlineEditL10n, ajaxurl, typenow */
       
     2 /**
     1 /**
     3  * This file contains the functions needed for the inline editing of posts.
     2  * This file contains the functions needed for the inline editing of posts.
     4  *
     3  *
     5  * @since 2.7.0
     4  * @since 2.7.0
       
     5  * @output wp-admin/js/inline-edit-post.js
     6  */
     6  */
       
     7 
       
     8 /* global inlineEditL10n, ajaxurl, typenow, inlineEditPost */
     7 
     9 
     8 window.wp = window.wp || {};
    10 window.wp = window.wp || {};
     9 
    11 
    10 /**
    12 /**
    11  * Manages the quick edit and bulk edit windows for editing posts or pages.
    13  * Manages the quick edit and bulk edit windows for editing posts or pages.
    12  *
    14  *
    13  * @namespace
    15  * @namespace inlineEditPost
    14  *
    16  *
    15  * @since 2.7.0
    17  * @since 2.7.0
    16  * @access public
       
    17  *
    18  *
    18  * @type {Object}
    19  * @type {Object}
    19  *
    20  *
    20  * @property {string} type The type of inline editor.
    21  * @property {string} type The type of inline editor.
    21  * @property {string} what The prefix before the post id.
    22  * @property {string} what The prefix before the post id.
    22  *
    23  *
    23  */
    24  */
    24 var inlineEditPost;
       
    25 ( function( $, wp ) {
    25 ( function( $, wp ) {
    26 
    26 
    27 	inlineEditPost = {
    27 	window.inlineEditPost = {
    28 
    28 
    29 	/**
    29 	/**
    30 	 * @summary Initializes the inline and bulk post editor.
    30 	 * Initializes the inline and bulk post editor.
    31 	 *
    31 	 *
    32 	 * Binds event handlers to the escape key to close the inline editor
    32 	 * Binds event handlers to the escape key to close the inline editor
    33 	 * and to the save and close buttons. Changes DOM to be ready for inline
    33 	 * and to the save and close buttons. Changes DOM to be ready for inline
    34 	 * editing. Adds event handler to bulk edit.
    34 	 * editing. Adds event handler to bulk edit.
    35 	 *
    35 	 *
    44 		t.type = $('table.widefat').hasClass('pages') ? 'page' : 'post';
    44 		t.type = $('table.widefat').hasClass('pages') ? 'page' : 'post';
    45 		// Post id prefix.
    45 		// Post id prefix.
    46 		t.what = '#post-';
    46 		t.what = '#post-';
    47 
    47 
    48 		/**
    48 		/**
    49 		 * @summary Bind escape key to revert the changes and close the quick editor.
    49 		 * Binds the escape key to revert the changes and close the quick editor.
    50 		 *
    50 		 *
    51 		 * @returns {boolean} The result of revert.
    51 		 * @returns {boolean} The result of revert.
    52 		 */
    52 		 */
    53 		qeRow.keyup(function(e){
    53 		qeRow.keyup(function(e){
    54 			// Revert changes if escape key is pressed.
    54 			// Revert changes if escape key is pressed.
    56 				return inlineEditPost.revert();
    56 				return inlineEditPost.revert();
    57 			}
    57 			}
    58 		});
    58 		});
    59 
    59 
    60 		/**
    60 		/**
    61 		 * @summary Bind escape key to revert the changes and close the bulk editor.
    61 		 * Binds the escape key to revert the changes and close the bulk editor.
    62 		 *
    62 		 *
    63 		 * @returns {boolean} The result of revert.
    63 		 * @returns {boolean} The result of revert.
    64 		 */
    64 		 */
    65 		bulkRow.keyup(function(e){
    65 		bulkRow.keyup(function(e){
    66 			// Revert changes if escape key is pressed.
    66 			// Revert changes if escape key is pressed.
    68 				return inlineEditPost.revert();
    68 				return inlineEditPost.revert();
    69 			}
    69 			}
    70 		});
    70 		});
    71 
    71 
    72 		/**
    72 		/**
    73 		 * @summary Revert changes and close the quick editor if the cancel button is clicked.
    73 		 * Reverts changes and close the quick editor if the cancel button is clicked.
    74 		 *
    74 		 *
    75 		 * @returns {boolean} The result of revert.
    75 		 * @returns {boolean} The result of revert.
    76 		 */
    76 		 */
    77 		$( '.cancel', qeRow ).click( function() {
    77 		$( '.cancel', qeRow ).click( function() {
    78 			return inlineEditPost.revert();
    78 			return inlineEditPost.revert();
    79 		});
    79 		});
    80 
    80 
    81 		/**
    81 		/**
    82 		 * @summary Save changes in the quick editor if the save(named: update) button is clicked.
    82 		 * Saves changes in the quick editor if the save(named: update) button is clicked.
    83 		 *
    83 		 *
    84 		 * @returns {boolean} The result of save.
    84 		 * @returns {boolean} The result of save.
    85 		 */
    85 		 */
    86 		$( '.save', qeRow ).click( function() {
    86 		$( '.save', qeRow ).click( function() {
    87 			return inlineEditPost.save(this);
    87 			return inlineEditPost.save(this);
    88 		});
    88 		});
    89 
    89 
    90 		/**
    90 		/**
    91 		 * @summary If enter is pressed, and the target is not the cancel button, save the post.
    91 		 * If enter is pressed, and the target is not the cancel button, save the post.
    92 		 *
    92 		 *
    93 		 * @returns {boolean} The result of save.
    93 		 * @returns {boolean} The result of save.
    94 		 */
    94 		 */
    95 		$('td', qeRow).keydown(function(e){
    95 		$('td', qeRow).keydown(function(e){
    96 			if ( e.which === 13 && ! $( e.target ).hasClass( 'cancel' ) ) {
    96 			if ( e.which === 13 && ! $( e.target ).hasClass( 'cancel' ) ) {
    97 				return inlineEditPost.save(this);
    97 				return inlineEditPost.save(this);
    98 			}
    98 			}
    99 		});
    99 		});
   100 
   100 
   101 		/**
   101 		/**
   102 		 * @summary Revert changes and close the bulk editor if the cancel button is clicked.
   102 		 * Reverts changes and close the bulk editor if the cancel button is clicked.
   103 		 *
   103 		 *
   104 		 * @returns {boolean} The result of revert.
   104 		 * @returns {boolean} The result of revert.
   105 		 */
   105 		 */
   106 		$( '.cancel', bulkRow ).click( function() {
   106 		$( '.cancel', bulkRow ).click( function() {
   107 			return inlineEditPost.revert();
   107 			return inlineEditPost.revert();
   108 		});
   108 		});
   109 
   109 
   110 		/**
   110 		/**
   111 		 * @summary Disables the password input field when the private post checkbox is checked.
   111 		 * Disables the password input field when the private post checkbox is checked.
   112 		 */
   112 		 */
   113 		$('#inline-edit .inline-edit-private input[value="private"]').click( function(){
   113 		$('#inline-edit .inline-edit-private input[value="private"]').click( function(){
   114 			var pw = $('input.inline-edit-password-input');
   114 			var pw = $('input.inline-edit-password-input');
   115 			if ( $(this).prop('checked') ) {
   115 			if ( $(this).prop('checked') ) {
   116 				pw.val('').prop('disabled', true);
   116 				pw.val('').prop('disabled', true);
   118 				pw.prop('disabled', false);
   118 				pw.prop('disabled', false);
   119 			}
   119 			}
   120 		});
   120 		});
   121 
   121 
   122 		/**
   122 		/**
   123 		 * @summary Bind click event to the .editinline link which opens the quick editor.
   123 		 * Binds click event to the .editinline button which opens the quick editor.
   124 		 */
   124 		 */
   125 		$('#the-list').on( 'click', 'a.editinline', function( e ) {
   125 		$( '#the-list' ).on( 'click', '.editinline', function() {
   126 			e.preventDefault();
   126 			$( this ).attr( 'aria-expanded', 'true' );
   127 			inlineEditPost.edit(this);
   127 			inlineEditPost.edit( this );
   128 		});
   128 		});
   129 
   129 
   130 		$('#bulk-edit').find('fieldset:first').after(
   130 		$('#bulk-edit').find('fieldset:first').after(
   131 			$('#inline-edit fieldset.inline-edit-categories').clone()
   131 			$('#inline-edit fieldset.inline-edit-categories').clone()
   132 		).siblings( 'fieldset:last' ).prepend(
   132 		).siblings( 'fieldset:last' ).prepend(
   134 		);
   134 		);
   135 
   135 
   136 		$('select[name="_status"] option[value="future"]', bulkRow).remove();
   136 		$('select[name="_status"] option[value="future"]', bulkRow).remove();
   137 
   137 
   138 		/**
   138 		/**
   139 		 * @summary Adds onclick events to the apply buttons.
   139 		 * Adds onclick events to the apply buttons.
   140 		 */
   140 		 */
   141 		$('#doaction, #doaction2').click(function(e){
   141 		$('#doaction, #doaction2').click(function(e){
   142 			var n;
   142 			var n;
   143 
   143 
   144 			t.whichBulkButtonId = $( this ).attr( 'id' );
   144 			t.whichBulkButtonId = $( this ).attr( 'id' );
   152 			}
   152 			}
   153 		});
   153 		});
   154 	},
   154 	},
   155 
   155 
   156 	/**
   156 	/**
   157 	 * @summary Toggles the quick edit window.
   157 	 * Toggles the quick edit window, hiding it when it's active and showing it when
   158 	 *
   158 	 * inactive.
   159 	 * Hides the window when it's active and shows the window when inactive.
       
   160 	 *
   159 	 *
   161 	 * @memberof inlineEditPost
   160 	 * @memberof inlineEditPost
   162 	 * @since 2.7.0
   161 	 * @since 2.7.0
   163 	 *
   162 	 *
   164 	 * @param {Object} el Element within a post table row.
   163 	 * @param {Object} el Element within a post table row.
   167 		var t = this;
   166 		var t = this;
   168 		$( t.what + t.getId( el ) ).css( 'display' ) === 'none' ? t.revert() : t.edit( el );
   167 		$( t.what + t.getId( el ) ).css( 'display' ) === 'none' ? t.revert() : t.edit( el );
   169 	},
   168 	},
   170 
   169 
   171 	/**
   170 	/**
   172 	 * @summary Creates the bulk editor row to edit multiple posts at once.
   171 	 * Creates the bulk editor row to edit multiple posts at once.
   173 	 *
   172 	 *
   174 	 * @memberof inlineEditPost
   173 	 * @memberof inlineEditPost
   175 	 * @since 2.7.0
   174 	 * @since 2.7.0
   176 	 */
   175 	 */
   177 	setBulk : function(){
   176 	setBulk : function(){
   183 		// Insert the editor at the top of the table with an empty row above to maintain zebra striping.
   182 		// Insert the editor at the top of the table with an empty row above to maintain zebra striping.
   184 		$('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
   183 		$('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
   185 		$('#bulk-edit').addClass('inline-editor').show();
   184 		$('#bulk-edit').addClass('inline-editor').show();
   186 
   185 
   187 		/**
   186 		/**
   188 		 * @summary Create a HTML div with the title and a delete link(cross-icon) for each selected post.
   187 		 * Create a HTML div with the title and a link(delete-icon) for each selected
       
   188 		 * post.
   189 		 *
   189 		 *
   190 		 * Get the selected posts based on the checked checkboxes in the post table.
   190 		 * Get the selected posts based on the checked checkboxes in the post table.
   191 		 * Create a HTML div with the title and a link(delete-icon) for each selected post.
       
   192 		 */
   191 		 */
   193 		$( 'tbody th.check-column input[type="checkbox"]' ).each( function() {
   192 		$( 'tbody th.check-column input[type="checkbox"]' ).each( function() {
   194 
   193 
   195 			// If the checkbox for a post is selected, add the post to the edit list.
   194 			// If the checkbox for a post is selected, add the post to the edit list.
   196 			if ( $(this).prop('checked') ) {
   195 			if ( $(this).prop('checked') ) {
   207 		}
   206 		}
   208 
   207 
   209 		// Add onclick events to the delete-icons in the bulk editors the post title list.
   208 		// Add onclick events to the delete-icons in the bulk editors the post title list.
   210 		$('#bulk-titles').html(te);
   209 		$('#bulk-titles').html(te);
   211 		/**
   210 		/**
   212 		 * @summary Binds on click events to the checkboxes before the posts in the table.
   211 		 * Binds on click events to the checkboxes before the posts in the table.
   213 		 *
   212 		 *
   214 		 * @listens click
   213 		 * @listens click
   215 		 */
   214 		 */
   216 		$('#bulk-titles a').click(function(){
   215 		$('#bulk-titles a').click(function(){
   217 			var id = $(this).attr('id').substr(1);
   216 			var id = $(this).attr('id').substr(1);
   239 		// Scrolls to the top of the table where the editor is rendered.
   238 		// Scrolls to the top of the table where the editor is rendered.
   240 		$('html, body').animate( { scrollTop: 0 }, 'fast' );
   239 		$('html, body').animate( { scrollTop: 0 }, 'fast' );
   241 	},
   240 	},
   242 
   241 
   243 	/**
   242 	/**
   244 	 * @summary Creates a quick edit window for the post that has been clicked.
   243 	 * Creates a quick edit window for the post that has been clicked.
   245 	 *
   244 	 *
   246 	 * @memberof inlineEditPost
   245 	 * @memberof inlineEditPost
   247 	 * @since 2.7.0
   246 	 * @since 2.7.0
   248 	 *
   247 	 *
   249 	 * @param {number|Object} id The id of the clicked post or an element within a post
   248 	 * @param {number|Object} id The id of the clicked post or an element within a post
   282 
   281 
   283 		for ( f = 0; f < fields.length; f++ ) {
   282 		for ( f = 0; f < fields.length; f++ ) {
   284 			val = $('.'+fields[f], rowData);
   283 			val = $('.'+fields[f], rowData);
   285 
   284 
   286 			/**
   285 			/**
   287 			 * @summary Replaces the image for a Twemoji(Twitter emoji) with it's alternate text.
   286 			 * Replaces the image for a Twemoji(Twitter emoji) with it's alternate text.
   288 			 *
   287 			 *
   289 			 * @returns Alternate text from the image.
   288 			 * @returns Alternate text from the image.
   290 			 */
   289 			 */
   291 			val.find( 'img' ).replaceWith( function() { return this.alt; } );
   290 			val.find( 'img' ).replaceWith( function() { return this.alt; } );
   292 			val = val.text();
   291 			val = val.text();
   302 		if ( $( '.sticky', rowData ).text() === 'sticky' ) {
   301 		if ( $( '.sticky', rowData ).text() === 'sticky' ) {
   303 			$( 'input[name="sticky"]', editRow ).prop( 'checked', true );
   302 			$( 'input[name="sticky"]', editRow ).prop( 'checked', true );
   304 		}
   303 		}
   305 
   304 
   306 		/**
   305 		/**
   307 		 * @summary Creates the select boxes for the categories.
   306 		 * Creates the select boxes for the categories.
   308 		 */
   307 		 */
   309 		$('.post_category', rowData).each(function(){
   308 		$('.post_category', rowData).each(function(){
   310 			var taxname,
   309 			var taxname,
   311 				term_ids = $(this).text();
   310 				term_ids = $(this).text();
   312 
   311 
   315 				$('ul.'+taxname+'-checklist :checkbox', editRow).val(term_ids.split(','));
   314 				$('ul.'+taxname+'-checklist :checkbox', editRow).val(term_ids.split(','));
   316 			}
   315 			}
   317 		});
   316 		});
   318 
   317 
   319 		/**
   318 		/**
   320 		 * @summary Gets all the taxonomies for live auto-fill suggestions.
   319 		 * Gets all the taxonomies for live auto-fill suggestions when typing the name
   321 		 * When typing the name of a tag.
   320 		 * of a tag.
   322 		 */
   321 		 */
   323 		$('.tags_input', rowData).each(function(){
   322 		$('.tags_input', rowData).each(function(){
   324 			var terms = $(this),
   323 			var terms = $(this),
   325 				taxname = $(this).attr('id').replace('_' + id, ''),
   324 				taxname = $(this).attr('id').replace('_' + id, ''),
   326 				textarea = $('textarea.tax_input_' + taxname, editRow),
   325 				textarea = $('textarea.tax_input_' + taxname, editRow),
   379 
   378 
   380 		return false;
   379 		return false;
   381 	},
   380 	},
   382 
   381 
   383 	/**
   382 	/**
   384 	 * @summary Saves the changes made in the quick edit window to the post.
   383 	 * Saves the changes made in the quick edit window to the post.
   385 	 * AJAX saving is only for Quick Edit and not for bulk edit.
   384 	 * AJAX saving is only for Quick Edit and not for bulk edit.
   386 	 *
   385 	 *
   387 	 * @since 2.7.0
   386 	 * @since 2.7.0
   388 	 *
   387 	 *
   389 	 * @param   {int}     id The id for the post that has been changed.
   388 	 * @param   {int}     id The id for the post that has been changed.
   422 				if (r) {
   421 				if (r) {
   423 					if ( -1 !== r.indexOf( '<tr' ) ) {
   422 					if ( -1 !== r.indexOf( '<tr' ) ) {
   424 						$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
   423 						$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
   425 						$('#edit-'+id).before(r).remove();
   424 						$('#edit-'+id).before(r).remove();
   426 						$( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
   425 						$( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
   427 							// Move focus back to the Quick Edit link. $( this ) is the row being animated.
   426 							// Move focus back to the Quick Edit button. $( this ) is the row being animated.
   428 							$( this ).find( '.editinline' ).focus();
   427 							$( this ).find( '.editinline' )
       
   428 								.attr( 'aria-expanded', 'false' )
       
   429 								.focus();
   429 							wp.a11y.speak( inlineEditL10n.saved );
   430 							wp.a11y.speak( inlineEditL10n.saved );
   430 						});
   431 						});
   431 					} else {
   432 					} else {
   432 						r = r.replace( /<.[^<>]*?>/g, '' );
   433 						r = r.replace( /<.[^<>]*?>/g, '' );
   433 						$errorNotice.removeClass( 'hidden' );
   434 						$errorNotice.removeClass( 'hidden' );
   445 		// Prevent submitting the form when pressing Enter on a focused field.
   446 		// Prevent submitting the form when pressing Enter on a focused field.
   446 		return false;
   447 		return false;
   447 	},
   448 	},
   448 
   449 
   449 	/**
   450 	/**
   450 	 * @summary Hides and empties the Quick Edit and/or Bulk Edit windows.
   451 	 * Hides and empties the Quick Edit and/or Bulk Edit windows.
   451 	 *
   452 	 *
   452 	 * @memberof    inlineEditPost
   453 	 * @memberof    inlineEditPost
   453 	 * @since 2.7.0
   454 	 * @since 2.7.0
   454 	 *
   455 	 *
   455 	 * @returns {boolean} Always returns false.
   456 	 * @returns {boolean} Always returns false.
   477 
   478 
   478 				// Remove both the inline-editor and its hidden tr siblings.
   479 				// Remove both the inline-editor and its hidden tr siblings.
   479 				$('#'+id).siblings('tr.hidden').addBack().remove();
   480 				$('#'+id).siblings('tr.hidden').addBack().remove();
   480 				id = id.substr( id.lastIndexOf('-') + 1 );
   481 				id = id.substr( id.lastIndexOf('-') + 1 );
   481 
   482 
   482 				// Show the post row and move focus back to the Quick Edit link.
   483 				// Show the post row and move focus back to the Quick Edit button.
   483 				$( this.what + id ).show().find( '.editinline' ).focus();
   484 				$( this.what + id ).show().find( '.editinline' )
       
   485 					.attr( 'aria-expanded', 'false' )
       
   486 					.focus();
   484 			}
   487 			}
   485 		}
   488 		}
   486 
   489 
   487 		return false;
   490 		return false;
   488 	},
   491 	},
   489 
   492 
   490 	/**
   493 	/**
   491 	 * @summary Gets the id for a the post that you want to quick edit from the row
   494 	 * Gets the id for a the post that you want to quick edit from the row in the quick
   492 	 * in the quick edit table.
   495 	 * edit table.
   493 	 *
   496 	 *
   494 	 * @memberof    inlineEditPost
   497 	 * @memberof    inlineEditPost
   495 	 * @since 2.7.0
   498 	 * @since 2.7.0
   496 	 *
   499 	 *
   497 	 * @param   {Object} o DOM row object to get the id for.
   500 	 * @param   {Object} o DOM row object to get the id for.