Commit 24bfc83e authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

suite mise à jour pinyin

parent e8ded254
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
<button class="nav-link ms-auto active" id="nav-aide-tab" data-bs-toggle="tab" data-bs-target="#nav-aide" type="button" role="tab" aria-controls="nav-aide" aria-selected="true">Aide</button> <button class="nav-link ms-auto active" id="nav-aide-tab" data-bs-toggle="tab" data-bs-target="#nav-aide" type="button" role="tab" aria-controls="nav-aide" aria-selected="true">Aide</button>
</div> </div>
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content panneauDroite" id="nav-tabContent">
<div class="tab-pane fade" id="nav-ponctuation" role="tabpanel" aria-labelledby="nav-ponctuation-tab"> <div class="tab-pane fade" id="nav-ponctuation" role="tabpanel" aria-labelledby="nav-ponctuation-tab">
<div> <div>
<div class="d-flex"> <div class="d-flex">
...@@ -276,6 +276,13 @@ ...@@ -276,6 +276,13 @@
Afficher la bordures des cartes. Afficher la bordures des cartes.
</label> </label>
</div> </div>
<!-- CONTOURS LETTRES -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="toggleContours" onchange="toggleContours(this)" checked>
<label class="form-check-label" for="toggleContours">
Afficher le contours des lettres.
</label>
</div>
<!-- MAGNETISME (NE FONCTIONNE PAS AVEC MULTIDRAGGABLE)--> <!-- MAGNETISME (NE FONCTIONNE PAS AVEC MULTIDRAGGABLE)-->
<!-- <div class="form-check"> <!-- <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="toggleSnap" onchange="toggleSnap(this)" checked> <input class="form-check-input" type="checkbox" value="" id="toggleSnap" onchange="toggleSnap(this)" checked>
...@@ -295,15 +302,15 @@ ...@@ -295,15 +302,15 @@
<!-- BACKGROUND COLOR --> <!-- BACKGROUND COLOR -->
<form class="d-flex align-items-center my-2"> <form class="d-flex align-items-center my-2">
<label for="favcolor">Couleur du fond : </label> <label for="favcolor">Couleur du fond : </label>
<div style="background-color: white;" class="colorSetting colorSettingSelected" onclick="setCouleurEcritoire(this, 'white')"></div> <div style="background-color: #f9eeb1;" class="colorSetting colorSettingSelected" onclick="setCouleurEcritoire(this, '#f9eeb1')"></div>
<div style="background-color: #c0c0c0;" class="colorSetting" onclick="setCouleurEcritoire(this, '#c0c0c0')"></div> <div style="background-color: white;" class="colorSetting" onclick="setCouleurEcritoire(this, 'white')"></div>
<div style="background-color: black;" class="colorSetting" onclick="setCouleurEcritoire(this, 'black')"></div> <div style="background-color: black;" class="colorSetting" onclick="setCouleurEcritoire(this, 'black')"></div>
<input type="color" id="favcolor" class="colorSetting" name="favcolor" onchange="setCouleurEcritoire(this, this.value)"> <input type="color" id="favcolor" class="colorSetting" name="favcolor" onchange="setCouleurEcritoire(this, this.value)">
</form> </form>
<!-- STRESS TAILLE CARTES --> <!-- STRESS TAILLE CARTES -->
<div> <div>
<p>Taille des cartes avec accent primaire : <input type="number" value="2" style="width:60px" onchange="stress1ponderator = this.value.replace(',','.')"> fois la taille normale.</p> <p>Ratio de taille des cartes avec accent primaire : <input type="number" value="2" style="width:60px" onchange="stress1ponderator = this.value.replace(',','.')"></p>
<p>Taille des cartes avec accent secondaire : <input type="number" value="1,5" style="width:60px" onchange="stress2ponderator = this.value.replace(',','.')"> fois la taille normale.</p> <p>Ratio de taille des cartes avec accent secondaire : <input type="number" value="1,5" style="width:60px" onchange="stress2ponderator = this.value.replace(',','.')"></p>
</div> </div>
</div> </div>
...@@ -349,10 +356,14 @@ ...@@ -349,10 +356,14 @@
<div class="tab-pane fade d-flex flex-column justify-content-center align-items-center" id="nav-pinyin" role="tabpanel" aria-labelledby="nav-pinyin-tab"> <div class="tab-pane fade d-flex flex-column justify-content-center align-items-center" id="nav-pinyin" role="tabpanel" aria-labelledby="nav-pinyin-tab">
<!-- PINYIN --> <!-- PINYIN -->
<div style="text-align: center;"> <div style="text-align: center;">
<div id="pinyinLabAPI"></div> <div id="pinyinLabAPI" style="height: 25px;"></div>
<div id="pinyinLab" class="contours" style="font-size: 6em;"></div> <div id="pinyinLab" class="contours" style="font-size: 6em; height:150px"></div>
</div>
<div class="d-flex justify-content-around m-2" style="width:100%">
<button type="button" class="btn btn-primary" onclick="space()">空格</button>
<button type="button" class="btn btn-outline-success px-5" onclick="validPinyin()">OK了!</button>
<button type="button" class="btn btn-danger" onclick="erasePinyin()">重置</button>
</div> </div>
<button type="button" class="btn-bckspPinyin" onclick="erasePinyin()">重置</button>
</div> </div>
<div class="tab-pane fade show active" id="nav-aide" role="tabpanel" aria-labelledby="nav-aide-tab"> <div class="tab-pane fade show active" id="nav-aide" role="tabpanel" aria-labelledby="nav-aide-tab">
<strong>Bienvenue dans la nouvelle version du PhonoDrop !</strong> <strong>Bienvenue dans la nouvelle version du PhonoDrop !</strong>
......
...@@ -227,6 +227,20 @@ function recupPhon(identifiant){ ...@@ -227,6 +227,20 @@ function recupPhon(identifiant){
newDiv.classList.add('borderTransparent') // on a déjà la bordure de syll newDiv.classList.add('borderTransparent') // on a déjà la bordure de syll
// PINYIN
} else if (identifiant.match(/pinyin.*/)) {
console.log("Création de :", identifiant)
newDiv.innerHTML = document.getElementById('pinyinLab').innerHTML;
newDiv.classList.add("contours");
newDiv.style.fontSize = "5em";
newDiv.style.lineHeight = "1.2em";
newDiv.style.padding = "0px 5px";
newDivWidth = ponderateur * 100
newDivHeight = ponderateur * 110
// newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
newDiv.borderRadius = "30px"
// PHON // PHON
} else if (famille == "kinephones") { } else if (famille == "kinephones") {
// rect = w:84 h:26 ry:2.7 // rect = w:84 h:26 ry:2.7
...@@ -433,6 +447,7 @@ function space() { ...@@ -433,6 +447,7 @@ function space() {
// PARAMÈTRES DES CARTES (Options à droite de l'écritoire) // PARAMÈTRES DES CARTES (Options à droite de l'écritoire)
function toggleBordures(check){ function toggleBordures(check){
// var check = document.getElementById('toggleBordures').checked;
if (!check.checked) { if (!check.checked) {
document.documentElement.style.setProperty('--carteV2Border', 'black 0px solid'); document.documentElement.style.setProperty('--carteV2Border', 'black 0px solid');
} else { } else {
...@@ -440,14 +455,27 @@ function toggleBordures(check){ ...@@ -440,14 +455,27 @@ function toggleBordures(check){
} }
} }
function toggleContours(check){
// var check = document.getElementById('toggleContours').checked;
if (!check.checked) {
document.documentElement.style.setProperty('--contoursColor', 'transparent');
} else {
document.documentElement.style.setProperty('--contoursColor', 'black');
}
}
function setCouleurEcritoire(div, couleur){ function setCouleurEcritoire(div, couleur){
document.documentElement.style.setProperty('--couleurEcritoire', couleur); document.documentElement.style.setProperty('--couleurEcritoire', couleur);
document.querySelectorAll('.colorSettingSelected').forEach( (div) => { div.classList.remove('colorSettingSelected') }) document.querySelectorAll('.colorSettingSelected').forEach( (div) => { div.classList.remove('colorSettingSelected') })
div.classList.add('colorSettingSelected') div.classList.add('colorSettingSelected')
if (couleur == "black" || couleur == "#000000") { if (couleur == "black" || couleur == "#000000") {
document.documentElement.style.setProperty('--borders-anchor', "#9b9b9b"); document.documentElement.style.setProperty('--borders-anchor', "#9b9b9b");
document.getElementById('toggleContours').checked = false; toggleContours(document.getElementById('toggleContours'));
document.getElementById('nav-tabContent').style.color = "white";
} else { } else {
document.documentElement.style.setProperty('--borders-anchor', "black"); document.documentElement.style.setProperty('--borders-anchor', "black");
document.getElementById('nav-tabContent').style.color = "black";
} }
} }
......
...@@ -381,11 +381,25 @@ function zhPhon(identifiant) { ...@@ -381,11 +381,25 @@ function zhPhon(identifiant) {
} }
document.getElementById('pinyinLab').innerHTML = pinyinEnCoursHtml; document.getElementById('pinyinLab').innerHTML = pinyinEnCoursHtml;
if (document.getElementById('pinyinLab').innerHTML.length == 0) erasePinyin();
if (Object.keys(syllons).includes(document.getElementById('pinyinLab').innerText+"5")) {
document.getElementById('pinyinLab').classList.add("pinyinAtteste");
} else {
document.getElementById('pinyinLab').classList.remove("pinyinAtteste");
}
}
function validPinyin() {
recupPhon("pinyin");
erasePinyin();
} }
function erasePinyin() { function erasePinyin() {
document.getElementById('pinyinLab').innerHTML = ''; document.getElementById('pinyinLab').innerHTML = '';
document.getElementById('pinyinLabAPI').innerHTML = ''; document.getElementById('pinyinLabAPI').innerHTML = '';
document.getElementById('pinyinLab').classList.remove("pinyinAtteste");
} }
//["","́","́","̌","̌",""] // tons[1]="´" tons[0|5]="" //["","́","́","̌","̌",""] // tons[1]="´" tons[0|5]=""
...@@ -416,8 +430,11 @@ function recupTone(identifiant) { ...@@ -416,8 +430,11 @@ function recupTone(identifiant) {
nod.innerText = nod.innerText.replace(thisVoy,tons[myton][thisVoy]) nod.innerText = nod.innerText.replace(thisVoy,tons[myton][thisVoy])
} }
}) })
document.getElementById('pinyinLabAPI').innerHTML += myton;
document.getElementById('pinyinLab').classList.add("pinyinAtteste");
} else { } else {
console.log("Syllon non attesté.") console.log("Syllon non attesté.");
document.getElementById('pinyinLab').classList.remove("pinyinAtteste");
} }
} }
......
...@@ -3,8 +3,10 @@ ...@@ -3,8 +3,10 @@
--hcarte: 56px; --hcarte: 56px;
--marginbot: 00px; --marginbot: 00px;
--carteV2Border: black 1px solid; --carteV2Border: black 1px solid;
--couleurEcritoire: white; --couleurEcritoire: #f9eeb1;
--borders-anchor: black; --borders-anchor: black;
--contoursWidth: 0.5px;
--contoursColor: black;
} }
body { body {
...@@ -457,6 +459,16 @@ footer { ...@@ -457,6 +459,16 @@ footer {
} }
.contours { .contours {
-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-width: var(--contoursWidth);
-webkit-text-stroke-color: black; -webkit-text-stroke-color: var(--contoursColor);
}
.pinyinAtteste {
border: solid 3px green;
border-radius: 30px;
padding:15px 25px 0px 25px;
}
.panneauDroite {
background-color: var(--couleurEcritoire);
} }
\ No newline at end of file
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