--- a/wp/wp-admin/js/postbox.js Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-admin/js/postbox.js Tue Dec 15 13:49:49 2020 +0100
@@ -7,10 +7,11 @@
* @output wp-admin/js/postbox.js
*/
-/* global ajaxurl, postBoxL10n, postboxes */
+/* global ajaxurl, postboxes */
(function($) {
- var $document = $( document );
+ 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
@@ -32,14 +33,16 @@
* if the postbox has been closed.
*
* @since 4.4.0
+ *
* @memberof postboxes
+ *
* @fires postboxes#postbox-toggled
*
- * @returns {void}
+ * @return {void}
*/
handle_click : function () {
var $el = $( this ),
- p = $el.parent( '.postbox' ),
+ p = $el.closest( '.postbox' ),
id = p.attr( 'id' ),
ariaExpandedValue;
@@ -48,7 +51,6 @@
}
p.toggleClass( 'closed' );
-
ariaExpandedValue = ! p.hasClass( 'closed' );
if ( $el.hasClass( 'handlediv' ) ) {
@@ -87,25 +89,181 @@
},
/**
+ * 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.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.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.
- * @returns {void}
+ * @return {void}
*/
add_postbox_toggles : function (page, args) {
- var $handles = $( '.postbox .hndle, .postbox .handlediv' );
+ 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
*/
@@ -119,9 +277,11 @@
* 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
*
- * @returns {void}
+ * @return {void}
*/
$( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
@@ -140,7 +300,7 @@
*
* @fires postboxes#postbox-toggled
*
- * @returns {void}
+ * @return {void}
*/
$('.hide-postbox-tog').bind('click.postboxes', function() {
var $el = $(this),
@@ -174,7 +334,7 @@
*
* @since 2.8.0
*
- * @returns {void}
+ * @return {void}
*/
$('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
var n = parseInt($(this).val(), 10);
@@ -190,6 +350,7 @@
* Initializes all the postboxes, mainly their sortable behaviour.
*
* @since 2.7.0
+ *
* @memberof postboxes
*
* @param {string} page The page we are currently on.
@@ -198,14 +359,13 @@
* @param {Function} args.pbhide A callback that is called when a postbox
* closes.
*
- * @returns {void}
+ * @return {void}
*/
init : function(page, args) {
var isMobile = $( document.body ).hasClass( 'mobile' ),
$handleButtons = $( '.postbox .handlediv' );
$.extend( this, args || {} );
- $('#wpbody-content').css('overflow','hidden');
$('.meta-box-sortables').sortable({
placeholder: 'sortable-placeholder',
connectWith: '.meta-box-sortables',
@@ -232,14 +392,22 @@
.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) {
@@ -258,10 +426,14 @@
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.parent( '.postbox' ).hasClass( 'closed' ) );
+ $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
});
},
@@ -272,10 +444,11 @@
* hidden postboxes.
*
* @since 2.7.0
+ *
* @memberof postboxes
*
* @param {string} page The page we are currently on.
- * @returns {void}
+ * @return {void}
*/
save_state : function(page) {
var closed, hidden;
@@ -303,10 +476,11 @@
* 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.
- * @returns {void}
+ * @return {void}
*/
save_order : function(page) {
var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
@@ -322,7 +496,15 @@
postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
} );
- $.post( ajaxurl, postVars );
+ $.post(
+ ajaxurl,
+ postVars,
+ function( response ) {
+ if ( response.success ) {
+ wp.a11y.speak( __( 'The boxes order has been saved.' ) );
+ }
+ }
+ );
},
/**
@@ -333,44 +515,69 @@
* present.
*
* @since 3.3.0
- * @memberof postboxes
* @access private
*
- * @returns {void}
+ * @memberof postboxes
+ *
+ * @return {void}
*/
_mark_area : function() {
- var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables');
+ var visible = $( 'div.postbox:visible' ).length,
+ visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
+ areAllVisibleSortablesEmpty = true;
- $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
+ visibleSortables.each( function() {
var t = $(this);
- if ( visible == 1 || t.children('.postbox:visible').length ) {
+ if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
t.removeClass('empty-container');
+ areAllVisibleSortablesEmpty = false;
}
else {
t.addClass('empty-container');
- t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
}
});
- if ( side.length ) {
- if ( side.children('.postbox:visible').length )
- side.removeClass('empty-container');
- else if ( $('#postbox-container-1').css('width') == '280px' )
- side.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
- * @memberof postboxes
- * @fires postboxes#postboxes-columnchange
* @access private
*
+ * @memberof postboxes
+ *
+ * @fires postboxes#postboxes-columnchange
+ *
* @param {number} n The amount of columns to divide the post edit page in.
- * @returns {void}
+ * @return {void}
*/
_pb_edit : function(n) {
var el = $('.metabox-holder').get(0);
@@ -395,10 +602,11 @@
* orientation of the browser.
*
* @since 3.3.0
- * @memberof postboxes
* @access private
*
- * @returns {void}
+ * @memberof postboxes
+ *
+ * @return {void}
*/
_pb_change : function() {
var check = $( 'label.columns-prefs-1 input[type="radio"]' );
@@ -411,7 +619,7 @@
break;
case 0:
case 180:
- if ( $('#poststuff').length ) {
+ if ( $( '#poststuff' ).length ) {
this._pb_edit(1);
} else {
if ( !check.length || !check.is(':checked') )
@@ -425,19 +633,20 @@
/**
* @since 2.7.0
- * @memberof postboxes
* @access public
+ *
* @property {Function|boolean} pbshow A callback that is called when a postbox
* is opened.
+ * @memberof postboxes
*/
pbshow : false,
/**
* @since 2.7.0
- * @memberof postboxes
* @access public
* @property {Function|boolean} pbhide A callback that is called when a postbox
* is closed.
+ * @memberof postboxes
*/
pbhide : false
};