Ajout fonctionnalité export des paramètres

colorapp/liaisons.py

@@ -135,8 +135,9 @@ def obtenirM1M2(mot1, mot2):
             # print("Le mot2 qui commence par une lettre voyelle : "+mot2)
             return (mot1, mot2)
         # voir si la première lettre de mot2 est "h"
-        elif mot2[0].lower() == 'h' and mot2.lower() in word2trans and "*" not in list(word2trans[mot2.lower()]['t'].keys())[0] :
-            # print("Le mot2 qui commence par 'h' muet : " + mot2)
+        elif mot2[0].lower() == 'h' and mot2.lower() in word2trans and "*" not in [y['tt'][0] for y in word2trans[mot2.lower()]['t']]:
+            # si le mot commence par h mais n'a pas de *h dans toutes ses prononciations.
+            print("Le mot2 commence par 'h' muet : " + mot2)
             return (mot1, mot2)
         else:
             # print("Le mot2 qui n'a pas de liaison : " + mot2)

colorapp/textPhonographer.py

@@ -263,7 +263,7 @@ def traitement(mot, lang, liaison): # LIAISON : avec le caractere liaison en arg
 
         for trans in transList:
             if lang == "fr":
-                res = decoupage(mot,trans[0],phon2graph,phon2class)
+                res = decoupage(mot,trans[0],phon2graph,phon2class) # add ,True to get live log
                 ll = trans[1]
                 tt = trans[0]
                 msg = ""

colorapp/views.py

@@ -18,10 +18,10 @@ logFile = "../logs/dico_frwiktionary-20200301_v2.log"
 def redirApp(request):
     return HttpResponseRedirect('/')
 
-def main(request):
+def main(request,pageLang,**mySettings):
     data = Data()
     data.update = updateTime()
-    return render(request, 'coloriseur.html', {'data': data})
+    return render(request, 'coloriseur.html', {'data': data, 'pageLang':pageLang})
 
 def colorize(request):
     colis = json.loads(request.body)

coloriseur/urls.py

@@ -14,7 +14,7 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, re_path
 from colorapp import views as colorapp_views
 from django.views.decorators.csrf import csrf_exempt
 
@@ -22,9 +22,8 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('app/', colorapp_views.redirApp),
     path('', colorapp_views.main),
-    path('en/', colorapp_views.main),
-    path('fr/', colorapp_views.main),
-    path('zh/', colorapp_views.main),
+    path('<str:pageLang>/<str:mySettings>', colorapp_views.main),
+    path('<str:pageLang>/', colorapp_views.main),
     path('colorize/', csrf_exempt(colorapp_views.colorize)),
     path('getPhonoOf/', csrf_exempt(colorapp_views.getPhonoOf)),
     #path('getAllPhonographiesOf/', csrf_exempt(colorapp_views.getAllPhonographiesOf)),

static/languages/languages.js

