Context Navigation

← Previous Revision
Next Revision →
Blame
Revision Log

inline-edit-post.js

Visit:

Last change on this file was 59134, checked in by joedolson, 15 months ago

Quick/Bulk Edit: Add notice if no items selected.

Add an error notice if a user attempts to apply bulk edits with no items selected. Applies to post lists, comments, taxonomies, and plugins screens.

Props garrett-eclipse, nrqsnchz, sumitsingh, nihar007, royho, sabernhardt, oglekler, quadthemes, ankit-k-gupta, fnpen, ukdrahul, joedolson.
Fixes #45006, #58479.

Property svn:eol-style set to native

File size: 20.2 KB

Line
1	/**
2	* This file contains the functions needed for the inline editing of posts.
3	*
4	* @since 2.7.0
5	* @output wp-admin/js/inline-edit-post.js
6	*/
7
8	/* global ajaxurl, typenow, inlineEditPost */
9
10	window.wp = window.wp \|\| {};
11
12	/**
13	* Manages the quick edit and bulk edit windows for editing posts or pages.
14	*
15	* @namespace inlineEditPost
16	*
17	* @since 2.7.0
18	*
19	* @type {Object}
20	*
21	* @property {string} type The type of inline editor.
22	* @property {string} what The prefix before the post ID.
23	*
24	*/
25	( function( $, wp ) {
26
27	window.inlineEditPost = {
28
29	/**
30	* Initializes the inline and bulk post editor.
31	*
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
34	* editing. Adds event handler to bulk edit.
35	*
36	* @since 2.7.0
37	*
38	* @memberof inlineEditPost
39	*
40	* @return {void}
41	*/
42	init : function(){
43	var t = this, qeRow = $('#inline-edit'), bulkRow = $('#bulk-edit');
44
45	t.type = $('table.widefat').hasClass('pages') ? 'page' : 'post';
46	// Post ID prefix.
47	t.what = '#post-';
48
49	/**
50	* Binds the Escape key to revert the changes and close the quick editor.
51	*
52	* @return {boolean} The result of revert.
53	*/
54	qeRow.on( 'keyup', function(e){
55	// Revert changes if Escape key is pressed.
56	if ( e.which === 27 ) {
57	return inlineEditPost.revert();
58	}
59	});
60
61	/**
62	* Binds the Escape key to revert the changes and close the bulk editor.
63	*
64	* @return {boolean} The result of revert.
65	*/
66	bulkRow.on( 'keyup', function(e){
67	// Revert changes if Escape key is pressed.
68	if ( e.which === 27 ) {
69	return inlineEditPost.revert();
70	}
71	});
72
73	/**
74	* Reverts changes and close the quick editor if the cancel button is clicked.
75	*
76	* @return {boolean} The result of revert.
77	*/
78	$( '.cancel', qeRow ).on( 'click', function() {
79	return inlineEditPost.revert();
80	});
81
82	/**
83	* Saves changes in the quick editor if the save(named: update) button is clicked.
84	*
85	* @return {boolean} The result of save.
86	*/
87	$( '.save', qeRow ).on( 'click', function() {
88	return inlineEditPost.save(this);
89	});
90
91	/**
92	* If Enter is pressed, and the target is not the cancel button, save the post.
93	*
94	* @return {boolean} The result of save.
95	*/
96	$('td', qeRow).on( 'keydown', function(e){
97	if ( e.which === 13 && ! $( e.target ).hasClass( 'cancel' ) ) {
98	return inlineEditPost.save(this);
99	}
100	});
101
102	/**
103	* Reverts changes and close the bulk editor if the cancel button is clicked.
104	*
105	* @return {boolean} The result of revert.
106	*/
107	$( '.cancel', bulkRow ).on( 'click', function() {
108	return inlineEditPost.revert();
109	});
110
111	/**
112	* Disables the password input field when the private post checkbox is checked.
113	*/
114	$('#inline-edit .inline-edit-private input[value="private"]').on( 'click', function(){
115	var pw = $('input.inline-edit-password-input');
116	if ( $(this).prop('checked') ) {
117	pw.val('').prop('disabled', true);
118	} else {
119	pw.prop('disabled', false);
120	}
121	});
122
123	/**
124	* Binds click event to the .editinline button which opens the quick editor.
125	*/
126	$( '#the-list' ).on( 'click', '.editinline', function() {
127	$( this ).attr( 'aria-expanded', 'true' );
128	inlineEditPost.edit( this );
129	});
130
131	// Clone quick edit categories for the bulk editor.
132	var beCategories = $( '#inline-edit fieldset.inline-edit-categories' ).clone();
133
134	// Make "id" attributes globally unique.
135	beCategories.find( '*[id]' ).each( function() {
136	this.id = 'bulk-edit-' + this.id;
137	});
138
139	$('#bulk-edit').find('fieldset:first').after(
140	beCategories
141	).siblings( 'fieldset:last' ).prepend(
142	$( '#inline-edit .inline-edit-tags-wrap' ).clone()
143	);
144
145	$('select[name="_status"] option[value="future"]', bulkRow).remove();
146
147	/**
148	* Adds onclick events to the apply buttons.
149	*/
150	$('#doaction').on( 'click', function(e){
151	var n,
152	$itemsSelected = $( '#posts-filter .check-column input[type="checkbox"]:checked' );
153
154	if ( $itemsSelected.length < 1 ) {
155	return;
156	}
157
158	t.whichBulkButtonId = $( this ).attr( 'id' );
159	n = t.whichBulkButtonId.substr( 2 );
160
161	if ( 'edit' === $( 'select[name="' + n + '"]' ).val() ) {
162	e.preventDefault();
163	t.setBulk();
164	} else if ( $('form#posts-filter tr.inline-editor').length > 0 ) {
165	t.revert();
166	}
167	});
168	},
169
170	/**
171	* Toggles the quick edit window, hiding it when it's active and showing it when
172	* inactive.
173	*
174	* @since 2.7.0
175	*
176	* @memberof inlineEditPost
177	*
178	* @param {Object} el Element within a post table row.
179	*/
180	toggle : function(el){
181	var t = this;
182	$( t.what + t.getId( el ) ).css( 'display' ) === 'none' ? t.revert() : t.edit( el );
183	},
184
185	/**
186	* Creates the bulk editor row to edit multiple posts at once.
187	*
188	* @since 2.7.0
189	*
190	* @memberof inlineEditPost
191	*/
192	setBulk : function(){
193	var te = '', type = this.type, c = true;
194	var checkedPosts = $( 'tbody th.check-column input[type="checkbox"]:checked' );
195	var categories = {};
196	this.revert();
197
198	$( '#bulk-edit td' ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );
199
200	// Insert the editor at the top of the table with an empty row above to maintain zebra striping.
201	$('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
202	$('#bulk-edit').addClass('inline-editor').show();
203
204	/**
205	* Create a HTML div with the title and a link(delete-icon) for each selected
206	* post.
207	*
208	* Get the selected posts based on the checked checkboxes in the post table.
209	*/
210	$( 'tbody th.check-column input[type="checkbox"]' ).each( function() {
211
212	// If the checkbox for a post is selected, add the post to the edit list.
213	if ( $(this).prop('checked') ) {
214	c = false;
215	var id = $( this ).val(),
216	theTitle = $( '#inline_' + id + ' .post_title' ).html() \|\| wp.i18n.__( '(no title)' ),
217	buttonVisuallyHiddenText = wp.i18n.sprintf(
218	/* translators: %s: Post title. */
219	wp.i18n.__( 'Remove “%s” from Bulk Edit' ),
220	theTitle
221	);
222
223	te += '<li class="ntdelitem"><button type="button" id="_' + id + '" class="button-link ntdelbutton"><span class="screen-reader-text">' + buttonVisuallyHiddenText + '</span></button><span class="ntdeltitle" aria-hidden="true">' + theTitle + '</span></li>';
224	}
225	});
226
227	// If no checkboxes where checked, just hide the quick/bulk edit rows.
228	if ( c ) {
229	return this.revert();
230	}
231
232	// Populate the list of items to bulk edit.
233	$( '#bulk-titles' ).html( '<ul id="bulk-titles-list" role="list">' + te + '</ul>' );
234
235	// Gather up some statistics on which of these checked posts are in which categories.
236	checkedPosts.each( function() {
237	var id = $( this ).val();
238	var checked = $( '#category_' + id ).text().split( ',' );
239
240	checked.map( function( cid ) {
241	categories[ cid ] \|\| ( categories[ cid ] = 0 );
242	// Just record that this category is checked.
243	categories[ cid ]++;
244	} );
245	} );
246
247	// Compute initial states.
248	$( '.inline-edit-categories input[name="post_category[]"]' ).each( function() {
249	if ( categories[ $( this ).val() ] == checkedPosts.length ) {
250	// If the number of checked categories matches the number of selected posts, then all posts are in this category.
251	$( this ).prop( 'checked', true );
252	} else if ( categories[ $( this ).val() ] > 0 ) {
253	// If the number is less than the number of selected posts, then it's indeterminate.
254	$( this ).prop( 'indeterminate', true );
255	if ( ! $( this ).parent().find( 'input[name="indeterminate_post_category[]"]' ).length ) {
256	// Get the term label text.
257	var label = $( this ).parent().text();
258	// Set indeterminate states for the backend. Add accessible text for indeterminate inputs.
259	$( this ).after( '<input type="hidden" name="indeterminate_post_category[]" value="' + $( this ).val() + '">' ).attr( 'aria-label', label.trim() + ': ' + wp.i18n.__( 'Some selected posts have this category' ) );
260	}
261	}
262	} );
263
264	$( '.inline-edit-categories input[name="post_category[]"]:indeterminate' ).on( 'change', function() {
265	// Remove accessible label text. Remove the indeterminate flags as there was a specific state change.
266	$( this ).removeAttr( 'aria-label' ).parent().find( 'input[name="indeterminate_post_category[]"]' ).remove();
267	} );
268
269	$( '.inline-edit-save button' ).on( 'click', function() {
270	$( '.inline-edit-categories input[name="post_category[]"]' ).prop( 'indeterminate', false );
271	} );
272
273	/**
274	* Binds on click events to handle the list of items to bulk edit.
275	*
276	* @listens click
277	*/
278	$( '#bulk-titles .ntdelbutton' ).click( function() {
279	var $this = $( this ),
280	id = $this.attr( 'id' ).substr( 1 ),
281	$prev = $this.parent().prev().children( '.ntdelbutton' ),
282	$next = $this.parent().next().children( '.ntdelbutton' );
283
284	$( 'input#cb-select-all-1, input#cb-select-all-2' ).prop( 'checked', false );
285	$( 'table.widefat input[value="' + id + '"]' ).prop( 'checked', false );
286	$( '#_' + id ).parent().remove();
287	wp.a11y.speak( wp.i18n.__( 'Item removed.' ), 'assertive' );
288
289	// Move focus to a proper place when items are removed.
290	if ( $next.length ) {
291	$next.focus();
292	} else if ( $prev.length ) {
293	$prev.focus();
294	} else {
295	$( '#bulk-titles-list' ).remove();
296	inlineEditPost.revert();
297	wp.a11y.speak( wp.i18n.__( 'All selected items have been removed. Select new items to use Bulk Actions.' ) );
298	}
299	});
300
301	// Enable auto-complete for tags when editing posts.
302	if ( 'post' === type ) {
303	$( 'tr.inline-editor textarea[data-wp-taxonomy]' ).each( function ( i, element ) {
304	/*
305	* While Quick Edit clones the form each time, Bulk Edit always re-uses
306	* the same form. Let's check if an autocomplete instance already exists.
307	*/
308	if ( $( element ).autocomplete( 'instance' ) ) {
309	// jQuery equivalent of `continue` within an `each()` loop.
310	return;
311	}
312
313	$( element ).wpTagsSuggest();
314	} );
315	}
316
317	// Set initial focus on the Bulk Edit region.
318	$( '#bulk-edit .inline-edit-wrapper' ).attr( 'tabindex', '-1' ).focus();
319	// Scrolls to the top of the table where the editor is rendered.
320	$('html, body').animate( { scrollTop: 0 }, 'fast' );
321	},
322
323	/**
324	* Creates a quick edit window for the post that has been clicked.
325	*
326	* @since 2.7.0
327	*
328	* @memberof inlineEditPost
329	*
330	* @param {number\|Object} id The ID of the clicked post or an element within a post
331	* table row.
332	* @return {boolean} Always returns false at the end of execution.
333	*/
334	edit : function(id) {
335	var t = this, fields, editRow, rowData, status, pageOpt, pageLevel, nextPage, pageLoop = true, nextLevel, f, val, pw;
336	t.revert();
337
338	if ( typeof(id) === 'object' ) {
339	id = t.getId(id);
340	}
341
342	fields = ['post_title', 'post_name', 'post_author', '_status', 'jj', 'mm', 'aa', 'hh', 'mn', 'ss', 'post_password', 'post_format', 'menu_order', 'page_template'];
343	if ( t.type === 'page' ) {
344	fields.push('post_parent');
345	}
346
347	// Add the new edit row with an extra blank row underneath to maintain zebra striping.
348	editRow = $('#inline-edit').clone(true);
349	$( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );
350
351	// Remove the ID from the copied row and let the `for` attribute reference the hidden ID.
352	$( 'td', editRow ).find('#quick-edit-legend').removeAttr('id');
353	$( 'td', editRow ).find('p[id^="quick-edit-"]').removeAttr('id');
354
355	$(t.what+id).removeClass('is-expanded').hide().after(editRow).after('<tr class="hidden"></tr>');
356
357	// Populate fields in the quick edit window.
358	rowData = $('#inline_'+id);
359	if ( !$(':input[name="post_author"] option[value="' + $('.post_author', rowData).text() + '"]', editRow).val() ) {
360
361	// The post author no longer has edit capabilities, so we need to add them to the list of authors.
362	$(':input[name="post_author"]', editRow).prepend('<option value="' + $('.post_author', rowData).text() + '">' + $('#post-' + id + ' .author').text() + '</option>');
363	}
364	if ( $( ':input[name="post_author"] option', editRow ).length === 1 ) {
365	$('label.inline-edit-author', editRow).hide();
366	}
367
368	for ( f = 0; f < fields.length; f++ ) {
369	val = $('.'+fields[f], rowData);
370
371	/**
372	* Replaces the image for a Twemoji(Twitter emoji) with it's alternate text.
373	*
374	* @return {string} Alternate text from the image.
375	*/
376	val.find( 'img' ).replaceWith( function() { return this.alt; } );
377	val = val.text();
378	$(':input[name="' + fields[f] + '"]', editRow).val( val );
379	}
380
381	if ( $( '.comment_status', rowData ).text() === 'open' ) {
382	$( 'input[name="comment_status"]', editRow ).prop( 'checked', true );
383	}
384	if ( $( '.ping_status', rowData ).text() === 'open' ) {
385	$( 'input[name="ping_status"]', editRow ).prop( 'checked', true );
386	}
387	if ( $( '.sticky', rowData ).text() === 'sticky' ) {
388	$( 'input[name="sticky"]', editRow ).prop( 'checked', true );
389	}
390
391	/**
392	* Creates the select boxes for the categories.
393	*/
394	$('.post_category', rowData).each(function(){
395	var taxname,
396	term_ids = $(this).text();
397
398	if ( term_ids ) {
399	taxname = $(this).attr('id').replace('_'+id, '');
400	$('ul.'+taxname+'-checklist :checkbox', editRow).val(term_ids.split(','));
401	}
402	});
403
404	/**
405	* Gets all the taxonomies for live auto-fill suggestions when typing the name
406	* of a tag.
407	*/
408	$('.tags_input', rowData).each(function(){
409	var terms = $(this),
410	taxname = $(this).attr('id').replace('_' + id, ''),
411	textarea = $('textarea.tax_input_' + taxname, editRow),
412	comma = wp.i18n._x( ',', 'tag delimiter' ).trim();
413
414	// Ensure the textarea exists.
415	if ( ! textarea.length ) {
416	return;
417	}
418
419	terms.find( 'img' ).replaceWith( function() { return this.alt; } );
420	terms = terms.text();
421
422	if ( terms ) {
423	if ( ',' !== comma ) {
424	terms = terms.replace(/,/g, comma);
425	}
426	textarea.val(terms);
427	}
428
429	textarea.wpTagsSuggest();
430	});
431
432	// Handle the post status.
433	var post_date_string = $(':input[name="aa"]').val() + '-' + $(':input[name="mm"]').val() + '-' + $(':input[name="jj"]').val();
434	post_date_string += ' ' + $(':input[name="hh"]').val() + ':' + $(':input[name="mn"]').val() + ':' + $(':input[name="ss"]').val();
435	var post_date = new Date( post_date_string );
436	status = $('._status', rowData).text();
437	if ( 'future' !== status && Date.now() > post_date ) {
438	$('select[name="_status"] option[value="future"]', editRow).remove();
439	} else {
440	$('select[name="_status"] option[value="publish"]', editRow).remove();
441	}
442
443	pw = $( '.inline-edit-password-input' ).prop( 'disabled', false );
444	if ( 'private' === status ) {
445	$('input[name="keep_private"]', editRow).prop('checked', true);
446	pw.val( '' ).prop( 'disabled', true );
447	}
448
449	// Remove the current page and children from the parent dropdown.
450	pageOpt = $('select[name="post_parent"] option[value="' + id + '"]', editRow);
451	if ( pageOpt.length > 0 ) {
452	pageLevel = pageOpt[0].className.split('-')[1];
453	nextPage = pageOpt;
454	while ( pageLoop ) {
455	nextPage = nextPage.next('option');
456	if ( nextPage.length === 0 ) {
457	break;
458	}
459
460	nextLevel = nextPage[0].className.split('-')[1];
461
462	if ( nextLevel <= pageLevel ) {
463	pageLoop = false;
464	} else {
465	nextPage.remove();
466	nextPage = pageOpt;
467	}
468	}
469	pageOpt.remove();
470	}
471
472	$(editRow).attr('id', 'edit-'+id).addClass('inline-editor').show();
473	$('.ptitle', editRow).trigger( 'focus' );
474
475	return false;
476	},
477
478	/**
479	* Saves the changes made in the quick edit window to the post.
480	* Ajax saving is only for Quick Edit and not for bulk edit.
481	*
482	* @since 2.7.0
483	*
484	* @param {number} id The ID for the post that has been changed.
485	* @return {boolean} False, so the form does not submit when pressing
486	* Enter on a focused field.
487	*/
488	save : function(id) {
489	var params, fields, page = $('.post_status_page').val() \|\| '';
490
491	if ( typeof(id) === 'object' ) {
492	id = this.getId(id);
493	}
494
495	$( 'table.widefat .spinner' ).addClass( 'is-active' );
496
497	params = {
498	action: 'inline-save',
499	post_type: typenow,
500	post_ID: id,
501	edit_date: 'true',
502	post_status: page
503	};
504
505	fields = $('#edit-'+id).find(':input').serialize();
506	params = fields + '&' + $.param(params);
507
508	// Make Ajax request.
509	$.post( ajaxurl, params,
510	function(r) {
511	var $errorNotice = $( '#edit-' + id + ' .inline-edit-save .notice-error' ),
512	$error = $errorNotice.find( '.error' );
513
514	$( 'table.widefat .spinner' ).removeClass( 'is-active' );
515
516	if (r) {
517	if ( -1 !== r.indexOf( '<tr' ) ) {
518	$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
519	$('#edit-'+id).before(r).remove();
520	$( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
521	// Move focus back to the Quick Edit button. $( this ) is the row being animated.
522	$( this ).find( '.editinline' )
523	.attr( 'aria-expanded', 'false' )
524	.trigger( 'focus' );
525	wp.a11y.speak( wp.i18n.__( 'Changes saved.' ) );
526	});
527	} else {
528	r = r.replace( /<.[^<>]*?>/g, '' );
529	$errorNotice.removeClass( 'hidden' );
530	$error.html( r );
531	wp.a11y.speak( $error.text() );
532	}
533	} else {
534	$errorNotice.removeClass( 'hidden' );
535	$error.text( wp.i18n.__( 'Error while saving the changes.' ) );
536	wp.a11y.speak( wp.i18n.__( 'Error while saving the changes.' ) );
537	}
538	},
539	'html');
540
541	// Prevent submitting the form when pressing Enter on a focused field.
542	return false;
543	},
544
545	/**
546	* Hides and empties the Quick Edit and/or Bulk Edit windows.
547	*
548	* @since 2.7.0
549	*
550	* @memberof inlineEditPost
551	*
552	* @return {boolean} Always returns false.
553	*/
554	revert : function(){
555	var $tableWideFat = $( '.widefat' ),
556	id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
557
558	if ( id ) {
559	$( '.spinner', $tableWideFat ).removeClass( 'is-active' );
560
561	if ( 'bulk-edit' === id ) {
562
563	// Hide the bulk editor.
564	$( '#bulk-edit', $tableWideFat ).removeClass( 'inline-editor' ).hide().siblings( '.hidden' ).remove();
565	$('#bulk-titles').empty();
566
567	// Store the empty bulk editor in a hidden element.
568	$('#inlineedit').append( $('#bulk-edit') );
569
570	// Move focus back to the Bulk Action button that was activated.
571	$( '#' + inlineEditPost.whichBulkButtonId ).trigger( 'focus' );
572	} else {
573
574	// Remove both the inline-editor and its hidden tr siblings.
575	$('#'+id).siblings('tr.hidden').addBack().remove();
576	id = id.substr( id.lastIndexOf('-') + 1 );
577
578	// Show the post row and move focus back to the Quick Edit button.
579	$( this.what + id ).show().find( '.editinline' )
580	.attr( 'aria-expanded', 'false' )
581	.trigger( 'focus' );
582	}
583	}
584
585	return false;
586	},
587
588	/**
589	* Gets the ID for a the post that you want to quick edit from the row in the quick
590	* edit table.
591	*
592	* @since 2.7.0
593	*
594	* @memberof inlineEditPost
595	*
596	* @param {Object} o DOM row object to get the ID for.
597	* @return {string} The post ID extracted from the table row in the object.
598	*/
599	getId : function(o) {
600	var id = $(o).closest('tr').attr('id'),
601	parts = id.split('-');
602	return parts[parts.length - 1];
603	}
604	};
605
606	$( function() { inlineEditPost.init(); } );
607
608	// Show/hide locks on posts.
609	$( function() {
610
611	// Set the heartbeat interval to 10 seconds.
612	if ( typeof wp !== 'undefined' && wp.heartbeat ) {
613	wp.heartbeat.interval( 10 );
614	}
615	}).on( 'heartbeat-tick.wp-check-locked-posts', function( e, data ) {
616	var locked = data['wp-check-locked-posts'] \|\| {};
617
618	$('#the-list tr').each( function(i, el) {
619	var key = el.id, row = $(el), lock_data, avatar;
620
621	if ( locked.hasOwnProperty( key ) ) {
622	if ( ! row.hasClass('wp-locked') ) {
623	lock_data = locked[key];
624	row.find('.column-title .locked-text').text( lock_data.text );
625	row.find('.check-column checkbox').prop('checked', false);
626
627	if ( lock_data.avatar_src ) {
628	avatar = $( '<img />', {
629	'class': 'avatar avatar-18 photo',
630	width: 18,
631	height: 18,
632	alt: '',
633	src: lock_data.avatar_src,
634	srcset: lock_data.avatar_src_2x ? lock_data.avatar_src_2x + ' 2x' : undefined
635	} );
636	row.find('.column-title .locked-avatar').empty().append( avatar );
637	}
638	row.addClass('wp-locked');
639	}
640	} else if ( row.hasClass('wp-locked') ) {
641	row.removeClass( 'wp-locked' ).find( '.locked-info span' ).empty();
642	}
643	});
644	}).on( 'heartbeat-send.wp-check-locked-posts', function( e, data ) {
645	var check = [];
646
647	$('#the-list tr').each( function(i, el) {
648	if ( el.id ) {
649	check.push( el.id );
650	}
651	});
652
653	if ( check.length ) {
654	data['wp-check-locked-posts'] = check;
655	}
656	});
657
658	})( jQuery, window.wp );

Note: See TracBrowser for help on using the repository browser.

Trac UI Preferences

Make WordPress Core

Context Navigation

source: trunk/src/js/_enqueues/admin/inline-edit-post.js

Download in other formats: