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