@@ -31,7 +31,7 @@ var langJson = {
     },
     "sp_subtitle": {
         "fr": '<span class="phon_k">C</span><span class="phon_o_maj">o</span><span class="phon_l">l</span><span class="phon_o_maj">o</span><span class="phon_r_maj">r</span><span class="phon_i">i</span><span class="phon_z">s</span><span class="phon_9">eu</span><span class="phon_r_maj">r</span><span> </span><span class="phon_f">Ph</span><span class="phon_o_maj">o</span><span class="phon_n">n</span><span class="phon_o_maj">o</span><span class="phon_g">g</span><span class="phon_r_maj">r</span><span class="phon_a">a</span><span class="phon_f">ph</span><span class="phon_e">é</span><span class="phon_m">m</span><span class="phon_i">i</span><span class="phon_k">que</span>',
-        "en": '<span class="phon_f">ph</span><span class="phon_arobase schwa">o</span><span class="phon_n">n</span><span class="phon_q_maj stress2">o</span><span class="phon_g">g</span><span class="phon_r_slash">r</span><span class="phon_cbrack">a</span><span class="phon_f">ph</span><span class="phon_i_long stress1">e</span><span class="phon_m">m</span><span class="phon_i_maj schwa">i</span><span class="phon_k">c</span><span> </span><span class="phon_k">c</span><span class="phon_v_maj stress2">o</span><span class="phon_l">l</span><span class="phon_arobase schwa">o</span><span class="phon_r_slash">r</span><span class="phon_ai_maj stress1">i</span><span class="phon_z">s</span><span class="phon_arobase schwa">e</span><span class="phon_r_slash">r</span>',
+        "en": '<span class="phon_f">ph</span><span class="phon_arobase schwa">o</span><span class="phon_n">n</span><span class="phon_q_maj stress2">o</span><span class="phon_g">g</span><span class="phon_r_slash">r</span><span class="phon_cbrack">a</span><span class="phon_f">ph</span><span class="phon_i_long stress1">e</span><span class="phon_m">m</span><span class="phon_i_maj schwa">i</span><span class="phon_k">c</span><span> </span><span class="phon_k">c</span><span class="phon_v_maj stress2">o</span><span class="phon_l">l</span><span class="phon_arobase schwa">o</span><span class="phon_r_slash">r</span><span class="phon_ai_maj stress1">i</span><span class="phon_z">s</span><span class="phon_arobase schwa">er</span>',
         "zh": ''
     },
     "sp_bicolor": {
@@ -439,5 +439,35 @@ var langJson = {
         "fr": "Couleur de base :",
         "en": "Base color:",
         "zh": "Base color:"
-    }
+    },
+    "sp_popParHead": {
+        "fr": "Exporter mes paramètres",
+        "en": "Export my settings",
+        "zh": "Export my settings"
+    },
+    "sp_popParInfo": {
+        "fr": "Le lien ci-dessous vous permettra d'ouvrir WikiColor avec les paramètres actuels. Vous pouvez conserver ce lien dans un document ou l'envoyer à d'autres personnes. Il sera bientôt possible d'importer les couleurs dans les autres applications.",
+        "en": "The link below will allow you to open WikiColor with the current settings.",
+        "zh": "The link below will allow you to open WikiColor with the current settings."
+    },
+    "myTooltipPar": {
+        "fr": "Copier",
+        "en": "Copy",
+        "zh": "Copy"
+    },
+    "sp_copypasteCopierPar": {
+        "fr": "Copier",
+        "en": "Copy",
+        "zh": "Copy"
+    },
+    "ti_partager": {
+        "fr": "Exporter/sauvegarder mes paramètres",
+        "en": "Export/save my settings",
+        "zh": "Export/save my settings"
+    },
+    "sp_btnExportCustom": {
+        "fr": "Exporter/Enregistrer",
+        "en": "Export/Save",
+        "zh": "Export/Save"
+    },
 }
\ No newline at end of file

static/scripts/main.js

@@ -724,4 +724,30 @@ function toggleLiaisons() {
     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
+}
+
+
+/////// Popup export des paramètres
+// Get the modal
+var modalPar = document.getElementById("popPar");
+// Get the <span> element that closes the modal
+var spanPar = document.getElementById("closePar");
+
+// Fonction pour ouvrir le PopUp 
+function getPopPar() {
+    // Affichage popup
+    modalPar.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the modal
+spanPar.onclick = function() {
+    modalPar.style.display = "none";
+}
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+    if (event.target == modalPar) {
+        modalPar.style.display = "none";
+    }
+}
+
+if (window.location.href.split('!').length>1) importCustom(window.location.href.split('!')[1]);
\ No newline at end of file

static/scripts/styleCustomizer.js

