Improved Settings: check/uncheck Allowed File Types. Resolved #48

yadenis · Nov 29, 2021 · 4c80278 · 4c80278
1 parent c924472
commit 4c80278
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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>';