home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-admin / js / inline-edit-tax.js < prev    next >
Encoding:
JavaScript  |  2017-10-02  |  7.4 KB  |  291 lines
  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.                     $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 link.
  224.                             row.find( '.editinline' ).focus();
  225.                             wp.a11y.speak( inlineEditL10n.saved );
  226.                         });
  227.  
  228.                     } else {
  229.                         $errorNotice.removeClass( 'hidden' );
  230.                         $error.html( r );
  231.                         /*
  232.                          * Some error strings may contain HTML entities (e.g. `“`), let's use
  233.                          * the HTML element's text.
  234.                          */
  235.                         wp.a11y.speak( $error.text() );
  236.                     }
  237.                 } else {
  238.                     $errorNotice.removeClass( 'hidden' );
  239.                     $error.html( inlineEditL10n.error );
  240.                     wp.a11y.speak( inlineEditL10n.error );
  241.                 }
  242.             }
  243.         );
  244.  
  245.         // Prevent submitting the form when pressing Enter on a focused field.
  246.         return false;
  247.     },
  248.  
  249.     /**
  250.      * Closes the quick edit form.
  251.      *
  252.      * @since 2.7.0
  253.      *
  254.      * @this inlineEditTax
  255.      * @memberof inlineEditTax
  256.      * @returns {void}
  257.      */
  258.     revert : function() {
  259.         var id = $('table.widefat tr.inline-editor').attr('id');
  260.  
  261.         if ( id ) {
  262.             $( 'table.widefat .spinner' ).removeClass( 'is-active' );
  263.             $('#'+id).siblings('tr.hidden').addBack().remove();
  264.             id = id.substr( id.lastIndexOf('-') + 1 );
  265.  
  266.             // Show the taxonomy row and move focus back to the Quick Edit link.
  267.             $( this.what + id ).show().find( '.editinline' ).focus();
  268.         }
  269.     },
  270.  
  271.     /**
  272.      * Retrieves the ID of the term of the element inside the table row.
  273.      *
  274.      * @since 2.7.0
  275.      *
  276.      * @memberof inlineEditTax
  277.      *
  278.      * @param {HTMLElement} o An element within the table row or the table row itself.
  279.      * @returns {string} The ID of the term based on the element.
  280.      */
  281.     getId : function(o) {
  282.         var id = o.tagName === 'TR' ? o.id : $(o).parents('tr').attr('id'), parts = id.split('-');
  283.  
  284.         return parts[parts.length - 1];
  285.     }
  286. };
  287.  
  288. $(document).ready(function(){inlineEditTax.init();});
  289.  
  290. })( jQuery, window.wp );
  291.