← Back to branch summary

~canonical-sysadmins/wordpress/4.9.1

« back to all changes in this revision

Viewing changes to wp-admin/js/inline-edit-post.js

  • Committer: Barry Price
  • Date: 2017-06-09 02:09:58 UTC
  • mfrom: (1.1.26 upstream)
  • Revision ID: barry.price@canonical.com-20170609020958-838whhwt2196f2vk
Merge WP4.8 from upstream

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/js/inline-edit-post.js
1
1
/* global inlineEditL10n, ajaxurl, typenow */
 
2
/**
 
3
 * This file contains the functions needed for the inline editing of posts.
 
4
 *
 
5
 * @since 2.7.0
 
6
 */
 
7
 
2
8
window.wp = window.wp || {};
3
9
 
 
10
/**
 
11
 * Manages the quick edit and bulk edit windows for editing posts or pages.
 
12
 *
 
13
 * @namespace
 
14
 *
 
15
 * @since 2.7.0
 
16
 * @access public
 
17
 *
 
18
 * @type {Object}
 
19
 *
 
20
 * @property {string} type The type of inline editor.
 
21
 * @property {string} what The prefix before the post id.
 
22
 *
 
23
 */
4
24
var inlineEditPost;
5
25
( function( $, wp ) {
6
 
inlineEditPost = {
7
 
 
 
26
 
 
27
        inlineEditPost = {
 
28
 
 
29
        /**
 
30
         * @summary Initializes the inline and bulk post editor.
 
31
         *
 
32
         * Binds event handlers to the escape key to close the inline editor
 
33
         * and to the save and close buttons. Changes DOM to be ready for inline
 
34
         * editing. Adds event handler to bulk edit.
 
35
         *
 
36
         * @memberof inlineEditPost
 
37
         * @since 2.7.0
 
38
         *
 
39
         * @returns {void}
 
40
         */
8
41
        init : function(){
9
42
                var t = this, qeRow = $('#inline-edit'), bulkRow = $('#bulk-edit');
10
43
 
11
44
                t.type = $('table.widefat').hasClass('pages') ? 'page' : 'post';
 
45
                // Post id prefix.
12
46
                t.what = '#post-';
13
47
 
14
 
                // prepare the edit rows
 
48
                /**
 
49
                 * @summary Bind escape key to revert the changes and close the quick editor.
 
50
                 *
 
51
                 * @returns {boolean} The result of revert.
 
52
                 */
15
53
                qeRow.keyup(function(e){
 
54
                        // Revert changes if escape key is pressed.
16
55
                        if ( e.which === 27 ) {
17
56
                                return inlineEditPost.revert();
18
57
                        }
19
58
                });
 
59
 
 
60
                /**
 
61
                 * @summary Bind escape key to revert the changes and close the bulk editor.
 
62
                 *
 
63
                 * @returns {boolean} The result of revert.
 
64
                 */
20
65
                bulkRow.keyup(function(e){
 
66
                        // Revert changes if escape key is pressed.
21
67
                        if ( e.which === 27 ) {
22
68
                                return inlineEditPost.revert();
23
69
                        }
24
70
                });
25
71
 
 
72
                /**
 
73
                 * @summary Revert changes and close the quick editor if the cancel button is clicked.
 
74
                 *
 
75
                 * @returns {boolean} The result of revert.
 
76
                 */
26
77
                $( '.cancel', qeRow ).click( function() {
27
78
                        return inlineEditPost.revert();
28
79
                });
 
80
 
 
81
                /**
 
82
                 * @summary Save changes in the quick editor if the save(named: update) button is clicked.
 
83
                 *
 
84
                 * @returns {boolean} The result of save.
 
85
                 */
29
86
                $( '.save', qeRow ).click( function() {
30
87
                        return inlineEditPost.save(this);
31
88
                });
 
89
 
 
90
                /**
 
91
                 * @summary If enter is pressed, and the target is not the cancel button, save the post.
 
92
                 *
 
93
                 * @returns {boolean} The result of save.
 
94
                 */
32
95
                $('td', qeRow).keydown(function(e){
33
96
                        if ( e.which === 13 && ! $( e.target ).hasClass( 'cancel' ) ) {
34
97
                                return inlineEditPost.save(this);
35
98
                        }
36
99
                });
37
100
 
 
101
                /**
 
102
                 * @summary Revert changes and close the bulk editor if the cancel button is clicked.
 
103
                 *
 
104
                 * @returns {boolean} The result of revert.
 
105
                 */
38
106
                $( '.cancel', bulkRow ).click( function() {
39
107
                        return inlineEditPost.revert();
40
108
                });
41
109
 
 
110
                /**
 
111
                 * @summary Disables the password input field when the private post checkbox is checked.
 
112
                 */
42
113
                $('#inline-edit .inline-edit-private input[value="private"]').click( function(){
43
114
                        var pw = $('input.inline-edit-password-input');
44
115
                        if ( $(this).prop('checked') ) {
48
119
                        }
49
120
                });
50
121
 
51
 
                // add events
 
122
                /**
 
123
                 * @summary Bind click event to the .editinline link which opens the quick editor.
 
124
                 */
52
125
                $('#the-list').on( 'click', 'a.editinline', function( e ) {
53
126
                        e.preventDefault();
54
127
                        inlineEditPost.edit(this);
62
135
 
63
136
                $('select[name="_status"] option[value="future"]', bulkRow).remove();
64
137
 
 
138
                /**
 
139
                 * @summary Adds onclick events to the apply buttons.
 
140
                 */
65
141
                $('#doaction, #doaction2').click(function(e){
66
142
                        var n;
67
143
 
77
153
                });
78
154
        },
79
155
 
 
156
        /**
 
157
         * @summary Toggles the quick edit window.
 
158
         *
 
159
         * Hides the window when it's active and shows the window when inactive.
 
160
         *
 
161
         * @memberof inlineEditPost
 
162
         * @since 2.7.0
 
163
         *
 
164
         * @param {Object} el Element within a post table row.
 
165
         */
80
166
        toggle : function(el){
81
167
                var t = this;
82
168
                $( t.what + t.getId( el ) ).css( 'display' ) === 'none' ? t.revert() : t.edit( el );
83
169
        },
84
170
 
 
171
        /**
 
172
         * @summary Creates the bulk editor row to edit multiple posts at once.
 
173
         *
 
174
         * @memberof inlineEditPost
 
175
         * @since 2.7.0
 
176
         */
85
177
        setBulk : function(){
86
178
                var te = '', type = this.type, c = true;
87
179
                this.revert();
88
180
 
89
181
                $( '#bulk-edit td' ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );
 
182
 
90
183
                // Insert the editor at the top of the table with an empty row above to maintain zebra striping.
91
184
                $('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
92
185
                $('#bulk-edit').addClass('inline-editor').show();
93
186
 
 
187
                /**
 
188
                 * @summary Create a HTML div with the title and a delete link(cross-icon) for each selected post.
 
189
                 *
 
190
                 * Get the selected posts based on the checked checkboxes in the post table.
 
191
                 * Create a HTML div with the title and a link(delete-icon) for each selected post.
 
192
                 */
94
193
                $( 'tbody th.check-column input[type="checkbox"]' ).each( function() {
 
194
 
 
195
                        // If the checkbox for a post is selected, add the post to the edit list.
95
196
                        if ( $(this).prop('checked') ) {
96
197
                                c = false;
97
198
                                var id = $(this).val(), theTitle;
100
201
                        }
101
202
                });
102
203
 
 
204
                // If no checkboxes where checked, just hide the quick/bulk edit rows.
103
205
                if ( c ) {
104
206
                        return this.revert();
105
207
                }
106
208
 
 
209
                // Add onclick events to the delete-icons in the bulk editors the post title list.
107
210
                $('#bulk-titles').html(te);
 
211
                /**
 
212
                 * @summary Binds on click events to the checkboxes before the posts in the table.
 
213
                 *
 
214
                 * @listens click
 
215
                 */
108
216
                $('#bulk-titles a').click(function(){
109
217
                        var id = $(this).attr('id').substr(1);
110
218
 
112
220
                        $('#ttle'+id).remove();
113
221
                });
114
222
 
115
 
                // enable autocomplete for tags
 
223
                // Enable auto-complete for tags when editing posts.
116
224
                if ( 'post' === type ) {
117
225
                        $( 'tr.inline-editor textarea[data-wp-taxonomy]' ).each( function ( i, element ) {
118
226
                                /*
127
235
                                $( element ).wpTagsSuggest();
128
236
                        } );
129
237
                }
 
238
 
 
239
                // Scrolls to the top of the table where the editor is rendered.
130
240
                $('html, body').animate( { scrollTop: 0 }, 'fast' );
131
241
        },
132
242
 
 
243
        /**
 
244
         * @summary Creates a quick edit window for the post that has been clicked.
 
245
         *
 
246
         * @memberof inlineEditPost
 
247
         * @since 2.7.0
 
248
         *
 
249
         * @param {number|Object} id The id of the clicked post or an element within a post
 
250
         *                           table row.
 
251
         * @returns {boolean} Always returns false at the end of execution.
 
252
         */
133
253
        edit : function(id) {
134
254
                var t = this, fields, editRow, rowData, status, pageOpt, pageLevel, nextPage, pageLoop = true, nextLevel, f, val, pw;
135
255
                t.revert();
143
263
                        fields.push('post_parent');
144
264
                }
145
265
 
146
 
                // add the new edit row with an extra blank row underneath to maintain zebra striping.
 
266
                // Add the new edit row with an extra blank row underneath to maintain zebra striping.
147
267
                editRow = $('#inline-edit').clone(true);
148
268
                $( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );
149
269
 
150
270
                $(t.what+id).removeClass('is-expanded').hide().after(editRow).after('<tr class="hidden"></tr>');
151
271
 
152
 
                // populate the data
 
272
                // Populate fields in the quick edit window.
153
273
                rowData = $('#inline_'+id);
154
274
                if ( !$(':input[name="post_author"] option[value="' + $('.post_author', rowData).text() + '"]', editRow).val() ) {
155
 
                        // author no longer has edit caps, so we need to add them to the list of authors
 
275
 
 
276
                        // The post author no longer has edit capabilities, so we need to add them to the list of authors.
156
277
                        $(':input[name="post_author"]', editRow).prepend('<option value="' + $('.post_author', rowData).text() + '">' + $('#' + t.type + '-' + id + ' .author').text() + '</option>');
157
278
                }
158
279
                if ( $( ':input[name="post_author"] option', editRow ).length === 1 ) {
161
282
 
162
283
                for ( f = 0; f < fields.length; f++ ) {
163
284
                        val = $('.'+fields[f], rowData);
164
 
                        // Deal with Twemoji
 
285
 
 
286
                        /**
 
287
                         * @summary Replaces the image for a Twemoji(Twitter emoji) with it's alternate text.
 
288
                         *
 
289
                         * @returns Alternate text from the image.
 
290
                         */
165
291
                        val.find( 'img' ).replaceWith( function() { return this.alt; } );
166
292
                        val = val.text();
167
293
                        $(':input[name="' + fields[f] + '"]', editRow).val( val );
177
303
                        $( 'input[name="sticky"]', editRow ).prop( 'checked', true );
178
304
                }
179
305
 
180
 
                // hierarchical taxonomies
 
306
                /**
 
307
                 * @summary Creates the select boxes for the categories.
 
308
                 */
181
309
                $('.post_category', rowData).each(function(){
182
310
                        var taxname,
183
311
                                term_ids = $(this).text();
188
316
                        }
189
317
                });
190
318
 
191
 
                //flat taxonomies
 
319
                /**
 
320
                 * @summary Gets all the taxonomies for live auto-fill suggestions.
 
321
                 * When typing the name of a tag.
 
322
                 */
192
323
                $('.tags_input', rowData).each(function(){
193
324
                        var terms = $(this),
194
325
                                taxname = $(this).attr('id').replace('_' + id, ''),
208
339
                        textarea.wpTagsSuggest();
209
340
                });
210
341
 
211
 
                // handle the post status
 
342
                // Handle the post status.
212
343
                status = $('._status', rowData).text();
213
344
                if ( 'future' !== status ) {
214
345
                        $('select[name="_status"] option[value="future"]', editRow).remove();
220
351
                        pw.val( '' ).prop( 'disabled', true );
221
352
                }
222
353
 
223
 
                // remove the current page and children from the parent dropdown
 
354
                // Remove the current page and children from the parent dropdown.
224
355
                pageOpt = $('select[name="post_parent"] option[value="' + id + '"]', editRow);
225
356
                if ( pageOpt.length > 0 ) {
226
357
                        pageLevel = pageOpt[0].className.split('-')[1];
249
380
                return false;
250
381
        },
251
382
 
252
 
        // Ajax saving is only for Quick Edit.
 
383
        /**
 
384
         * @summary Saves the changes made in the quick edit window to the post.
 
385
         * AJAX saving is only for Quick Edit and not for bulk edit.
 
386
         *
 
387
         * @since 2.7.0
 
388
         *
 
389
         * @param   {int}     id The id for the post that has been changed.
 
390
         * @returns {boolean}    false, so the form does not submit when pressing
 
391
         *                       Enter on a focused field.
 
392
         */
253
393
        save : function(id) {
254
394
                var params, fields, page = $('.post_status_page').val() || '';
255
395
 
270
410
                fields = $('#edit-'+id).find(':input').serialize();
271
411
                params = fields + '&' + $.param(params);
272
412
 
273
 
                // make ajax request
 
413
                // Make ajax request.
274
414
                $.post( ajaxurl, params,
275
415
                        function(r) {
276
416
                                var $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
298
438
                                }
299
439
                        },
300
440
                'html');
 
441
 
301
442
                // Prevent submitting the form when pressing Enter on a focused field.
302
443
                return false;
303
444
        },
304
445
 
305
 
        // Revert is for both Quick Edit and Bulk Edit.
 
446
        /**
 
447
         * @summary Hides and empties the Quick Edit and/or Bulk Edit windows.
 
448
         *
 
449
         * @memberof    inlineEditPost
 
450
         * @since 2.7.0
 
451
         *
 
452
         * @returns {boolean} Always returns false.
 
453
         */
306
454
        revert : function(){
307
455
                var $tableWideFat = $( '.widefat' ),
308
456
                        id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
312
460
                        $( '.ac_results' ).hide();
313
461
 
314
462
                        if ( 'bulk-edit' === id ) {
 
463
 
 
464
                                // Hide the bulk editor.
315
465
                                $( '#bulk-edit', $tableWideFat ).removeClass( 'inline-editor' ).hide().siblings( '.hidden' ).remove();
316
466
                                $('#bulk-titles').empty();
 
467
 
 
468
                                // Store the empty bulk editor in a hidden element.
317
469
                                $('#inlineedit').append( $('#bulk-edit') );
 
470
 
318
471
                                // Move focus back to the Bulk Action button that was activated.
319
472
                                $( '#' + inlineEditPost.whichBulkButtonId ).focus();
320
473
                        } else {
 
474
 
 
475
                                // Remove both the inline-editor and its hidden tr siblings.
321
476
                                $('#'+id).siblings('tr.hidden').addBack().remove();
322
477
                                id = id.substr( id.lastIndexOf('-') + 1 );
 
478
 
323
479
                                // Show the post row and move focus back to the Quick Edit link.
324
480
                                $( this.what + id ).show().find( '.editinline' ).focus();
325
481
                        }
328
484
                return false;
329
485
        },
330
486
 
 
487
        /**
 
488
         * @summary Gets the id for a the post that you want to quick edit from the row
 
489
         * in the quick edit table.
 
490
         *
 
491
         * @memberof    inlineEditPost
 
492
         * @since 2.7.0
 
493
         *
 
494
         * @param   {Object} o DOM row object to get the id for.
 
495
         * @returns {string}   The post id extracted from the table row in the object.
 
496
         */
331
497
        getId : function(o) {
332
498
                var id = $(o).closest('tr').attr('id'),
333
499
                        parts = id.split('-');
337
503
 
338
504
$( document ).ready( function(){ inlineEditPost.init(); } );
339
505
 
340
 
// Show/hide locks on posts
 
506
// Show/hide locks on posts.
341
507
$( document ).on( 'heartbeat-tick.wp-check-locked-posts', function( e, data ) {
342
508
        var locked = data['wp-check-locked-posts'] || {};
343
509
 
374
540
                data['wp-check-locked-posts'] = check;
375
541
        }
376
542
}).ready( function() {
 
543
 
377
544
        // Set the heartbeat interval to 15 sec.
378
545
        if ( typeof wp !== 'undefined' && wp.heartbeat ) {
379
546
                wp.heartbeat.interval( 15 );