WordPress.org
Get WordPress

Make WordPress Core

Ticket #21603: 21603.6.diff

File 21603.6.diff, 12.4 KB (added by maxpertici, 2 years ago)

  • src/js/_enqueues/lib/nav-menu.js 

    diff --git a/src/js/_enqueues/lib/nav-menu.js b/src/js/_enqueues/lib/nav-menu.js
index d3b9663487..b8ed96782a 100644
    a b  
    4444                        this.jQueryExtensions();
    4545
    4646                        this.attachMenuEditListeners();
     47                       
     48                        this.attachBulkSelectButtonListeners();
     49                        this.attachMenuCheckBoxListeners();
     50                        this.attachMenuItemDeleteButton();
     51                        this.attachPendingMenuItemsListForDeletion();
    4752
    4853                        this.attachQuickSearchListeners();
    4954                        this.attachThemeLocationsListeners();
    … …  
    862867                        });
    863868                },
    864869
     870                attachBulkSelectButtonListeners : function() {
     871                        var that = this;
     872
     873                        $('.bulk-select-switcher').on( 'change', function(){
     874                                if( this.checked ){
     875                                        $('.bulk-select-switcher').prop('checked',true);
     876                                        that.enableBulkSelection();
     877                                }else{
     878                                        $('.bulk-select-switcher').prop('checked',false);
     879                                        that.disableBulkSelection();
     880                                }
     881                        });
     882                },
     883
     884                enableBulkSelection : function() {
     885
     886                        $('#menu-to-edit').addClass('bulk-selection');
     887                        $('#nav-menu-bulk-actions-top').addClass('bulk-selection');
     888                        $('#nav-menu-bulk-actions-bottom').addClass('bulk-selection');
     889                        /*
     890                        var switchLabelCurrent = $('.bulk-select-button-label').first().text();
     891                        var switchLabelNext = $('.bulk-select-button').first().attr('data-switch-label') ;
     892
     893                        $('.bulk-select-button').attr('data-switch-label',switchLabelCurrent);
     894                        $('.bulk-select-button-label').text(switchLabelNext) ;
     895                        */
     896                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
     897                        $.each( checkbox, function(){
     898                                $(this).prop('disabled',false);
     899                        });
     900                },
     901
     902                disableBulkSelection : function() {
     903                        $('#menu-to-edit').removeClass('bulk-selection');
     904                        $('#nav-menu-bulk-actions-top').removeClass('bulk-selection');
     905                        $('#nav-menu-bulk-actions-bottom').removeClass('bulk-selection');
     906                       
     907                        if( $('.menu-items-delete').is('[aria-describedby="pending-nav-items-to-deletion"]') ){ $('.menu-items-delete').removeAttr( 'aria-describedby' ); }
     908
     909                        /*
     910                        var switchLabelCurrent = $('.bulk-select-button-label').first().text();
     911                        var switchLabelNext = $('.bulk-select-button').first().attr('data-switch-label') ;
     912
     913                        $('.bulk-select-button').attr('data-switch-label',switchLabelCurrent);
     914                        $('.bulk-select-button-label').text(switchLabelNext) ;
     915                        */
     916
     917                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
     918                        $.each( checkbox, function(){
     919                                $(this).prop('disabled',true).prop('checked',false);
     920                        });
     921                        $('.menu-items-delete').addClass('disabled');
     922                        $('#pending-nav-items-to-deletion-list').empty();
     923                },
     924               
     925
     926                attachMenuCheckBoxListeners : function() {
     927                        var that = this;
     928                               
     929                        $( '#menu-to-edit' ).on( 'change','.menu-item-checkbox', function(){
     930                        that.setRemoveSelectedButtonStatus();
     931                        });
     932                },
     933
     934                attachMenuItemDeleteButton : function() {
     935                        var that = this;
     936
     937                        $( document ).on('click', '.menu-items-delete', function(e){
     938                        e.preventDefault();
     939
     940                                if( ! $(this).hasClass('disabled') ){
     941                                        $.each( $('.menu-item-checkbox:checked'), function( index, element) {
     942                                                $( element ).parents( 'li' ).find( 'a.item-delete' ).trigger( 'click' );
     943                                        });
     944
     945                                        $('.menu-items-delete').addClass('disabled');
     946                                        $('.bulk-select-switcher').prop('checked',false);
     947                                       
     948                                        var itemsPendingDeletion = '';
     949                                        var itemsPendingDeletionList = $('#pending-nav-items-to-deletion-list li');
     950
     951                                        $.each( itemsPendingDeletionList, function( index, element) {
     952                                                var itemID = $( element ).attr( 'data-menu-item-id' );
     953                                                var itemSpeech = localizedData.strings.menuItemDeletionSpeech.replace( '%s', itemID );
     954                                                itemsPendingDeletion += itemSpeech ;
     955                                                if( ( index + 1 ) < itemsPendingDeletionList.length ){ itemsPendingDeletion += ', ' ; }
     956                                        });
     957                                       
     958                                        var deletionSpeech = localizedData.strings.itemsDeletedSpeech.replace( '%s', itemsPendingDeletion );
     959                                        wp.a11y.speak( deletionSpeech, 'polite' );
     960                                        that.disableBulkSelection();
     961                                }
     962                        });
     963                },
     964
     965                attachPendingMenuItemsListForDeletion : function(){
     966                        $('#post-body-content').on( 'change', '.menu-item-checkbox', function(){
     967
     968                                if( ! $('.menu-items-delete').is('[aria-describedby="pending-nav-items-to-deletion"]') ){ $('.menu-items-delete').attr( 'aria-describedby', 'pending-nav-items-to-deletion' ); }
     969
     970                                var menuItemLabel = $(this).next().text();
     971                                var menuItemType = $(this).parent().next('.item-controls').find('.item-type').text();
     972                                var menuItemID = $(this).attr('data-menu-item-id') ;
     973
     974                                var ListedMenuItem = $('#pending-nav-items-to-deletion-list').find('[data-menu-item-id='+menuItemID+']') ;
     975                                if( ListedMenuItem.length > 0 ){
     976                                        ListedMenuItem.remove();
     977                                }
     978                                if( this.checked === true ){
     979                                        $('#pending-nav-items-to-deletion-list').append( '<li data-menu-item-id="'+menuItemID+'">' + menuItemLabel + ', ' + menuItemType + '<span class="separator"></span></li>' );
     980                                }
     981                                $('#pending-nav-items-to-deletion-list .separator').html(', ');
     982                                $('#pending-nav-items-to-deletion-list .separator').last().html('.');
     983                        });
     984                },
     985
     986                setBulkDeleteCheckboxStatus : function(){
     987
     988                        var that = this;
     989                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
     990
     991                        $.each( checkbox, function(){
     992                               
     993                                if( $(this).prop('disabled') == true ){
     994                                        $(this).prop( 'disabled', false );
     995                                }else{
     996                                        $(this).prop( 'disabled', true );
     997                                }
     998
     999                                if( $(this).is(':checked')) {
     1000                                        $(this).prop('checked',false);
     1001                                }
     1002                        });
     1003
     1004                        that.setRemoveSelectedButtonStatus();
     1005                },
     1006
     1007                setRemoveSelectedButtonStatus : function(){
     1008                       
     1009                        var button = $('.menu-items-delete');
     1010
     1011                        if( $('.menu-item-checkbox:checked').length > 0 ) {
     1012                                $('.menu-items-delete').removeClass('disabled');
     1013                        }else{
     1014                                $('.menu-items-delete').addClass('disabled');
     1015                        }
     1016                },
     1017
    8651018                attachMenuSaveSubmitListeners : function() {
    8661019                        /*
    8671020                         * When a navigation menu is saved, store a JSON representation of all form data

  • src/wp-admin/css/nav-menus.css 

    diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index ed97188ea5..71a8630913 100644
    a b ul.add-menu-item-tabs li { 
    9797        margin: 1em 0 10px;
    9898}
    9999
     100#nav-menu-bulk-actions-top {
     101        margin: 1em 0;
     102}
     103
     104#nav-menu-bulk-actions-bottom {
     105        margin: 1em 0;
     106        margin: calc( 1em + 9px ) 0 ;
     107}
     108
     109.bulk-actions input.button {
     110        margin-right: 12px;
     111}
     112
     113.bulk-select-button {
     114        position: relative;
     115        display: inline-block;
     116        padding: 0 10px;
     117        font-size: 13px;
     118        line-height: 2.15384615;
     119        height: auto;
     120        min-height: 30px;
     121       
     122        background: #f6f7f7;
     123        vertical-align: top;
     124        border: 1px solid #dcdcde;
     125
     126        margin: 0;
     127        cursor: pointer;
     128       
     129        border-radius: 3px;
     130        white-space: nowrap;
     131        box-sizing: border-box;
     132}
     133
     134.bulk-selection .bulk-select-button {
     135        color: #2271b1;
     136    border-color: #2271b1;
     137    background: #f6f7f7;
     138    vertical-align: top;
     139}
     140
     141#pending-nav-items-to-deletion {
     142        display: none;
     143}
     144
     145.bulk-selection #pending-nav-items-to-deletion {
     146        display: block;
     147        margin-top: 1em;
     148}
     149
     150#pending-nav-items-to-deletion-message {
     151        margin-bottom: 0;
     152}
     153
     154#pending-nav-items-to-deletion-list {
     155        margin-top: 0;
     156        list-style: none;
     157}
     158
     159#pending-nav-items-to-deletion-list li {
     160        display: inline;
     161}
     162/*
     163input.bulk-select-switcher {
     164        position: absolute;
     165        width: 0;
     166        height: 0;
     167        opacity: 0;
     168        border: none;
     169        overflow: hidden;
     170        bottom: 0;
     171}
     172*/
     173
     174input.bulk-select-switcher + .bulk-select-button-label {
     175        vertical-align: inherit;
     176}
     177
     178label.bulk-select-button:hover,
     179label.bulk-select-button:active,
     180label.bulk-select-button:focus-within {
     181        background: #f0f0f1;
     182        border-color: #0a4b78;
     183        color: #0a4b78;
     184}
     185
     186input.bulk-select-switcher:focus + .bulk-select-button-label{
     187        color: #0a4b78;
     188}
     189
     190.bulk-actions input.menu-items-delete {
     191        -webkit-appearance: none;
     192        -moz-appearance: none;
     193        appearance: none;
     194        font-size: inherit;
     195        border: 0;
     196        line-height: 2.1em;
     197        background: none;
     198        cursor: pointer;
     199        text-decoration: underline;
     200        color: #b32d2e;
     201}
     202
     203.bulk-actions input.menu-items-delete:hover {
     204        color: #b32d2e;
     205        border: none;
     206}
     207
     208.bulk-actions input.menu-items-delete.disabled {
     209        cursor: default;
     210        color: #a7aaad;
     211        box-shadow: none;
     212}
     213
    100214.menu-settings {
    101215        border-top: 1px solid #f0f0f1;
    102216        margin-top: 2em;
    … … ul.add-menu-item-tabs li { 
    481595        margin-right: 13em;
    482596}
    483597
     598.menu-item-handle .menu-item-checkbox {
     599        display: none;
     600}
     601
     602.bulk-selection .menu-item-handle .menu-item-checkbox {
     603        display: inline-block;
     604        margin-right: 6px;
     605}
     606
    484607.menu-item-handle .menu-item-title.no-title {
    485608        color: #646970;
    486609}

  • src/wp-admin/includes/class-walker-nav-menu-edit.php 

    diff --git a/src/wp-admin/includes/class-walker-nav-menu-edit.php b/src/wp-admin/includes/class-walker-nav-menu-edit.php
index fb9fceb7df..0249149eb3 100644
    a b class Walker_Nav_Menu_Edit extends Walker_Nav_Menu { 
    118118                <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode( ' ', $classes ); ?>">
    119119                        <div class="menu-item-bar">
    120120                                <div class="menu-item-handle">
    121                                         <span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span>
     121                                        <label class="item-title" for="menu-item-checkbox-<?php echo $item_id; ?>"><input id="menu-item-checkbox-<?php echo $item_id; ?>" type="checkbox" class="menu-item-checkbox" data-menu-item-id="<?php echo $item_id; ?>" disabled="disabled"/><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></label>
    122122                                        <span class="item-controls">
    123123                                                <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
    124124                                                <span class="item-order hide-if-js">

  • src/wp-admin/nav-menus.php 

    diff --git a/src/wp-admin/nav-menus.php b/src/wp-admin/nav-menus.php
index a458bdbdce..27f398acb9 100644
    a b if ( ! current_user_can( 'edit_theme_options' ) ) { 
    2828        );
    2929}
    3030
     31wp_register_script( 'nav-menu', [ 'wp-a11y' ] );
     32
     33wp_localize_script( 'nav-menu', 'localizedData', [
     34        'strings' => [
     35                'menuItemDeletionSpeech' => esc_html__( 'item %s' ),
     36                'itemsDeletedSpeech' => esc_html__( 'Deleted menu item: %s.' )
     37        ],
     38] );
     39
    3140wp_enqueue_script( 'nav-menu' );
    3241
    3342if ( wp_is_mobile() ) {
    … … require_once ABSPATH . 'wp-admin/admin-header.php'; 
    961970                                        <div id="post-body">
    962971                                                <div id="post-body-content" class="wp-clearfix">
    963972                                                        <?php if ( ! $add_new_screen ) : ?>
    964 
    965973                                                                <?php
    966974                                                                $hide_style = '';
    967975
    … … require_once ABSPATH . 'wp-admin/admin-header.php'; 
    978986                                                                <div class="drag-instructions post-body-plain" <?php echo $hide_style; ?>>
    979987                                                                        <p><?php echo $starter_copy; ?></p>
    980988                                                                </div>
    981 
     989                                                                <div id="nav-menu-bulk-actions-top" class="bulk-actions">
     990                                                                        <label class="bulk-select-button" for="bulk-select-switcher-top" data-switch-label="<?php echo __( 'Cancel Select' ) ; ?>">
     991                                                                                <input type="checkbox" id="bulk-select-switcher-top" name="bulk-select-switcher-top" class="bulk-select-switcher">
     992                                                                                <span class="bulk-select-button-label"><?php echo __( 'Bulk Select' ) ; ?></span>
     993                                                                        </label>
     994                                                                </div>
    982995                                                                <?php
    983996                                                                if ( isset( $edit_markup ) && ! is_wp_error( $edit_markup ) ) {
    984997                                                                        echo $edit_markup;
    … … require_once ABSPATH . 'wp-admin/admin-header.php'; 
    10041017                                                                $no_menus_style = 'style="display: none;"';
    10051018                                                        }
    10061019                                                        ?>
     1020                                                        <div id="nav-menu-bulk-actions-bottom" class="bulk-actions">
     1021                                                                <label class="bulk-select-button" for="bulk-select-switcher-bottom" data-switch-label="<?php echo __( 'Cancel Select' ) ; ?>">
     1022                                                                        <input type="checkbox" id="bulk-select-switcher-bottom" name="bulk-select-switcher-top" class="bulk-select-switcher">
     1023                                                                        <span class="bulk-select-button-label"><?php echo __( 'Bulk Select' ) ; ?></span>
     1024                                                                </label>
     1025                                                                <input type="button" class="deletion menu-items-delete disabled" value="<?php echo __( 'Remove Selected Items' ) ; ?>">
     1026                                                                <div id="pending-nav-items-to-deletion">
     1027                                                                        <p id="pending-nav-items-to-deletion-message"><?php echo __( 'List of menu items selected for deletion:' ) ; ?></p>
     1028                                                                        <ul id="pending-nav-items-to-deletion-list"></ul>
     1029                                                                </div>
     1030                                                        </div>
    10071031                                                        <div class="menu-settings" <?php echo $no_menus_style; ?>>
    10081032                                                                <h3><?php _e( 'Menu Settings' ); ?></h3>
    10091033                                                                <?php