101 lines
2.1 KiB
JavaScript
101 lines
2.1 KiB
JavaScript
// 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>Parent :</strong> <span id="element-parent"></span></div>
|
|
<div><strong>Enfant :</strong> <span id="element-info"></span></div>
|
|
</div>
|
|
`;
|
|
|
|
// Ajout des styles
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
#info-box {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 40px;
|
|
background: #333;
|
|
color: white;
|
|
padding: 10px 11px;
|
|
border-radius: 8px 8px 0 0;
|
|
min-width: 250px;
|
|
max-width: 250px;
|
|
overflow: hidden;
|
|
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;
|
|
}
|
|
.info_id {
|
|
color: #ff0095;
|
|
}
|
|
.info_class {
|
|
color:rgb(0, 200, 215);
|
|
}
|
|
.info_el {
|
|
color:rgb(0, 179, 255);
|
|
}
|
|
.info_prop {
|
|
margin-right: 2px;
|
|
}
|
|
`;
|
|
|
|
// Injection dans le DOM
|
|
document.head.appendChild(style);
|
|
// document.body.appendChild(infoBox);
|
|
|
|
|
|
|
|
|