From 80af2dc25e721193de2f76208bf273f3ec75d866 Mon Sep 17 00:00:00 2001
From: rxu <rxu@mail.ru>
Date: Mon, 19 May 2025 22:23:06 +0700
Subject: [PATCH] [ticket/16413] refactor JQuery to pure Javascript

PHPBB3-16413
---
 phpBB/adm/style/admin.js | 61 ++++++++++++++++++++++++++++++++++++++++
 phpBB/adm/style/ajax.js  | 53 ----------------------------------
 2 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js
index ff89458ca8..38a90592c6 100644
--- a/phpBB/adm/style/admin.js
+++ b/phpBB/adm/style/admin.js
@@ -244,6 +244,67 @@ function parse_document(container)
 	});
 }
 
+/**
+* Automatically display custom profile fields FontAwesome icon
+*/
+const DEFAULT_COLOR = '#000000';
+const HEX_REGEX = /^#[A-Fa-f0-9]{6}$/;
+const colorPicker = document.getElementById('field_icon_color_picker');
+const colorText = colorPicker.previousElementSibling;
+
+const syncColors = (source, target) => {
+	const value = '#' + source.value.trim();
+	target.value = HEX_REGEX.test(value) ? value : DEFAULT_COLOR;
+};
+
+const handleInput = ({ target }) => {
+	if (target === colorPicker) {
+		colorText.value = target.value.substring(1);
+	} else {
+		syncColors(colorText, colorPicker);
+	}
+	const icon = field_icon?.nextElementSibling;
+	if (icon && icon.tagName.toLowerCase() === 'i') {
+		icon.style.color = colorPicker.value;
+	}
+};
+
+colorPicker.addEventListener('input', handleInput);
+colorText.addEventListener('input', handleInput);
+colorText.addEventListener('blur', () => {
+	if (!colorText.value.trim()) {
+		colorPicker.value = DEFAULT_COLOR;
+	}
+});
+syncColors(colorText, colorPicker);
+
+var field_icon = document.getElementById('field_icon');
+if (!field_icon.nextElementSibling) {
+	icon_demo = document.createElement('i');
+	icon_demo.setAttribute('style', `margin:0 6px; color: ${colorPicker.value}`);
+	icon_demo.setAttribute('class', `o-icon o-icon-font fa-fw fas acp-icon`);
+	field_icon.after(icon_demo);
+}
+
+const updateIconClass = (element, newClass) => {
+
+	element.classList.forEach(className => {
+		if (className.startsWith('fa-') && className !== 'fa-fw') {
+			element.classList.remove(className);
+		}
+	});
+
+	element.classList.add(`fa-${newClass}`);
+};
+
+field_icon.addEventListener('keyup', function() {
+	updateIconClass(this.nextElementSibling, this.value);
+});
+
+field_icon.addEventListener('blur', function() {
+	updateIconClass(this.nextElementSibling, this.value);
+});
+
 /**
 * Run onload functions
 */
diff --git a/phpBB/adm/style/ajax.js b/phpBB/adm/style/ajax.js
index 18ed04d9ef..2c364bcd86 100644
--- a/phpBB/adm/style/ajax.js
+++ b/phpBB/adm/style/ajax.js
@@ -420,58 +420,5 @@ $(function() {
 	}
 });
 
-/**
-* Automatically display custom profile fields FontAwesome icon
-*/
-$(function() {
-	var $field_icon = $('#field_icon');
-	if (!$field_icon.next('i').length) {
-		$field_icon.after('<i style="font-size: 16px; margin:0 6px; vertical-align: middle;"></i>');
-	}
-
-	$field_icon.on('keyup blur', function() {
-		var input = $(this).val();
-		var $icon = $(this).next('i');
-		$icon.attr('class', 'o-icon o-icon-font fa-fw fa-' + input + ' fas acp-icon');
-	});
-
-	const DEFAULT_COLOR = '#000000';
-	const HEX_REGEX = /^#[A-Fa-f0-9]{6}$/;
-	const colorPicker = document.getElementById('field_icon_color_picker');
-
-	if (!colorPicker) {
-		return;
-	}
-
-	const colorText = colorPicker.previousElementSibling;
-
-	if (!colorText || colorText.type !== 'text') {
-		return;
-	}
-
-	const syncColors = (source, target) => {
-		const value = '#' + source.value.trim();
-		target.value = HEX_REGEX.test(value) ? value : DEFAULT_COLOR;
-	};
-
-	const handleInput = ({ target }) => {
-		if (target === colorPicker) {
-			colorText.value = target.value.substring(1);
-		} else {
-			syncColors(colorText, colorPicker);
-		}
-		var icon = $field_icon.next('i');
-		icon.css('color', colorPicker.value);
-	};
-
-	colorPicker.addEventListener("input", handleInput);
-	colorText.addEventListener("input", handleInput);
-	colorText.addEventListener('blur', () => {
-		if (!colorText.value.trim()) {
-			colorPicker.value = DEFAULT_COLOR;
-		}
-	});
-	syncColors(colorText, colorPicker);
-});
 
 })(jQuery); // Avoid conflicts with other libraries