[Summary view] [Print] [Text view]

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