WordPress.org

Make WordPress Core

Ticket #21603: 21603.5.diff

File 21603.5.diff, 11.5 KB (added by maxpertici, 5 months 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..f6db09d5ab 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                        var switchLabelCurrent = $('.bulk-select-button-label').first().text();
     908                        var switchLabelNext = $('.bulk-select-button').first().attr('data-switch-label') ;
     909
     910                        $('.bulk-select-button').attr('data-switch-label',switchLabelCurrent);
     911                        $('.bulk-select-button-label').text(switchLabelNext) ;
     912
     913                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
     914                        $.each( checkbox, function(){
     915                                $(this).prop('disabled',true).prop('checked',false);
     916                        });
     917                        $('.menu-items-delete').addClass('disabled');
     918                        $('#pending-nav-items-to-deletion-list').empty();
     919                },
     920               
     921
     922                attachMenuCheckBoxListeners : function() {
     923                        var that = this;
     924                               
     925                        $( '#menu-to-edit' ).on( 'change','.menu-item-checkbox', function(){
     926                        that.setRemoveSelectedButtonStatus();
     927                        });
     928                },
     929
     930                attachMenuItemDeleteButton : function() {
     931                        var that = this;
     932
     933                        $( document ).on('click', '.menu-items-delete', function(e){
     934                        e.preventDefault();
     935
     936                                if( ! $(this).hasClass('disabled') ){
     937                                        $.each( $('.menu-item-checkbox:checked'), function( index, element) {
     938                                                $( element ).parents( 'li' ).find( 'a.item-delete' ).trigger( 'click' );
     939                                        });
     940
     941                                        $('.menu-items-delete').addClass('disabled');
     942                                        $('.bulk-select-switcher').prop('checked',false);
     943                                       
     944                                        var itemsPendingDeletion = $('#pending-nav-items-to-deletion-list').text() ;
     945                                        var deletionSpeech = localizedData.strings.itemsDeleted.replace( "%1$s", itemsPendingDeletion );
     946                                        wp.a11y.speak( deletionSpeech, 'polite' );
     947                                        that.disableBulkSelection();
     948                                }
     949                        });
     950                },
     951
     952                attachPendingMenuItemsListForDeletion : function(){
     953                        $('#post-body-content').on( 'change', '.menu-item-checkbox', function(){
     954                                var menuItemLabel = $(this).next().text();
     955                                var menuItemID = $(this).attr('data-menu-item-id') ;
     956                                var ListedMenuItem = $('#pending-nav-items-to-deletion-list').find('[data-menu-item-id='+menuItemID+']') ;
     957                                if( ListedMenuItem.length > 0 ){
     958                                        ListedMenuItem.remove();
     959                                }
     960                                if( this.checked === true ){
     961                                        $('#pending-nav-items-to-deletion-list').append( '<li data-menu-item-id="'+menuItemID+'">'+menuItemLabel+'<span class="separator">, </span></li>' );
     962                                }
     963                                $('#pending-nav-items-to-deletion-list .separator').html(', ');
     964                                $('#pending-nav-items-to-deletion-list .separator').last().html('.');
     965                        });
     966                },
     967
     968                setBulkDeleteCheckboxStatus : function(){
     969
     970                        var that = this;
     971                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
     972
     973                        $.each( checkbox, function(){
     974                               
     975                                if( $(this).prop('disabled') == true ){
     976                                        $(this).prop( 'disabled', false );
     977                                }else{
     978                                        $(this).prop( 'disabled', true );
     979                                }
     980
     981                                if( $(this).is(':checked')) {
     982                                        $(this).prop('checked',false);
     983                                }
     984                        });
     985
     986                        that.setRemoveSelectedButtonStatus();
     987                },
     988
     989                setRemoveSelectedButtonStatus : function(){
     990                       
     991                        var button = $('.menu-items-delete');
     992
     993                        if( $('.menu-item-checkbox:checked').length > 0 ) {
     994                                $('.menu-items-delete').removeClass('disabled');
     995                        }else{
     996                                $('.menu-items-delete').addClass('disabled');
     997                        }
     998                },
     999
    8651000                attachMenuSaveSubmitListeners : function() {
    8661001                        /*
    8671002                         * 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..8b5ffcbf95 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
     173input.bulk-select-switcher + .bulk-select-button-label {
     174        vertical-align: inherit;
     175}
     176
     177label.bulk-select-button:hover,
     178label.bulk-select-button:active,
     179label.bulk-select-button:focus-within {
     180        background: #f0f0f1;
     181        border-color: #0a4b78;
     182        color: #0a4b78;
     183}
     184
     185input.bulk-select-switcher:focus + .bulk-select-button-label{
     186        color: #0a4b78;
     187}
     188
     189.bulk-actions input.menu-items-delete {
     190        -webkit-appearance: none;
     191        -moz-appearance: none;
     192        appearance: none;
     193        font-size: inherit;
     194        border: 0;
     195        line-height: 2.1em;
     196        background: none;
     197        cursor: pointer;
     198        text-decoration: underline;
     199        color: #b32d2e;
     200}
     201
     202.bulk-actions input.menu-items-delete:hover {
     203        color: #b32d2e;
     204        border: none;
     205}
     206
     207.bulk-actions input.menu-items-delete.disabled {
     208        cursor: default;
     209        color: #a7aaad;
     210        box-shadow: none;
     211}
     212
    100213.menu-settings {
    101214        border-top: 1px solid #f0f0f1;
    102215        margin-top: 2em;
    ul.add-menu-item-tabs li { 
    481594        margin-right: 13em;
    482595}
    483596
     597.menu-item-handle .menu-item-checkbox {
     598        display: none;
     599}
     600
     601.bulk-selection .menu-item-handle .menu-item-checkbox {
     602        display: inline-block;
     603        margin-right: 6px;
     604}
     605
    484606.menu-item-handle .menu-item-title.no-title {
    485607        color: #646970;
    486608}
  • 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..6cc2baff8d 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                'itemsDeleted' => esc_html__( '%1$s have been deleted.' )
     36        ],
     37] );
     38
    3139wp_enqueue_script( 'nav-menu' );
    3240
    3341if ( wp_is_mobile() ) {
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    961969                                        <div id="post-body">
    962970                                                <div id="post-body-content" class="wp-clearfix">
    963971                                                        <?php if ( ! $add_new_screen ) : ?>
    964 
    965972                                                                <?php
    966973                                                                $hide_style = '';
    967974
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    978985                                                                <div class="drag-instructions post-body-plain" <?php echo $hide_style; ?>>
    979986                                                                        <p><?php echo $starter_copy; ?></p>
    980987                                                                </div>
    981 
     988                                                                <div id="nav-menu-bulk-actions-top" class="bulk-actions">
     989                                                                        <label class="bulk-select-button" for="bulk-select-switcher-top" data-switch-label="<?php echo __( 'Cancel Select' ) ; ?>">
     990                                                                                <input type="checkbox" id="bulk-select-switcher-top" name="bulk-select-switcher-top" class="bulk-select-switcher">
     991                                                                                <span class="bulk-select-button-label"><?php echo __( 'Bulk Select' ) ; ?></span>
     992                                                                        </label>
     993                                                                </div>
    982994                                                                <?php
    983995                                                                if ( isset( $edit_markup ) && ! is_wp_error( $edit_markup ) ) {
    984996                                                                        echo $edit_markup;
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    10041016                                                                $no_menus_style = 'style="display: none;"';
    10051017                                                        }
    10061018                                                        ?>
     1019                                                        <div id="nav-menu-bulk-actions-bottom" class="bulk-actions">
     1020                                                                <label class="bulk-select-button" for="bulk-select-switcher-bottom" data-switch-label="<?php echo __( 'Cancel Select' ) ; ?>">
     1021                                                                        <input type="checkbox" id="bulk-select-switcher-bottom" name="bulk-select-switcher-top" class="bulk-select-switcher">
     1022                                                                        <span class="bulk-select-button-label"><?php echo __( 'Bulk Select' ) ; ?></span>
     1023                                                                </label>
     1024                                                                <input type="button" aria-describedby="pending-nav-items-to-deletion" class="deletion menu-items-delete disabled" value="<?php echo __( 'Remove Selected Items' ) ; ?>">
     1025                                                                <div id="pending-nav-items-to-deletion">
     1026                                                                        <p id="pending-nav-items-to-deletion-message"><?php echo __( 'List of menu items selected for deletion :' ) ; ?></p>
     1027                                                                        <ul id="pending-nav-items-to-deletion-list"></ul>
     1028                                                                </div>
     1029                                                        </div>
    10071030                                                        <div class="menu-settings" <?php echo $no_menus_style; ?>>
    10081031                                                                <h3><?php _e( 'Menu Settings' ); ?></h3>
    10091032                                                                <?php