137 lines
3.9 KiB
JavaScript
137 lines
3.9 KiB
JavaScript
/**
|
|
* Gestionnaire du panneau d'information
|
|
* Gère l'affichage des informations dans un panneau superposé sur la carte
|
|
*/
|
|
|
|
|
|
class InfoPanel {
|
|
constructor() {
|
|
this.panel = document.getElementById('info-panel');
|
|
this.title = document.getElementById('info-panel-title');
|
|
this.content = document.getElementById('info-panel-content');
|
|
this.closeBtn = document.getElementById('info-panel-close');
|
|
this.backBtn = document.getElementById('info-panel-back');
|
|
|
|
// Pile d'historique pour gérer les retours arrière
|
|
this.history = [];
|
|
|
|
this.setupEventListeners();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Bouton fermer
|
|
this.closeBtn.addEventListener('click', () => {
|
|
this.close();
|
|
});
|
|
|
|
// Bouton retour
|
|
this.backBtn.addEventListener('click', () => {
|
|
this.goBack();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Affiche le panneau avec un contenu
|
|
* @param {string} title - Titre du panneau
|
|
* @param {string|HTMLElement} content - Contenu HTML ou élément DOM
|
|
* @param {boolean} addToHistory - Ajouter à l'historique (par défaut true)
|
|
*/
|
|
show(title, content, addToHistory = true) {
|
|
// Sauvegarder l'état actuel dans l'historique si demandé
|
|
if (addToHistory && this.panel.classList.contains('show')) {
|
|
this.history.push({
|
|
title: this.title.textContent,
|
|
content: this.content.innerHTML
|
|
});
|
|
}
|
|
|
|
// Mettre à jour le contenu
|
|
this.title.textContent = title;
|
|
|
|
if (typeof content === 'string') {
|
|
this.content.innerHTML = content;
|
|
} else {
|
|
this.content.innerHTML = '';
|
|
this.content.appendChild(content);
|
|
}
|
|
|
|
// Afficher le panneau
|
|
this.panel.classList.add('show');
|
|
|
|
// Gérer le bouton retour
|
|
if (this.history.length > 0) {
|
|
this.backBtn.style.display = 'inline-block';
|
|
} else {
|
|
this.backBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Met à jour le contenu du panneau sans changer le titre
|
|
* @param {string|HTMLElement} content - Nouveau contenu
|
|
*/
|
|
updateContent(content) {
|
|
if (typeof content === 'string') {
|
|
this.content.innerHTML = content;
|
|
} else {
|
|
this.content.innerHTML = '';
|
|
this.content.appendChild(content);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Revient à l'état précédent dans l'historique
|
|
*/
|
|
goBack() {
|
|
if (this.history.length > 0) {
|
|
const previous = this.history.pop();
|
|
this.show(previous.title, previous.content, false);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Ferme le panneau et vide l'historique
|
|
*/
|
|
close() {
|
|
this.panel.classList.remove('show');
|
|
this.history = [];
|
|
this.backBtn.style.display = 'none';
|
|
|
|
// Nettoyer le contenu
|
|
this.content.innerHTML = '';
|
|
this.title.textContent = '';
|
|
}
|
|
|
|
/**
|
|
* Vérifie si le panneau est ouvert
|
|
*/
|
|
isOpen() {
|
|
return this.panel.classList.contains('show');
|
|
}
|
|
}
|
|
|
|
// Instance globale du panneau
|
|
if (typeof window.infoPanel === 'undefined') {
|
|
window.infoPanel = null;
|
|
}
|
|
|
|
// Fonction d'initialisation
|
|
function initInfoPanel() {
|
|
if (!window.infoPanel) {
|
|
const panel = document.getElementById('info-panel');
|
|
if (panel) {
|
|
window.infoPanel = new InfoPanel();
|
|
} else {
|
|
console.warn('info-panel element not found in DOM');
|
|
}
|
|
}
|
|
return window.infoPanel;
|
|
}
|
|
|
|
// Initialiser au chargement du DOM ou immédiatement si déjà chargé
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initInfoPanel);
|
|
} else {
|
|
// DOM déjà chargé, initialiser immédiatement
|
|
initInfoPanel();
|
|
}
|