cedricAbonnel/soundboard_a5l
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clic-deplacer uniquement en edit mode

Browse Source
This commit is contained in:
Cédric Abonnel
2026-03-27 07:54:52 +01:00
parent 2076034b37
commit 4c390c933d
3 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -16,7 +16,7 @@
<header> <header>
<div style="display: flex; gap: 10px; align-items: center;"> <div style="display: flex; gap: 10px; align-items: center;">
<button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button> <button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
<span id="app-version" style="color: #555; font-size: 0.8rem; margin-left: 10px;">v1.205</span> <span id="app-version" style="color: #555; font-size: 0.8rem; margin-left: 10px;">v1.206</span>
<button id="installBtn" style="display:none; ...">📥 INSTALLER</button> <button id="installBtn" style="display:none; ...">📥 INSTALLER</button>
</div> </div>

25
public/script.js
View File

@@ -101,23 +101,24 @@
const div = document.createElement('div'); const div = document.createElement('div');
div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`; div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
div.id = `btn-${i}`; div.id = `btn-${i}`;
div.setAttribute('draggable', 'true'); // Rend le bouton draggable
// Le bouton n'est "draggable" que si le mode édition est actif
div.setAttribute('draggable', isEditMode ? 'true' : 'false');
div.innerHTML = `<span class="btn-num">${i+1}</span> div.innerHTML = `<span class="btn-num">${i+1}</span>
<span style="padding:10px">${data.name || "-"}</span> <span style="padding:10px">${data.name || "-"}</span>
<span class="loop-tag">∞</span>`; <span class="loop-tag">∞</span>`;
// Clic pour lecture ou édition
div.onclick = () => handleBtnClick(i); div.onclick = () => handleBtnClick(i);
// Événements de Drag & Drop // Les événements de Drag & Drop (ils ne se déclencheront que si draggable est true)
div.ondragstart = (e) => handleDragStart(e, i); div.ondragstart = (e) => handleDragStart(e, i);
div.ondragover = (e) => handleDragOver(e); div.ondragover = (e) => handleDragOver(e);
div.ondragenter = (e) => div.classList.add('drag-over'); div.ondragenter = (e) => isEditMode && div.classList.add('drag-over');
div.ondragleave = (e) => div.classList.remove('drag-over'); div.ondragleave = (e) => div.classList.remove('drag-over');
div.ondrop = (e) => handleDrop(e, i); div.ondrop = (e) => handleDrop(e, i);
div.ondragend = (e) => div.classList.remove('dragging'); div.ondragend = (e) => div.classList.remove('dragging');
board.appendChild(div); board.appendChild(div);
}); });
} }
@@ -125,9 +126,15 @@
function toggleEditMode() { function toggleEditMode() {
isEditMode = !isEditMode; isEditMode = !isEditMode;
document.body.classList.toggle('edit-mode', isEditMode); document.body.classList.toggle('edit-mode', isEditMode);
document.getElementById('toggleBtn').innerText = isEditMode ? "QUITTER L'ÉDITION" : "MODE ÉDITION";
document.getElementById('toggleBtn').style.background = isEditMode ? "var(--accent)" : "#444"; // Mise à jour visuelle du bouton
document.getElementById('toggleBtn').style.color = isEditMode ? "black" : "white"; const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.innerText = isEditMode ? "QUITTER L'ÉDITION" : "MODE ÉDITION";
toggleBtn.style.background = isEditMode ? "var(--accent)" : "#444";
toggleBtn.style.color = isEditMode ? "black" : "white";
// On réinitialise la grille pour appliquer le changement de 'draggable'
init();
} }
function handleBtnClick(i) { function handleBtnClick(i) {

2
public/sw.js
View File

@@ -1,4 +1,4 @@
const CACHE_NAME = 'sb-v1.205'; // Change ce numéro pour forcer une mise à jour globale const CACHE_NAME = 'sb-v1.206'; // Change ce numéro pour forcer une mise à jour globale
const ASSETS = [ const ASSETS = [
'./', // Racine './', // Racine
'./index.html', './index.html',