From 9af7b84bc4352eb511d2128df82f24cbaa19a091 Mon Sep 17 00:00:00 2001
From: Anh Tran <anhtnt@elightup.com>
Date: Thu, 19 Dec 2024 10:50:00 +0700
Subject: [PATCH] Remove JS for image select

---
 css/image-select.css        | 20 +++++++++++++++-----
 inc/fields/image-select.php |  1 -
 js/image-select.js          | 27 ---------------------------
 3 files changed, 15 insertions(+), 33 deletions(-)
 delete mode 100644 js/image-select.js

diff --git a/css/image-select.css b/css/image-select.css
index 1e9ecbe76..d15344fce 100644
--- a/css/image-select.css
+++ b/css/image-select.css
@@ -1,21 +1,31 @@
 .rwmb-image-select {
-	display: inline-block;
 	width: 80px;
 	height: 80px;
 	float: left;
-	margin: 0 10px 10px 0;
+	margin: 0 8px 8px 0;
 	border: 3px solid #d8d8d8;
-	border-radius: 3px;
+	border-radius: 4px;
 	padding: 1px;
+	cursor: pointer;
+
+	--color: #2271b1;
 }
+
+.block-editor-page .rwmb-image-select {
+	--color: var(--wp-admin-theme-color, #2271b1);
+}
+
 .rwmb-image-select img {
 	width: 100%;
 	height: 100%;
+	object-fit: cover;
 }
+
 .rwmb-image-select:hover,
-.rwmb-image-select.rwmb-active {
-	border-color: #0074a2;
+.rwmb-image-select:has(:checked) {
+	border-color: var(--color);
 }
+
 .rwmb-image_select.rwmb-image_select {
 	display: none;
 }
diff --git a/inc/fields/image-select.php b/inc/fields/image-select.php
index 23c2f4a6d..38f9d6b13 100644
--- a/inc/fields/image-select.php
+++ b/inc/fields/image-select.php
@@ -8,7 +8,6 @@ class RWMB_Image_Select_Field extends RWMB_Field {
 	public static function admin_enqueue_scripts() {
 		wp_enqueue_style( 'rwmb-image-select', RWMB_CSS_URL . 'image-select.css', [], RWMB_VER );
 		wp_style_add_data( 'rwmb-image-select', 'path', RWMB_CSS_DIR . 'image-select.css' );
-		wp_enqueue_script( 'rwmb-image-select', RWMB_JS_URL . 'image-select.js', [ 'jquery' ], RWMB_VER, true );
 	}
 
 	/**
diff --git a/js/image-select.js b/js/image-select.js
deleted file mode 100644
index 6365f8ef1..000000000
--- a/js/image-select.js
+++ /dev/null
@@ -1,27 +0,0 @@
-( function ( $, rwmb ) {
-	'use strict';
-
-	function setActiveClass() {
-		var $this = $( this ),
-			type = $this.attr( 'type' ),
-			selected = $this.is( ':checked' ),
-			$parent = $this.parent(),
-			$others = $parent.siblings();
-		if ( selected ) {
-			$parent.addClass( 'rwmb-active' );
-			if ( type === 'radio' ) {
-				$others.removeClass( 'rwmb-active' );
-			}
-		} else {
-			$parent.removeClass( 'rwmb-active' );
-		}
-	}
-
-	function init( e ) {
-		$( e.target ).find( '.rwmb-image-select input' ).trigger( 'change' );
-	}
-
-	rwmb.$document
-		.on( 'mb_ready', init )
-		.on( 'change', '.rwmb-image-select input', setActiveClass );
-} )( jQuery, rwmb );