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:
co-authored by
Claude Sonnet 5
parent
1b24df9546
commit
82a14fcb2b
@@ -219,9 +219,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="floatPanelBody">
|
<div class="floatPanelBody">
|
||||||
<p class="hint mb-2" id="varValuePanelHint"></p>
|
<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 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>
|
||||||
<div class="floatPanelResizeHandle" id="varValuePanelResizeHandle"></div>
|
<div class="floatPanelResizeHandle" id="varValuePanelResizeHandle"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1014,8 +1013,9 @@ function switchObjectPanelTab(btn, tab) {
|
|||||||
// Un seul panneau partagé (voir le commentaire sur son HTML) : à
|
// Un seul panneau partagé (voir le commentaire sur son HTML) : à
|
||||||
// l'ouverture, mémorise vers quel <input> (targetId) le JSON reconstruit
|
// 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
|
// 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
|
// dans le JSON actuel de cet <input>. Pas de bouton "OK" : chaque
|
||||||
// referme.
|
// changement de ligne réécrit tout de suite le JSON (saveVarValuePanel),
|
||||||
|
// exactement comme si on tapait directement dans le champ cible.
|
||||||
(function () {
|
(function () {
|
||||||
var panel = document.getElementById('varValuePanel');
|
var panel = document.getElementById('varValuePanel');
|
||||||
var rowsWrap = document.getElementById('varValueRows');
|
var rowsWrap = document.getElementById('varValueRows');
|
||||||
@@ -1050,14 +1050,21 @@ function switchObjectPanelTab(btn, tab) {
|
|||||||
if (key !== null) row.querySelector('.varValueKey').value = key;
|
if (key !== null) row.querySelector('.varValueKey').value = key;
|
||||||
row.querySelector('.varValueType').value = type;
|
row.querySelector('.varValueType').value = type;
|
||||||
row.querySelector('.varValueValue').value = valueTextOf(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);
|
rowsWrap.appendChild(clone);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addVarValueRow = function () {
|
window.addVarValueRow = function () {
|
||||||
addRowFrom(panel.dataset.mode === 'tableau' ? null : '', '');
|
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) {
|
window.openVarValuePanel = function (targetInputId, mode) {
|
||||||
var input = document.getElementById(targetInputId);
|
var input = document.getElementById(targetInputId);
|
||||||
if (!input) return;
|
if (!input) return;
|
||||||
@@ -1084,7 +1091,8 @@ function switchObjectPanelTab(btn, tab) {
|
|||||||
panel.classList.add('hidden');
|
panel.classList.add('hidden');
|
||||||
};
|
};
|
||||||
|
|
||||||
window.applyVarValuePanel = function () {
|
function saveVarValuePanel() {
|
||||||
|
if (panel.classList.contains('hidden')) return;
|
||||||
var mode = panel.dataset.mode;
|
var mode = panel.dataset.mode;
|
||||||
var result = mode === 'tableau' ? [] : {};
|
var result = mode === 'tableau' ? [] : {};
|
||||||
rowsWrap.querySelectorAll('.varValueRow').forEach(function (row) {
|
rowsWrap.querySelectorAll('.varValueRow').forEach(function (row) {
|
||||||
@@ -1102,8 +1110,7 @@ function switchObjectPanelTab(btn, tab) {
|
|||||||
input.value = JSON.stringify(result);
|
input.value = JSON.stringify(result);
|
||||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||||
}
|
}
|
||||||
closeVarValuePanel();
|
}
|
||||||
};
|
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user