PageRenderTime 36ms CodeModel.GetById 11ms app.highlight 21ms RepoModel.GetById 1ms app.codeStats 0ms

/wp-admin/js/inline-edit-tax.js

https://bitbucket.org/devbctph/futura_wp
JavaScript | 290 lines | 125 code | 43 blank | 122 comment | 13 complexity | 75694df32dda3134f2ae3395701421f3 MD5 | raw file
  1/* global inlineEditL10n, ajaxurl */
  2/**
  3 * This file is used on the term overview page to power quick-editing terms.
  4 */
  5
  6window.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 */
 17var inlineEditTax;
 18
 19( function( $, wp ) {
 20
 21inlineEditTax = {
 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. `&#8220`), 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 );