modif url en/fr + selectLangFromUrl()

coloriseur/urls.py

@@ -22,6 +22,8 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('app/', redirApp),
     path('', main),
+    path('en/', main),
+    path('fr/', main),
     path('colorize/', csrf_exempt(colorize)),
     path('app/dico/', dicoView),
     path('dicoSearch/', dicoReq),

static/languages/languages.js

@@ -21,7 +21,7 @@ var langJson = {
     },
     "sp_bicolor": {
         "fr": '<span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">B</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">i</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">c</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">l</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">re</span>',
-        "en": '<span class="phon_b" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">B</span><span class="phon_ai_maj stress1" style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">i</span><span class="phon_k" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">c</span><span class="phon_arobase schwa" style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span class="phon_l" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">l</span><span class="phon_arobase schwa" style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span class="phon_r_slash" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">r</span>'
+        "en": '<span class="phon_b" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">B</span><span class=" stress1" style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">i</span><span class="phon_k" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">c</span><span class="phon_arobase schwa" style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span class="phon_l" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">l</span><span class="phon_arobase schwa" style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span class="phon_r_slash" style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">r</span>'
     },
     "sp_silentWay": {
         "fr": '<span style="-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;"><span class="text phon_s">S</span><span style="background:-webkit-linear-gradient(white 60%, #e7236d 75%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;">i</span><span class="text phon_l">l</span><span class="text phon_e_maj ">e</span><span class="text phon_n">n</span><span class="text phon_t">t</span><span class="text punct "> </span><span class="text phon_w">W</span><span class="text phon_ei_maj">ay</span></span>',

static/scripts/main.js

@@ -4,9 +4,30 @@ $(document).ready(function(){
 	txtarea.focus();    
 });
 
+const thisURL = window.location.href;
+console.log("url:",thisURL);
+var thisPageLang = "";
+
+// set page target language
+setLangFromUrl()
+function setLangFromUrl() {
+    var pageLang = thisURL.match(/.*\/(fr|en)/);
+    if (pageLang) { 
+        console.log("Langue indiquée par l'url:",pageLang[1]);
+        thisPageLang = pageLang[1];
+        if (pageLang[1]=="fr") selectLang("fr");
+        if (pageLang[1]=="en") selectLang("en");
+    } else { 
+        console.log("Chargement langue par défaut (fr)");
+        thisPageLang = "fr"
+        selectLang("fr");
+    }
+}
+
 function selectLang(lang){
 	if (lang=="en"){
 		interface("en");
+		document.getElementById('choixLang').value = 'en';
 		document.getElementById('output').classList.remove('outputBold');
 		
 		document.getElementById('monochromeLabel').style.display="";
@@ -15,8 +36,11 @@ function selectLang(lang){
 		document.getElementById('bicolorLabel').style.margin = "-10px 0px";
 		document.getElementById('subtitle').style.marginTop = "-20px";
 
+		window.history.pushState("", "", "/en");
+
 	} else if (lang=="fr"){
 		interface("fr");
+		document.getElementById('choixLang').value = 'fr';
 		document.getElementById('output').classList.add('outputBold');
 
 		document.getElementById('monochromeLabel').style.display="none";
@@ -24,6 +48,8 @@ function selectLang(lang){
 		document.getElementById('silentWayLabel').style.margin = "0px 0px";
 		document.getElementById('bicolorLabel').style.margin = "0px 0px";
 		document.getElementById('subtitle').style.marginTop = "0px";
+
+		window.history.pushState("", "", "/fr");
 	}
 }