diff -r 3d4e9c994f10 -r a86126ab1dd4 wp/wp-admin/js/postbox.js --- 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 };