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
9window.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
22window.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. `“`), 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 );
295