Ticket #21603: 21603.3.diff

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

@@ -44 +44 @@
                         this.jQueryExtensions();
 
                         this.attachMenuEditListeners();
+                        
+                        this.attachBulkSelectButtonListeners();
+                        this.attachCancelBulkSelectButtonListeners();
+                        this.attachMenuCheckBoxListeners();
 
                         this.attachQuickSearchListeners();
                         this.attachThemeLocationsListeners();
@@ -862 +866 @@
                         });
                 },
 
+                attachCancelBulkSelectButtonListeners : function() {
+                        var that = this;
+                        
+                        $('.cancel-bulk-select').on( 'click', function(e){
+                                e.preventDefault();
+                                that.disableBulkSelection();
+                        });
+
+                },
+
+                attachBulkSelectButtonListeners : function() {
+                        var that = this;
+                        
+                        $('.enable-bulk-select').on( 'click', function(e){
+                                e.preventDefault();
+                                that.enableBulkSelection();
+                        });
+
+                },
+
+                enableBulkSelection : function(){
+                        $('#menu-to-edit').addClass('bulk-selection');
+                        $('#nav-menu-bulk-actions').addClass('bulk-selection');
+                        
+                        $('.enable-bulk-select').prop('disabled',true);
+                        $('.cancel-bulk-select').prop('disabled',false);
+
+                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
+                        $.each( checkbox, function(){
+                                $(this).prop('disabled',false);
+                        });
+                },
+
+                disableBulkSelection : function(){
+                        $('#menu-to-edit').removeClass('bulk-selection');
+                        $('#nav-menu-bulk-actions').removeClass('bulk-selection');
+                        
+                        $('.enable-bulk-select').prop('disabled',false);
+                        $('.cancel-bulk-select').prop('disabled',true);
+
+                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
+                        $.each( checkbox, function(){
+                                $(this).prop('disabled',true).prop('checked',false);
+                        });
+                        $('.menu-items-delete').addClass('disabled');
+                },
+                
+
+                attachMenuCheckBoxListeners : function() {
+                        var that = this;
+                                
+                        $( '#menu-to-edit' ).on( 'change','.menu-item-checkbox', function(){
+                        that.setRemoveSelectedButtonStatus();
+                        });
+                                
+                        $( document ).on('click', '.menu-items-delete', function(e){
+                        e.preventDefault();
+
+                                if( ! $(this).hasClass('disabled') ){
+                                        $.each( $('.menu-item-checkbox:checked'), function( index, element) {
+                                                $( element ).parents( 'li' ).find( 'a.item-delete' ).trigger( 'click' );
+                                        });
+
+                                        $('.menu-items-delete').addClass('disabled');
+                                        $('input.cancel-bulk-select').trigger('click');
+                                }
+                        });
+                },
+
+                setBulkDeleteCheckboxStatus : function(){
+
+                        var that = this;
+                        var checkbox = $('#menu-to-edit .menu-item-checkbox');
+
+                        $.each( checkbox, function(){
+                                
+                                if( $(this).prop('disabled') == true ){
+                                        $(this).prop( 'disabled', false );
+                                }else{
+                                        $(this).prop( 'disabled', true );
+                                }
+
+                                if( $(this).is(':checked')) {
+                                        $(this).prop('checked',false);
+                                }
+                        });
+
+                        that.setRemoveSelectedButtonStatus();
+
+                },
+
+                setRemoveSelectedButtonStatus : function(){
+                        
+                        var button = $('.menu-items-delete');
+
+                        if( $('.menu-item-checkbox:checked').length > 0 ) {
+                                $('.menu-items-delete').removeClass('disabled');
+                        }else{
+                                $('.menu-items-delete').addClass('disabled');
+                        }
+                },
+                                
+                oveSelectedButtonStatus : function(){
+                        var button = $('.menu-items-delete');
+                        if( $('.menu-item-checkbox:checked').length > 0 ) {
+                        button.prop('disabled', false);
+                        }else{
+                        button.prop('disabled', true);
+                        }
+                },
+                
                 attachMenuSaveSubmitListeners : function() {
                         /*
                          * When a navigation menu is saved, store a JSON representation of all form data

src/wp-admin/css/common.css

@@ -878 +878 @@
 #media-items a.delete,
 #media-items a.delete-permanently,
 #nav-menu-footer .menu-delete,
+#nav-menu-bulk-actions input.menu-items-delete,
 #delete-link a.delete {
         color: #b32d2e;
 }
@@ -895 +896 @@
 #media-items a.delete:hover,
 #media-items a.delete-permanently:hover,
 #nav-menu-footer .menu-delete:hover,
+#nav-menu-bulk-actions input.menu-items-delete:hover,
 #delete-link a.delete:hover {
         color: #b32d2e;
         border: none;

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

@@ -97 +97 @@
         margin: 1em 0 10px;
 }
 
+#nav-menu-bulk-actions {
+        margin-top: 2em;
+}
+
+#nav-menu-bulk-actions input.button {
+        margin-right: 12px;
+}
+
+#nav-menu-bulk-actions input.cancel-bulk-select,
+#nav-menu-bulk-actions input.menu-items-delete {
+        display: none;
+}
+
+#nav-menu-bulk-actions.bulk-selection  input.cancel-bulk-select, 
+#nav-menu-bulk-actions.bulk-selection  input.menu-items-delete {
+        display: inline-block;
+}
+
+#nav-menu-bulk-actions input.menu-items-delete {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        font-size: inherit;
+        border: 0;
+        line-height: 2.1em;
+        background: none;
+        cursor: pointer;
+        text-decoration: underline;
+}
+
+#nav-menu-bulk-actions input.menu-items-delete.disabled {
+        cursor: default;
+        color: #a7aaad;
+        box-shadow: none;
+}
+
+#nav-menu-bulk-actions.bulk-selection input.enable-bulk-select {
+        display: none;
+}
+
 .menu-settings {
         border-top: 1px solid #f0f0f1;
         margin-top: 2em;
@@ -481 +521 @@
         margin-right: 13em;
 }
 
+.menu-item-handle input[type=checkbox] {
+        display: none;
+}
+
+.bulk-selection .menu-item-handle input[type=checkbox] {
+        display: inline-block;
+}
+
 .menu-item-handle .menu-item-title.no-title {
         color: #646970;
 }

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

@@ -118 +118 @@
                 <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode( ' ', $classes ); ?>">
                         <div class="menu-item-bar">
                                 <div class="menu-item-handle">
-                                        <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>
+                                        <span class="item-title"><input type="checkbox" class="menu-item-checkbox" 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></span>
                                         <span class="item-controls">
                                                 <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
                                                 <span class="item-order hide-if-js">

src/wp-admin/nav-menus.php

@@ -1013 +1013 @@
                                                                 $no_menus_style = 'style="display: none;"';
                                                         }
                                                         ?>
+                                                        <div id="nav-menu-bulk-actions" class="bulk-actions">
+                                                                <input type="button" class="button enable-bulk-select" value="<?php echo __( 'Bulk Select' ) ; ?>">
+                                                                <input type="button" class="button cancel-bulk-select" value="<?php echo __( 'Cancel Selection' ) ; ?>">
+                                                                <input type="button" class="deletion menu-items-delete disabled" value="<?php echo __( 'Remove Selected Items' ) ; ?>">
+                                                        </div>
                                                         <div class="menu-settings" <?php echo $no_menus_style; ?>>
                                                                 <h3><?php _e( 'Menu Settings' ); ?></h3>
                                                                 <?php