@@ -15,7 +15,7 @@ let lang2phons = {
 
 var bi = ["ɑː","ɑɹ","ɖʐ","əʊ","ɜː","ɡɣ","ɡʷ","ɡʒ","ɢʁ","ɪə","ɪɹ","ɟʝ","ɴɢ","ɲ","ɲɟ","ɳɖ","ɳʈ","ŋɡ","ŋʷ","ɔː","ɔɪ","ɔɹ","ʈʂ","ʊə","ʊɹ","aɪ","aɪə","aʊ","aʊwə","bβ","ɡb","bv","cç","ɲc","dð","dɮ","dʐ","dʑ","dʒ","dz","eə","eɪ","eɹ","ef","ʔh","iː","ɥi","ij","iz","jə","jʊ","jʊə","jʊɹ","jʊɹ","ju","juː","kʃ","kʷ","ŋk","kp","ks","kw","kx","əl","lj","əm","mɸ","mβ","ŋm","mb","mp","ən","nð","nʃ","nʒ","nθ","nd","nd̪","nj","ns","nt","nt̪","nz","oʊ","pɸ","pf","ɴq","qχ","sz","tɕ","tɕʰ","tɬ","tʂ","tʂʰ","tʃ","tʃʼ","tθ","ts","tsʰ","tsʼ","uː","wɑ","wɑː","wɛ̃","wʌ","wa","waɪ","waɹ","xʷ","əz","ɡz","ɪz"];
 
-document.getElementById('colorPicker-Base').value = getComputedStyle(document.documentElement).getPropertyValue('--phon_base');
+document.getElementById('colorPicker-phon_base').value = getComputedStyle(document.documentElement).getPropertyValue('--phon_base');
 
 // Mémorisation des couleurs de variables de Phonochromie Alem
 let memCol = {};
@@ -43,7 +43,7 @@ function setPhon(phon) {
     // identifier l'entrée de la css à modifier
     for (r=0; r<thisCSS.cssRules.length; r++) {
         if(thisCSS.cssRules[r].selectorText == "."+phon) { 
-            console.log("Modification CSS:",r,thisCSS.cssRules[r])
+            // console.log("Modification CSS:",r,thisCSS.cssRules[r])
 
             // on remet les couleurs enregistrées dans memClass memClass[phon]
             thisCSS.cssRules[r].style['fill'] = memClass[phon]['fill']
@@ -52,7 +52,7 @@ function setPhon(phon) {
             thisCSS.cssRules[r].style['-webkit-text-fill-color'] = memClass[phon]['-webkit-text-fill-color']
             thisCSS.cssRules[r].style['text-decoration'] = memClass[phon]['text-decoration']
 
-            delete memClass[phon];
+            if (phon in memClass) delete memClass[phon];
         }
     }
 }
@@ -68,7 +68,7 @@ function unsetPhon(phon) {
     // identifier l'entrée de la css à modifier
     for (r=0; r<thisCSS.cssRules.length; r++) {
         if(thisCSS.cssRules[r].selectorText == "."+phon) { 
-            console.log("Modification CSS:",r,thisCSS.cssRules[r])
+            // console.log("Modification CSS:",r,thisCSS.cssRules[r])
             
             // Enregistrement des couleurs dans memClass pour la clé phon
             var [fill,col,stop,webkit,line] = [
@@ -114,14 +114,19 @@ function getCol(phon) {
 }
 
 function togglePhon(cbid) {
-    var thisCb = document.getElementById(cbid);
+    var thisCb = document.querySelector('#'+cbid);
     var phon = cbid.slice(3);
-    console.log(thisCb.checked, phon);
-    if (thisCb.checked) {
-        setPhon(phon)
+    if (thisCb) {
+        console.log(thisCb.checked, phon);
+        if (thisCb.checked) {
+            setPhon(phon)
+        } else {
+            unsetPhon(phon);
+        }
     } else {
+        console.log('deactivate',phon);
         unsetPhon(phon);
-    }
+    }    
 }
 
 function checkUncheck(thisChecked, classe) {
@@ -221,6 +226,97 @@ function exportCustom(){
                                                         .replace(/:/g,'=')
                                                         .replace(/;/g,'&')
                                                         .replace(/&$/,'');
-    paramlink = unchecks + '$' + cols;
+
+    // Mémorisation si bicolore ou pas
+    var bicol = document.getElementById('bicolor').checked;
+
+    // Mémorisation si monochrome ou pas
+    var mnc = document.getElementById('monochrome').checked;
+
+    // Mémorisation liaisons
+    var obl = 1;
+    if(!document.getElementById('liaisonsObligatoires').checked) obl=0;
+    var fac = 1;
+    if(!document.getElementById('liaisonsFacultatives').checked) fac=0;
+
+    // Génération du lien
+    var params = [];
+    if(unchecks.length>0) params.push('uck'+unchecks);
+    if(cols.length>0) params.push('col'+cols);
+    if(bicol) params.push('bic');
+    if(mnc) params.push('mnc');
+    if(obl==0 || fac==0) params.push('lia'+String(obl)+String(fac));
+
+    if(defaultBg == "white") params.push('bgw');
+    if(thisRegion!="FR") params.push('reg'+thisRegion);
+
+    paramlink = window.location.href + "/!" + params.join('$');
     console.log(paramlink);
-}
\ No newline at end of file
+    document.getElementById('pLienDivPar').innerHTML = paramlink;
+    getPopPar();
+}
+
+function importCustom(paramlink){
+    
+    var par = paramlink.split('$');
+    var p2param = {};
+    for (let x of par) {
+        var p = x.slice(0,3);
+        var param = x.slice(3,x.length).split('&');
+        p2param[p] = param;
+    }
+    console.log("Import des paramètres :",p2param);
+
+    if ("uck" in p2param) {
+        for (let phon of p2param['uck']) {
+            var thisCb = document.querySelector('#cb-phon_'+phon);
+            if (thisCb) thisCb.checked = false;
+            togglePhon('cb-phon_'+phon);
+        }
+    }
+
+    if ("col" in p2param) {
+        for (let col of p2param['col']) {
+            var [phon,hex] = col.split('=');
+            var thisColPick = document.querySelector('#colorPicker-phon_'+phon);
+            if(thisColPick) {
+                thisColPick.value = "#"+hex;
+            }
+            setCol('phon_'+phon,'#'+hex);
+        }
+    }
+
+    if ("bic" in p2param) {
+        console.log('toBicolor()!');
+        toBicolor();
+        document.getElementById('bicolor').checked = true;
+    }
+
+    if ("mnc" in p2param) {
+        console.log('toMonochrome()!');
+        toMonochrome();
+        document.getElementById('monochrome').checked = true;
+    }
+
+    if ("reg" in p2param) {
+        console.log('Region set to',p2param['reg']);
+        thisRegion = p2param['reg'];
+        document.getElementById('inlineRadio'+p2param['reg']).checked = true;
+    }
+
+    if ("bgw" in p2param) {
+        bg2white();
+    }
+
+    if ("lia" in p2param) {
+        if (p2param['lia'][0]=="01" || p2param['lia'][0]=="00"){
+            console.log('lia obl set to false');
+            document.getElementById('liaisonsObligatoires').checked = false;
+        }
+        if (p2param['lia']=="10" || p2param['lia']=="00"){
+            console.log('lia fac set to false');
+            document.getElementById('liaisonsFacultatives').checked = false;
+        }
+        toggleLiaisons();
+    }
+}

templates/coloriseur.html

@@ -2,6 +2,10 @@
 {% load static %}
 
 {% block content %}
+<script>
+    var thisPageLang = "{{ pageLang|escapejs }}";
+</script>
+
 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
     <defs>
         <linearGradient id="gradient_ts" x1="0" x2="1" y1="0" y2="0">
@@ -70,23 +74,23 @@
     <div id="regionPriorityDiv" style="display: none;">
         <i>Give a priority to:</i>
         <div class="form-check form-check-inline">
-            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" onclick="thisRegion=this.value" value="UK" checked>
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadioUK" onclick="thisRegion=this.value" value="UK" checked>
             <label class="form-check-label" for="inlineRadio1"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-uk.png' title="United Kingdom (mostly RP)"></img></label>
         </div>
         <div class="form-check form-check-inline">
-            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" onclick="thisRegion=this.value" value="US">
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadioUS" onclick="thisRegion=this.value" value="US">
             <label class="form-check-label" for="inlineRadio2"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-us.png' title="United States of America (mostly GA)"></img></label>
         </div>
         <div class="form-check form-check-inline">
-            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" onclick="thisRegion=this.value" value="CA">
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadioCA" onclick="thisRegion=this.value" value="CA">
             <label class="form-check-label" for="inlineRadio3"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-ca.png' title="Canada (mostly Standard Canadian English)"></img></label>
         </div>
         <div class="form-check form-check-inline">
-            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" onclick="thisRegion=this.value" value="AU">
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadioAU" onclick="thisRegion=this.value" value="AU">
             <label class="form-check-label" for="inlineRadio4"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-au.png' title="Australia (Australian English)"></img></label>
         </div>
         <div class="form-check form-check-inline">
-            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" onclick="thisRegion=this.value" value="NZ">
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadioNZ" onclick="thisRegion=this.value" value="NZ">
             <label class="form-check-label" for="inlineRadio5"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-nz.png' title="New Zealand (New Zealand English)"></img></label>
         </div>
         <div style="max-width: 700px;font-size: .8em; margin:auto">
@@ -104,12 +108,13 @@
             <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                 <div class="accordion-body">
                     <p class="langspan" id="sp_customExplain"></p>
-                    <span class="langspan" id="sp_customColBase"></span> <input type="color" id="colorPicker-Base" class="colorSetting" onchange="setCol('phon_base',this.value)">
+                    <span class="langspan" id="sp_customColBase"></span> <input type="color" id="colorPicker-phon_base" class="colorSetting" onchange="setCol('phon_base',this.value)">
                     
                     <!-- TABLES DES PHONEMES -->
                     <small><div id="phonTable"></div></small>
                     
-                    <small><i>(*vous pourrez bientôt enregistrer et partager vos préférences de colorisation.)</i></small><br/>
+                    <button class="langtitle" style="background-color: rgb(247, 211, 93);font-size:.8em;" id="ti_partager" onclick="exportCustom()"><span id="sp_btnExportCustom" class="langspan"></span></button>
+                    <br/>
                     <small><i>(*n'hésitez pas à nous faire remonter vos besoins et suggestions pour WikiColor! <a href="mailto:contact@alem-app.fr">nous contacter</a>)</i></small>
                 </div> <!-- end accordion body -->
             </div>
@@ -234,6 +239,30 @@
         </div>
     </div>
 </div>
+
+<!-- Modal de génération de lien de partage/sauvegarde des paramètres -->
+<div id="popPar" class="modal">
+    <!-- Modal content -->
+    <div class="modal-content">
+        <div class="modal-header">
+            <span id="closePar" class="close">&times;</span>
+            <h2><span id="sp_popParHead" class="langspan"></span></h2>
+        </div>
+        
+        <div class="modal-body">
+            <p><span id="sp_popParInfo" class="langspan"></span></p>
+            <div id="pLienDivPar" class="pLienDiv" style="font-size: .8em; background-color: lightgoldenrodyellow; font-family: 'Courier New', Courier, monospace; text-align: center; overflow-wrap:break-word"></div>
+            <div class="copyButton">
+                <button onclick="toClipBoard('pLienDivPar','myTooltipPar')" onmouseout="outFunc('myTooltipPar')"><span class="copyButtonText langspan" id="myTooltipPar"></span><span id="sp_copypasteCopierPar" class="langspan"></span></button>
+            </div>
+        </div>
+        
+        <div class="modal-footer">
+            <h3>WikiColor</h3>
+        </div>
+    </div>
+</div>
+
 <div id="actionBlock" style="display: none;"><div class="loader mainLoad"></div></div>
 <div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
 {% endblock %}