ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

inline-edit-tax.js (7797B)


      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 );