diff options
Diffstat (limited to 'wp-admin/js/inline-edit-tax.js')
| -rw-r--r-- | wp-admin/js/inline-edit-tax.js | 294 |
1 files changed, 294 insertions, 0 deletions
diff --git a/wp-admin/js/inline-edit-tax.js b/wp-admin/js/inline-edit-tax.js new file mode 100644 index 0000000..86e3498 --- /dev/null +++ b/wp-admin/js/inline-edit-tax.js @@ -0,0 +1,294 @@ +/** + * This file is used on the term overview page to power quick-editing terms. + * + * @output wp-admin/js/inline-edit-tax.js + */ + +/* global ajaxurl, inlineEditTax */ + +window.wp = window.wp || {}; + +/** + * Consists of functions relevant to the inline taxonomy editor. + * + * @namespace inlineEditTax + * + * @property {string} type The type of inline edit we are currently on. + * @property {string} what The type property with a hash prefixed and a dash + * suffixed. + */ +( function( $, wp ) { + +window.inlineEditTax = { + + /** + * Initializes the inline taxonomy editor by adding event handlers to be able to + * quick edit. + * + * @since 2.7.0 + * + * @this inlineEditTax + * @memberof inlineEditTax + * @return {void} + */ + init : function() { + var t = this, row = $('#inline-edit'); + + t.type = $('#the-list').attr('data-wp-lists').substr(5); + t.what = '#'+t.type+'-'; + + $( '#the-list' ).on( 'click', '.editinline', function() { + $( this ).attr( 'aria-expanded', 'true' ); + inlineEditTax.edit( this ); + }); + + /** + * Cancels inline editing when pressing Escape inside the inline editor. + * + * @param {Object} e The keyup event that has been triggered. + */ + row.on( 'keyup', function( e ) { + // 27 = [Escape]. + if ( e.which === 27 ) { + return inlineEditTax.revert(); + } + }); + + /** + * Cancels inline editing when clicking the cancel button. + */ + $( '.cancel', row ).on( 'click', function() { + return inlineEditTax.revert(); + }); + + /** + * Saves the inline edits when clicking the save button. + */ + $( '.save', row ).on( 'click', function() { + return inlineEditTax.save(this); + }); + + /** + * Saves the inline edits when pressing Enter inside the inline editor. + */ + $( 'input, select', row ).on( 'keydown', function( e ) { + // 13 = [Enter]. + if ( e.which === 13 ) { + return inlineEditTax.save( this ); + } + }); + + /** + * Saves the inline edits on submitting the inline edit form. + */ + $( '#posts-filter input[type="submit"]' ).on( 'mousedown', function() { + t.revert(); + }); + }, + + /** + * Toggles the quick edit based on if it is currently shown or hidden. + * + * @since 2.7.0 + * + * @this inlineEditTax + * @memberof inlineEditTax + * + * @param {HTMLElement} el An element within the table row or the table row + * itself that we want to quick edit. + * @return {void} + */ + toggle : function(el) { + var t = this; + + $(t.what+t.getId(el)).css('display') === 'none' ? t.revert() : t.edit(el); + }, + + /** + * Shows the quick editor + * + * @since 2.7.0 + * + * @this inlineEditTax + * @memberof inlineEditTax + * + * @param {string|HTMLElement} id The ID of the term we want to quick edit or an + * element within the table row or the + * table row itself. + * @return {boolean} Always returns false. + */ + edit : function(id) { + var editRow, rowData, val, + t = this; + t.revert(); + + // Makes sure we can pass an HTMLElement as the ID. + if ( typeof(id) === 'object' ) { + id = t.getId(id); + } + + editRow = $('#inline-edit').clone(true), rowData = $('#inline_'+id); + $( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.wp-list-table.widefat:first thead' ).length ); + + $(t.what+id).hide().after(editRow).after('<tr class="hidden"></tr>'); + + val = $('.name', rowData); + val.find( 'img' ).replaceWith( function() { return this.alt; } ); + val = val.text(); + $(':input[name="name"]', editRow).val( val ); + + val = $('.slug', rowData); + val.find( 'img' ).replaceWith( function() { return this.alt; } ); + val = val.text(); + $(':input[name="slug"]', editRow).val( val ); + + $(editRow).attr('id', 'edit-'+id).addClass('inline-editor').show(); + $('.ptitle', editRow).eq(0).trigger( 'focus' ); + + return false; + }, + + /** + * Saves the quick edit data. + * + * Saves the quick edit data to the server and replaces the table row with the + * HTML retrieved from the server. + * + * @since 2.7.0 + * + * @this inlineEditTax + * @memberof inlineEditTax + * + * @param {string|HTMLElement} id The ID of the term we want to quick edit or an + * element within the table row or the + * table row itself. + * @return {boolean} Always returns false. + */ + save : function(id) { + var params, fields, tax = $('input[name="taxonomy"]').val() || ''; + + // Makes sure we can pass an HTMLElement as the ID. + if( typeof(id) === 'object' ) { + id = this.getId(id); + } + + $( 'table.widefat .spinner' ).addClass( 'is-active' ); + + params = { + action: 'inline-save-tax', + tax_type: this.type, + tax_ID: id, + taxonomy: tax + }; + + fields = $('#edit-'+id).find(':input').serialize(); + params = fields + '&' + $.param(params); + + // Do the Ajax request to save the data to the server. + $.post( ajaxurl, params, + /** + * Handles the response from the server + * + * Handles the response from the server, replaces the table row with the response + * from the server. + * + * @param {string} r The string with which to replace the table row. + */ + function(r) { + var row, new_id, option_value, + $errorNotice = $( '#edit-' + id + ' .inline-edit-save .notice-error' ), + $error = $errorNotice.find( '.error' ); + + $( 'table.widefat .spinner' ).removeClass( 'is-active' ); + + if (r) { + if ( -1 !== r.indexOf( '<tr' ) ) { + $(inlineEditTax.what+id).siblings('tr.hidden').addBack().remove(); + new_id = $(r).attr('id'); + + $('#edit-'+id).before(r).remove(); + + if ( new_id ) { + option_value = new_id.replace( inlineEditTax.type + '-', '' ); + row = $( '#' + new_id ); + } else { + option_value = id; + row = $( inlineEditTax.what + id ); + } + + // Update the value in the Parent dropdown. + $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() ); + + row.hide().fadeIn( 400, function() { + // Move focus back to the Quick Edit button. + row.find( '.editinline' ) + .attr( 'aria-expanded', 'false' ) + .trigger( 'focus' ); + wp.a11y.speak( wp.i18n.__( 'Changes saved.' ) ); + }); + + } else { + $errorNotice.removeClass( 'hidden' ); + $error.html( r ); + /* + * Some error strings may contain HTML entities (e.g. `“`), let's use + * the HTML element's text. + */ + wp.a11y.speak( $error.text() ); + } + } else { + $errorNotice.removeClass( 'hidden' ); + $error.text( wp.i18n.__( 'Error while saving the changes.' ) ); + wp.a11y.speak( wp.i18n.__( 'Error while saving the changes.' ) ); + } + } + ); + + // Prevent submitting the form when pressing Enter on a focused field. + return false; + }, + + /** + * Closes the quick edit form. + * + * @since 2.7.0 + * + * @this inlineEditTax + * @memberof inlineEditTax + * @return {void} + */ + revert : function() { + var id = $('table.widefat tr.inline-editor').attr('id'); + + if ( id ) { + $( 'table.widefat .spinner' ).removeClass( 'is-active' ); + $('#'+id).siblings('tr.hidden').addBack().remove(); + id = id.substr( id.lastIndexOf('-') + 1 ); + + // Show the taxonomy row and move focus back to the Quick Edit button. + $( this.what + id ).show().find( '.editinline' ) + .attr( 'aria-expanded', 'false' ) + .trigger( 'focus' ); + } + }, + + /** + * Retrieves the ID of the term of the element inside the table row. + * + * @since 2.7.0 + * + * @memberof inlineEditTax + * + * @param {HTMLElement} o An element within the table row or the table row itself. + * @return {string} The ID of the term based on the element. + */ + getId : function(o) { + var id = o.tagName === 'TR' ? o.id : $(o).parents('tr').attr('id'), parts = id.split('-'); + + return parts[parts.length - 1]; + } +}; + +$( function() { inlineEditTax.init(); } ); + +})( jQuery, window.wp ); |