Commit 547104d1 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout module checkWord

parent 99d22e9c
......@@ -216,6 +216,8 @@ function recupPhon(identifiant){
//fonction permettant d'écrire le choix de graphème
function writeGraph(graph,phon){
document.getElementById('checkWordValid').style.display = "none";
if (maj) {
toggleCasse(); // retour minuscules automatique
recupPhon(currentPhon)
......@@ -243,9 +245,13 @@ function writeGraph(graph,phon){
}
}
// SI LIAISON INTERNE (ex. février) : noTextClip
var textClip = "";
if (graph == "͜") textClip = " noTextClip";
var graphSpan = document.createElement("span")
graphSpan.setAttribute("id", phon+"-g"+Math.random().toString(36).substring(2,9))
graphSpan.setAttribute("class", 'text '+phon+stress)
graphSpan.setAttribute("class", 'text '+phon+stress+textClip)
graphSpan.setAttribute('onclick', "putAnchor(this.id)")
if (thisPageLang != "zh") {
graph = graph.replace("","")
......@@ -368,6 +374,7 @@ function writeEnter(){
//fonction effacer
function erasePreviousSpan(){
document.getElementById('checkWordValid').style.display = "none";
var elASupprimer = document.getElementById(curseurPos)
var previousEl = elASupprimer.previousElementSibling
......@@ -393,6 +400,7 @@ function erasePreviousSpan(){
// fonction Tout Effacer
function eraseAll() {
document.getElementById('checkWordValid').style.display = "none";
var r = window.confirm(langJson['sp_confirmErase'][thisPageLang])
if (r) {
console.log("Reset All")
......@@ -1009,4 +1017,98 @@ let listfinales = [
'rect_rho-f',
'rect_n-f',
'rect_n_maj-f'
]
\ No newline at end of file
]
// FEEDBACK PHONOLOGIQUE & ORTHOGRAPHIQUE
// - récupère la liste des mots (orthographiques, phonologiques) de #textZone
// - requête wikicolor checkWord pour savoir si ortho existe, phono existe et ortho-phono existe
// - feedback :
// - soulignement hachuré si phono existe pas
// - soulignement plein si ortho existe pas
// var checkWordCheck = false; // quand true, checkWord à chaque writeGraph()
// function checkCheckWord(){
// if (checkWordCheck){
// checkWordCheck=false;
// document.getElementById("checkWordCheck").classList.remove("checkWordCheck");
// } else {
// checkWordCheck=true;
// document.getElementById("checkWordCheck").classList.add("checkWordCheck");
// }
// }
function checkWord() {
var ww = []; // contiendra liste de mots [] contenant liste phonographies ["m","phon_m"]
var rep = document.getElementById("textZone").children;
var w = []; // phonographie du mot courant
for (r of rep) {
if (r.classList.contains("punct") || r.classList.contains("pause") || r.classList.contains("space") || r.id == "gEnd" || r.innerText == "") {
if (w.length>0) {
ww.push(w);
}
w = [];
} else if (r.innerText != "" && r.id != "g0") {
var rinner = r.innerText
var stress = 0
if (r.innerText == "͜") rinner = "";
if (r.classList.contains('stress1')) stress = 1
if (r.classList.contains('stress2')) stress = 2
w.push([rinner, r.classList[1], r.id, stress])
} else if (r.classList[0]=="carte") {
var stress = 0
if (r.classList.contains('stress1')) stress = 1
if (r.classList.contains('stress2')) stress = 2
w.push(["",r.classList[2],r.id, stress])
}
}
console.log(ww);
let cptw = 0;
for (w of ww) {
cptw++;
var word = "";
var phono = "";
var listSpans = []; // tous les spans concernés, qu'il faudra souligner le cas échéant
for (p of w) {
word += p[0];
if (p[3]==1) phono += "ˈ"
if (p[3]==2) phono += "ˌ"
if (thisPageLang=="en" && p[1]=="phon_e") phono += phon2api["phon_e_maj"]
else phono += phon2api[p[1]];
listSpans.push(p[2]);
}
var fin = false;
if (cptw == ww.length) fin = true;
document.getElementById('checkWordValid').style.display = "none";
document.getElementById('checkWordLoading').style.display = "block";
reqWiki(word,phono,thisPageLang,listSpans,fin);
}
}
async function reqWiki(word,phono,lang,listSpans,fin) {
const response = await fetch(`https://wikicolor.alem-app.fr/checkWord?w=${word}&t=${phono}&lang=${lang}`);
const data = await response.json();
console.log(data);
for (span of listSpans){
var el = document.getElementById(span);
if (el.classList[0]=="carte") {
el.classList.remove("FBphonoCarte");
if (!data.rep.t) el.classList.add("FBphonoCarte");
} else {
el.classList.remove("FBortho");
el.classList.remove("FBphonoGraph");
if (!data.rep.w) el.classList.add("FBortho");
if (!data.rep.t) el.classList.add("FBphonoGraph");
}
}
if (fin) {
document.getElementById('checkWordLoading').style.display = "none";
document.getElementById('checkWordValid').style.display = "block";
}
}
\ No newline at end of file
......@@ -213,6 +213,11 @@ var langJson = {
"fr": "Mode plein écran",
"en": "Full screen mode",
"zh": ""
},
"ti_checkWord": {
"fr": "Vérifier dans le dictionnaire de WikiColor",
"en": "Look up in WikiColor dictionary",
"zh": "Look up in WikiColor dictionary"
}
......
......@@ -296,11 +296,11 @@ footer {
margin-right: auto;
}
.stripeX{
.FBphonoCarte{
position: relative;
padding: 0em;
}
.stripeX:after {
.FBphonoCarte:after {
content: '';
position: absolute;
left: 0;
......@@ -310,15 +310,15 @@ footer {
background: repeating-linear-gradient(-35deg, red, red 2px, transparent 2px, transparent 4px);
}
.bortho {
.FBortho {
border-bottom: 5px red solid;
}
.stripeT{
.FBphonoGraph{
position: relative;
padding: 0em;
}
.stripeT:after {
.FBphonoGraph:after {
content: '';
position: absolute;
left: 0;
......@@ -328,6 +328,10 @@ footer {
background: repeating-linear-gradient(-35deg, red, red 2px, transparent 2px, transparent 4px);
}
.checkWordCheck {
outline: rgba(0, 128, 0, 0.473) 5px solid;
}
.form-group {
margin-bottom: 10px;
}
......
......@@ -92,6 +92,15 @@
<path d="m 15.709659,0.29034053 c -0.19525,-0.195191 -0.511749,-0.195191 -0.706999,0 -2.66185,1.94422997 -4.096,6.32203517 -4.096,1.32799997 0,-0.66666597 -1.0000002,-0.66666597 -1.0000002,0 v 3.9750003 c 0,0.276143 0.2238582,0.5000003 0.5000002,0.5000003 h 3.975 c 0.666666,0 0.666666,-1.0000004 0,-1.0000004 -5.0404432,0.6861281 -0.592051,-2.1759492 1.327999,-4.09600017 0.195191,-0.19525 0.195191,-0.51175 0,-0.707 z" /> -->
</svg>
</button>
<button type="button" class="btn btn-success langtitle" id="ti_checkWord" onclick="checkWord()" style="padding:5px 7px; position: relative;">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
<svg id="checkWordLoading" style="display:none" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="25" height="25" viewBox="0 0 128 128" xml:space="preserve"><rect x="0" y="0" width="100%" height="100%" fill="#198754" /><g><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#0c472c"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(45 64 64)"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(90 64 64)"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(135 64 64)"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(180 64 64)"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(225 64 64)"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(270 64 64)"/><path d="M38.52 33.37L21.36 16.2A63.6 63.6 0 0 1 59.5.16v24.3a39.5 39.5 0 0 0-20.98 8.92z" fill="#c3d2cb" transform="rotate(315 64 64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;45 64 64;90 64 64;135 64 64;180 64 64;225 64 64;270 64 64;315 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>
<svg id="checkWordValid" style="display:none" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
</svg>
</button>
<div class="form-check form-switch mx-2 fs-4">
<input class="form-check-input" type="checkbox" id="modePhono" onchange="switchMode()" checked>
<label class="form-check-label" for="modePhono">Mode Graphies</label>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment