WordPress.org
Get WordPress

Make WordPress Core

Ticket #21603: 21603.4.diff

File 21603.4.diff, 13.7 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..c1a2227322 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                                        that.disableBulkSelection();
     944                                }
     945                        });
     946                },
     947
     948                attachPendingMenuItemsListForDeletion : function(){
     949                        $('#post-body-content').on( 'change', '.menu-item-checkbox', function(){
     950                                var menuItemLabel = $(this).next().text();
     951                                var menuItemID = $(this).attr('data-menu-item-id') ;
     952                                var ListedMenuItem = $('#pending-nav-items-to-deletion-list').find('[data-menu-item-id='+menuItemID+']') ;
     953                                if( ListedMenuItem.length > 0 ){
     954                                        ListedMenuItem.remove();
     955                                }
     956                                if( this.checked === true ){
     957                                        $('#pending-nav-items-to-deletion-list').append( '<li data-menu-item-id="'+menuItemID+'">'+menuItemLabel+'<span class="separator">, </span></li>' );
     958                                }
     959                                $('#pending-nav-items-to-deletion-list .separator').html(', ');
     960                                $('#pending-nav-items-to-deletion-list .separator').last().html('.');
     961                        });
     962                },
     963
     964                setBulkDeleteCheckboxStatus : function(){
     965
     966                        var that = this;
     967                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
     968
     969                        $.each( checkbox, function(){
     970                               
     971                                if( $(this).prop('disabled') == true ){
     972                                        $(this).prop( 'disabled', false );
     973                                }else{
     974                                        $(this).prop( 'disabled', true );
     975                                }
     976
     977                                if( $(this).is(':checked')) {
     978                                        $(this).prop('checked',false);
     979                                }
     980                        });
     981
     982                        that.setRemoveSelectedButtonStatus();
     983                },
     984
     985                setRemoveSelectedButtonStatus : function(){
     986                       
     987                        var button = $('.menu-items-delete');
     988
     989                        if( $('.menu-item-checkbox:checked').length > 0 ) {
     990                                $('.menu-items-delete').removeClass('disabled');
     991                        }else{
     992                                $('.menu-items-delete').addClass('disabled');
     993                        }
     994                },
     995
    865996                attachMenuSaveSubmitListeners : function() {
    866997                        /*
    867998                         * When a navigation menu is saved, store a JSON representation of all form data

  • src/wp-admin/css/common.css 

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 0f27cc2a2a..0848c93615 100644
    a b th.action-links { 
    11791179
    11801180.show-filters .wp-filter .drawer-toggle:hover,
    11811181.show-filters .wp-filter .drawer-toggle:focus {
    1182         background: #2271b1;
     1182        background: #72aee6;
    11831183}
    11841184
    11851185.show-filters .wp-filter .drawer-toggle:before {
    … … html.wp-toolbar { 
    21282128.postbox .hndle,
    21292129.stuffbox .hndle {
    21302130        -webkit-user-select: none;
     2131        -ms-user-select: none;
    21312132        user-select: none;
    21322133}
    21332134
    … … img { 
    31473148        font-size: 13px;
    31483149        background: #f6f7f7;
    31493150        -moz-tab-size: 4;
     3151        -o-tab-size: 4;
    31503152        tab-size: 4;
    31513153}
    31523154
    … … img { 
    35193521        border-left: 1px solid #dcdcde;
    35203522        border-right: 1px solid #dcdcde;
    35213523        -webkit-user-select: none;
     3524        -ms-user-select: none;
    35223525        user-select: none;
    35233526}
    35243527
    … … img { 
    37503753
    37513754}
    37523755
     3756@-ms-viewport {
     3757        width: device-width;
     3758}
     3759
    37533760@media screen and (max-width: 782px) {
    37543761        html.wp-toolbar {
    37553762                padding-top: 46px;

  • 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..f636a7086e 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 { 
    455568}
    456569
    457570#menu-to-edit .menu-item-invalid .menu-item-handle {
    458         background: #fcf0f1;
    459         border-color: #d63638;
     571        background: #facfd2;
     572        border-color: #ffabaf;
    460573}
    461574
    462575.no-js .menu-item-edit-active .item-edit {
    … … 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}
    … … body.menu-max-depth-11 { min-width: 1280px !important; } 
    8911013}
    8921014
    8931015@media only screen and (min-width: 783px) {
    894     @supports (position: sticky) and (scroll-margin-bottom: 130px) {
     1016    @supports ((position: -webkit-sticky) or (position: sticky)) and (scroll-margin-bottom: 130px) {
    8951017               
    8961018                #nav-menu-footer {
     1019                position: -webkit-sticky;
    8971020                position: sticky;
    8981021                                bottom: 0;
    8991022                                z-index: 10;

  • 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..b3fd319b7f 100644
    a b class Walker_Nav_Menu_Edit extends Walker_Nav_Menu { 
    9292                $classes = array(
    9393                        'menu-item menu-item-depth-' . $depth,
    9494                        'menu-item-' . esc_attr( $item->object ),
    95                         'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id === $_GET['edit-menu-item'] ) ? 'active' : 'inactive' ),
     95                        'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 'active' : 'inactive' ),
    9696                );
    9797
    9898                $title = $item->title;
    … … class Walker_Nav_Menu_Edit extends Walker_Nav_Menu { 
    110110                $title = ( ! isset( $item->label ) || '' === $item->label ) ? $title : $item->label;
    111111
    112112                $submenu_text = '';
    113                 if ( 0 === $depth ) {
     113                if ( 0 == $depth ) {
    114114                        $submenu_text = 'style="display: none;"';
    115115                }
    116116
    … … 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">
    … … class Walker_Nav_Menu_Edit extends Walker_Nav_Menu { 
    157157                                                        ?>
    158158                                                </span>
    159159                                                <?php
    160                                                 if ( isset( $_GET['edit-menu-item'] ) && $item_id === $_GET['edit-menu-item'] ) {
     160                                                if ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) {
    161161                                                        $edit_url = admin_url( 'nav-menus.php' );
    162162                                                } else {
    163163                                                        $edit_url = add_query_arg(

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

    diff --git a/src/wp-admin/nav-menus.php b/src/wp-admin/nav-menus.php
index f224964553..d0e04d2175 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    970970                                        <div id="post-body">
    971971                                                <div id="post-body-content" class="wp-clearfix">
    972972                                                        <?php if ( ! $add_new_screen ) : ?>
    973 
    974973                                                                <?php
    975974                                                                $hide_style = '';
    976975
    … … require_once ABSPATH . 'wp-admin/admin-header.php'; 
    987986                                                                <div class="drag-instructions post-body-plain" <?php echo $hide_style; ?>>
    988987                                                                        <p><?php echo $starter_copy; ?></p>
    989988                                                                </div>
    990 
     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>
    991995                                                                <?php
    992996                                                                if ( isset( $edit_markup ) && ! is_wp_error( $edit_markup ) ) {
    993997                                                                        echo $edit_markup;
    … … require_once ABSPATH . 'wp-admin/admin-header.php'; 
    10131017                                                                $no_menus_style = 'style="display: none;"';
    10141018                                                        }
    10151019                                                        ?>
     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" aria-describedby="pending-nav-items-to-deletion" 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>
    10161031                                                        <div class="menu-settings" <?php echo $no_menus_style; ?>>
    10171032                                                                <h3><?php _e( 'Menu Settings' ); ?></h3>
    10181033                                                                <?php