Merge pull request #7 from rlankhorst/use-popover-for-values

use popover for values
ProgressPlanner · Apr 19, 2024 · 4808bd8 · 4808bd8
2 parents b13cb1f + 0c93c5a
commit 4808bd8
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 21 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,51 @@
+.aaa_option_table {
+	margin-left: -5px;
+	border-spacing: 0;
+}
+.aaa_option_table td, .aaa_option_table th {
+	padding: 5px 10px 5px 5px;
+	text-align: left;
+	width: 25%;
+}
+.aaa_option_table tr:nth-child(even) {
+	background-color: #fff;
+}
+.aaa_option_table tr:hover {
+	background-color: #ddd;
+}
+div.dt-container .dt-input {
+	padding: 5px 20px 5px 10px !important;
+	max-width: none !important;
+}
+.aaa-option-optimizer-popover {
+	font-family: sans-serif;
+	overflow: visible;
+	padding: 40px 40px 20px 20px;
+	position: fixed;
+	word-wrap: break-word;
+	max-width: 80%;
+	min-height: 200px;
+}
+.aaa-option-optimizer-popover pre {
+	padding: 10px;
+	min-width: 300px;
+	border: 1px solid #ccc;
+	background-color: #eee;
+	overflow: auto;
+}
+.aaa-option-optimizer-popover::backdrop {
+	background: rgba(0, 0, 0, 0.75);
+}
+.aaa-option-optimizer-popover__close {
+	background: none !important;
+	border: none;
+	padding: 5px;
+	margin: 5px;
+	z-index: 10;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+.aaa-option-optimizer-popover__close:hover {
+	cursor: pointer;
+}
diff --git a/js/admin-script.js b/js/admin-script.js
@@ -7,18 +7,20 @@
 jQuery( document ).ready(
 	function ($) {
 		if ( $( '#unused_options_table' ).length ) {
-			var table1 = new DataTable( '#unused_options_table', { responsive: true, columns: [ { width: '20%' }, { searchable: false, width: '10%' }, { searchable: false, width: '50%' }, { searchable: false, width: '20%' } ] } );
+			var table1 = new DataTable( '#unused_options_table', { responsive: true, columns: [ { width: '30%' }, { searchable: false, width: '10%' }, { searchable: false, width: '20%' }, { searchable: false, width: '20%' } ] } );
 		}
 		if ( $( '#used_not_autloaded_table' ).length ) {
-			var table2 = new DataTable( '#used_not_autloaded_table', { columns: [ null, { searchable: false }, { searchable: false }, { searchable: false }, { searchable: false } ] } );
+			var table2 = new DataTable( '#used_not_autloaded_table', { columns: [ null, { width: '30%', searchable: false }, { width: '15%', searchable: false }, { width: '15%', searchable: false }, { width: '15%', searchable: false } ] } );
 		}
 		if ( $( '#requested_do_not_exist_table' ).length ) {
 			var table3 = new DataTable( '#requested_do_not_exist_table', { columns: [ null, { searchable: false }, { searchable: false } ] } );
 		}
 
 		// Handle the "Remove Autoload" button click.
-		$( 'table tbody' ).on( 
-			'click', '.add-autoload', function (e) {
+		$( 'table tbody' ).on(
+			'click',
+			'.add-autoload',
+			function (e) {
 				e.preventDefault();
 				var optionName = $( this ).data( 'option' );
 
@@ -45,8 +47,10 @@ jQuery( document ).ready(
 			}
 		);
 
-		$( 'table tbody' ).on( 
-			'click', '.remove-autoload', function (e) {
+		$( 'table tbody' ).on(
+			'click',
+			'.remove-autoload',
+			function (e) {
 				e.preventDefault();
 				console.log( 'test remove-autoload' );
 				var optionName = $( this ).data( 'option' );
@@ -75,8 +79,10 @@ jQuery( document ).ready(
 		);
 
 		// Handle the "Delete Option" button click.
-		$( 'table tbody' ).on( 
-			'click', '.delete-option', function (e) {
+		$( 'table tbody' ).on(
+			'click',
+			'.delete-option',
+			function (e) {
 				e.preventDefault();
 				var optionName = $( this ).data( 'option' );
 

diff --git a/phpcs.xml.dist b/phpcs.xml.dist
@@ -20,7 +20,6 @@
 
 	<!-- Exclude the Coverage output directory. -->
 	<exclude-pattern>/coverage/*</exclude-pattern>
-
 	<exclude-pattern>/js/vendor/*</exclude-pattern>
 
 	<!-- Exclude minified Javascript files. -->

diff --git a/src/class-admin-page.php b/src/class-admin-page.php
@@ -34,8 +34,23 @@ public function add_admin_page() {
 
 	/**
 	 * Enqueue our scripts.
+	 *
+	 * @param string $hook The current page hook.
+	 *
+	 * @return void
 	 */
-	public function enqueue_scripts() {
+	public function enqueue_scripts( $hook ) {
+		if ( $hook !== 'tools_page_aaa-option-optimizer' ) {
+			return;
+		}
+
+		wp_enqueue_style(
+			'aaa-option-optimizer',
+			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'css/style.css',
+			[],
+			'2.0.1'
+		);
+
 		wp_enqueue_script(
 			'datatables',
 			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'js/vendor/dataTables.min.js',
@@ -156,15 +171,6 @@ function ( $value, $key ) {
 		}
 
 		// Start HTML output.
-		echo '<style>
-			.aaa_option_table { margin-left: -5px; border-spacing: 0; }
-			.aaa_option_table td, .aaa_option_table th { padding: 5px 10px 5px 5px; text-align: left; width: 25%; }
-			.aaa_option_table tr:nth-child(even) { background-color: #fff; }
-			.aaa_option_table tr:hover { background-color: #ddd; }
-			.aaa_option_table td.value code { display:block; max-width: 200px; height: 20px; overflow: hidden; }
-			div.dt-container .dt-input { padding: 5px 20px 5px 10px !important; max-width: none !important; }
-
-		</style>';
 		echo '<div class="wrap"><h1>' . esc_html__( 'AAA Option Optimizer', 'aaa-option-optimizer' ) . '</h1>';
 
 		global $wpdb;
@@ -210,7 +216,10 @@ function ( $value, $key ) {
 			foreach ( $unused_options as $option => $value ) {
 				echo '<tr id="option_' . esc_attr( str_replace( ':', '', str_replace( '.', '', $option ) ) ) . '"><td>' . esc_html( $option ) . '</td>';
 				echo '<td>' . esc_html( $this->get_length( $value ) ) . 'KB</td>';
-				echo '<td class="value">' . esc_html( $this->print_value( $value ) ) . '</td>';
+				echo '<td class="value">';
+				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- output escaped in get_popover_html.
+				echo $this->get_popover_html( $option, $value );
+				echo '</td>';
 				echo '<td><button class="button remove-autoload" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Remove Autoload', 'aaa-option-optimizer' ) . '</button> ';
 				echo ' <button class="button delete-option" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Delete Option', 'aaa-option-optimizer' ) . '</button></td></tr>';
 			}
@@ -239,7 +248,10 @@ function ( $value, $key ) {
 				echo '<tr id="option_' . esc_attr( str_replace( ':', '', str_replace( '.', '', $option ) ) ) . '">';
 				echo '<td>' . esc_html( $option ) . '</td>';
 				echo '<td>' . esc_html( $this->get_length( $arr['value'] ) ) . 'KB</td>';
-				echo '<td class="value">' . esc_html( $this->print_value( $arr['value'] ) ) . '</td>';
+				echo '<td class="value">';
+				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- output escaped in get_popover_html.
+				echo $this->get_popover_html( $option, $arr['value'] );
+				echo '</td>';
 				echo '<td>' . esc_html( $arr['count'] ) . '</td>';
 				echo '<td><button class="button add-autoload" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Add Autoload', 'aaa-option-optimizer' ) . '</button> ';
 			}
@@ -273,4 +285,25 @@ function ( $value, $key ) {
 
 		echo '</div>'; // Close .wrap.
 	}
+
+	/**
+	 * Get html to show a popover.
+	 *
+	 * @param string $name  The name of the option, used in the id of the popover.
+	 * @param mixed  $value The value to show.
+	 *
+	 * @return string
+	 */
+	private function get_popover_html( string $name, $value ): string {
+		$string = is_string( $value ) ? $value : wp_json_encode( $value );
+		$id     = 'aaa-option-optimizer-' . esc_attr( $name );
+		return '
+		<button class="button" popovertarget="' . $id . '">' . esc_html__( 'Show value', 'aaa-option-optimizer' ) . '</button>
+		<div id="' . $id . '" popover class="aaa-option-optimizer-popover">
+		<button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>' .
+		// translators: %s is the name of the option.
+		'<p><strong>' . sprintf( esc_html__( 'Value of %s', 'aaa-option-optimizer' ), '<code>' . esc_html( $name ) . '</code>' ) . '</strong></p>
+		<pre>' . esc_html( $string ) . '</pre>
+		</div>';
+	}
 }