Panneau valeur variable Objet/Tableau : bouton +Ajouter visible et sauvegarde auto

Deux retours utilisateur sur le panneau "Configurer la valeur" ajouté au
commit précédent :
- le bouton "+ Ajouter" (style is-outlined) se voyait mal dans le panneau
  sombre -> repassé en bouton "primary" pleine largeur, et déplacé sous la
  liste des lignes (là où on l'attend pour ajouter une ligne de plus,
  plutôt qu'au-dessus, hors du flux de lecture) ;
- le bouton "OK - utiliser cette valeur" était un aller-retour inutile :
  supprimé. Chaque changement (texte tapé, clé, type, ajout ou retrait
  d'une ligne) réécrit désormais tout de suite le JSON dans le champ
  cible via saveVarValuePanel(), écoutée sur les événements input/change
  du conteneur des lignes - exactement comme si on tapait directement
  dans le champ, sans étape de validation séparée.

Aucun changement Python (127 tests toujours au vert) ; vérifié la syntaxe
du <script> rendu de l'onglet Variables via node --check.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-27 14:56:03 +02:00
co-authored by Claude Sonnet 5
parent 1b24df9546
commit 82a14fcb2b
+15 -8
View File
@@ -219,9 +219,8 @@
</div>
<div class="floatPanelBody">
<p class="hint mb-2" id="varValuePanelHint"></p>
<button type="button" class="button is-outlined is-fullwidth mb-2" onclick="addVarValueRow()">+ Ajouter</button>
<div id="varValueRows"></div>
<div class="actionsRow"><button type="button" class="primary" onclick="applyVarValuePanel()">OK — utiliser cette valeur</button></div>
<button type="button" class="button primary is-fullwidth mt-2" onclick="addVarValueRow()">+ Ajouter une ligne</button>
</div>
<div class="floatPanelResizeHandle" id="varValuePanelResizeHandle"></div>
</div>
@@ -1014,8 +1013,9 @@ function switchObjectPanelTab(btn, tab) {
// Un seul panneau partagé (voir le commentaire sur son HTML) : à
// l'ouverture, mémorise vers quel <input> (targetId) le JSON reconstruit
// devra être réécrit, construit une ligne par clé/élément déjà présent
// dans le JSON actuel de cet <input>, puis "OK" sérialise les lignes et
// referme.
// dans le JSON actuel de cet <input>. Pas de bouton "OK" : chaque
// changement de ligne réécrit tout de suite le JSON (saveVarValuePanel),
// exactement comme si on tapait directement dans le champ cible.
(function () {
var panel = document.getElementById('varValuePanel');
var rowsWrap = document.getElementById('varValueRows');
@@ -1050,14 +1050,21 @@ function switchObjectPanelTab(btn, tab) {
if (key !== null) row.querySelector('.varValueKey').value = key;
row.querySelector('.varValueType').value = type;
row.querySelector('.varValueValue').value = valueTextOf(value, type);
row.querySelector('.varValueRemoveBtn').addEventListener('click', function () { row.remove(); });
row.querySelector('.varValueRemoveBtn').addEventListener('click', function () { row.remove(); saveVarValuePanel(); });
rowsWrap.appendChild(clone);
}
window.addVarValueRow = function () {
addRowFrom(panel.dataset.mode === 'tableau' ? null : '', '');
saveVarValuePanel();
};
// Enregistrement automatique : pas de bouton "OK" — chaque changement
// (clé, type, valeur, ajout/retrait de ligne) réécrit tout de suite le
// JSON dans le champ cible, comme si on tapait directement dedans.
rowsWrap.addEventListener('input', saveVarValuePanel);
rowsWrap.addEventListener('change', saveVarValuePanel);
window.openVarValuePanel = function (targetInputId, mode) {
var input = document.getElementById(targetInputId);
if (!input) return;
@@ -1084,7 +1091,8 @@ function switchObjectPanelTab(btn, tab) {
panel.classList.add('hidden');
};
window.applyVarValuePanel = function () {
function saveVarValuePanel() {
if (panel.classList.contains('hidden')) return;
var mode = panel.dataset.mode;
var result = mode === 'tableau' ? [] : {};
rowsWrap.querySelectorAll('.varValueRow').forEach(function (row) {
@@ -1102,8 +1110,7 @@ function switchObjectPanelTab(btn, tab) {
input.value = JSON.stringify(result);
input.dispatchEvent(new Event('input', { bubbles: true }));
}
closeVarValuePanel();
};
}
})();
</script>
{% endblock %}