makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-07 20:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/16413] refactor JQuery to pure Javascript

Browse source 
PHPBB3-16413
This commit is contained in:
rxu 2025-05-19 22:23:06 +07:00
parent dbe91cac88
commit 80af2dc25e
No known key found for this signature in database
GPG key ID: 8117904FEDEFDD17
2 changed files with 61 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
phpBB/adm/style/admin.js
View file

@ -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
*/

53
phpBB/adm/style/ajax.js
View file

@ -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