ajout bouton affichage liaisons obligatoires/facultatives + ajout fonction export texte bicolore

fa7d078e · Sylvain Coulange · d52b3df1 · fa7d078e · fa7d078e · fa7d078e
Commit fa7d078e authored Mar 06, 2021 by Sylvain Coulange
--- a/REQUIREMENTS.txt
+++ b/REQUIREMENTS.txt
@@ -8,10 +8,6 @@ Cython==0.29.21
 Django==3.1.2
 django-cors-headers==3.5.0
 dnspython==2.0.0
-en-core-web-md @ https://github.com/explosion/spacy-models/releases/download/en_core_web_md-2.3.1/en_core_web_md-2.3.1.tar.gz
-en-core-web-sm @ https://github.com/explosion/spacy-models/releases/download/en_core_web_sm-2.3.1/en_core_web_sm-2.3.1.tar.gz
-fr-core-news-md @ https://github.com/explosion/spacy-models/releases/download/fr_core_news_md-2.3.0/fr_core_news_md-2.3.0.tar.gz
-fr-core-news-sm @ https://github.com/explosion/spacy-models/releases/download/fr_core_news_sm-2.2.5/fr_core_news_sm-2.2.5.tar.gz
 idna==2.9
 importlib-metadata==1.6.0
 jieba==0.42.1
@@ -31,5 +27,4 @@ thinc==7.4.3
 tqdm==4.46.0
 urllib3==1.25.9
 wasabi==0.6.0
-zh-core-web-sm @ https://github.com/explosion/spacy-models/releases/download/zh_core_web_sm-2.3.1/zh_core_web_sm-2.3.1.tar.gz
 zipp==3.1.0
--- a/colorapp/liaisons.py
+++ b/colorapp/liaisons.py
@@ -245,8 +245,8 @@ def liaison_nombre(token1,token2):
        return None
    else:
        if token1.text.lower() != "neuf":
-            type = obl_facul(token1,token2)
-            return type
+            typeLiaison = obl_facul(token1,token2)
+            return typeLiaison


 # Fonction pour vérifier les règles grammaticales de liaison
@@ -332,27 +332,27 @@ def verifliaison(token1, token2):
    if token1.text.lower() in num or token2.text.lower() in num:
        if exception(token1, token2):
            if gfr(token1):
-                type = liaison_nombre(token1, token2)
+                typeLiaison = liaison_nombre(token1, token2)
            else:
-                type = None
+                typeLiaison = None
        else:
-            type = None
+            typeLiaison = None
    else:
        if exception(token1,token2):
            if gfr(token1):
-                type = obl_facul(token1, token2)
+                typeLiaison = obl_facul(token1, token2)
            else:
-                type = None
+                typeLiaison = None
        else:
-            type = None
-    return type
+            typeLiaison = None
+    return typeLiaison


 # Fonction pour determiner le phoneme de liaison
 # en entree : une lettre
 # en sortie : un str
 def phon_liaison(lettre):
-    l_p = {'s':'phon_z', 'x':'phon_z', 'z':'phon_z', 't':'phon_t', 'd':'phon_t', 'n':'phon_n', 'p':'phon_p', 'r':'phon_r', 'g':'phon_g'}
+    l_p = {'s':'phon_z', 'x':'phon_z', 'z':'phon_z', 't':'phon_t', 'd':'phon_t', 'n':'phon_n', 'p':'phon_p', 'r':'phon_r_maj', 'g':'phon_g'}
    if lettre in l_p.keys():
        phon = l_p[lettre]
    else:

--- a/static/im/liaison.svg
+++ b/static/im/liaison.svg
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-fonts"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="liaison.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="1013"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="-9.559322"
+     inkscape:cy="7.7288136"
+     inkscape:window-x="1680"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 9.9868135,1.9491526 h -8.511 l -0.082,2.46 h 0.478 c 0.26,-1.544 0.76,-1.783 2.694,-1.845 l 0.424,-0.013 v 7.8270004 c 0,0.663 -0.144,0.82 -1.3,0.923 v 0.52 h 4.082 v -0.52 c -1.162,-0.103 -1.306,-0.26 -1.306,-0.923 V 2.5511526 l 0.43,0.013 c 1.935,0.062 2.434,0.301 2.694,1.846 h 0.4790005 z"
+     id="path2"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 8.9519997,13.736064 q 1.3535153,0 2.6777343,-0.304688 1.330078,-0.304687 2.671875,-0.914062 v 0.738281 q -1.376953,0.691406 -2.707031,1.03711 -1.330078,0.345703 -2.6425783,0.345703 -1.3066407,0 -2.6308594,-0.345703 -1.3242188,-0.339844 -2.7070313,-1.03711 v -0.738281 q 1.3476563,0.615234 2.6660157,0.914062 1.3183593,0.304688 2.671875,0.304688 z"
+     style="font-size:12px"
+     id="path9" />
+</svg>
--- a/static/languages/languages.js
+++ b/static/languages/languages.js
@@ -70,6 +70,10 @@ var langJson = {
        "fr": "Copier/Coller le contenu",
        "en": "Copy/paste content"
    },
