655 lines
18 KiB
JavaScript
655 lines
18 KiB
JavaScript
/**
|
|
* Contains the postboxes logic, opening and closing postboxes, reordering and saving
|
|
* the state and ordering to the database.
|
|
*
|
|
* @since 2.5.0
|
|
* @requires jQuery
|
|
* @output wp-admin/js/postbox.js
|
|
*/
|
|
|
|
/* global ajaxurl, postboxes */
|
|
|
|
(function($) {
|
|
var $document = $( document ),
|
|
__ = wp.i18n.__;
|
|
|
|
/**
|
|
* This object contains all function to handle the behaviour of the post boxes. The post boxes are the boxes you see
|
|
* around the content on the edit page.
|
|
*
|
|
* @since 2.7.0
|
|
*
|
|
* @namespace postboxes
|
|
*
|
|
* @type {Object}
|
|
*/
|
|
window.postboxes = {
|
|
|
|
/**
|
|
* Handles a click on either the postbox heading or the postbox open/close icon.
|
|
*
|
|
* Opens or closes the postbox. Expects `this` to equal the clicked element.
|
|
* Calls postboxes.pbshow if the postbox has been opened, calls postboxes.pbhide
|
|
* if the postbox has been closed.
|
|
*
|
|
* @since 4.4.0
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @fires postboxes#postbox-toggled
|
|
*
|
|
* @return {void}
|
|
*/
|
|
handle_click : function () {
|
|
var $el = $( this ),
|
|
p = $el.closest( '.postbox' ),
|
|
id = p.attr( 'id' ),
|
|
ariaExpandedValue;
|
|
|
|
if ( 'dashboard_browser_nag' === id ) {
|
|
return;
|
|
}
|
|
|
|
p.toggleClass( 'closed' );
|
|
ariaExpandedValue = ! p.hasClass( 'closed' );
|
|
|
|
if ( $el.hasClass( 'handlediv' ) ) {
|
|
// The handle button was clicked.
|
|
$el.attr( 'aria-expanded', ariaExpandedValue );
|
|
} else {
|
|
// The handle heading was clicked.
|
|
$el.closest( '.postbox' ).find( 'button.handlediv' )
|
|
.attr( 'aria-expanded', ariaExpandedValue );
|
|
}
|
|
|
|
if ( postboxes.page !== 'press-this' ) {
|
|
postboxes.save_state( postboxes.page );
|
|
}
|
|
|
|
if ( id ) {
|
|
if ( !p.hasClass('closed') && typeof postboxes.pbshow === 'function' ) {
|
|
postboxes.pbshow( id );
|
|
} else if ( p.hasClass('closed') && typeof postboxes.pbhide === 'function' ) {
|
|
postboxes.pbhide( id );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fires when a postbox has been opened or closed.
|
|
*
|
|
* Contains a jQuery object with the relevant postbox element.
|
|
*
|
|
* @since 4.0.0
|
|
* @ignore
|
|
*
|
|
* @event postboxes#postbox-toggled
|
|
* @type {Object}
|
|
*/
|
|
$document.trigger( 'postbox-toggled', p );
|
|
},
|
|
|
|
/**
|
|
* Handles clicks on the move up/down buttons.
|
|
*
|
|
* @since 5.5.0
|
|
*
|
|
* @return {void}
|
|
*/
|
|
handleOrder: function() {
|
|
var button = $( this ),
|
|
postbox = button.closest( '.postbox' ),
|
|
postboxId = postbox.attr( 'id' ),
|
|
postboxesWithinSortables = postbox.closest( '.meta-box-sortables' ).find( '.postbox:visible' ),
|
|
postboxesWithinSortablesCount = postboxesWithinSortables.length,
|
|
postboxWithinSortablesIndex = postboxesWithinSortables.index( postbox ),
|
|
firstOrLastPositionMessage;
|
|
|
|
if ( 'dashboard_browser_nag' === postboxId ) {
|
|
return;
|
|
}
|
|
|
|
// If on the first or last position, do nothing and send an audible message to screen reader users.
|
|
if ( 'true' === button.attr( 'aria-disabled' ) ) {
|
|
firstOrLastPositionMessage = button.hasClass( 'handle-order-higher' ) ?
|
|
__( 'The box is on the first position' ) :
|
|
__( 'The box is on the last position' );
|
|
|
|
wp.a11y.speak( firstOrLastPositionMessage );
|
|
return;
|
|
}
|
|
|
|
// Move a postbox up.
|
|
if ( button.hasClass( 'handle-order-higher' ) ) {
|
|
// If the box is first within a sortable area, move it to the previous sortable area.
|
|
if ( 0 === postboxWithinSortablesIndex ) {
|
|
postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
|
|
return;
|
|
}
|
|
|
|
postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
|
|
button.trigger( 'focus' );
|
|
postboxes.updateOrderButtonsProperties();
|
|
postboxes.save_order( postboxes.page );
|
|
}
|
|
|
|
// Move a postbox down.
|
|
if ( button.hasClass( 'handle-order-lower' ) ) {
|
|
// If the box is last within a sortable area, move it to the next sortable area.
|
|
if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
|
|
postboxes.handleOrderBetweenSortables( 'next', button, postbox );
|
|
return;
|
|
}
|
|
|
|
postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
|
|
button.trigger( 'focus' );
|
|
postboxes.updateOrderButtonsProperties();
|
|
postboxes.save_order( postboxes.page );
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Moves postboxes between the sortables areas.
|
|
*
|
|
* @since 5.5.0
|
|
*
|
|
* @param {string} position The "previous" or "next" sortables area.
|
|
* @param {Object} button The jQuery object representing the button that was clicked.
|
|
* @param {Object} postbox The jQuery object representing the postbox to be moved.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
handleOrderBetweenSortables: function( position, button, postbox ) {
|
|
var closestSortablesId = button.closest( '.meta-box-sortables' ).attr( 'id' ),
|
|
sortablesIds = [],
|
|
sortablesIndex,
|
|
detachedPostbox;
|
|
|
|
// Get the list of sortables within the page.
|
|
$( '.meta-box-sortables:visible' ).each( function() {
|
|
sortablesIds.push( $( this ).attr( 'id' ) );
|
|
});
|
|
|
|
// Return if there's only one visible sortables area, e.g. in the block editor page.
|
|
if ( 1 === sortablesIds.length ) {
|
|
return;
|
|
}
|
|
|
|
// Find the index of the current sortables area within all the sortable areas.
|
|
sortablesIndex = $.inArray( closestSortablesId, sortablesIds );
|
|
// Detach the postbox to be moved.
|
|
detachedPostbox = postbox.detach();
|
|
|
|
// Move the detached postbox to its new position.
|
|
if ( 'previous' === position ) {
|
|
$( detachedPostbox ).appendTo( '#' + sortablesIds[ sortablesIndex - 1 ] );
|
|
}
|
|
|
|
if ( 'next' === position ) {
|
|
$( detachedPostbox ).prependTo( '#' + sortablesIds[ sortablesIndex + 1 ] );
|
|
}
|
|
|
|
postboxes._mark_area();
|
|
button.focus();
|
|
postboxes.updateOrderButtonsProperties();
|
|
postboxes.save_order( postboxes.page );
|
|
},
|
|
|
|
/**
|
|
* Update the move buttons properties depending on the postbox position.
|
|
*
|
|
* @since 5.5.0
|
|
*
|
|
* @return {void}
|
|
*/
|
|
updateOrderButtonsProperties: function() {
|
|
var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
|
|
lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
|
|
firstPostbox = $( '.postbox:visible:first' ),
|
|
lastPostbox = $( '.postbox:visible:last' ),
|
|
firstPostboxId = firstPostbox.attr( 'id' ),
|
|
lastPostboxId = lastPostbox.attr( 'id' ),
|
|
firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
|
|
lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
|
|
moveUpButtons = $( '.handle-order-higher' ),
|
|
moveDownButtons = $( '.handle-order-lower' );
|
|
|
|
// Enable all buttons as a reset first.
|
|
moveUpButtons
|
|
.attr( 'aria-disabled', 'false' )
|
|
.removeClass( 'hidden' );
|
|
moveDownButtons
|
|
.attr( 'aria-disabled', 'false' )
|
|
.removeClass( 'hidden' );
|
|
|
|
// When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
|
|
if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
|
|
moveUpButtons.addClass( 'hidden' );
|
|
moveDownButtons.addClass( 'hidden' );
|
|
}
|
|
|
|
// Set an aria-disabled=true attribute on the first visible "move" buttons.
|
|
if ( firstSortablesId === firstPostboxSortablesId ) {
|
|
$( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
|
|
}
|
|
|
|
// Set an aria-disabled=true attribute on the last visible "move" buttons.
|
|
if ( lastSortablesId === lastPostboxSortablesId ) {
|
|
$( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds event handlers to all postboxes and screen option on the current page.
|
|
*
|
|
* @since 2.7.0
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @param {string} page The page we are currently on.
|
|
* @param {Object} [args]
|
|
* @param {Function} args.pbshow A callback that is called when a postbox opens.
|
|
* @param {Function} args.pbhide A callback that is called when a postbox closes.
|
|
* @return {void}
|
|
*/
|
|
add_postbox_toggles : function (page, args) {
|
|
var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
|
|
$orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
|
|
|
|
this.page = page;
|
|
this.init( page, args );
|
|
|
|
$handles.on( 'click.postboxes', this.handle_click );
|
|
|
|
// Handle the order of the postboxes.
|
|
$orderButtons.on( 'click.postboxes', this.handleOrder );
|
|
|
|
/**
|
|
* @since 2.7.0
|
|
*/
|
|
$('.postbox .hndle a').on( 'click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
/**
|
|
* Hides a postbox.
|
|
*
|
|
* Event handler for the postbox dismiss button. After clicking the button
|
|
* the postbox will be hidden.
|
|
*
|
|
* As of WordPress 5.5, this is only used for the browser update nag.
|
|
*
|
|
* @since 3.2.0
|
|
*
|
|
* @return {void}
|
|
*/
|
|
$( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
|
|
var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
|
|
e.preventDefault();
|
|
$( '#' + hide_id ).prop('checked', false).triggerHandler('click');
|
|
});
|
|
|
|
/**
|
|
* Hides the postbox element
|
|
*
|
|
* Event handler for the screen options checkboxes. When a checkbox is
|
|
* clicked this function will hide or show the relevant postboxes.
|
|
*
|
|
* @since 2.7.0
|
|
* @ignore
|
|
*
|
|
* @fires postboxes#postbox-toggled
|
|
*
|
|
* @return {void}
|
|
*/
|
|
$('.hide-postbox-tog').on('click.postboxes', function() {
|
|
var $el = $(this),
|
|
boxId = $el.val(),
|
|
$postbox = $( '#' + boxId );
|
|
|
|
if ( $el.prop( 'checked' ) ) {
|
|
$postbox.show();
|
|
if ( typeof postboxes.pbshow === 'function' ) {
|
|
postboxes.pbshow( boxId );
|
|
}
|
|
} else {
|
|
$postbox.hide();
|
|
if ( typeof postboxes.pbhide === 'function' ) {
|
|
postboxes.pbhide( boxId );
|
|
}
|
|
}
|
|
|
|
postboxes.save_state( page );
|
|
postboxes._mark_area();
|
|
|
|
/**
|
|
* @since 4.0.0
|
|
* @see postboxes.handle_click
|
|
*/
|
|
$document.trigger( 'postbox-toggled', $postbox );
|
|
});
|
|
|
|
/**
|
|
* Changes the amount of columns based on the layout preferences.
|
|
*
|
|
* @since 2.8.0
|
|
*
|
|
* @return {void}
|
|
*/
|
|
$('.columns-prefs input[type="radio"]').on('click.postboxes', function(){
|
|
var n = parseInt($(this).val(), 10);
|
|
|
|
if ( n ) {
|
|
postboxes._pb_edit(n);
|
|
postboxes.save_order( page );
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Initializes all the postboxes, mainly their sortable behaviour.
|
|
*
|
|
* @since 2.7.0
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @param {string} page The page we are currently on.
|
|
* @param {Object} [args={}] The arguments for the postbox initializer.
|
|
* @param {Function} args.pbshow A callback that is called when a postbox opens.
|
|
* @param {Function} args.pbhide A callback that is called when a postbox
|
|
* closes.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
init : function(page, args) {
|
|
var isMobile = $( document.body ).hasClass( 'mobile' ),
|
|
$handleButtons = $( '.postbox .handlediv' );
|
|
|
|
$.extend( this, args || {} );
|
|
$('.meta-box-sortables').sortable({
|
|
placeholder: 'sortable-placeholder',
|
|
connectWith: '.meta-box-sortables',
|
|
items: '.postbox',
|
|
handle: '.hndle',
|
|
cursor: 'move',
|
|
delay: ( isMobile ? 200 : 0 ),
|
|
distance: 2,
|
|
tolerance: 'pointer',
|
|
forcePlaceholderSize: true,
|
|
helper: function( event, element ) {
|
|
/* `helper: 'clone'` is equivalent to `return element.clone();`
|
|
* Cloning a checked radio and then inserting that clone next to the original
|
|
* radio unchecks the original radio (since only one of the two can be checked).
|
|
* We get around this by renaming the helper's inputs' name attributes so that,
|
|
* when the helper is inserted into the DOM for the sortable, no radios are
|
|
* duplicated, and no original radio gets unchecked.
|
|
*/
|
|
return element.clone()
|
|
.find( ':input' )
|
|
.attr( 'name', function( i, currentName ) {
|
|
return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
|
|
} )
|
|
.end();
|
|
},
|
|
opacity: 0.65,
|
|
start: function() {
|
|
$( 'body' ).addClass( 'is-dragging-metaboxes' );
|
|
// Refresh the cached positions of all the sortable items so that the min-height set while dragging works.
|
|
$( '.meta-box-sortables' ).sortable( 'refreshPositions' );
|
|
},
|
|
stop: function() {
|
|
var $el = $( this );
|
|
|
|
$( 'body' ).removeClass( 'is-dragging-metaboxes' );
|
|
|
|
if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
|
|
$el.sortable('cancel');
|
|
return;
|
|
}
|
|
|
|
postboxes.updateOrderButtonsProperties();
|
|
postboxes.save_order(page);
|
|
},
|
|
receive: function(e,ui) {
|
|
if ( 'dashboard_browser_nag' == ui.item[0].id )
|
|
$(ui.sender).sortable('cancel');
|
|
|
|
postboxes._mark_area();
|
|
$document.trigger( 'postbox-moved', ui.item );
|
|
}
|
|
});
|
|
|
|
if ( isMobile ) {
|
|
$(document.body).on('orientationchange.postboxes', function(){ postboxes._pb_change(); });
|
|
this._pb_change();
|
|
}
|
|
|
|
this._mark_area();
|
|
|
|
// Update the "move" buttons properties.
|
|
this.updateOrderButtonsProperties();
|
|
$document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
|
|
|
|
// Set the handle buttons `aria-expanded` attribute initial value on page load.
|
|
$handleButtons.each( function () {
|
|
var $el = $( this );
|
|
$el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Saves the state of the postboxes to the server.
|
|
*
|
|
* It sends two lists, one with all the closed postboxes, one with all the
|
|
* hidden postboxes.
|
|
*
|
|
* @since 2.7.0
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @param {string} page The page we are currently on.
|
|
* @return {void}
|
|
*/
|
|
save_state : function(page) {
|
|
var closed, hidden;
|
|
|
|
// Return on the nav-menus.php screen, see #35112.
|
|
if ( 'nav-menus' === page ) {
|
|
return;
|
|
}
|
|
|
|
closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
|
|
hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
|
|
|
|
$.post(ajaxurl, {
|
|
action: 'closed-postboxes',
|
|
closed: closed,
|
|
hidden: hidden,
|
|
closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
|
|
page: page
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Saves the order of the postboxes to the server.
|
|
*
|
|
* Sends a list of all postboxes inside a sortable area to the server.
|
|
*
|
|
* @since 2.8.0
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @param {string} page The page we are currently on.
|
|
* @return {void}
|
|
*/
|
|
save_order : function(page) {
|
|
var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
|
|
|
|
postVars = {
|
|
action: 'meta-box-order',
|
|
_ajax_nonce: $('#meta-box-order-nonce').val(),
|
|
page_columns: page_columns,
|
|
page: page
|
|
};
|
|
|
|
$('.meta-box-sortables').each( function() {
|
|
postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
|
|
} );
|
|
|
|
$.post(
|
|
ajaxurl,
|
|
postVars,
|
|
function( response ) {
|
|
if ( response.success ) {
|
|
wp.a11y.speak( __( 'The boxes order has been saved.' ) );
|
|
}
|
|
}
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Marks empty postbox areas.
|
|
*
|
|
* Adds a message to empty sortable areas on the dashboard page. Also adds a
|
|
* border around the side area on the post edit screen if there are no postboxes
|
|
* present.
|
|
*
|
|
* @since 3.3.0
|
|
* @access private
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @return {void}
|
|
*/
|
|
_mark_area : function() {
|
|
var visible = $( 'div.postbox:visible' ).length,
|
|
visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
|
|
areAllVisibleSortablesEmpty = true;
|
|
|
|
visibleSortables.each( function() {
|
|
var t = $(this);
|
|
|
|
if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
|
|
t.removeClass('empty-container');
|
|
areAllVisibleSortablesEmpty = false;
|
|
}
|
|
else {
|
|
t.addClass('empty-container');
|
|
}
|
|
});
|
|
|
|
postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
|
|
},
|
|
|
|
/**
|
|
* Updates the text for the empty sortable areas on the Dashboard.
|
|
*
|
|
* @since 5.5.0
|
|
*
|
|
* @param {Object} visibleSortables The jQuery object representing the visible sortable areas.
|
|
* @param {boolean} areAllVisibleSortablesEmpty Whether all the visible sortable areas are "empty".
|
|
*
|
|
* @return {void}
|
|
*/
|
|
updateEmptySortablesText: function( visibleSortables, areAllVisibleSortablesEmpty ) {
|
|
var isDashboard = $( '#dashboard-widgets' ).length,
|
|
emptySortableText = areAllVisibleSortablesEmpty ? __( 'Add boxes from the Screen Options menu' ) : __( 'Drag boxes here' );
|
|
|
|
if ( ! isDashboard ) {
|
|
return;
|
|
}
|
|
|
|
visibleSortables.each( function() {
|
|
if ( $( this ).hasClass( 'empty-container' ) ) {
|
|
$( this ).attr( 'data-emptyString', emptySortableText );
|
|
}
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Changes the amount of columns on the post edit page.
|
|
*
|
|
* @since 3.3.0
|
|
* @access private
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @fires postboxes#postboxes-columnchange
|
|
*
|
|
* @param {number} n The amount of columns to divide the post edit page in.
|
|
* @return {void}
|
|
*/
|
|
_pb_edit : function(n) {
|
|
var el = $('.metabox-holder').get(0);
|
|
|
|
if ( el ) {
|
|
el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
|
|
}
|
|
|
|
/**
|
|
* Fires when the amount of columns on the post edit page has been changed.
|
|
*
|
|
* @since 4.0.0
|
|
* @ignore
|
|
*
|
|
* @event postboxes#postboxes-columnchange
|
|
*/
|
|
$( document ).trigger( 'postboxes-columnchange' );
|
|
},
|
|
|
|
/**
|
|
* Changes the amount of columns the postboxes are in based on the current
|
|
* orientation of the browser.
|
|
*
|
|
* @since 3.3.0
|
|
* @access private
|
|
*
|
|
* @memberof postboxes
|
|
*
|
|
* @return {void}
|
|
*/
|
|
_pb_change : function() {
|
|
var check = $( 'label.columns-prefs-1 input[type="radio"]' );
|
|
|
|
switch ( window.orientation ) {
|
|
case 90:
|
|
case -90:
|
|
if ( !check.length || !check.is(':checked') )
|
|
this._pb_edit(2);
|
|
break;
|
|
case 0:
|
|
case 180:
|
|
if ( $( '#poststuff' ).length ) {
|
|
this._pb_edit(1);
|
|
} else {
|
|
if ( !check.length || !check.is(':checked') )
|
|
this._pb_edit(2);
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
|
|
/* Callbacks */
|
|
|
|
/**
|
|
* @since 2.7.0
|
|
* @access public
|
|
*
|
|
* @property {Function|boolean} pbshow A callback that is called when a postbox
|
|
* is opened.
|
|
* @memberof postboxes
|
|
*/
|
|
pbshow : false,
|
|
|
|
/**
|
|
* @since 2.7.0
|
|
* @access public
|
|
* @property {Function|boolean} pbhide A callback that is called when a postbox
|
|
* is closed.
|
|
* @memberof postboxes
|
|
*/
|
|
pbhide : false
|
|
};
|
|
|
|
}(jQuery));
|