1 /* global postL10n, ajaxurl, wpAjax, setPostThumbnailL10n, postboxes, pagenow, tinymce, alert, deleteUserSetting */
2 /* global theList:true, theExtraList:true, getUserSetting, setUserSetting, commentReply */
5 * Contains all dynamic functionality needed on post and term pages.
7 * @summary Control page and term functionality.
10 var commentsBox, WPSetThumbnailHTML, WPSetThumbnailID, WPRemoveThumbnail, wptitlehint, makeSlugeditClickable, editPermalink;
11 // Backwards compatibility: prevent fatal errors.
12 makeSlugeditClickable = editPermalink = function(){};
14 // Make sure the wp object exists.
15 window.wp = window.wp || {};
18 var titleHasFocus = false;
21 * Control loading of comments on the post and term edit pages.
23 * @type {{st: number, get: commentsBox.get, load: commentsBox.load}}
25 * @namespace commentsBox
28 // Comment offset to use when fetching new comments.
32 * Fetch comments using AJAX and display them in the box.
34 * @param {int} total Total number of comments for this post.
35 * @param {int} num Optional. Number of comments to fetch, defaults to 20.
36 * @returns {boolean} Always returns false.
38 * @memberof commentsBox
40 get : function(total, num) {
41 var st = this.st, data;
47 $( '#commentsdiv .spinner' ).addClass( 'is-active' );
50 'action' : 'get-comments',
52 '_ajax_nonce' : $('#add_comment_nonce').val(),
53 'p' : $('#post_ID').val(),
62 r = wpAjax.parseAjaxResponse(r);
63 $('#commentsdiv .widefat').show();
64 $( '#commentsdiv .spinner' ).removeClass( 'is-active' );
66 if ( 'object' == typeof r && r.responses[0] ) {
67 $('#the-comment-list').append( r.responses[0].data );
69 theList = theExtraList = null;
70 $( 'a[className*=\':\']' ).unbind();
72 // If the offset is over the total number of comments we cannot fetch any more, so hide the button.
73 if ( commentsBox.st > commentsBox.total )
74 $('#show-comments').hide();
76 $('#show-comments').show().children('a').html(postL10n.showcomm);
79 } else if ( 1 == r ) {
80 $('#show-comments').html(postL10n.endcomm);
84 $('#the-comment-list').append('<tr><td colspan="2">'+wpAjax.broken+'</td></tr>');
92 * Load the next batch of comments.
94 * @param {int} total Total number of comments to load.
96 * @memberof commentsBox
98 load: function(total){
99 this.st = jQuery('#the-comment-list tr.comment:visible').length;
105 * Overwrite the content of the Featured Image postbox
107 * @param {string} html New HTML to be displayed in the content area of the postbox.
111 WPSetThumbnailHTML = function(html){
112 $('.inside', '#postimagediv').html(html);
116 * Set the Image ID of the Featured Image
118 * @param {int} id The post_id of the image to use as Featured Image.
122 WPSetThumbnailID = function(id){
123 var field = $('input[value="_thumbnail_id"]', '#list-table');
124 if ( field.length > 0 ) {
125 $('#meta\\[' + field.attr('id').match(/[0-9]+/) + '\\]\\[value\\]').text(id);
130 * Remove the Featured Image
132 * @param {string} nonce Nonce to use in the request.
136 WPRemoveThumbnail = function(nonce){
138 action: 'set-post-thumbnail', post_id: $( '#post_ID' ).val(), thumbnail_id: -1, _ajax_nonce: nonce, cookie: encodeURIComponent( document.cookie )
141 * Handle server response
143 * @param {string} str Response, will be '0' when an error occurred otherwise contains link to add Featured Image.
147 alert( setPostThumbnailL10n.error );
149 WPSetThumbnailHTML(str);
158 * Used to lock editing of an object by only one user at a time.
160 * When the user does not send a heartbeat in a heartbeat-time
161 * the user is no longer editing and another user can start editing.
163 $(document).on( 'heartbeat-send.refresh-lock', function( e, data ) {
164 var lock = $('#active_post_lock').val(),
165 post_id = $('#post_ID').val(),
168 if ( ! post_id || ! $('#post-lock-dialog').length )
171 send.post_id = post_id;
176 data['wp-refresh-post-lock'] = send;
178 }).on( 'heartbeat-tick.refresh-lock', function( e, data ) {
179 // Post locks: update the lock string or show the dialog if somebody has taken over editing.
180 var received, wrap, avatar;
182 if ( data['wp-refresh-post-lock'] ) {
183 received = data['wp-refresh-post-lock'];
185 if ( received.lock_error ) {
186 // Show "editing taken over" message.
187 wrap = $('#post-lock-dialog');
189 if ( wrap.length && ! wrap.is(':visible') ) {
191 // Save the latest changes and disable.
192 $(document).one( 'heartbeat-tick', function() {
193 wp.autosave.server.suspend();
194 wrap.removeClass('saving').addClass('saved');
195 $(window).off( 'beforeunload.edit-post' );
198 wrap.addClass('saving');
199 wp.autosave.server.triggerSave();
202 if ( received.lock_error.avatar_src ) {
203 avatar = $( '<img class="avatar avatar-64 photo" width="64" height="64" alt="" />' ).attr( 'src', received.lock_error.avatar_src.replace( /&/g, '&' ) );
204 wrap.find('div.post-locked-avatar').empty().append( avatar );
207 wrap.show().find('.currently-editing').text( received.lock_error.text );
208 wrap.find('.wp-tab-first').focus();
210 } else if ( received.new_lock ) {
211 $('#active_post_lock').val( received.new_lock );
214 }).on( 'before-autosave.update-post-slug', function() {
215 titleHasFocus = document.activeElement && document.activeElement.id === 'title';
216 }).on( 'after-autosave.update-post-slug', function() {
219 * Create slug area only if not already there
220 * and the title field was not focused (user was not typing a title) when autosave ran.
222 if ( ! $('#edit-slug-box > *').length && ! titleHasFocus ) {
224 action: 'sample-permalink',
225 post_id: $('#post_ID').val(),
226 new_title: $('#title').val(),
227 samplepermalinknonce: $('#samplepermalinknonce').val()
230 if ( data != '-1' ) {
231 $('#edit-slug-box').html(data);
241 * Heartbeat refresh nonces.
247 * Only allow to check for nonce refresh every 30 seconds.
249 function schedule() {
251 window.clearTimeout( timeout );
252 timeout = window.setTimeout( function(){ check = true; }, 300000 );
255 $(document).on( 'heartbeat-send.wp-refresh-nonces', function( e, data ) {
257 $authCheck = $('#wp-auth-check-wrap');
259 if ( check || ( $authCheck.length && ! $authCheck.hasClass( 'hidden' ) ) ) {
260 if ( ( post_id = $('#post_ID').val() ) && $('#_wpnonce').val() ) {
261 data['wp-refresh-post-nonces'] = {
266 }).on( 'heartbeat-tick.wp-refresh-nonces', function( e, data ) {
267 var nonces = data['wp-refresh-post-nonces'];
272 if ( nonces.replace ) {
273 $.each( nonces.replace, function( selector, value ) {
274 $( '#' + selector ).val( value );
278 if ( nonces.heartbeatNonce )
279 window.heartbeatSettings.nonce = nonces.heartbeatNonce;
281 }).ready( function() {
287 * All post and postbox controls and functionality.
289 jQuery(document).ready( function($) {
290 var stamp, visibility, $submitButtons, updateVisibility, updateText,
292 $textarea = $('#content'),
293 $document = $(document),
294 postId = $('#post_ID').val() || 0,
295 $submitpost = $('#submitpost'),
297 $postVisibilitySelect = $('#post-visibility-select'),
298 $timestampdiv = $('#timestampdiv'),
299 $postStatusSelect = $('#post-status-select'),
300 isMac = window.navigator.platform ? window.navigator.platform.indexOf( 'Mac' ) !== -1 : false;
302 postboxes.add_postbox_toggles(pagenow);
305 * Clear the window name. Otherwise if this is a former preview window where the user navigated to edit another post,
306 * and the first post is still being edited, clicking Preview there will use this window to show the preview.
310 // Post locks: contain focus inside the dialog. If the dialog is shown, focus the first item.
311 $('#post-lock-dialog .notification-dialog').on( 'keydown', function(e) {
312 // Don't do anything when [tab] is pressed.
316 var target = $(e.target);
318 // [shift] + [tab] on first tab cycles back to last tab.
319 if ( target.hasClass('wp-tab-first') && e.shiftKey ) {
320 $(this).find('.wp-tab-last').focus();
322 // [tab] on last tab cycles back to first tab.
323 } else if ( target.hasClass('wp-tab-last') && ! e.shiftKey ) {
324 $(this).find('.wp-tab-first').focus();
327 }).filter(':visible').find('.wp-tab-first').focus();
329 // Set the heartbeat interval to 15 sec. if post lock dialogs are enabled.
330 if ( wp.heartbeat && $('#post-lock-dialog').length ) {
331 wp.heartbeat.interval( 15 );
334 // The form is being submitted by the user.
335 $submitButtons = $submitpost.find( ':submit, a.submitdelete, #post-preview' ).on( 'click.edit-post', function( event ) {
336 var $button = $(this);
338 if ( $button.hasClass('disabled') ) {
339 event.preventDefault();
343 if ( $button.hasClass('submitdelete') || $button.is( '#post-preview' ) ) {
347 // The form submission can be blocked from JS or by using HTML 5.0 validation on some fields.
348 // Run this only on an actual 'submit'.
349 $('form#post').off( 'submit.edit-post' ).on( 'submit.edit-post', function( event ) {
350 if ( event.isDefaultPrevented() ) {
356 wp.autosave.server.suspend();
359 if ( typeof commentReply !== 'undefined' ) {
361 * Warn the user they have an unsaved comment before submitting
362 * the post data for update.
364 if ( ! commentReply.discardCommentChanges() ) {
369 * Close the comment edit/reply form if open to stop the form
370 * action from interfering with the post's form action.
372 commentReply.close();
376 $(window).off( 'beforeunload.edit-post' );
378 $submitButtons.addClass( 'disabled' );
380 if ( $button.attr('id') === 'publish' ) {
381 $submitpost.find( '#major-publishing-actions .spinner' ).addClass( 'is-active' );
383 $submitpost.find( '#minor-publishing .spinner' ).addClass( 'is-active' );
388 // Submit the form saving a draft or an autosave, and show a preview in a new tab
389 $('#post-preview').on( 'click.post-preview', function( event ) {
391 $form = $('form#post'),
392 $previewField = $('input#wp-preview'),
393 target = $this.attr('target') || 'wp-preview',
394 ua = navigator.userAgent.toLowerCase();
396 event.preventDefault();
398 if ( $this.hasClass('disabled') ) {
403 wp.autosave.server.tempBlockSave();
406 $previewField.val('dopreview');
407 $form.attr( 'target', target ).submit().attr( 'target', '' );
409 // Workaround for WebKit bug preventing a form submitting twice to the same action.
410 // https://bugs.webkit.org/show_bug.cgi?id=28633
411 if ( ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 ) {
412 $form.attr( 'action', function( index, value ) {
413 return value + '?t=' + ( new Date() ).getTime();
417 $previewField.val('');
420 // This code is meant to allow tabbing from Title to Post content.
421 $('#title').on( 'keydown.editor-focus', function( event ) {
424 if ( event.keyCode === 9 && ! event.ctrlKey && ! event.altKey && ! event.shiftKey ) {
425 editor = typeof tinymce != 'undefined' && tinymce.get('content');
427 if ( editor && ! editor.isHidden() ) {
429 } else if ( $textarea.length ) {
435 event.preventDefault();
439 // Auto save new posts after a title is typed.
440 if ( $( '#auto_draft' ).val() ) {
441 $( '#title' ).blur( function() {
444 if ( ! this.value || $('#edit-slug-box > *').length ) {
448 // Cancel the auto save when the blur was triggered by the user submitting the form.
449 $('form#post').one( 'submit', function() {
453 window.setTimeout( function() {
454 if ( ! cancel && wp.autosave ) {
455 wp.autosave.server.triggerSave();
461 $document.on( 'autosave-disable-buttons.edit-post', function() {
462 $submitButtons.addClass( 'disabled' );
463 }).on( 'autosave-enable-buttons.edit-post', function() {
464 if ( ! wp.heartbeat || ! wp.heartbeat.hasConnectionError() ) {
465 $submitButtons.removeClass( 'disabled' );
467 }).on( 'before-autosave.edit-post', function() {
468 $( '.autosave-message' ).text( postL10n.savingText );
469 }).on( 'after-autosave.edit-post', function( event, data ) {
470 $( '.autosave-message' ).text( data.message );
472 if ( $( document.body ).hasClass( 'post-new-php' ) ) {
473 $( '.submitbox .submitdelete' ).show();
478 * When the user is trying to load another page, or reloads current page
479 * show a confirmation dialog when there are unsaved changes.
481 $(window).on( 'beforeunload.edit-post', function() {
482 var editor = typeof tinymce !== 'undefined' && tinymce.get('content');
484 if ( ( editor && ! editor.isHidden() && editor.isDirty() ) ||
485 ( wp.autosave && wp.autosave.server.postChanged() ) ) {
487 return postL10n.saveAlert;
489 }).on( 'unload.edit-post', function( event ) {
490 if ( ! releaseLock ) {
495 * Unload is triggered (by hand) on removing the Thickbox iframe.
496 * Make sure we process only the main document unload.
498 if ( event.target && event.target.nodeName != '#document' ) {
502 var postID = $('#post_ID').val();
503 var postLock = $('#active_post_lock').val();
505 if ( ! postID || ! postLock ) {
510 action: 'wp-remove-post-lock',
511 _wpnonce: $('#_wpnonce').val(),
513 active_post_lock: postLock
516 if ( window.FormData && window.navigator.sendBeacon ) {
517 var formData = new window.FormData();
519 $.each( data, function( key, value ) {
520 formData.append( key, value );
523 if ( window.navigator.sendBeacon( ajaxurl, formData ) ) {
528 // Fall back to a synchronous POST request.
529 // See https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
537 // Multiple Taxonomies.
538 if ( $('#tagsdiv-post_tag').length ) {
539 window.tagBox && window.tagBox.init();
541 $('.meta-box-sortables').children('div.postbox').each(function(){
542 if ( this.id.indexOf('tagsdiv-') === 0 ) {
543 window.tagBox && window.tagBox.init();
549 // Handle categories.
550 $('.categorydiv').each( function(){
551 var this_id = $(this).attr('id'), catAddBefore, catAddAfter, taxonomyParts, taxonomy, settingName;
553 taxonomyParts = this_id.split('-');
554 taxonomyParts.shift();
555 taxonomy = taxonomyParts.join('-');
556 settingName = taxonomy + '_tab';
558 if ( taxonomy == 'category' ) {
559 settingName = 'cats';
562 // TODO: move to jQuery 1.3+, support for multiple hierarchical taxonomies, see wp-lists.js
563 $('a', '#' + taxonomy + '-tabs').click( function( e ) {
565 var t = $(this).attr('href');
566 $(this).parent().addClass('tabs').siblings('li').removeClass('tabs');
567 $('#' + taxonomy + '-tabs').siblings('.tabs-panel').hide();
569 if ( '#' + taxonomy + '-all' == t ) {
570 deleteUserSetting( settingName );
572 setUserSetting( settingName, 'pop' );
576 if ( getUserSetting( settingName ) )
577 $('a[href="#' + taxonomy + '-pop"]', '#' + taxonomy + '-tabs').click();
579 // Add category button controls.
580 $('#new' + taxonomy).one( 'focus', function() {
581 $( this ).val( '' ).removeClass( 'form-input-tip' );
584 // On [enter] submit the taxonomy.
585 $('#new' + taxonomy).keypress( function(event){
586 if( 13 === event.keyCode ) {
587 event.preventDefault();
588 $('#' + taxonomy + '-add-submit').click();
592 // After submitting a new taxonomy, re-focus the input field.
593 $('#' + taxonomy + '-add-submit').click( function() {
594 $('#new' + taxonomy).focus();
598 * Before adding a new taxonomy, disable submit button.
600 * @param {Object} s Taxonomy object which will be added.
604 catAddBefore = function( s ) {
605 if ( !$('#new'+taxonomy).val() ) {
609 s.data += '&' + $( ':checked', '#'+taxonomy+'checklist' ).serialize();
610 $( '#' + taxonomy + '-add-submit' ).prop( 'disabled', true );
615 * Re-enable submit button after a taxonomy has been added.
617 * Re-enable submit button.
618 * If the taxonomy has a parent place the taxonomy underneath the parent.
620 * @param {Object} r Response.
621 * @param {Object} s Taxonomy data.
625 catAddAfter = function( r, s ) {
626 var sup, drop = $('#new'+taxonomy+'_parent');
628 $( '#' + taxonomy + '-add-submit' ).prop( 'disabled', false );
629 if ( 'undefined' != s.parsed.responses[0] && (sup = s.parsed.responses[0].supplemental.newcat_parent) ) {
635 $('#' + taxonomy + 'checklist').wpList({
637 response: taxonomy + '-ajax-response',
638 addBefore: catAddBefore,
639 addAfter: catAddAfter
642 // Add new taxonomy button toggles input form visibility.
643 $('#' + taxonomy + '-add-toggle').click( function( e ) {
645 $('#' + taxonomy + '-adder').toggleClass( 'wp-hidden-children' );
646 $('a[href="#' + taxonomy + '-all"]', '#' + taxonomy + '-tabs').click();
647 $('#new'+taxonomy).focus();
650 // Sync checked items between "All {taxonomy}" and "Most used" lists.
651 $('#' + taxonomy + 'checklist, #' + taxonomy + 'checklist-pop').on( 'click', 'li.popular-category > label input[type="checkbox"]', function() {
652 var t = $(this), c = t.is(':checked'), id = t.val();
653 if ( id && t.parents('#taxonomy-'+taxonomy).length )
654 $('#in-' + taxonomy + '-' + id + ', #in-popular-' + taxonomy + '-' + id).prop( 'checked', c );
659 // Custom Fields postbox.
660 if ( $('#postcustom').length ) {
661 $( '#the-list' ).wpList( {
663 * Add current post_ID to request to fetch custom fields
665 * @param {Object} s Request object.
667 * @returns {Object} Data modified with post_ID attached.
669 addBefore: function( s ) {
670 s.data += '&post_id=' + $('#post_ID').val();
674 * Show the listing of custom fields after fetching.
676 addAfter: function() {
677 $('table#list-table').show();
683 * Publish Post box (#submitdiv)
685 if ( $('#submitdiv').length ) {
686 stamp = $('#timestamp').html();
687 visibility = $('#post-visibility-display').html();
690 * When the visibility of a post changes sub-options should be shown or hidden.
694 updateVisibility = function() {
695 // Show sticky for public posts.
696 if ( $postVisibilitySelect.find('input:radio:checked').val() != 'public' ) {
697 $('#sticky').prop('checked', false);
698 $('#sticky-span').hide();
700 $('#sticky-span').show();
703 // Show password input field for password protected post.
704 if ( $postVisibilitySelect.find('input:radio:checked').val() != 'password' ) {
705 $('#password-span').hide();
707 $('#password-span').show();
712 * Make sure all labels represent the current settings.
714 * @returns {boolean} False when an invalid timestamp has been selected, otherwise True.
716 updateText = function() {
718 if ( ! $timestampdiv.length )
721 var attemptedDate, originalDate, currentDate, publishOn, postStatus = $('#post_status'),
722 optPublish = $('option[value="publish"]', postStatus), aa = $('#aa').val(),
723 mm = $('#mm').val(), jj = $('#jj').val(), hh = $('#hh').val(), mn = $('#mn').val();
725 attemptedDate = new Date( aa, mm - 1, jj, hh, mn );
726 originalDate = new Date( $('#hidden_aa').val(), $('#hidden_mm').val() -1, $('#hidden_jj').val(), $('#hidden_hh').val(), $('#hidden_mn').val() );
727 currentDate = new Date( $('#cur_aa').val(), $('#cur_mm').val() -1, $('#cur_jj').val(), $('#cur_hh').val(), $('#cur_mn').val() );
729 // Catch unexpected date problems.
730 if ( attemptedDate.getFullYear() != aa || (1 + attemptedDate.getMonth()) != mm || attemptedDate.getDate() != jj || attemptedDate.getMinutes() != mn ) {
731 $timestampdiv.find('.timestamp-wrap').addClass('form-invalid');
734 $timestampdiv.find('.timestamp-wrap').removeClass('form-invalid');
737 // Determine what the publish should be depending on the date and post status.
738 if ( attemptedDate > currentDate && $('#original_post_status').val() != 'future' ) {
739 publishOn = postL10n.publishOnFuture;
740 $('#publish').val( postL10n.schedule );
741 } else if ( attemptedDate <= currentDate && $('#original_post_status').val() != 'publish' ) {
742 publishOn = postL10n.publishOn;
743 $('#publish').val( postL10n.publish );
745 publishOn = postL10n.publishOnPast;
746 $('#publish').val( postL10n.update );
749 // If the date is the same, set it to trigger update events.
750 if ( originalDate.toUTCString() == attemptedDate.toUTCString() ) {
751 // Re-set to the current value.
752 $('#timestamp').html(stamp);
754 $('#timestamp').html(
755 '\n' + publishOn + ' <b>' +
757 .replace( '%1$s', $( 'option[value="' + mm + '"]', '#mm' ).attr( 'data-text' ) )
758 .replace( '%2$s', parseInt( jj, 10 ) )
759 .replace( '%3$s', aa )
760 .replace( '%4$s', ( '00' + hh ).slice( -2 ) )
761 .replace( '%5$s', ( '00' + mn ).slice( -2 ) ) +
766 // Add "privately published" to post status when applies.
767 if ( $postVisibilitySelect.find('input:radio:checked').val() == 'private' ) {
768 $('#publish').val( postL10n.update );
769 if ( 0 === optPublish.length ) {
770 postStatus.append('<option value="publish">' + postL10n.privatelyPublished + '</option>');
772 optPublish.html( postL10n.privatelyPublished );
774 $('option[value="publish"]', postStatus).prop('selected', true);
775 $('#misc-publishing-actions .edit-post-status').hide();
777 if ( $('#original_post_status').val() == 'future' || $('#original_post_status').val() == 'draft' ) {
778 if ( optPublish.length ) {
780 postStatus.val($('#hidden_post_status').val());
783 optPublish.html( postL10n.published );
785 if ( postStatus.is(':hidden') )
786 $('#misc-publishing-actions .edit-post-status').show();
789 // Update "Status:" to currently selected status.
790 $('#post-status-display').html($('option:selected', postStatus).text());
792 // Show or hide the "Save Draft" button.
793 if ( $('option:selected', postStatus).val() == 'private' || $('option:selected', postStatus).val() == 'publish' ) {
794 $('#save-post').hide();
796 $('#save-post').show();
797 if ( $('option:selected', postStatus).val() == 'pending' ) {
798 $('#save-post').show().val( postL10n.savePending );
800 $('#save-post').show().val( postL10n.saveDraft );
806 // Show the visibility options and hide the toggle button when opened.
807 $( '#visibility .edit-visibility').click( function( e ) {
809 if ( $postVisibilitySelect.is(':hidden') ) {
811 $postVisibilitySelect.slideDown( 'fast', function() {
812 $postVisibilitySelect.find( 'input[type="radio"]' ).first().focus();
818 // Cancel visibility selection area and hide it from view.
819 $postVisibilitySelect.find('.cancel-post-visibility').click( function( event ) {
820 $postVisibilitySelect.slideUp('fast');
821 $('#visibility-radio-' + $('#hidden-post-visibility').val()).prop('checked', true);
822 $('#post_password').val($('#hidden-post-password').val());
823 $('#sticky').prop('checked', $('#hidden-post-sticky').prop('checked'));
824 $('#post-visibility-display').html(visibility);
825 $('#visibility .edit-visibility').show().focus();
827 event.preventDefault();
830 // Set the selected visibility as current.
831 $postVisibilitySelect.find('.save-post-visibility').click( function( event ) { // crazyhorse - multiple ok cancels
832 $postVisibilitySelect.slideUp('fast');
833 $('#visibility .edit-visibility').show().focus();
836 if ( $postVisibilitySelect.find('input:radio:checked').val() != 'public' ) {
837 $('#sticky').prop('checked', false);
840 if ( $('#sticky').prop('checked') ) {
846 $('#post-visibility-display').html( postL10n[ $postVisibilitySelect.find('input:radio:checked').val() + sticky ] );
847 event.preventDefault();
850 // When the selection changes, update labels.
851 $postVisibilitySelect.find('input:radio').change( function() {
855 // Edit publish time click.
856 $timestampdiv.siblings('a.edit-timestamp').click( function( event ) {
857 if ( $timestampdiv.is( ':hidden' ) ) {
858 $timestampdiv.slideDown( 'fast', function() {
859 $( 'input, select', $timestampdiv.find( '.timestamp-wrap' ) ).first().focus();
863 event.preventDefault();
866 // Cancel editing the publish time and hide the settings.
867 $timestampdiv.find('.cancel-timestamp').click( function( event ) {
868 $timestampdiv.slideUp('fast').siblings('a.edit-timestamp').show().focus();
869 $('#mm').val($('#hidden_mm').val());
870 $('#jj').val($('#hidden_jj').val());
871 $('#aa').val($('#hidden_aa').val());
872 $('#hh').val($('#hidden_hh').val());
873 $('#mn').val($('#hidden_mn').val());
875 event.preventDefault();
878 // Save the changed timestamp.
879 $timestampdiv.find('.save-timestamp').click( function( event ) { // crazyhorse - multiple ok cancels
880 if ( updateText() ) {
881 $timestampdiv.slideUp('fast');
882 $timestampdiv.siblings('a.edit-timestamp').show().focus();
884 event.preventDefault();
887 // Cancel submit when an invalid timestamp has been selected.
888 $('#post').on( 'submit', function( event ) {
889 if ( ! updateText() ) {
890 event.preventDefault();
891 $timestampdiv.show();
894 wp.autosave.enableButtons();
897 $( '#publishing-action .spinner' ).removeClass( 'is-active' );
901 // Post Status edit click.
902 $postStatusSelect.siblings('a.edit-post-status').click( function( event ) {
903 if ( $postStatusSelect.is( ':hidden' ) ) {
904 $postStatusSelect.slideDown( 'fast', function() {
905 $postStatusSelect.find('select').focus();
909 event.preventDefault();
912 // Save the Post Status changes and hide the options.
913 $postStatusSelect.find('.save-post-status').click( function( event ) {
914 $postStatusSelect.slideUp( 'fast' ).siblings( 'a.edit-post-status' ).show().focus();
916 event.preventDefault();
919 // Cancel Post Status editing and hide the options.
920 $postStatusSelect.find('.cancel-post-status').click( function( event ) {
921 $postStatusSelect.slideUp( 'fast' ).siblings( 'a.edit-post-status' ).show().focus();
922 $('#post_status').val( $('#hidden_post_status').val() );
924 event.preventDefault();
929 * Handle the editing of the post_name. Create the required HTML elements and update the changes via AJAX.
931 * @summary Permalink aka slug aka post_name editing
937 function editPermalink() {
941 real_slug = $('#post_name'),
942 revert_slug = real_slug.val(),
943 permalink = $( '#sample-permalink' ),
944 permalinkOrig = permalink.html(),
945 permalinkInner = $( '#sample-permalink a' ).html(),
946 buttons = $('#edit-slug-buttons'),
947 buttonsOrig = buttons.html(),
948 full = $('#editable-post-name-full');
950 // Deal with Twemoji in the post-name.
951 full.find( 'img' ).replaceWith( function() { return this.alt; } );
954 permalink.html( permalinkInner );
956 // Save current content to revert to when cancelling.
957 $el = $( '#editable-post-name' );
958 revert_e = $el.html();
960 buttons.html( '<button type="button" class="save button button-small">' + postL10n.ok + '</button> <button type="button" class="cancel button-link">' + postL10n.cancel + '</button>' );
962 // Save permalink changes.
963 buttons.children( '.save' ).click( function() {
964 var new_slug = $el.children( 'input' ).val();
966 if ( new_slug == $('#editable-post-name-full').text() ) {
967 buttons.children('.cancel').click();
974 action: 'sample-permalink',
977 new_title: $('#title').val(),
978 samplepermalinknonce: $('#samplepermalinknonce').val()
981 var box = $('#edit-slug-box');
983 if (box.hasClass('hidden')) {
984 box.fadeIn('fast', function () {
985 box.removeClass('hidden');
989 buttons.html(buttonsOrig);
990 permalink.html(permalinkOrig);
991 real_slug.val(new_slug);
992 $( '.edit-slug' ).focus();
993 wp.a11y.speak( postL10n.permalinkSaved );
998 // Cancel editing of permalink.
999 buttons.children( '.cancel' ).click( function() {
1000 $('#view-post-btn').show();
1002 buttons.html(buttonsOrig);
1003 permalink.html(permalinkOrig);
1004 real_slug.val(revert_slug);
1005 $( '.edit-slug' ).focus();
1008 // If more than 1/4th of 'full' is '%', make it empty.
1009 for ( i = 0; i < full.length; ++i ) {
1010 if ( '%' == full.charAt(i) )
1013 slug_value = ( c > full.length / 4 ) ? '' : full;
1015 $el.html( '<input type="text" id="new-post-slug" value="' + slug_value + '" autocomplete="off" />' ).children( 'input' ).keydown( function( e ) {
1017 // On [enter], just save the new slug, don't save the post.
1020 buttons.children( '.save' ).click();
1022 // On [esc] cancel the editing.
1024 buttons.children( '.cancel' ).click();
1026 } ).keyup( function() {
1027 real_slug.val( this.value );
1031 $( '#titlediv' ).on( 'click', '.edit-slug', function() {
1036 * Add screen reader text to the title prompt when needed.
1038 * @summary Title screen reader text handler.
1040 * @param {string} id Optional. HTML ID to add the screen reader helper text to.
1046 wptitlehint = function(id) {
1049 var title = $('#' + id), titleprompt = $('#' + id + '-prompt-text');
1051 if ( '' === title.val() )
1052 titleprompt.removeClass('screen-reader-text');
1054 titleprompt.click(function(){
1055 $(this).addClass('screen-reader-text');
1059 title.blur(function(){
1060 if ( '' === this.value )
1061 titleprompt.removeClass('screen-reader-text');
1062 }).focus(function(){
1063 titleprompt.addClass('screen-reader-text');
1064 }).keydown(function(e){
1065 titleprompt.addClass('screen-reader-text');
1072 // Resize the WYSIWYG and plain text editors.
1074 var editor, offset, mce,
1075 $handle = $('#post-status-info'),
1076 $postdivrich = $('#postdivrich');
1078 // If there are no textareas or we are on a touch device, we can't do anything.
1079 if ( ! $textarea.length || 'ontouchstart' in window ) {
1080 // Hide the resize handle.
1081 $('#content-resize-handle').hide();
1086 * Handle drag event.
1088 * @param {Object} event Event containing details about the drag.
1090 function dragging( event ) {
1091 if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
1096 editor.theme.resizeTo( null, offset + event.pageY );
1098 $textarea.height( Math.max( 50, offset + event.pageY ) );
1101 event.preventDefault();
1105 * When the dragging stopped make sure we return focus and do a sanity check on the height.
1107 function endDrag() {
1108 var height, toolbarHeight;
1110 if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
1116 toolbarHeight = parseInt( $( '#wp-content-editor-container .mce-toolbar-grp' ).height(), 10 );
1118 if ( toolbarHeight < 10 || toolbarHeight > 200 ) {
1122 height = parseInt( $('#content_ifr').css('height'), 10 ) + toolbarHeight - 28;
1125 height = parseInt( $textarea.css('height'), 10 );
1128 $document.off( '.wp-editor-resize' );
1130 // Sanity check: normalize height to stay within acceptable ranges.
1131 if ( height && height > 50 && height < 5000 ) {
1132 setUserSetting( 'ed_size', height );
1136 $handle.on( 'mousedown.wp-editor-resize', function( event ) {
1137 if ( typeof tinymce !== 'undefined' ) {
1138 editor = tinymce.get('content');
1141 if ( editor && ! editor.isHidden() ) {
1143 offset = $('#content_ifr').height() - event.pageY;
1146 offset = $textarea.height() - event.pageY;
1150 $document.on( 'mousemove.wp-editor-resize', dragging )
1151 .on( 'mouseup.wp-editor-resize mouseleave.wp-editor-resize', endDrag );
1153 event.preventDefault();
1154 }).on( 'mouseup.wp-editor-resize', endDrag );
1157 // TinyMCE specific handling of Post Format changes to reflect in the editor.
1158 if ( typeof tinymce !== 'undefined' ) {
1159 // When changing post formats, change the editor body class.
1160 $( '#post-formats-select input.post-format' ).on( 'change.set-editor-class', function() {
1161 var editor, body, format = this.id;
1163 if ( format && $( this ).prop( 'checked' ) && ( editor = tinymce.get( 'content' ) ) ) {
1164 body = editor.getBody();
1165 body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
1166 editor.dom.addClass( body, format == 'post-format-0' ? 'post-format-standard' : format );
1167 $( document ).trigger( 'editor-classchange' );
1171 // When changing page template, change the editor body class
1172 $( '#page_template' ).on( 'change.set-editor-class', function() {
1173 var editor, body, pageTemplate = $( this ).val() || '';
1175 pageTemplate = pageTemplate.substr( pageTemplate.lastIndexOf( '/' ) + 1, pageTemplate.length )
1176 .replace( /\.php$/, '' )
1177 .replace( /\./g, '-' );
1179 if ( pageTemplate && ( editor = tinymce.get( 'content' ) ) ) {
1180 body = editor.getBody();
1181 body.className = body.className.replace( /\bpage-template-[^ ]+/, '' );
1182 editor.dom.addClass( body, 'page-template-' + pageTemplate );
1183 $( document ).trigger( 'editor-classchange' );
1189 // Save on pressing [ctrl]/[command] + [s] in the Text editor.
1190 $textarea.on( 'keydown.wp-autosave', function( event ) {
1191 // Key [s] has code 83.
1192 if ( event.which === 83 ) {
1193 if ( event.shiftKey || event.altKey || ( isMac && ( ! event.metaKey || event.ctrlKey ) ) || ( ! isMac && ! event.ctrlKey ) ) {
1197 wp.autosave && wp.autosave.server.triggerSave();
1198 event.preventDefault();
1202 // If the last status was auto-draft and the save is triggered, edit the current URL.
1203 if ( $( '#original_post_status' ).val() === 'auto-draft' && window.history.replaceState ) {
1206 $( '#publish' ).on( 'click', function() {
1207 location = window.location.href;
1208 location += ( location.indexOf( '?' ) !== -1 ) ? '&' : '?';
1209 location += 'wp-post-new-reload=true';
1211 window.history.replaceState( null, null, location );
1217 * TinyMCE word count display
1219 ( function( $, counter ) {
1221 var $content = $( '#content' ),
1222 $count = $( '#wp-word-count' ).find( '.word-count' ),
1227 * Get the word count from TinyMCE and display it
1232 if ( ! contentEditor || contentEditor.isHidden() ) {
1233 text = $content.val();
1235 text = contentEditor.getContent( { format: 'raw' } );
1238 count = counter.count( text );
1240 if ( count !== prevCount ) {
1241 $count.text( count );
1248 * Bind the word count update triggers.
1250 * When a node change in the main TinyMCE editor has been triggered.
1251 * When a key has been released in the plain text content editor.
1253 $( document ).on( 'tinymce-editor-init', function( event, editor ) {
1254 if ( editor.id !== 'content' ) {
1258 contentEditor = editor;
1260 editor.on( 'nodechange keyup', _.debounce( update, 1000 ) );
1263 $content.on( 'input keyup', _.debounce( update, 1000 ) );
1267 } )( jQuery, new wp.utils.WordCounter() );