/* table_editor, par Sébastien L. 2021-11-12 */ /*****************************/ /* Mise en place des données */ /*****************************/ function build_table(data) { let output = ""; data.forEach((cellule) => { output += `
${cellule.data}
`; }) document.querySelector(".tableau").innerHTML = output; installListeners(); } /*****************************/ /* Gestion des évènements */ /*****************************/ $(function () { document.body.addEventListener("keydown", key); }); function installListeners() { document.querySelectorAll("[data-editable=true]").forEach(cellule => { cellule.addEventListener("click", function () { selectCell(this) }); cellule.addEventListener("dblclick", function () { modifCell(this) }); }); } /*********************************/ /* Interaction avec les cellules */ /*********************************/ function selectCell(obj) { if (obj.classList.contains("modifying")) { return; // Cellule en cours de modification, ne pas sélectionner. } let currentModif = document.querySelector(".modifying"); if (currentModif) { if (!save(currentModif)) { return; } } document.querySelectorAll(".selected, .modifying").forEach(cellule => { cellule.classList.remove("selected", "modifying"); cellule.removeAttribute("contentEditable"); cellule.removeEventListener("keydown", keyCell); }) obj.classList.add("selected"); } function modifCell(obj) { if (obj) { obj.classList.add("modifying"); obj.contentEditable = true; obj.addEventListener("keydown", keyCell); obj.focus(); } } function key(event) { switch (event.key) { case "Enter": modifCell(document.querySelector(".selected")); event.preventDefault(); break; case "ArrowRight": ArrowMove(1, 0); break; case "ArrowLeft": ArrowMove(-1, 0); break; case "ArrowUp": ArrowMove(0, -1); break; case "ArrowDown": ArrowMove(0, 1); break; } } function ArrowMove(x, y) { if (document.querySelector(".modifying") || !document.querySelector(".selected")) { return; // S'il n'y a aucune cellule selectionnée ou si une cellule est encours de modification, on ne change pas } let selected = document.querySelector(".selected"); let next = document.querySelector(`[data-x="${parseInt(selected.dataset.x) + x}"][data-y="${parseInt(selected.dataset.y) + y}"][data-editable="true"]`); if (next) { selectCell(next); } } function keyCell(event) { if (event.key == "Enter") { event.preventDefault(); event.stopPropagation(); if (!save(this)) { return } this.classList.remove("modifying"); ArrowMove(0, 1); modifCell(document.querySelector(".selected")); } } /******************************/ /* Affichage d'un message */ /******************************/ function message(msg) { var div = document.createElement("div"); div.className = "message"; div.innerHTML = msg; document.querySelector("body").appendChild(div); setTimeout(() => { div.remove(); }, 3000); }