From 4c80278a1a05392a826c03d13b8511eb04c42264 Mon Sep 17 00:00:00 2001
From: Denis Yanchevskiy <denis@denisco.pro>
Date: Mon, 29 Nov 2021 15:40:02 +0300
Subject: [PATCH] Improved Settings: check/uncheck Allowed File Types. Resolved
 #48

---
 assets/dco-comment-attachment-admin.css | 22 ++++++++++--
 assets/dco-comment-attachment-admin.js  | 46 +++++++++++++++++++++----
 includes/class-dco-ca-settings.php      |  4 +--
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/assets/dco-comment-attachment-admin.css b/assets/dco-comment-attachment-admin.css
index eafd487..4cda601 100644
--- a/assets/dco-comment-attachment-admin.css
+++ b/assets/dco-comment-attachment-admin.css
@@ -66,18 +66,36 @@
 }
 
 .dco-file-type-name {
-	display: inline-block;
-	margin-bottom: 5px;
+	display: block;
+	margin-right: 5px;
+	padding-bottom: 5px;
+	padding-right: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: 600;
 }
 
 @media (max-width: 782px) {
 
 	.dco-file-type-name {
 		margin-bottom: 10px;
+		margin-left: -0.1rem;
+		padding-top: 0.3rem;
+		padding-left: 0.1rem;
+	}
+}
+
+@media (min-width: 783px) {
+
+	.dco-file-type-name {
+		margin: -1px 0 5px -1px;
+		padding: 1px 5px 0 1px;
 	}
 }
 
 .dco-file-type-item {
+	display: block;
 	margin-bottom: 3px;
 }
 
diff --git a/assets/dco-comment-attachment-admin.js b/assets/dco-comment-attachment-admin.js
index 866eab7..3199f97 100644
--- a/assets/dco-comment-attachment-admin.js
+++ b/assets/dco-comment-attachment-admin.js
@@ -202,16 +202,48 @@
 			}
 		);
 
-		$( '#dco-file-types' ).on( 'click', '.dco-file-type-name', function () {
+		$( '.dco-file-type' ).each( function () {
 			const $this = $( this );
-			const $type = $this.parent();
-			const $checks = $type.find( 'input' );
+			const $checks = $this.find( '.dco-file-type-item-checkbox' );
+			const $checkAll = $this.find( '.dco-file-type-name-checkbox' );
 
-			if ( $checks.not( ':checked' ).length ) {
-				$checks.prop( 'checked', true );
-			} else {
-				$checks.prop( 'checked', false );
+			if ( ! $checks.not( ':checked' ).length ) {
+				$checkAll.prop( 'checked', true );
 			}
 		} );
+
+		$( '#dco-file-types' ).on(
+			'click',
+			'.dco-file-type-name-checkbox',
+			function () {
+				const $this = $( this );
+				const $checks = $this
+					.closest( '.dco-file-type' )
+					.find( '.dco-file-type-item-checkbox' );
+
+				if ( $checks.not( ':checked' ).length ) {
+					$checks.prop( 'checked', true );
+				} else {
+					$checks.prop( 'checked', false );
+				}
+			}
+		);
+
+		$( '#dco-file-types' ).on(
+			'click',
+			'.dco-file-type-item-checkbox',
+			function () {
+				const $this = $( this );
+				const $type = $this.closest( '.dco-file-type' );
+				const $checks = $type.find( '.dco-file-type-item-checkbox' );
+				const $checkAll = $type.find( '.dco-file-type-name-checkbox' );
+
+				if ( $checks.not( ':checked' ).length ) {
+					$checkAll.prop( 'checked', false );
+				} else {
+					$checkAll.prop( 'checked', true );
+				}
+			}
+		);
 	} );
 } )( jQuery ); // eslint-disable-line no-undef
diff --git a/includes/class-dco-ca-settings.php b/includes/class-dco-ca-settings.php
index 4620487..a4a35d5 100644
--- a/includes/class-dco-ca-settings.php
+++ b/includes/class-dco-ca-settings.php
@@ -438,7 +438,7 @@ public function field_allowed_file_types_render( $setting_val, $control_name, $c
 		$more  = 6;
 		foreach ( $types as $type ) {
 			echo '<div class="dco-file-type" style="width: ' . (int) $column_width . 'px;">';
-			echo '<label class="dco-file-type-name">' . $this->mb_ucfirst( esc_html( $type['name'] ) ) . '</label>';
+			echo '<label class="dco-file-type-name" title="' . esc_attr__( 'Click to check/uncheck all extensions of this type.', 'dco-comment-attachment' ) . '"><input type="checkbox" class="dco-file-type-name-checkbox"> ' . $this->mb_ucfirst( esc_html( $type['name'] ) ) . '</label>';
 			echo '<div class="dco-file-type-items">';
 			$i = 1;
 			foreach ( $type['exts'] as $ext ) {
@@ -452,7 +452,7 @@ public function field_allowed_file_types_render( $setting_val, $control_name, $c
 				if ( in_array( $ext, $special_exts, true ) ) {
 					$mark = ' **';
 				}
-				echo '<div class="dco-file-type-item"><label><input type="checkbox" name="' . esc_attr( $control_name ) . '[]" value="' . esc_attr( $ext ) . '"' . checked( in_array( $ext, $setting_val, true ), true, false ) . '> ' . esc_html( $ext . $mark ) . '</label></div>';
+				echo '<label class="dco-file-type-item"><input type="checkbox" class="dco-file-type-item-checkbox" name="' . esc_attr( $control_name ) . '[]" value="' . esc_attr( $ext ) . '"' . checked( in_array( $ext, $setting_val, true ), true, false ) . '> ' . esc_html( $ext . $mark ) . '</label>';
 				$i++;
 			}
 			echo '</div>';