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 * |
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( |
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') ) { |
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), |
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' ); |
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. |