wp-admin/js/inline-edit-tax.js

   1 /* global inlineEditL10n, ajaxurl */
   2 /**
   3  * This file is used on the term overview page to power quick-editing terms.
   4  */
   5
   6 window.wp = window.wp || {};
   7
   8 /**
   9  * Consists of functions relevant to the inline taxonomy editor.
  10  *
  11  * @namespace inlineEditTax
  12  *
  13  * @property {string} type The type of inline edit we are currently on.
  14  * @property {string} what The type property with a hash prefixed and a dash
  15  *                         suffixed.
  16  */
  17 var inlineEditTax;
  18
  19 ( function( $, wp ) {
  20
  21 inlineEditTax = {
  22
  23         /**
  24          * @summary Initializes the inline taxonomy editor.
  25          *
  26          * Adds event handlers to be able to quick edit.
  27          *
  28          * @since 2.7.0
  29          *
  30          * @this inlineEditTax
  31          * @memberof inlineEditTax
  32          * @returns {void}
  33          */
  34         init : function() {
  35                 var t = this, row = $('#inline-edit');
  36
  37                 t.type = $('#the-list').attr('data-wp-lists').substr(5);
  38                 t.what = '#'+t.type+'-';
  39
  40                 $('#the-list').on('click', 'a.editinline', function(){
  41                         inlineEditTax.edit(this);
  42                         return false;
  43                 });
  44
  45                 /*
  46                  * @summary Cancels inline editing when pressing escape inside the inline editor.
  47                  *
  48                  * @param {Object} e The keyup event that has been triggered.
  49                  */
  50                 row.keyup( function( e ) {
  51                         // 27 = [escape]
  52                         if ( e.which === 27 ) {
  53                                 return inlineEditTax.revert();
  54                         }
  55                 });
  56
  57                 /**
  58                  * @summary Cancels inline editing when clicking the cancel button.
  59                  */
  60                 $( '.cancel', row ).click( function() {
  61                         return inlineEditTax.revert();
  62                 });
  63
  64                 /**
  65                  * @summary Saves the inline edits when clicking the save button.
  66                  */
  67                 $( '.save', row ).click( function() {
  68                         return inlineEditTax.save(this);
  69                 });
  70
  71                 /**
  72                  * @summary Saves the inline edits when pressing enter inside the inline editor.
  73                  */
  74                 $( 'input, select', row ).keydown( function( e ) {
  75                         // 13 = [enter]
  76                         if ( e.which === 13 ) {
  77                                 return inlineEditTax.save( this );
  78                         }
  79                 });
  80
  81                 /**
  82                  * @summary Saves the inline edits on submitting the inline edit form.
  83                  */
  84                 $( '#posts-filter input[type="submit"]' ).mousedown( function() {
  85                         t.revert();
  86                 });
  87         },
  88
  89         /**
  90          * Toggles the quick edit based on if it is currently shown or hidden.
  91          *
  92          * @since 2.7.0
  93          *
  94          * @this inlineEditTax
  95          * @memberof inlineEditTax
  96          *
  97          * @param {HTMLElement} el An element within the table row or the table row
  98          *                         itself that we want to quick edit.
  99          * @returns {void}
 100          */
 101         toggle : function(el) {
 102                 var t = this;
 103
 104                 $(t.what+t.getId(el)).css('display') === 'none' ? t.revert() : t.edit(el);
 105         },
 106
 107         /**
 108          * Shows the quick editor
 109          *
 110          * @since 2.7.0
 111          *
 112          * @this inlineEditTax
 113          * @memberof inlineEditTax
 114          *
 115          * @param {string|HTMLElement} id The ID of the term we want to quick edit or an
 116          *                                element within the table row or the
 117          * table row itself.
 118          * @returns {boolean} Always returns false.
 119          */
 120         edit : function(id) {
 121                 var editRow, rowData, val,
 122                         t = this;
 123                 t.revert();
 124
 125                 // Makes sure we can pass an HTMLElement as the ID.
 126                 if ( typeof(id) === 'object' ) {
 127                         id = t.getId(id);
 128                 }
 129
 130                 editRow = $('#inline-edit').clone(true), rowData = $('#inline_'+id);
 131                 $( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.wp-list-table.widefat:first thead' ).length );
 132
 133                 $(t.what+id).hide().after(editRow).after('<tr class="hidden"></tr>');
 134
 135                 val = $('.name', rowData);
 136                 val.find( 'img' ).replaceWith( function() { return this.alt; } );
 137                 val = val.text();
 138                 $(':input[name="name"]', editRow).val( val );
 139
 140                 val = $('.slug', rowData);
 141                 val.find( 'img' ).replaceWith( function() { return this.alt; } );
 142                 val = val.text();
 143                 $(':input[name="slug"]', editRow).val( val );
 144
 145                 $(editRow).attr('id', 'edit-'+id).addClass('inline-editor').show();
 146                 $('.ptitle', editRow).eq(0).focus();
 147
 148                 return false;
 149         },
 150
 151         /**
 152          * @summary Saves the quick edit data.
 153          *
 154          * Saves the quick edit data to the server and replaces the table row with the
 155          * HTML retrieved from the server.
 156          *
 157          * @since 2.7.0
 158          *
 159          * @this inlineEditTax
 160          * @memberof inlineEditTax
 161          *
 162          * @param {string|HTMLElement} id The ID of the term we want to quick edit or an
 163          *                                element within the table row or the
 164          * table row itself.
 165          * @returns {boolean} Always returns false.
 166          */
 167         save : function(id) {
 168                 var params, fields, tax = $('input[name="taxonomy"]').val() || '';
 169
 170                 // Makes sure we can pass an HTMLElement as the ID.
 171                 if( typeof(id) === 'object' ) {
 172                         id = this.getId(id);
 173                 }
 174
 175                 $( 'table.widefat .spinner' ).addClass( 'is-active' );
 176
 177                 params = {
 178                         action: 'inline-save-tax',
 179                         tax_type: this.type,
 180                         tax_ID: id,
 181                         taxonomy: tax
 182                 };
 183
 184                 fields = $('#edit-'+id).find(':input').serialize();
 185                 params = fields + '&' + $.param(params);
 186
 187                 // Do the ajax request to save the data to the server.
 188                 $.post( ajaxurl, params,
 189                         /**
 190                          * @summary Handles the response from the server.
 191                          *
 192                          * Handles the response from the server, replaces the table row with the response
 193                          * from the server.
 194                          *
 195                          * @param {string} r The string with which to replace the table row.
 196                          */
 197                         function(r) {
 198                                 var row, new_id, option_value,
 199                                         $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
 200
 201                                 $( 'table.widefat .spinner' ).removeClass( 'is-active' );
 202
 203                                 if (r) {
 204                                         if ( -1 !== r.indexOf( '<tr' ) ) {
 205                                                 $(inlineEditTax.what+id).siblings('tr.hidden').addBack().remove();
 206                                                 new_id = $(r).attr('id');
 207
 208                                                 $('#edit-'+id).before(r).remove();
 209
 210                                                 if ( new_id ) {
 211                                                         option_value = new_id.replace( inlineEditTax.type + '-', '' );
 212                                                         row = $( '#' + new_id );
 213                                                 } else {
 214                                                         option_value = id;
 215                                                         row = $( inlineEditTax.what + id );
 216                                                 }
 217
 218                                                 // Update the value in the Parent dropdown.
 219                                                 $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
 220
 221                                                 row.hide().fadeIn( 400, function() {
 222                                                         // Move focus back to the Quick Edit link.
 223                                                         row.find( '.editinline' ).focus();
 224                                                         wp.a11y.speak( inlineEditL10n.saved );
 225                                                 });
 226
 227                                         } else {
 228                                                 $errorSpan.html( r ).show();
 229                                                 /*
 230                                                  * Some error strings may contain HTML entities (e.g. `&#8220`), let's use
 231                                                  * the HTML element's text.
 232                                                  */
 233                                                 wp.a11y.speak( $errorSpan.text() );
 234                                         }
 235                                 } else {
 236                                         $errorSpan.html( inlineEditL10n.error ).show();
 237                                         wp.a11y.speak( inlineEditL10n.error );
 238                                 }
 239                         }
 240                 );
 241
 242                 // Prevent submitting the form when pressing Enter on a focused field.
 243                 return false;
 244         },
 245
 246         /**
 247          * Closes the quick edit form.
 248          *
 249          * @since 2.7.0
 250          *
 251          * @this inlineEditTax
 252          * @memberof inlineEditTax
 253          * @returns {void}
 254          */
 255         revert : function() {
 256                 var id = $('table.widefat tr.inline-editor').attr('id');
 257
 258                 if ( id ) {
 259                         $( 'table.widefat .spinner' ).removeClass( 'is-active' );
 260                         $('#'+id).siblings('tr.hidden').addBack().remove();
 261                         id = id.substr( id.lastIndexOf('-') + 1 );
 262
 263                         // Show the taxonomy row and move focus back to the Quick Edit link.
 264                         $( this.what + id ).show().find( '.editinline' ).focus();
 265                 }
 266         },
 267
 268         /**
 269          * Retrieves the ID of the term of the element inside the table row.
 270          *
 271          * @since 2.7.0
 272          *
 273          * @memberof inlineEditTax
 274          *
 275          * @param {HTMLElement} o An element within the table row or the table row itself.
 276          * @returns {string} The ID of the term based on the element.
 277          */
 278         getId : function(o) {
 279                 var id = o.tagName === 'TR' ? o.id : $(o).parents('tr').attr('id'), parts = id.split('-');
 280
 281                 return parts[parts.length - 1];
 282         }
 283 };
 284
 285 $(document).ready(function(){inlineEditTax.init();});
 286
 287 })( jQuery, window.wp );