wp/wp-admin/js/inline-edit-post.js
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
     3  *
     3  *
     4  * @since 2.7.0
     4  * @since 2.7.0
     5  * @output wp-admin/js/inline-edit-post.js
     5  * @output wp-admin/js/inline-edit-post.js
     6  */
     6  */
     7 
     7 
     8 /* global inlineEditL10n, ajaxurl, typenow, inlineEditPost */
     8 /* global ajaxurl, typenow, inlineEditPost */
     9 
     9 
    10 window.wp = window.wp || {};
    10 window.wp = window.wp || {};
    11 
    11 
    12 /**
    12 /**
    13  * 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.
    17  * @since 2.7.0
    17  * @since 2.7.0
    18  *
    18  *
    19  * @type {Object}
    19  * @type {Object}
    20  *
    20  *
    21  * @property {string} type The type of inline editor.
    21  * @property {string} type The type of inline editor.
    22  * @property {string} what The prefix before the post id.
    22  * @property {string} what The prefix before the post ID.
    23  *
    23  *
    24  */
    24  */
    25 ( function( $, wp ) {
    25 ( function( $, wp ) {
    26 
    26 
    27 	window.inlineEditPost = {
    27 	window.inlineEditPost = {
    28 
    28 
    29 	/**
    29 	/**
    30 	 * 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 	 *
       
    36 	 * @since 2.7.0
       
    37 	 *
    36 	 * @memberof inlineEditPost
    38 	 * @memberof inlineEditPost
    37 	 * @since 2.7.0
    39 	 *
    38 	 *
    40 	 * @return {void}
    39 	 * @returns {void}
       
    40 	 */
    41 	 */
    41 	init : function(){
    42 	init : function(){
    42 		var t = this, qeRow = $('#inline-edit'), bulkRow = $('#bulk-edit');
    43 		var t = this, qeRow = $('#inline-edit'), bulkRow = $('#bulk-edit');
    43 
    44 
    44 		t.type = $('table.widefat').hasClass('pages') ? 'page' : 'post';
    45 		t.type = $('table.widefat').hasClass('pages') ? 'page' : 'post';
    45 		// Post id prefix.
    46 		// Post ID prefix.
    46 		t.what = '#post-';
    47 		t.what = '#post-';
    47 
    48 
    48 		/**
    49 		/**
    49 		 * Binds the escape key to revert the changes and close the quick editor.
    50 		 * Binds the Escape key to revert the changes and close the quick editor.
    50 		 *
    51 		 *
    51 		 * @returns {boolean} The result of revert.
    52 		 * @return {boolean} The result of revert.
    52 		 */
    53 		 */
    53 		qeRow.keyup(function(e){
    54 		qeRow.keyup(function(e){
    54 			// Revert changes if escape key is pressed.
    55 			// Revert changes if Escape key is pressed.
    55 			if ( e.which === 27 ) {
    56 			if ( e.which === 27 ) {
    56 				return inlineEditPost.revert();
    57 				return inlineEditPost.revert();
    57 			}
    58 			}
    58 		});
    59 		});
    59 
    60 
    60 		/**
    61 		/**
    61 		 * Binds the escape key to revert the changes and close the bulk editor.
    62 		 * Binds the Escape key to revert the changes and close the bulk editor.
    62 		 *
    63 		 *
    63 		 * @returns {boolean} The result of revert.
    64 		 * @return {boolean} The result of revert.
    64 		 */
    65 		 */
    65 		bulkRow.keyup(function(e){
    66 		bulkRow.keyup(function(e){
    66 			// Revert changes if escape key is pressed.
    67 			// Revert changes if Escape key is pressed.
    67 			if ( e.which === 27 ) {
    68 			if ( e.which === 27 ) {
    68 				return inlineEditPost.revert();
    69 				return inlineEditPost.revert();
    69 			}
    70 			}
    70 		});
    71 		});
    71 
    72 
    72 		/**
    73 		/**
    73 		 * Reverts changes and close the quick editor if the cancel button is clicked.
    74 		 * Reverts changes and close the quick editor if the cancel button is clicked.
    74 		 *
    75 		 *
    75 		 * @returns {boolean} The result of revert.
    76 		 * @return {boolean} The result of revert.
    76 		 */
    77 		 */
    77 		$( '.cancel', qeRow ).click( function() {
    78 		$( '.cancel', qeRow ).click( function() {
    78 			return inlineEditPost.revert();
    79 			return inlineEditPost.revert();
    79 		});
    80 		});
    80 
    81 
    81 		/**
    82 		/**
    82 		 * Saves changes in the quick editor if the save(named: update) button is clicked.
    83 		 * Saves changes in the quick editor if the save(named: update) button is clicked.
    83 		 *
    84 		 *
    84 		 * @returns {boolean} The result of save.
    85 		 * @return {boolean} The result of save.
    85 		 */
    86 		 */
    86 		$( '.save', qeRow ).click( function() {
    87 		$( '.save', qeRow ).click( function() {
    87 			return inlineEditPost.save(this);
    88 			return inlineEditPost.save(this);
    88 		});
    89 		});
    89 
    90 
    90 		/**
    91 		/**
    91 		 * If enter is pressed, and the target is not the cancel button, save the post.
    92 		 * If Enter is pressed, and the target is not the cancel button, save the post.
    92 		 *
    93 		 *
    93 		 * @returns {boolean} The result of save.
    94 		 * @return {boolean} The result of save.
    94 		 */
    95 		 */
    95 		$('td', qeRow).keydown(function(e){
    96 		$('td', qeRow).keydown(function(e){
    96 			if ( e.which === 13 && ! $( e.target ).hasClass( 'cancel' ) ) {
    97 			if ( e.which === 13 && ! $( e.target ).hasClass( 'cancel' ) ) {
    97 				return inlineEditPost.save(this);
    98 				return inlineEditPost.save(this);
    98 			}
    99 			}
    99 		});
   100 		});
   100 
   101 
   101 		/**
   102 		/**
   102 		 * Reverts changes and close the bulk editor if the cancel button is clicked.
   103 		 * Reverts changes and close the bulk editor if the cancel button is clicked.
   103 		 *
   104 		 *
   104 		 * @returns {boolean} The result of revert.
   105 		 * @return {boolean} The result of revert.
   105 		 */
   106 		 */
   106 		$( '.cancel', bulkRow ).click( function() {
   107 		$( '.cancel', bulkRow ).click( function() {
   107 			return inlineEditPost.revert();
   108 			return inlineEditPost.revert();
   108 		});
   109 		});
   109 
   110 
   155 
   156 
   156 	/**
   157 	/**
   157 	 * Toggles the quick edit window, hiding it when it's active and showing it when
   158 	 * Toggles the quick edit window, hiding it when it's active and showing it when
   158 	 * inactive.
   159 	 * inactive.
   159 	 *
   160 	 *
       
   161 	 * @since 2.7.0
       
   162 	 *
   160 	 * @memberof inlineEditPost
   163 	 * @memberof inlineEditPost
   161 	 * @since 2.7.0
       
   162 	 *
   164 	 *
   163 	 * @param {Object} el Element within a post table row.
   165 	 * @param {Object} el Element within a post table row.
   164 	 */
   166 	 */
   165 	toggle : function(el){
   167 	toggle : function(el){
   166 		var t = this;
   168 		var t = this;
   168 	},
   170 	},
   169 
   171 
   170 	/**
   172 	/**
   171 	 * Creates the bulk editor row to edit multiple posts at once.
   173 	 * Creates the bulk editor row to edit multiple posts at once.
   172 	 *
   174 	 *
       
   175 	 * @since 2.7.0
       
   176 	 *
   173 	 * @memberof inlineEditPost
   177 	 * @memberof inlineEditPost
   174 	 * @since 2.7.0
       
   175 	 */
   178 	 */
   176 	setBulk : function(){
   179 	setBulk : function(){
   177 		var te = '', type = this.type, c = true;
   180 		var te = '', type = this.type, c = true;
   178 		this.revert();
   181 		this.revert();
   179 
   182 
   193 
   196 
   194 			// If the checkbox for a post is selected, add the post to the edit list.
   197 			// If the checkbox for a post is selected, add the post to the edit list.
   195 			if ( $(this).prop('checked') ) {
   198 			if ( $(this).prop('checked') ) {
   196 				c = false;
   199 				c = false;
   197 				var id = $(this).val(), theTitle;
   200 				var id = $(this).val(), theTitle;
   198 				theTitle = $('#inline_'+id+' .post_title').html() || inlineEditL10n.notitle;
   201 				theTitle = $('#inline_'+id+' .post_title').html() || wp.i18n.__( '(no title)' );
   199 				te += '<div id="ttle'+id+'"><a id="_'+id+'" class="ntdelbutton" title="'+inlineEditL10n.ntdeltitle+'">X</a>'+theTitle+'</div>';
   202 				te += '<div id="ttle'+id+'"><a id="_'+id+'" class="ntdelbutton" title="'+ wp.i18n.__( 'Remove From Bulk Edit' ) +'">X</a>'+theTitle+'</div>';
   200 			}
   203 			}
   201 		});
   204 		});
   202 
   205 
   203 		// If no checkboxes where checked, just hide the quick/bulk edit rows.
   206 		// If no checkboxes where checked, just hide the quick/bulk edit rows.
   204 		if ( c ) {
   207 		if ( c ) {
   240 	},
   243 	},
   241 
   244 
   242 	/**
   245 	/**
   243 	 * Creates a quick edit window for the post that has been clicked.
   246 	 * Creates a quick edit window for the post that has been clicked.
   244 	 *
   247 	 *
       
   248 	 * @since 2.7.0
       
   249 	 *
   245 	 * @memberof inlineEditPost
   250 	 * @memberof inlineEditPost
   246 	 * @since 2.7.0
   251 	 *
   247 	 *
   252 	 * @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
       
   249 	 *                           table row.
   253 	 *                           table row.
   250 	 * @returns {boolean} Always returns false at the end of execution.
   254 	 * @return {boolean} Always returns false at the end of execution.
   251 	 */
   255 	 */
   252 	edit : function(id) {
   256 	edit : function(id) {
   253 		var t = this, fields, editRow, rowData, status, pageOpt, pageLevel, nextPage, pageLoop = true, nextLevel, f, val, pw;
   257 		var t = this, fields, editRow, rowData, status, pageOpt, pageLevel, nextPage, pageLoop = true, nextLevel, f, val, pw;
   254 		t.revert();
   258 		t.revert();
   255 
   259 
   283 			val = $('.'+fields[f], rowData);
   287 			val = $('.'+fields[f], rowData);
   284 
   288 
   285 			/**
   289 			/**
   286 			 * Replaces the image for a Twemoji(Twitter emoji) with it's alternate text.
   290 			 * Replaces the image for a Twemoji(Twitter emoji) with it's alternate text.
   287 			 *
   291 			 *
   288 			 * @returns Alternate text from the image.
   292 			 * @return {string} Alternate text from the image.
   289 			 */
   293 			 */
   290 			val.find( 'img' ).replaceWith( function() { return this.alt; } );
   294 			val.find( 'img' ).replaceWith( function() { return this.alt; } );
   291 			val = val.text();
   295 			val = val.text();
   292 			$(':input[name="' + fields[f] + '"]', editRow).val( val );
   296 			$(':input[name="' + fields[f] + '"]', editRow).val( val );
   293 		}
   297 		}
   321 		 */
   325 		 */
   322 		$('.tags_input', rowData).each(function(){
   326 		$('.tags_input', rowData).each(function(){
   323 			var terms = $(this),
   327 			var terms = $(this),
   324 				taxname = $(this).attr('id').replace('_' + id, ''),
   328 				taxname = $(this).attr('id').replace('_' + id, ''),
   325 				textarea = $('textarea.tax_input_' + taxname, editRow),
   329 				textarea = $('textarea.tax_input_' + taxname, editRow),
   326 				comma = inlineEditL10n.comma;
   330 				comma = wp.i18n._x( ',', 'tag delimiter' ).trim();
   327 
   331 
   328 			terms.find( 'img' ).replaceWith( function() { return this.alt; } );
   332 			terms.find( 'img' ).replaceWith( function() { return this.alt; } );
   329 			terms = terms.text();
   333 			terms = terms.text();
   330 
   334 
   331 			if ( terms ) {
   335 			if ( terms ) {
   379 		return false;
   383 		return false;
   380 	},
   384 	},
   381 
   385 
   382 	/**
   386 	/**
   383 	 * Saves the changes made in the quick edit window to the post.
   387 	 * Saves the changes made in the quick edit window to the post.
   384 	 * AJAX saving is only for Quick Edit and not for bulk edit.
   388 	 * Ajax saving is only for Quick Edit and not for bulk edit.
   385 	 *
   389 	 *
   386 	 * @since 2.7.0
   390 	 * @since 2.7.0
   387 	 *
   391 	 *
   388 	 * @param   {int}     id The id for the post that has been changed.
   392 	 * @param {number} id The ID for the post that has been changed.
   389 	 * @returns {boolean}    false, so the form does not submit when pressing
   393 	 * @return {boolean} False, so the form does not submit when pressing
   390 	 *                       Enter on a focused field.
   394 	 *                   Enter on a focused field.
   391 	 */
   395 	 */
   392 	save : function(id) {
   396 	save : function(id) {
   393 		var params, fields, page = $('.post_status_page').val() || '';
   397 		var params, fields, page = $('.post_status_page').val() || '';
   394 
   398 
   395 		if ( typeof(id) === 'object' ) {
   399 		if ( typeof(id) === 'object' ) {
   407 		};
   411 		};
   408 
   412 
   409 		fields = $('#edit-'+id).find(':input').serialize();
   413 		fields = $('#edit-'+id).find(':input').serialize();
   410 		params = fields + '&' + $.param(params);
   414 		params = fields + '&' + $.param(params);
   411 
   415 
   412 		// Make ajax request.
   416 		// Make Ajax request.
   413 		$.post( ajaxurl, params,
   417 		$.post( ajaxurl, params,
   414 			function(r) {
   418 			function(r) {
   415 				var $errorNotice = $( '#edit-' + id + ' .inline-edit-save .notice-error' ),
   419 				var $errorNotice = $( '#edit-' + id + ' .inline-edit-save .notice-error' ),
   416 					$error = $errorNotice.find( '.error' );
   420 					$error = $errorNotice.find( '.error' );
   417 
   421 
   425 						$( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
   429 						$( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
   426 							// Move focus back to the Quick Edit button. $( this ) is the row being animated.
   430 							// Move focus back to the Quick Edit button. $( this ) is the row being animated.
   427 							$( this ).find( '.editinline' )
   431 							$( this ).find( '.editinline' )
   428 								.attr( 'aria-expanded', 'false' )
   432 								.attr( 'aria-expanded', 'false' )
   429 								.focus();
   433 								.focus();
   430 							wp.a11y.speak( inlineEditL10n.saved );
   434 							wp.a11y.speak( wp.i18n.__( 'Changes saved.' ) );
   431 						});
   435 						});
   432 					} else {
   436 					} else {
   433 						r = r.replace( /<.[^<>]*?>/g, '' );
   437 						r = r.replace( /<.[^<>]*?>/g, '' );
   434 						$errorNotice.removeClass( 'hidden' );
   438 						$errorNotice.removeClass( 'hidden' );
   435 						$error.html( r );
   439 						$error.html( r );
   436 						wp.a11y.speak( $error.text() );
   440 						wp.a11y.speak( $error.text() );
   437 					}
   441 					}
   438 				} else {
   442 				} else {
   439 					$errorNotice.removeClass( 'hidden' );
   443 					$errorNotice.removeClass( 'hidden' );
   440 					$error.html( inlineEditL10n.error );
   444 					$error.text( wp.i18n.__( 'Error while saving the changes.' ) );
   441 					wp.a11y.speak( inlineEditL10n.error );
   445 					wp.a11y.speak( wp.i18n.__( 'Error while saving the changes.' ) );
   442 				}
   446 				}
   443 			},
   447 			},
   444 		'html');
   448 		'html');
   445 
   449 
   446 		// Prevent submitting the form when pressing Enter on a focused field.
   450 		// Prevent submitting the form when pressing Enter on a focused field.
   448 	},
   452 	},
   449 
   453 
   450 	/**
   454 	/**
   451 	 * Hides and empties the Quick Edit and/or Bulk Edit windows.
   455 	 * Hides and empties the Quick Edit and/or Bulk Edit windows.
   452 	 *
   456 	 *
   453 	 * @memberof    inlineEditPost
   457 	 * @since 2.7.0
   454 	 * @since 2.7.0
   458 	 *
   455 	 *
   459 	 * @memberof inlineEditPost
   456 	 * @returns {boolean} Always returns false.
   460 	 *
       
   461 	 * @return {boolean} Always returns false.
   457 	 */
   462 	 */
   458 	revert : function(){
   463 	revert : function(){
   459 		var $tableWideFat = $( '.widefat' ),
   464 		var $tableWideFat = $( '.widefat' ),
   460 			id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
   465 			id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
   461 
   466 
   489 
   494 
   490 		return false;
   495 		return false;
   491 	},
   496 	},
   492 
   497 
   493 	/**
   498 	/**
   494 	 * Gets the id for a the post that you want to quick edit from the row in the quick
   499 	 * Gets the ID for a the post that you want to quick edit from the row in the quick
   495 	 * edit table.
   500 	 * edit table.
   496 	 *
   501 	 *
   497 	 * @memberof    inlineEditPost
   502 	 * @since 2.7.0
   498 	 * @since 2.7.0
   503 	 *
   499 	 *
   504 	 * @memberof inlineEditPost
   500 	 * @param   {Object} o DOM row object to get the id for.
   505 	 *
   501 	 * @returns {string}   The post id extracted from the table row in the object.
   506 	 * @param {Object} o DOM row object to get the ID for.
       
   507 	 * @return {string} The post ID extracted from the table row in the object.
   502 	 */
   508 	 */
   503 	getId : function(o) {
   509 	getId : function(o) {
   504 		var id = $(o).closest('tr').attr('id'),
   510 		var id = $(o).closest('tr').attr('id'),
   505 			parts = id.split('-');
   511 			parts = id.split('-');
   506 		return parts[parts.length - 1];
   512 		return parts[parts.length - 1];
   521 				lock_data = locked[key];
   527 				lock_data = locked[key];
   522 				row.find('.column-title .locked-text').text( lock_data.text );
   528 				row.find('.column-title .locked-text').text( lock_data.text );
   523 				row.find('.check-column checkbox').prop('checked', false);
   529 				row.find('.check-column checkbox').prop('checked', false);
   524 
   530 
   525 				if ( lock_data.avatar_src ) {
   531 				if ( lock_data.avatar_src ) {
   526 					avatar = $( '<img class="avatar avatar-18 photo" width="18" height="18" alt="" />' ).attr( 'src', lock_data.avatar_src.replace( /&amp;/g, '&' ) );
   532 					avatar = $( '<img />', {
       
   533 						'class': 'avatar avatar-18 photo',
       
   534 						width: 18,
       
   535 						height: 18,
       
   536 						alt: '',
       
   537 						src: lock_data.avatar_src,
       
   538 						srcset: lock_data.avatar_src_2x ? lock_data.avatar_src_2x + ' 2x' : undefined
       
   539 					} );
   527 					row.find('.column-title .locked-avatar').empty().append( avatar );
   540 					row.find('.column-title .locked-avatar').empty().append( avatar );
   528 				}
   541 				}
   529 				row.addClass('wp-locked');
   542 				row.addClass('wp-locked');
   530 			}
   543 			}
   531 		} else if ( row.hasClass('wp-locked') ) {
   544 		} else if ( row.hasClass('wp-locked') ) {
   532 			// Make room for the CSS animation
   545 			row.removeClass( 'wp-locked' ).find( '.locked-info span' ).empty();
   533 			row.removeClass('wp-locked').delay(1000).find('.locked-info span').empty();
       
   534 		}
   546 		}
   535 	});
   547 	});
   536 }).on( 'heartbeat-send.wp-check-locked-posts', function( e, data ) {
   548 }).on( 'heartbeat-send.wp-check-locked-posts', function( e, data ) {
   537 	var check = [];
   549 	var check = [];
   538 
   550 
   545 	if ( check.length ) {
   557 	if ( check.length ) {
   546 		data['wp-check-locked-posts'] = check;
   558 		data['wp-check-locked-posts'] = check;
   547 	}
   559 	}
   548 }).ready( function() {
   560 }).ready( function() {
   549 
   561 
   550 	// Set the heartbeat interval to 15 sec.
   562 	// Set the heartbeat interval to 15 seconds.
   551 	if ( typeof wp !== 'undefined' && wp.heartbeat ) {
   563 	if ( typeof wp !== 'undefined' && wp.heartbeat ) {
   552 		wp.heartbeat.interval( 15 );
   564 		wp.heartbeat.interval( 15 );
   553 	}
   565 	}
   554 });
   566 });
   555 
   567