+    "ti_btnLiaison": {
+        "fr": "Afficher les liaisons",
+        "en": ""
+    },
    "ti_btnBold": {
        "fr": "Activer/désactiver la police en gras",
        "en": "Switch font boldness"

--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -47,6 +47,7 @@ function selectLang(lang){
 		document.getElementById('ti_btnBold').style.display = "";
 		document.getElementById('ti_btnzi').style.display = "none";
 		document.getElementById('ti_btnwordspace').style.display = "none";
+        document.getElementById('btnLiaison').style.display = "none";

 		window.history.pushState("", "", "/en");

@@ -69,6 +70,7 @@ function selectLang(lang){
 		document.getElementById('ti_btnBold').style.display = "";
 		document.getElementById('ti_btnzi').style.display = "none";
 		document.getElementById('ti_btnwordspace').style.display = "none";
+        document.getElementById('btnLiaison').style.display = "";

 		window.history.pushState("", "", "/fr");
 	} else if (lang == "zh"){
@@ -89,6 +91,7 @@ function selectLang(lang){
 		document.getElementById('ti_btnBold').style.display = "none";
 		document.getElementById('ti_btnzi').style.display = "";
 		document.getElementById('ti_btnwordspace').style.display = "";
+        document.getElementById('btnLiaison').style.display = "none";

 		window.history.pushState("", "", "/zh");
 	}
@@ -189,7 +192,12 @@ async function getColorisation() {
 						outputDiv.innerHTML = outputDiv.innerHTML + '<br>';
 					}
                } else if (outText[i][0][0][0].graph.match(/^‿|-͜$/)){
-                    outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon '+ outText[i][0][0][0].phon +'" title="'+ outText[i][0][3] +'">'+ outText[i][0][0][0].graph +'</span>';
+                    if(outText[i][0][3] == "Liaison obligatoire") {
+                        classliaison = "liaisonObligatoire"
+                    } else if (outText[i][0][3] == "Liaison facultative") {
+                        classliaison = "liaisonFacultative"
+                    }
+                    outputDiv.innerHTML = outputDiv.innerHTML + '<span class="'+ classliaison +' phon '+ outText[i][0][0][0].phon +'" title="'+ outText[i][0][3] +'">'+ outText[i][0][0][0].graph +'</span>';
 					noSpace = true;
                } else if (outText[i][0][0][0].graph.match(/^(,|\.|…|\)|\]|\}|%|>|»|”|-)$/)) {
 					outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon_neutre">'+ outText[i][0][0][0].graph +'</span>';
@@ -267,6 +275,7 @@ async function getColorisation() {
 		};
 		unknownMark();
 		bugMark();
+        toggleLiaisons()

 		if (document.getElementById('bicolor').checked) {
 			toBicolor();
@@ -640,7 +649,7 @@ function getPopUp() {
 	var expLong = "text-decoration: underline;";

 	// On récupère la liste des <span>
-    const regexSpan = /<span class="tokens.*?>(.*?<\/span>)<\/span>|(<span class="phon_neutre">.*?<\/span>)|(<span> <\/span>)|(<br>)|(<span class="phon phon_.*?" .*?>.*?<\/span>)/gm;
+    const regexSpan = /<span class="tokens.*?>(.*?<\/span>)<\/span>|(<span class="phon_neutre">.*?<\/span>)|(<span> <\/span>)|(<br>)|(<span class="liaison(Obligatoire|Facultative)( phon)? phon_.*?" .*?>.*?<\/span>)/gm;
 	// group1: word in colors
 	// group2: punctuation
 	// group3: space
@@ -659,17 +668,19 @@ function getPopUp() {
            var newOutputSpan = "<span style='";
            newOutputSpan += expFonte + expSizeBase + expNoBold;
            
-            var phonographiesRegex = /<span class="phon (.*?)" .*?>(.*?)<\/span>/;
+            var phonographiesRegex = /<span class="liaison(Obligatoire|Facultative)( phon)? (.*?)".*?>(.*?)<\/span>/;
 			var n = phonographiesRegex.exec(m[5])
            // COULEURS
            var phonClass = "";
-            n[1] = n[1].split(" "); // phon + phon_*
-            for (i=0; i<n[1].length; i++) {
-                if (n[1][i].match(/phon_.*/)) phonClass = n[1][i];
+            console.log("n[3]:",n[3])
+            phonclasses = n[3].split(" "); // phon + phon_*
+            for (i=0; i<phonclasses.length; i++) {
+                if (phonclasses[i].match(/phon_.*/)) phonClass = phonclasses[i];
+                if (phonclasses[i].match(/bicolor\d/)) phonClass = phonclasses[i];
            }
            if (phonClass != "") newOutputSpan += phon2color(phonClass);

-            newOutputSpan += "'>"+n[2]+"</span>";
+            newOutputSpan += "'>"+n[4]+"</span>";
            finalOutput += newOutputSpan;
        } else if (m[4]) {
            finalOutput += "<br>";
@@ -693,13 +704,13 @@ function getPopUp() {
 				//console.log('RESULT:',n[1],n[2]);
 				
 				var newOutputSpan = "<span style='";
-				n[1] = n[1].split(" ");
+				phonclasses = n[1].split(" ");

-				if (n[1].includes("unstressed")) newOutputSpan += expFonte + expSizeBase + expNoBold;
-				else if (n[1].includes("schwa")) newOutputSpan += expFonte + expSizeSchwa + expNoBold;
-				else if (n[1].includes("stress1")) newOutputSpan += expFonte + expSizeStress1 + expBold;
-				else if (n[1].includes("stress2")) newOutputSpan += expFonte + expSizeStress2 + expBold;
-				else if (n[1].includes("phon_echec") || n[1].includes("phon_inconnu")) newOutputSpan += expFonte + expCoulBase + expSizeBase + expNoBold;
+				if (phonclasses.includes("unstressed")) newOutputSpan += expFonte + expSizeBase + expNoBold;
+				else if (phonclasses.includes("schwa")) newOutputSpan += expFonte + expSizeSchwa + expNoBold;
+				else if (phonclasses.includes("stress1")) newOutputSpan += expFonte + expSizeStress1 + expBold;
+				else if (phonclasses.includes("stress2")) newOutputSpan += expFonte + expSizeStress2 + expBold;
+				else if (phonclasses.includes("phon_echec") || phonclasses.includes("phon_inconnu")) newOutputSpan += expFonte + expCoulBase + expSizeBase + expNoBold;
 				else {
 					if (boolBold) newOutputSpan += expFonte + expSizeBase + expBold;
 					else newOutputSpan += expFonte + expSizeBase + expNoBold;
@@ -707,8 +718,9 @@ function getPopUp() {
 				
 				// COULEURS
 				var phonClass = "";
-				for (i=0; i<n[1].length; i++) {
-					if (n[1][i].match(/phon_.*/)) phonClass = n[1][i];
+				for (i=0; i<phonclasses.length; i++) {
+					if (phonclasses[i].match(/phon_.*/)) phonClass = phonclasses[i];
+                    if (phonclasses[i].match(/bicolor\d/)) phonClass = phonclasses[i];
 				}
 				if (phonClass.match(/.*_long/)) newOutputSpan += expLong;
 				if (phonClass != "") newOutputSpan += phon2color(phonClass);
@@ -794,3 +806,41 @@ function outFuncWhite() {
    tooltip.innerHTML = "Copier";
 }

+// BOUTON POUR AFFICHER LES LIAISONS
+function toggleLiaisons() {
+    var obl = document.getElementById('liaisonsObligatoires').checked
+    var fac = document.getElementById('liaisonsFacultatives').checked
+
+    listObl = Array.from(document.getElementsByClassName('liaisonObligatoire'))
+    listFac = Array.from(document.getElementsByClassName('liaisonFacultative'))
+
+    console.log('Modif liaisons : obl=',obl,' fac=',fac)
+
+    if (obl) {
+        listObl.forEach( liaisonObl => {
+            liaisonObl.innerHTML = '‿'
+            liaisonObl.classList.add('phon')
+        })
+    } else {
+        listObl.forEach( liaisonObl => {
+            liaisonObl.innerHTML = ' '
+            liaisonObl.classList.remove('phon')
+        })
+    }
+
+    if (fac) {
+        listFac.forEach( liaisonFac => {
+            liaisonFac.innerHTML = '‿'
+            liaisonFac.classList.add('phon')
+        })
+    } else {
+        listFac.forEach( liaisonFac => {
+            liaisonFac.innerHTML = ' '
+            liaisonFac.classList.remove('phon')
+        })
+    }
+
+    if (document.getElementById('bicolor').checked == true) {
+		toBicolor(); // réinitialisation du bicolor (nécessaire si nb phonèmes différents)
+	};
+}
\ No newline at end of file
--- a/static/styles/phonochromie_alem_v3.css
+++ b/static/styles/phonochromie_alem_v3.css
 /* CSS ALeM-APP v3 */
 /* https://alem.hypotheses.org/ */
-/* Last update: 2020/12/06 */
+/* Last update: 2021/03/06 */
 /* VERSION WIKICOLOR (pas de background-color) */

 :root {
-  --phon_bicolor1: #ff0000;
-  --phon_bicolor2: #40b9ff;
-  --phon_bicolorWhite1: #ff0000;
-  --phon_bicolorWhite2: #00a2ff;
+  --bicolor1: #ff0000;
+  --bicolor2: #40b9ff;
+  --bicolorWhite1: #ff0000;
+  --bicolorWhite2: #00a2ff;

  --phon_neutre: #cccccc;

@@ -310,25 +310,25 @@ svg {
 }

 .bicolor1 {
- color: var(--phon_bicolor1);
- fill: var(--phon_bicolor1);
+ color: var(--bicolor1);
+ fill: var(--bicolor1);
 background: none;
 background-clip: unset;
 -webkit-text-fill-color: initial;
 }
 .bicolorWhite1 {
- color: var(--phon_bicolorWhite1);
- fill: var(--phon_bicolorWhite1);
+ color: var(--bicolorWhite1);
+ fill: var(--bicolorWhite1);
 }

 .bicolor2 {
- color: var(--phon_bicolor2);
- fill: var(--phon_bicolor2);
+ color: var(--bicolor2);
+ fill: var(--bicolor2);
 background: none;
 background-clip: unset;
 -webkit-text-fill-color: initial;
 }
 .bicolorWhite2 {
- color: var(--phon_bicolorWhite2);
- fill: var(--phon_bicolorWhite2);
+ color: var(--bicolorWhite2);
+ fill: var(--bicolorWhite2);
 }
\ No newline at end of file
--- a/templates/coloriseur.html
+++ b/templates/coloriseur.html
@@ -5,12 +5,13 @@
    <title>WikiColor</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="{% static 'wikicolor.ico' %}"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link href="{% static 'styles/keyboard-dark.css'%}" rel="stylesheet">
    <link href="{% static 'styles/loading.css'%}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
    <link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
    <link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
+    
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="{% static 'scripts/jquery.keyboard.js'%}"></script>
    
@@ -119,6 +120,25 @@
                        <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
                    </svg>
                </div>
+                <div id="btnLiaison" class="btn-group dropstart">
+                    <div class="langtitle" data-bs-toggle="dropdown" aria-expanded="false" id="ti_btnLiaison">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-fonts" viewBox="0 0 16 16">
+                            <path d="m 9.9868135,1.9491526 h -8.511 l -0.082,2.46 h 0.478 c 0.26,-1.544 0.76,-1.783 2.694,-1.845 l 0.424,-0.013 v 7.8270004 c 0,0.663 -0.144,0.82 -1.3,0.923 v 0.52 h 4.082 v -0.52 c -1.162,-0.103 -1.306,-0.26 -1.306,-0.923 V 2.5511526 l 0.43,0.013 c 1.935,0.062 2.434,0.301 2.694,1.846 h 0.4790005 z" id="path2" inkscape:connector-curvature="0" />
+                            <path d="m 8.9519997,13.736064 q 1.3535153,0 2.6777343,-0.304688 1.330078,-0.304687 2.671875,-0.914062 v 0.738281 q -1.376953,0.691406 -2.707031,1.03711 -1.330078,0.345703 -2.6425783,0.345703 -1.3066407,0 -2.6308594,-0.345703 -1.3242188,-0.339844 -2.7070313,-1.03711 v -0.738281 q 1.3476563,0.615234 2.6660157,0.914062 1.3183593,0.304688 2.671875,0.304688 z" style="font-size:12px" id="path9" />
+                        </svg>
+                    </div>
+                    <div class="dropdown-menu px-3 text-nowrap">
+                        <div class="form-check">
+                            <input checked class="form-check-input" type="checkbox" id="liaisonsObligatoires" onchange="toggleLiaisons()">
+                            <label class="form-check-label" for="liaisonsObligatoires">Liaisons obligatoires</label>
+                        </div>
+                        <div class="form-check">
+                            <input checked class="form-check-input" type="checkbox" id="liaisonsFacultatives" onchange="toggleLiaisons()">
+                            <label class="form-check-label" for="liaisonsFacultatives">Liaisons facultatives</label>
+                        </div>
+                    </div>
+                </div>
+                
                <div id="ti_btnzi" onclick="togglezi()">
                    <img src="{% static 'im/btn-zi.png' %}" class="btnzi">
                </div>
@@ -188,7 +208,7 @@

    {% include 'footer.html' %}

-    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
    <script src="{% static 'scripts/loc2stand.js' %}"></script>
    <script src="{% static 'scripts/bicol2colcol.js' %}"></script>