back + CSSinfosJS + liveJS + columns

2025-10-15 12:14:42 +00:00
parent 129f436475
commit 44a3e815c7
6 changed files with 314 additions and 15 deletions
--- a/public/script_html_infos.js
+++ b/public/script_html_infos.js
@@ -0,0 +1,156 @@
+// Création de la boîte d'information
+const infoBox = document.createElement('div');
+infoBox.id = 'info-box';
+infoBox.innerHTML = `
+    <div id="info-toggle">
+        <label>
+            <input type="checkbox" id="toggle-display"> <span id="toggle_hide_text">Masquer</span>
+        </label>
+    </div>
+    <div id="info-content">
+        <div><strong>Élément :</strong> <span id="element-tag"></span></div>
+        <div><strong>ID :</strong> <span id="element-id"></span></div>
+        <div><strong>Classe(s) :</strong> <span id="element-class"></span></div>
+        <div><strong>Parent :</strong> <span id="element-parent"></span></div>
+    </div>
+`;
+
+// Ajout des styles
+const style = document.createElement('style');
+style.textContent = `
+    #info-box {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: #333;
+        color: white;
+        padding: 15px 20px;
+        border-radius: 8px;
+        min-width: 250px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+        font-size: 14px;
+        display: none;
+        z-index: 9999;
+    }
+    
+    #info-box.visible {
+        display: block;
+    }
+    
+    #info-box div {
+        margin: 5px 0;
+    }
+    
+    #info-box strong {
+        color: #4CAF50;
+    }
+    
+    #info-toggle {
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #555;
+    }
+    
+    #info-box.no_infos {
+        max-width: 200px;
+        display: block;
+        overflow: hidden;
+        min-width: auto;
+    }
+
+    #info-box.no_infos {
+        #info-toggle {
+            border-bottom: 0px solid #555;
+            padding: 0;
+            margin: 0;
+        }
+        #toggle_hide_text {
+            display: none;
+        }
+    }
+    #info-toggle label {
+        cursor: pointer;
+        user-select: none;
+    }
+    
+    #info-content.hidden {
+        display: none;
+    }
+    #toggle-display {
+        cursor: pointer;
+    }
+`;
+
+// Injection dans le DOM
+document.head.appendChild(style);
+document.body.appendChild(infoBox);
+
+// Récupération des éléments d'affichage
+const elementTag = document.getElementById('element-tag');
+const elementId = document.getElementById('element-id');
+const elementClass = document.getElementById('element-class');
+const elementParent = document.getElementById('element-parent');
+const toggleCheckbox = document.getElementById('toggle-display');
+const infoContent = document.getElementById('info-content');
+
+// Clé pour le localStorage
+const STORAGE_KEY = 'info-box-hidden-state';
+
+// Fonction pour appliquer l'état
+function applyToggleState(isHidden) {
+    if (isHidden) {
+        infoContent.classList.add('hidden');
+        infoBox.classList.add('no_infos');
+        toggleCheckbox.checked = true;
+    } else {
+        infoContent.classList.remove('hidden');
+        infoBox.classList.remove('no_infos');
+        toggleCheckbox.checked = false;
+    }
+}
+
+// Charger l'état depuis localStorage au démarrage
+const savedState = localStorage.getItem(STORAGE_KEY);
+if (savedState !== null) {
+    applyToggleState(savedState === 'true');
+}
+
+// Gestion du toggle
+toggleCheckbox.addEventListener('change', function() {
+    const isHidden = this.checked;
+    applyToggleState(isHidden);
+    // Sauvegarder l'état dans localStorage
+    localStorage.setItem(STORAGE_KEY, isHidden);
+});
+
+// Écouter l'événement mouseover sur tout le document
+document.addEventListener('mouseover', function(e) {
+    const el = e.target;
+    
+    // Ignorer la boîte d'info elle-même
+    if (el.closest('#info-box')) {
+        return;
+    }
+    
+    // Récupérer les informations
+    const tag = el.tagName.toLowerCase();
+    const id = el.id || '(aucun)';
+    const classes = el.className || '(aucune)';
+    const parent = el.parentElement ? el.parentElement.tagName.toLowerCase() : '(aucun)';
+    
+    // Afficher les informations
+    elementTag.textContent = tag;
+    elementId.textContent = id;
+    elementClass.textContent = classes;
+    elementParent.textContent = parent;
+    
+    // Rendre la boîte visible
+    infoBox.classList.add('visible');
+});
+
+// Optionnel : cacher la boîte quand on quitte la page
+document.addEventListener('mouseout', function(e) {
+    if (e.relatedTarget === null) {
+        infoBox.classList.remove('visible');
+    }
+});