Ajout fonctionnalité dragdrop pour Player

static/js/dragdrop.js

+// VARIABLES DISPONIBLES
+// var cartes -> liste des cartes disponibles ; mis à jour à chaque modification de rep
+// const rep -> div d'écriture
+
+// https://www.youtube.com/watch?v=jfYWwQrtzzY&t=102s
+
+rep.addEventListener('dragover', e => {
+    e.preventDefault()
+    const afterElement = getDragAfterElement(e.clientX)
+    
+    const carte = document.querySelector('.dragging')
+    if (afterElement == null) {
+        rep.append(carte)
+    } else {
+        rep.insertBefore(carte, afterElement)
+    }
+})
+
+function getDragAfterElement(x) {
+    const draggableElements = [...rep.querySelectorAll('.carte:not(.dragging)')]
+    return draggableElements.reduce((closest, child) => {
+        const box = child.getBoundingClientRect()
+        const offset = x - box.left - box.width / 2
+        if (offset < 0 && offset > closest.offset) {
+            return { offset: offset, element: child }
+        } else {
+            return closest
+        }
+    }, { offset: Number.NEGATIVE_INFINITY }).element
+}
\ No newline at end of file

static/js/playerPhono.js

 selectLang("fr");
 function selectLang(lang, p="default", f="default"){
-    console.log('SelectLang()',lang);
-    var phonolist = document.getElementById('selectPanneau');
-    phonolist.innerHTML = '';
+    console.log('SelectLang()',lang)
+    var phonolist = document.getElementById('selectPanneau')
+    phonolist.innerHTML = ''
 
     if (lang=="fr"){
-        var phonoFrDo = document.createElement('option');
-        phonoFrDo.value = "phonoFrDo";
-        phonoFrDo.innerHTML = "Panneaux Fr A. Do";
-        phonolist.appendChild(phonoFrDo);
+        var phonoFrDo = document.createElement('option')
+        phonoFrDo.value = "phonoFrDo"
+        phonoFrDo.innerHTML = "Panneaux Fr A. Do"
+        phonolist.appendChild(phonoFrDo)
 
-        interface("fr");
+        interface("fr")
 
     } else if (lang=="en"){
-        var phonoEnAlem = document.createElement('option');
-        phonoEnAlem.value = "phonoEnAlem";
-        phonoEnAlem.innerHTML = "ALeM British";
-        phonolist.appendChild(phonoEnAlem);
+        var phonoEnAlem = document.createElement('option')
+        phonoEnAlem.value = "phonoEnAlem"
+        phonoEnAlem.innerHTML = "ALeM British"
+        phonolist.appendChild(phonoEnAlem)
 
-        // var phonoEnPronSciBr = document.createElement('option');
-        // phonoEnPronSciBr.value = "phonoEnPronSciBr";
-        // phonoEnPronSciBr.innerHTML = "PronSci British";
-        // phonolist.appendChild(phonoEnPronSciBr);
+        // var phonoEnPronSciBr = document.createElement('option')
+        // phonoEnPronSciBr.value = "phonoEnPronSciBr"
+        // phonoEnPronSciBr.innerHTML = "PronSci British"
+        // phonolist.appendChild(phonoEnPronSciBr)
 
-        interface("en");
+        interface("en")
     }
-    selectPanneau(p);
+    selectPanneau(p)
 }
 
 interface("fr");
 function interface(lang) {
-    console.log("Langue d'interface:",lang);
-    thisPageLang = lang;
-    var langspanList = document.getElementsByClassName("langspan");
+    console.log("Langue d'interface:",lang)
+    thisPageLang = lang
+    var langspanList = document.getElementsByClassName("langspan")
     if (lang == "en") {
         for (i=0; i<langspanList.length; i++) {
-            span = langspanList[i];
-            span.innerHTML = langJson[span.id]["en"];
+            span = langspanList[i]
+            span.innerHTML = langJson[span.id]["en"]
         }
 
     } else { // "fr" par défaut
         for (i=0; i<langspanList.length; i++) {
-            span = langspanList[i];
-            span.innerHTML = langJson[span.id]["fr"];
+            span = langspanList[i]
+            span.innerHTML = langJson[span.id]["fr"]
         }
         
     }
@@ -50,11 +50,11 @@ function interface(lang) {
 
 
 function selectPanneau(p){
-    console.log("selectPanneau",p,thisPageLang);
+    console.log("selectPanneau",p,thisPageLang)
     if (p=="default" && thisPageLang=="fr") {
-        p = "phonoFrDo";
+        p = "phonoFrDo"
     } else if (p=="default" && thisPageLang=="en") {
-        p = "phonoEnAlem";
+        p = "phonoEnAlem"
     }
     var svgEnPronSciBr = document.getElementById('svgEnPronSciBr'); // Panneau EN PronSci
 
@@ -65,43 +65,60 @@ function selectPanneau(p){
 
     var doCalques = document.getElementById('doCalques'); // boutons calques
     if (p == 'phonoFrDo') {
-        svgEnAlem.style.display = 'none';
-        pngCalqEnAlemLignes.style.display = 'none';
-        pngPochoirEnAlem.style.display = 'none';
-        svgClickEnAlem.style.display = 'none';
+        svgEnAlem.style.display = 'none'
+        pngCalqEnAlemLignes.style.display = 'none'
+        pngPochoirEnAlem.style.display = 'none'
+        svgClickEnAlem.style.display = 'none'
 
-        doCalques.style.display = 'block';
+        doCalques.style.display = 'block'
 
     } else if (p == 'phonoEnAlem') {
-        svgEnAlem.style.display = 'block';
-        pngCalqEnAlemLignes.style.display = 'block';
-        pngPochoirEnAlem.style.display = 'block';
-        svgClickEnAlem.style.display = 'block';
+        svgEnAlem.style.display = 'block'
+        pngCalqEnAlemLignes.style.display = 'block'
+        pngPochoirEnAlem.style.display = 'block'
+        svgClickEnAlem.style.display = 'block'
 
-        doCalques.style.display = 'none';
+        doCalques.style.display = 'none'
     }
 }
 
 
 /// ACTIONS LORS DU CLIC SUR PHONEME
-function recupPhon(identifiant) {
-    var rectId = identifiant;
-    var boucheId = rectId.replace("rect","bouche");
+var cartes = [] // initialisation de la liste des cartes disponible (0 au début)
 
-    var repDiv = document.getElementById('rep');
+function recupPhon(identifiant) {
+    var rectId = identifiant
+    var boucheId = rectId.replace("rect","bouche")
+    var repDiv = document.getElementById('rep')
 
-    var newCarte = document.createElement('div');
+    var newCarte = document.createElement('div')
     newCarte.classList = "carte " + rectId;// on garde rectId, pour connaître le phonème mais sans appeler les styles de phonochromie-alem.css
-    newCarte.style.backgroundImage = "url('/static/bouches/"+ boucheId + ".jpg')";
+    newCarte.draggable = true
+    newCarte.style.backgroundImage = "url('/static/bouches/"+ boucheId + ".jpg')"
     newCarte.addEventListener("click", function(e) {
-        var tgt = e.target;
-        playEffect("delete");
-        tgt.remove();
-        saveTrace('del phon '+rectId);
-      });
-    repDiv.appendChild(newCarte);
-    playEffect("select");
-    saveTrace('add phon '+rectId);
+        var tgt = e.target
+        playEffect("delete")
+        tgt.remove()
+        saveTrace('del phon '+rectId)
+    })
+
+    newCarte.addEventListener('dragstart', () => {
+        newCarte.classList.add('dragging')
+        console.log('DRAGGING ', rectId)
+    })
+
+    newCarte.addEventListener('dragend', () => {
+        newCarte.classList.remove('dragging')
+        console.log('STOP DRAGGING ', rectId)
+    })
+    
+    repDiv.appendChild(newCarte)
+    playEffect("select")
+    saveTrace('add phon '+rectId)
+
+    // Mise à jour de la table
+    cartes = document.querySelectorAll('.carte') // mise à jour de la liste des cartes sur la table
+    
 }
 
 
@@ -109,138 +126,134 @@ function recupPhon(identifiant) {
 //////////////////////////////////////////////
 var nbmots;
 var cptitem = 0;
-var currentAudio = "";
-
-var rep = document.getElementById('rep');
-var btnValider = document.getElementById("btnValider");
+var currentAudio = ""
 
+const rep = document.getElementById('rep')
+var btnValider = document.getElementById("btnValider")
 
 
 // LANCEMENT DE L'ACTIVITÉ PAR DEFAUT (TRANSMISE AVEC LE TEMPLATE cf. views.py)
-nbmots = mots.length;
+nbmots = mots.length
 
 document.getElementById('nbMots').innerHTML = nbmots;
-document.getElementById('fenetreDeLancement').style.display = "block";
+document.getElementById('fenetreDeLancement').style.display = "block"
 
 
 // Démarrage de la série
 function demarrer() {
-    document.getElementById('fenetreDeLancement').style.display = "none";
-    document.getElementById('divConsigne').style.display = "block";
-    document.getElementById('divReponse').style.display = "";
-    cptitem = 0;
-    saveTrace('Démarrage série '+serieName);
+    document.getElementById('fenetreDeLancement').style.display = "none"
+    document.getElementById('divConsigne').style.display = "block"
+    document.getElementById('divReponse').style.display = ""
+    cptitem = 0
+    saveTrace('Démarrage série '+serieName)
     loadNext()
 }
 
 // charge le mot suivant
 function loadNext() {
-    document.getElementById("bravo").style.display = "none";
+    document.getElementById("bravo").style.display = "none"
     if (cptitem < nbmots) {
-        rep.innerHTML = "";
-        currentAudio = mots[cptitem]["audio"];
-        playAudio();
-        cptitem = cptitem+1;
-        document.getElementById('cptitem').innerHTML = cptitem;
-        saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'");
+        rep.innerHTML = ""
+        currentAudio = mots[cptitem]["audio"]
+        playAudio()
+        cptitem = cptitem+1
+        document.getElementById('cptitem').innerHTML = cptitem
+        saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'")
     } else {
-        getFelicitations();
-        playEffect("success");
-        saveTrace('fin série '+serieName);
-    }
-    
+        getFelicitations()
+        playEffect("success")
+        saveTrace('fin série '+serieName)
+    } 
 }
     
 // vérifie la réponse
 function checkAnswer() {
-    var mot = mots[cptitem-1];
-    var phono = mot["phono"]; // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext()
-    var erreur = false;
-
+    var mot = mots[cptitem-1]
+    var phono = mot["phono"] // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext()
+    var erreur = false
     
     for (i=0; i<rep.children.length; i++) {
-        var repphon = rep.children[i].classList[1].replace("rect","phon");
+        var repphon = rep.children[i].classList[1].replace("rect","phon")
         if (repphon != phono[i]) {
-            erreur = true;
-            console.log("ERREUR",repphon,phono[i]);
-            playEffect('wrong');
-            rep.children[i].classList.add("wrongPhon");
-            saveTrace('erreur '+repphon,phono[i]);
+            erreur = true
+            console.log("ERREUR",repphon,phono[i])
+            playEffect('wrong')
+            rep.children[i].classList.add("wrongPhon")
+            saveTrace('erreur '+repphon,phono[i])
         }
     }
     if (rep.children.length != phono.length) {
-        erreur = true;
-        console.log("ERREUR nb phonèmes");
-        playEffect('wrong');
-        saveTrace('erreur nb phon ', rep.children.length, phono.length);
+        erreur = true
+        console.log("ERREUR nb phonèmes")
+        playEffect('wrong')
+        saveTrace('erreur nb phon ', rep.children.length, phono.length)
     }
 
     if (!erreur) {
-        playEffect("correct");
-        getBravo(mot);
-        saveTrace('correct');
+        playEffect("correct")
+        getBravo(mot)
+        saveTrace('correct')
     }
 }
 
 
 // AFFICHAGE BRAVO
 function getBravo(mot) {
-    var bravoDiv = document.getElementById("bravo");
-    document.getElementById("bravo_text").innerHTML = "";
+    var bravoDiv = document.getElementById("bravo")
+    document.getElementById("bravo_text").innerHTML = ""
     if (images=='1'){
-        // document.getElementById("bravo_img").src = "/static/im/series/" + mot["image"]["src"];
-        document.getElementById("bravo_img").src = "../../media/image-uploads/" + mot["image"]["src"];
+        // document.getElementById("bravo_img").src = "/static/im/series/" + mot["image"]["src"]
+        document.getElementById("bravo_img").src = "../../media/image-uploads/" + mot["image"]["src"]
     } else {
-        document.getElementById("bravo_img").src = "/static/im/series/bravo.png";
+        document.getElementById("bravo_img").src = "/static/im/series/bravo.png"
     }
 
     if (phono=='1'){
-        var phonographie = mot["phonographies"][0];
+        var phonographie = mot["phonographies"][0]
         for (i=0; i<phonographie.length; i++){
-            document.getElementById("bravo_text").innerHTML += "<span class='graphContours "+ phonographie[i][0] +"'>"+ phonographie[i][1] +"</span>";
+            document.getElementById("bravo_text").innerHTML += "<span class='graphContours "+ phonographie[i][0] +"'>"+ phonographie[i][1] +"</span>"
         }
     } else {
         document.getElementById("bravo_text").innerHTML = "Bravo !"
     }
     
-    
-    bravoDiv.style.display = "block";
+    bravoDiv.style.display = "block"
 }
 
 // AFFICHAGE FÉLICITATIONS (fin)
 function getFelicitations() {
-    var bravoDiv = document.getElementById("bravo");
-    document.getElementById("bravo_text").innerHTML = "";
+    var bravoDiv = document.getElementById("bravo")
+    document.getElementById("bravo_text").innerHTML = ""
     
-    document.getElementById("bravo_img").src = "/static/im/series/felicitations.png";
+    document.getElementById("bravo_img").src = "/static/im/series/felicitations.png"
     document.getElementById("bravo_text").innerHTML = "Félicitations !"
 
-    document.getElementById("bravo_next").style.display = "none";
-    document.getElementById("bravo_quit").style.display = "block";
+    document.getElementById("bravo_next").style.display = "none"
+    document.getElementById("bravo_quit").style.display = "block"
 
-    bravoDiv.style.display = "block";
+    bravoDiv.style.display = "block"
 }
 
 // SOUNDS
 function playAudio() {
-    var audio = new Audio("../../media/audio-uploads/"+currentAudio);
-    audio.play();
+    var audio = new Audio("../../media/audio-uploads/"+currentAudio)
+    audio.play()
 }
 
 function playEffect(effect) {
-    var audio;
-    if (effect == "select") audio = new Audio("/static/audio/effets/select.mp3");
-    else if (effect == "delete") audio = new Audio("/static/audio/effets/del.mp3");
-    else if (effect == "success") audio = new Audio("/static/audio/effets/success.mp3");
-    else if (effect == "correct") audio = new Audio("/static/audio/effets/correctAnswer.mp3");
-    else if (effect == "wrong") audio = new Audio("/static/audio/effets/wrongAnswer.mp3");
-    audio.play();
+    var audio
+    if (effect == "select") audio = new Audio("/static/audio/effets/select.mp3")
+    else if (effect == "delete") audio = new Audio("/static/audio/effets/del.mp3")
+    else if (effect == "success") audio = new Audio("/static/audio/effets/success.mp3")
+    else if (effect == "correct") audio = new Audio("/static/audio/effets/correctAnswer.mp3")
+    else if (effect == "wrong") audio = new Audio("/static/audio/effets/wrongAnswer.mp3")
+    audio.play()
 }
 
 // ENREGISTREMENT TRACES
 async function saveTrace(action) {
     if (userName) {
-        console.log("ENREGISTREMENT ", action);
+        console.log("ENREGISTREMENT ", action)
         // ON EMBALLE TOUT ÇA
         var colis = {
             appli: "phonoplayer",
@@ -253,10 +266,10 @@ async function saveTrace(action) {
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify(colis)
-        };
+        }
         // ENVOI
         const response = await fetch('/_saveTrace/', options); //'http://127.0.0.1:9000/getPhonoOf/', options); //
-        // const data = await response.json();
-        // console.log(data);
+        // const data = await response.json()
+        // console.log(data)
     }
 }
\ No newline at end of file

static/styles/player.css

@@ -153,6 +153,11 @@
     margin: 2px;
 }
 
+.dragging {
+    opacity: .3;
+    /* border: gray dashed 5px; */
+}
+
 .wrongPhon {
     border: solid 4px red;
 }

templates/playerPhono.html

@@ -125,4 +125,5 @@
     <script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/playerPhono.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/dragdrop.js' %}"></script>
 {% endblock javascript %}
\ No newline at end of file