mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-05 04:52:58 +00:00
te
This commit is contained in:
+21
-18
@@ -2445,7 +2445,9 @@ function initIconPicker() {
|
||||
|
||||
let isModalOpen = false;
|
||||
|
||||
// Simple show/hide functions
|
||||
|
||||
|
||||
// Improved modal toggle with cleanup
|
||||
const toggleModal = () => {
|
||||
isModalOpen = !isModalOpen;
|
||||
document.body.style.overflow = isModalOpen ? 'hidden' : '';
|
||||
@@ -2455,9 +2457,17 @@ function initIconPicker() {
|
||||
// Focus search input only after modal is visible
|
||||
requestAnimationFrame(() => {
|
||||
if (iconSearch) {
|
||||
iconSearch.value = '';
|
||||
renderIcons('');
|
||||
iconSearch.focus();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Reset search when closing
|
||||
if (iconSearch) {
|
||||
iconSearch.value = '';
|
||||
renderIcons('');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -2470,19 +2480,13 @@ function initIconPicker() {
|
||||
|
||||
// Close modal handlers
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener('click', () => {
|
||||
isModalOpen = false;
|
||||
document.body.style.overflow = '';
|
||||
iconPickerModal.style.display = 'none';
|
||||
});
|
||||
closeButton.addEventListener('click', toggleModal);
|
||||
}
|
||||
|
||||
// Close when clicking outside the modal content
|
||||
iconPickerModal.addEventListener('click', (e) => {
|
||||
if (e.target === iconPickerModal) {
|
||||
isModalOpen = false;
|
||||
document.body.style.overflow = '';
|
||||
iconPickerModal.style.display = 'none';
|
||||
if (e.target === iconPickerModal && isModalOpen) {
|
||||
toggleModal();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2490,19 +2494,20 @@ function initIconPicker() {
|
||||
if (iconList) {
|
||||
iconList.addEventListener('click', (e) => {
|
||||
const iconOption = e.target.closest('.icon-option');
|
||||
if (iconOption) {
|
||||
if (iconOption && isModalOpen) {
|
||||
const iconClass = iconOption.getAttribute('data-icon');
|
||||
selectIcon(iconClass);
|
||||
toggleModal(); // Close modal after selection
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle search
|
||||
// Handle search with improved debounce
|
||||
if (iconSearch) {
|
||||
let searchTimeout;
|
||||
iconSearch.addEventListener('input', () => {
|
||||
// Debounce search to prevent excessive re-renders
|
||||
clearTimeout(iconSearch.dataset.searchTimeout);
|
||||
iconSearch.dataset.searchTimeout = setTimeout(() => {
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
renderIcons(iconSearch.value.toLowerCase());
|
||||
}, 200);
|
||||
});
|
||||
@@ -2514,9 +2519,7 @@ function initIconPicker() {
|
||||
// Close on Escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && isModalOpen) {
|
||||
isModalOpen = false;
|
||||
document.body.style.overflow = '';
|
||||
iconPickerModal.style.display = 'none';
|
||||
toggleModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user