190 lines
5.2 KiB
JavaScript
190 lines
5.2 KiB
JavaScript
// Module de gestion du DOM pour les modales
|
|
// Contient les helpers pour accéder et manipuler les éléments DOM de manière optimisée
|
|
|
|
/**
|
|
* Cache pour les éléments DOM fréquemment accédés
|
|
*/
|
|
const domCache = new Map();
|
|
|
|
/**
|
|
* Obtient un élément du DOM avec mise en cache
|
|
* @param {string} elementId - ID de l'élément
|
|
* @returns {HTMLElement|null} - L'élément ou null
|
|
*/
|
|
export function getElement(elementId) {
|
|
if (domCache.has(elementId)) {
|
|
const cached = domCache.get(elementId);
|
|
// Vérifier que l'élément est toujours dans le DOM
|
|
if (cached && document.contains(cached)) {
|
|
return cached;
|
|
}
|
|
domCache.delete(elementId);
|
|
}
|
|
|
|
const element = document.getElementById(elementId);
|
|
if (element) {
|
|
domCache.set(elementId, element);
|
|
}
|
|
return element;
|
|
}
|
|
|
|
/**
|
|
* Vide le cache DOM (à appeler lors de la fermeture du modal)
|
|
*/
|
|
export function clearDomCache() {
|
|
domCache.clear();
|
|
}
|
|
|
|
/**
|
|
* Définit la valeur d'un élément de manière sécurisée
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {*} value - Valeur à définir
|
|
* @returns {boolean} - True si succès
|
|
*/
|
|
export function safeSetValue(elementId, value) {
|
|
const element = getElement(elementId);
|
|
if (!element) {
|
|
return false;
|
|
}
|
|
|
|
// Si c'est un select avec Select2 initialisé
|
|
if (element.tagName === 'SELECT' && window.jQuery && jQuery(element).hasClass('select2-hidden-accessible')) {
|
|
jQuery(element).val(value).trigger('change');
|
|
} else {
|
|
element.value = value;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Récupère la valeur d'un élément de manière sécurisée
|
|
* @param {string} elementId - ID de l'élément
|
|
* @returns {string|null} - Valeur de l'élément ou null
|
|
*/
|
|
export function safeGetValue(elementId) {
|
|
const element = getElement(elementId);
|
|
if (!element) {
|
|
return null;
|
|
}
|
|
return element.value;
|
|
}
|
|
|
|
/**
|
|
* Affiche ou cache un élément
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {boolean} show - True pour afficher, false pour cacher
|
|
*/
|
|
export function toggleElement(elementId, show) {
|
|
const element = getElement(elementId);
|
|
if (element) {
|
|
element.style.display = show ? '' : 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Ajoute une classe à un élément
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {string} className - Classe à ajouter
|
|
*/
|
|
export function addClass(elementId, className) {
|
|
const element = getElement(elementId);
|
|
if (element) {
|
|
element.classList.add(className);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Retire une classe d'un élément
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {string} className - Classe à retirer
|
|
*/
|
|
export function removeClass(elementId, className) {
|
|
const element = getElement(elementId);
|
|
if (element) {
|
|
element.classList.remove(className);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Vérifie si un élément a une classe
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {string} className - Classe à vérifier
|
|
* @returns {boolean} - True si l'élément a la classe
|
|
*/
|
|
export function hasClass(elementId, className) {
|
|
const element = getElement(elementId);
|
|
return element ? element.classList.contains(className) : false;
|
|
}
|
|
|
|
/**
|
|
* Définit le texte HTML d'un élément
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {string} html - HTML à définir
|
|
*/
|
|
export function setHTML(elementId, html) {
|
|
const element = getElement(elementId);
|
|
if (element) {
|
|
element.innerHTML = html;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Définit le texte d'un élément
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {string} text - Texte à définir
|
|
*/
|
|
export function setText(elementId, text) {
|
|
const element = getElement(elementId);
|
|
if (element) {
|
|
element.textContent = text;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Ajoute un event listener à un élément
|
|
* @param {string} elementId - ID de l'élément
|
|
* @param {string} event - Type d'événement
|
|
* @param {Function} handler - Gestionnaire d'événement
|
|
*/
|
|
export function addListener(elementId, event, handler) {
|
|
const element = getElement(elementId);
|
|
if (element) {
|
|
element.addEventListener(event, handler);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Nettoie tous les champs d'un formulaire
|
|
* @param {Array<string>} textFieldIds - IDs des champs texte
|
|
* @param {Array<string>} selectFieldIds - IDs des selects
|
|
*/
|
|
export function clearFormFields(textFieldIds, selectFieldIds) {
|
|
// Nettoyer les champs de texte
|
|
textFieldIds.forEach(fieldId => {
|
|
const field = getElement(fieldId);
|
|
if (field) {
|
|
field.value = '';
|
|
}
|
|
});
|
|
|
|
// Nettoyer les selects
|
|
selectFieldIds.forEach(selectId => {
|
|
const select = getElement(selectId);
|
|
if (select) {
|
|
select.value = '';
|
|
|
|
// Si c'est un <select>, gérer Select2 et les options
|
|
if (select.tagName === 'SELECT' && select.options) {
|
|
if (window.jQuery && jQuery(select).hasClass('select2-hidden-accessible')) {
|
|
jQuery(select).val('').trigger('change');
|
|
}
|
|
Array.from(select.options).forEach(option => {
|
|
option.style.display = '';
|
|
option.disabled = false;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|