[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  ( function( $, wp ) {
  21  
  22  window.inlineEditTax = {
  23  
  24      /**
  25       * Initializes the inline taxonomy editor by adding event handlers to be able to
  26       * quick edit.
  27       *
  28       * @since 2.7.0
  29       *
  30       * @this inlineEditTax
  31       * @memberof inlineEditTax
  32       * @return {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', '.editinline', function() {
  41              $( this ).attr( 'aria-expanded', 'true' );
  42              inlineEditTax.edit( this );
  43          });
  44  
  45          /**
  46           * 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.on( 'keyup', function( e ) {
  51              // 27 = [Escape].
  52              if ( e.which === 27 ) {
  53                  return inlineEditTax.revert();
  54              }
  55          });
  56  
  57          /**
  58           * Cancels inline editing when clicking the cancel button.
  59           */
  60          $( '.cancel', row ).on( 'click', function() {
  61              return inlineEditTax.revert();
  62          });
  63  
  64          /**
  65           * Saves the inline edits when clicking the save button.
  66           */
  67          $( '.save', row ).on( 'click', function() {
  68              return inlineEditTax.save(this);
  69          });
  70  
  71          /**
  72           * Saves the inline edits when pressing Enter inside the inline editor.
  73           */
  74          $( 'input, select', row ).on( 'keydown', function( e ) {
  75              // 13 = [Enter].
  76              if ( e.which === 13 ) {
  77                  return inlineEditTax.save( this );
  78              }
  79          });
  80  
  81          /**
  82           * Saves the inline edits on submitting the inline edit form.
  83           */
  84          $( '#posts-filter input[type="submit"]' ).on( '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       * @return {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       * @return {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).trigger( 'focus' );
 147  
 148          return false;
 149      },
 150  
 151      /**
 152       * 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       * @return {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               * 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                      $errorNotice = $( '#edit-' + id + ' .inline-edit-save .notice-error' ),
 200                      $error = $errorNotice.find( '.error' );
 201  
 202                  $( 'table.widefat .spinner' ).removeClass( 'is-active' );
 203  
 204                  if (r) {
 205                      if ( -1 !== r.indexOf( '<tr' ) ) {
 206                          $(inlineEditTax.what+id).siblings('tr.hidden').addBack().remove();
 207                          new_id = $(r).attr('id');
 208  
 209                          $('#edit-'+id).before(r).remove();
 210  
 211                          if ( new_id ) {
 212                              option_value = new_id.replace( inlineEditTax.type + '-', '' );
 213                              row = $( '#' + new_id );
 214                          } else {
 215                              option_value = id;
 216                              row = $( inlineEditTax.what + id );
 217                          }
 218  
 219                          // Update the value in the Parent dropdown.
 220                          $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
 221  
 222                          row.hide().fadeIn( 400, function() {
 223                              // Move focus back to the Quick Edit button.
 224                              row.find( '.editinline' )
 225                                  .attr( 'aria-expanded', 'false' )
 226                                  .trigger( 'focus' );
 227                              wp.a11y.speak( wp.i18n.__( 'Changes saved.' ) );
 228                          });
 229  
 230                      } else {
 231                          $errorNotice.removeClass( 'hidden' );
 232                          $error.html( r );
 233                          /*
 234                           * Some error strings may contain HTML entities (e.g. `&#8220`), let's use
 235                           * the HTML element's text.
 236                           */
 237                          wp.a11y.speak( $error.text() );
 238                      }
 239                  } else {
 240                      $errorNotice.removeClass( 'hidden' );
 241                      $error.text( wp.i18n.__( 'Error while saving the changes.' ) );
 242                      wp.a11y.speak( wp.i18n.__( 'Error while saving the changes.' ) );
 243                  }
 244              }
 245          );
 246  
 247          // Prevent submitting the form when pressing Enter on a focused field.
 248          return false;
 249      },
 250  
 251      /**
 252       * Closes the quick edit form.
 253       *
 254       * @since 2.7.0
 255       *
 256       * @this inlineEditTax
 257       * @memberof inlineEditTax
 258       * @return {void}
 259       */
 260      revert : function() {
 261          var id = $('table.widefat tr.inline-editor').attr('id');
 262  
 263          if ( id ) {
 264              $( 'table.widefat .spinner' ).removeClass( 'is-active' );
 265              $('#'+id).siblings('tr.hidden').addBack().remove();
 266              id = id.substr( id.lastIndexOf('-') + 1 );
 267  
 268              // Show the taxonomy row and move focus back to the Quick Edit button.
 269              $( this.what + id ).show().find( '.editinline' )
 270                  .attr( 'aria-expanded', 'false' )
 271                  .trigger( 'focus' );
 272          }
 273      },
 274  
 275      /**
 276       * Retrieves the ID of the term of the element inside the table row.
 277       *
 278       * @since 2.7.0
 279       *
 280       * @memberof inlineEditTax
 281       *
 282       * @param {HTMLElement} o An element within the table row or the table row itself.
 283       * @return {string} The ID of the term based on the element.
 284       */
 285      getId : function(o) {
 286          var id = o.tagName === 'TR' ? o.id : $(o).parents('tr').attr('id'), parts = id.split('-');
 287  
 288          return parts[parts.length - 1];
 289      }
 290  };
 291  
 292  $( function() { inlineEditTax.init(); } );
 293  
 294  })( jQuery, window.wp );