diff --git a/assets/js/plugin-check-admin.js b/assets/js/plugin-check-admin.js index b091e5c82..68520774b 100644 --- a/assets/js/plugin-check-admin.js +++ b/assets/js/plugin-check-admin.js @@ -108,6 +108,15 @@ for ( let i = 0; i < categoriesList.length; i++ ) { categoriesList[ i ].disabled = false; } + + // Adding Open All/Collapse All button + if ( resultsContainer.innerHTML !== '' ) { + resultsContainer.innerHTML = + '
' + + resultsContainer.innerHTML; + } } /** @@ -467,4 +476,61 @@ const template = templates[ templateSlug ]; return template( data ); } + + /** + * Manage collapse/open tables click event + */ + document.addEventListener( 'click', function ( e ) { + const button = e.target; + // Manage Collapse/Open All tables separately. + if ( button.classList.contains( 'collapse-btn' ) ) { + const dataIndex = button + .closest( '.plugin-check__results-heading' ) + .getAttribute( 'data-index' ); + const tableContainer = document.querySelector( + '#plugin-check__results-table-' + dataIndex + ); + + // Toggle the visibility of the table container. + if ( tableContainer.style.display === 'none' ) { + tableContainer.style.display = 'table'; + button.innerHTML = PLUGIN_CHECK.collapse; + } else { + tableContainer.style.display = 'none'; + button.innerHTML = PLUGIN_CHECK.open; + } + } + + // Manage Collapse/Open All tables together. + if ( button.classList.contains( 'collapse-all' ) ) { + const tableContainers = document.querySelectorAll( + '.plugin-check__results-table' + ); + const buttons = document.querySelectorAll( '.collapse-btn' ); + const state = button.getAttribute( 'data-state' ); + const isVisible = state && state === 'open'; + + // Collapase/Open All tables. + tableContainers.forEach( function ( tableContainer ) { + tableContainer.style.display = isVisible ? 'none' : 'table'; + } ); + + // Change All buttons text. + buttons.forEach( function ( _button ) { + _button.innerHTML = isVisible ? 'Open' : 'Collapse'; + _button.setAttribute( + 'data-state', + isVisible ? 'closed' : 'open' + ); + } ); + + // Change Collapse All/Open All Button text. + button.innerHTML = isVisible + ? PLUGIN_CHECK.openAll + : PLUGIN_CHECK.collapseAll; + + // Change Collapse All/Open All Button attribute. + button.setAttribute( 'data-state', isVisible ? 'closed' : 'open' ); + } + } ); } )( PLUGIN_CHECK ); /* global PLUGIN_CHECK */ diff --git a/includes/Admin/Admin_Page.php b/includes/Admin/Admin_Page.php index 7d0a93d27..47a499760 100644 --- a/includes/Admin/Admin_Page.php +++ b/includes/Admin/Admin_Page.php @@ -118,6 +118,10 @@ public function enqueue_scripts() { 'actionCleanUpRuntimeEnvironment' => Admin_AJAX::ACTION_CLEAN_UP_ENVIRONMENT, 'successMessage' => __( 'No errors found.', 'plugin-check' ), 'errorMessage' => __( 'Errors were found.', 'plugin-check' ), + 'collapseAll' => __( 'Collapse All', 'plugin-check' ), + 'openAll' => __( 'Open All', 'plugin-check' ), + 'collapse' => __( 'Collapse', 'plugin-check' ), + 'open' => __( 'Open', 'plugin-check' ), ) ), 'before' diff --git a/templates/results-table.php b/templates/results-table.php index 2c10949b2..12d891c22 100644 --- a/templates/results-table.php +++ b/templates/results-table.php @@ -1,4 +1,7 @@ -