Skip to content
GitLab
Commit 0c9f175c authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout mandarin git add . yeeeehaaaa

parent 7e899aca
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 0c9f175c
......@@ -196,19 +196,32 @@
<img id="pngCalqEnAlemLignes" style="display: none;" src="png/pochoir-en-lignes.png" class="superpose">
<embed id="svgClickEnAlem" style="display: none;" src="svg/alem-en_click.svg" class="superpose">
<!-- ZH Clavier Lyssenko -->
<embed id="svgZhLy" style="display: none;" src="svg/mandarin_Lyssenko_Aster.svg" class="superposeBack">
<!-- ZH Clavier A. Mariscalchi -->
<embed id="svgZhMa" style="display: none;" src="svg/mandarin_Aurelie.svg" class="superposeBack">
<!-- ZH Clavier S. Jiao -->
<embed id="svgZhJi" style="display: none;" src="svg/mandarin_modele9.3_Shuman.svg" class="superposeBack">
<!-- BOUTONS + - -->
<div class="control-clavier">
<img src="png/moins.png" onclick="rapetisserPanneau()" class="langtitle" id="ti_minClav"/>
<img src="png/plus.png" onclick="agrandirPanneau()" class="langtitle" id="ti_maxClav"/>
</div>
<div class="choixPanneau">
<div class="choixPanneau mt-2">
<select id="selectPanneau" onchange="selectPanneau(this.value)" class="langtitle">
<option value="phonoFrDo">Panneaux Fr A. Do</option>
<option value="svgFrKinephones">Panneau Fr Kinéphones</option>
<option value="svgFrGattegno">Panneau Fr Gattegno</option>
<option value="phonoEnAlem">Panneau En ALEM British</option>
<option value="phonoEnPronSciBr">Panneau En PronSci British</option>
<option value="phonoZhLy">Panneau Zh Lyssenko</option>
<option value="phonoZhMa">Panneau Zh Mariscalchi</option>
<option value="phonoZhJi">Panneau Zh Jiao</option>
</select>
<div id="doCalques" class="doCalques mt-2">
<input type="image" class="btn-calq" src="png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
......@@ -222,10 +235,11 @@
<div id="graphies" class="graphies">
<nav class="navOptions">
<div class="d-flex nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link" id="nav-ponctuation-tab" data-bs-toggle="tab" data-bs-target="#nav-ponctuation" type="button" role="tab" aria-controls="nav-ponctuation" aria-selected="true">Ponctuation</button>
<button class="nav-link" id="nav-ponctuation-tab" data-bs-toggle="tab" data-bs-target="#nav-ponctuation" type="button" role="tab" aria-controls="nav-ponctuation" aria-selected="false">Ponctuation</button>
<button class="nav-link" id="nav-grammaire-tab" data-bs-toggle="tab" data-bs-target="#nav-grammaire" type="button" role="tab" aria-controls="nav-grammaire" aria-selected="false">Réglettes</button>
<button class="nav-link" id="nav-parametres-tab" data-bs-toggle="tab" data-bs-target="#nav-parametres" type="button" role="tab" aria-controls="nav-parametres" aria-selected="false">Paramètres</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="false">Aide</button>
<button class="nav-link ms-auto" style="display:none" id="nav-zi-tab" data-bs-toggle="tab" data-bs-target="#nav-zi" type="button" role="tab" aria-controls="nav-zi" aria-selected="false"><span style="font-size: large">▣</span></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>
</nav>
<div class="tab-content" id="nav-tabContent">
......@@ -279,6 +293,39 @@
</form>
</div>
<div class="tab-pane fade" id="nav-zi" role="tabpanel" aria-labelledby="nav-zi-tab">
<!-- SINO-SYLLABE -->
<table style="margin:auto">
<tr>
<td>
<div class="controls d-flex flex-column">
<div id="syll1" class="bouton mybtn" onclick="rmPart(this,'initiale')"></div>
<div id="syll2" class="bouton mybtn" onclick="rmPart(this,'glide')"></div>
<div id="syll3" class="bouton mybtn" onclick="rmPart(this,'tonale')"></div>
<div id="syll4" class="bouton mybtn" onclick="rmPart(this,'finale')"></div>
</div>
</td>
<td>
<div class="syll syllLab" onclick="recupPhon('syll_'+[currentSyll.initiale.phon, currentSyll.glide.phon, currentSyll.tonale.phon, currentSyll.finale.phon, currentSyll.tone].join('.'))">
<div id="initiale" class="part"></div>
<div id="glide" class="part"></div>
<div id="tonale" class="part"></div>
<div id="finale" class="part"></div>
<div id="divTons" class="divTons">
<div id="ton1" class="ton tonLab t1"></div>
<div id="ton2" class="ton tonLab t2"></div>
<div id="ton3" class="ton tonLab t3"></div>
<div id="ton4" class="ton tonLab t4"></div>
<div id="ton5" class="ton tonLab t5"></div>
<div id="ton6" class="ton tonLab t6"></div>
<div id="ton7" class="ton tonLab t7"></div>
<div id="ton8" class="ton tonLab t8"></div>
</div>
</div>
</td>
</tr>
</table>
</div>
<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>
......@@ -334,5 +381,6 @@
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/phonodrop_v2.js"></script>
<script type="text/javascript" src="scripts/syntheseVocale.js"></script>
<script type="text/javascript" src="scripts/sinosyllabe.js"></script>
</body>
</html>
\ No newline at end of file
public/scripts/phonodrop_v2.js
View file @ 0c9f175c
......@@ -190,6 +190,23 @@ function recupPhon(identifiant){
newDiv.style.height = rodHeight+"px"
newDiv.style.borderRadius = thisRod.style.borderRadius
// SINOSYLLABE
} else if (identifiant.match(/syll_.*/)) {
console.log("Création de :", identifiant)
let newSyll = makeNewSyll(currentSyll)
newDiv.appendChild(newSyll)
rmPart(document.getElementById('syll1'),'initiale')
rmPart(document.getElementById('syll2'),'glide')
rmPart(document.getElementById('syll3'),'tonale')
rmPart(document.getElementById('syll4'),'finale')
toggleTone(5)
newDivWidth = 100
newDivHeight = 100
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
newDiv.classList.add('borderTransparent') // on a déjà la bordure de syll
// PHON
} else if (famille == "kinephones") {
// rect = w:84 h:26 ry:2.7
......@@ -246,8 +263,6 @@ function recupPhon(identifiant){
newDiv.setAttribute('onclick', 'selectPhon(this)')
newDiv.setAttribute('ondblclick', 'this.remove()')
if (lastSelect != "" && lastSelect.offsetTop != 0) {
newDiv.style.left = lastSelect.offsetLeft + lastSelect.offsetWidth + "px"
......@@ -257,6 +272,9 @@ function recupPhon(identifiant){
newDiv.style.top = "100px"
}
// Z-index
let highestZIndex = getHighestZIndex()
newDiv.style.zIndex = highestZIndex+1
document.getElementById('multidraggable').appendChild(newDiv)
newDiv.click()
}
......@@ -380,4 +398,24 @@ function setCouleurEcritoire(div, couleur){
} else {
document.documentElement.style.setProperty('--borders-anchor', "black");
}
}
function getHighestZIndex()
{
var elems = document.getElementsByClassName('carte-v2');
var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
for (var i = 0; i < elems.length; i++)
{
var zindex = Number.parseInt(
document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
10
);
if (zindex > highest)
{
highest = zindex;
}
}
return highest;
}
\ No newline at end of file
public/scripts/script.js
View file @ 0c9f175c
......@@ -8,7 +8,7 @@ function logg(texte) {
}
}
var version2 = true
var version2 = false
function switchv2(){
version2 = !version2
if (version2){
......
public/scripts/selectPanneau.js
View file @ 0c9f175c
......@@ -19,6 +19,9 @@ function selectPanneau(p){
var svgFond = document.getElementById('svgFond'); // svg fond couleurs pour Fr A Do
var doCalques = document.getElementById('doCalques'); // boutons calques
var svgZhLy = document.getElementById('svgZhLy'); // Panneau Mandarin Lyssenko
var svgZhMa = document.getElementById('svgZhMa'); // Panneau Mandarin Aurélie Mariscalchi
var svgZhJi = document.getElementById('svgZhJi'); // Panneau Mandarin Shuman Jiao
if (p == 'phonoFrDo') {
famille="do_bouches"
......@@ -41,10 +44,18 @@ function selectPanneau(p){
pngCalqEnAlemLignes.style.display = 'none';
pngPochoirEnAlem.style.display = 'none';
svgClickEnAlem.style.display = 'none';
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
document.getElementById('nav-zi-tab').style.display = 'none'
document.getElementById('nav-aide-tab').click()
} else if (p == 'svgFrKinephones') {
famille="kinephones"
lang="fr"
......@@ -70,6 +81,15 @@ function selectPanneau(p){
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
document.getElementById('nav-zi-tab').style.display = 'none'
document.getElementById('nav-aide-tab').click()
} else if (p == 'svgFrGattegno') {
famille="gattegno"
lang="fr"
......@@ -95,6 +115,15 @@ function selectPanneau(p){
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
document.getElementById('nav-zi-tab').style.display = 'none'
document.getElementById('nav-aide-tab').click()
} else if (p == 'phonoEnAlem') {
famille = "do_formes"
lang="enbr"
......@@ -119,10 +148,20 @@ function selectPanneau(p){
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
document.getElementById('nav-zi-tab').style.display = 'none'
document.getElementById('nav-aide-tab').click()
} else if (p == 'phonoEnPronSciBr') {
famille = "pronsci"
lang="enbr"
// EN PronSci British
svgEnPronSciBr.style.display = 'block';
......@@ -144,6 +183,125 @@ function selectPanneau(p){
// FR Gattegno
svgFrGattegno.style.display = 'none';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
document.getElementById('nav-zi-tab').style.display = 'none'
document.getElementById('nav-aide-tab').click()
} else if (p == 'phonoZhLy') {
famille = "zhly"
lang="zh"
document.getElementById('nav-zi-tab').style.display = 'block'
document.getElementById('nav-zi-tab').click()
// ZH Lyssenko
svgZhLy.style.display = 'block';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// EN ALEM
svgEnAlem.style.display = 'none';
pngCalqEnAlemLignes.style.display = 'none';
pngPochoirEnAlem.style.display = 'none';
svgClickEnAlem.style.display = 'none';
// FR DO
doCalques.style.display = 'none';
pngCalq.style.display = 'none';
svgClick.style.display = 'none';
pngPochoir.style.display = 'none';
svgFond.style.display = 'none';
// FR Kinéphones
svgFrKinephones.style.display = 'none';
// FR Gattegno
svgFrGattegno.style.display = 'none';
} else if (p == 'phonoZhMa') {
famille = "zhma"
lang="zh"
document.getElementById('nav-zi-tab').style.display = 'block'
document.getElementById('nav-zi-tab').click()
// ZH A. Mariscalchi
svgZhMa.style.display = 'block';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// ZH S. Jiao
svgZhJi.style.display = 'none';
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// EN ALEM
svgEnAlem.style.display = 'none';
pngCalqEnAlemLignes.style.display = 'none';
pngPochoirEnAlem.style.display = 'none';
svgClickEnAlem.style.display = 'none';
// FR DO
doCalques.style.display = 'none';
pngCalq.style.display = 'none';
svgClick.style.display = 'none';
pngPochoir.style.display = 'none';
svgFond.style.display = 'none';
// FR Kinéphones
svgFrKinephones.style.display = 'none';
// FR Gattegno
svgFrGattegno.style.display = 'none';
} else if (p == 'phonoZhJi') {
famille = "zhji"
lang="zh"
document.getElementById('nav-zi-tab').style.display = 'block'
document.getElementById('nav-zi-tab').click()
// ZH S. Jiao
svgZhJi.style.display = 'block';
// ZH A. Mariscalchi
svgZhMa.style.display = 'none';
// ZH Lyssenko
svgZhLy.style.display = 'none';
// EN PronSci British
svgEnPronSciBr.style.display = 'none';
// EN ALEM
svgEnAlem.style.display = 'none';
pngCalqEnAlemLignes.style.display = 'none';
pngPochoirEnAlem.style.display = 'none';
svgClickEnAlem.style.display = 'none';
// FR DO
doCalques.style.display = 'none';
pngCalq.style.display = 'none';
svgClick.style.display = 'none';
pngPochoir.style.display = 'none';
svgFond.style.display = 'none';
// FR Kinéphones
svgFrKinephones.style.display = 'none';
// FR Gattegno
svgFrGattegno.style.display = 'none';
}
}
......
public/scripts/sinosyllabe.js 0 → 100644
View file @ 0c9f175c
let currentSyll = {
"initiale": { "rect":"", "phon":""},
"glide": { "rect":"", "phon":""},
"tonale": { "rect":"", "phon":""},
"finale": { "rect":"", "phon":""},
"tone": 0,
"structure": 0 // millier:initiale, centaine:glide, dizaine:tonale, unité:finale. Ex. 10 = tonale seule; 11 = tonale+finale; 1010 = initiale+tonale
} // liste des phonèmes
function makeSyll(code) {
if (code == 10) [initiale,glide,tonale,finale] = [0,0,1,0]
if (code == 11) [initiale,glide,tonale,finale] = [0,0,2,2]
if (code == 111) [initiale,glide,tonale,finale] = [0,3,3,3]
if (code == 1111) [initiale,glide,tonale,finale] = [4,4,4,4]
if (code == 110) [initiale,glide,tonale,finale] = [0,2,2,0]
if (code == 1010) [initiale,glide,tonale,finale] = [2,0,2,0]
if (code == 1110) [initiale,glide,tonale,finale] = [3,3,3,0]
if (code == 1011) [initiale,glide,tonale,finale] = [3,0,3,3]
// transitoires
if (code == 1000) [initiale,glide,tonale,finale] = [2,0,0,0]
if (code == 1100) [initiale,glide,tonale,finale] = [3,3,0,0]
if (code == 1001) [initiale,glide,tonale,finale] = [3,0,0,3]
if (code == 1101) [initiale,glide,tonale,finale] = [4,4,0,4]
if (code == 1) [initiale,glide,tonale,finale] = [0,0,0,2]
if (code == 0) [initiale,glide,tonale,finale] = [0,0,0,0]
if (code == 100) [initiale,glide,tonale,finale] = [0,2,0,0]
if (code == 101) [initiale,glide,tonale,finale] = [0,3,0,3]
console.log(code, initiale,glide,tonale,finale)
document.getElementById('initiale').classList.remove("_1", "_2", "_3", "_4")
document.getElementById('glide').classList.remove("_1", "_2", "_3", "_4")
document.getElementById('tonale').classList.remove("_1", "_2", "_3", "_4")
document.getElementById('finale').classList.remove("_1", "_2", "_3", "_4")
document.getElementById('initiale').classList.add("_"+initiale)
document.getElementById('glide').classList.add("_"+glide)
document.getElementById('tonale').classList.add("_"+tonale)
document.getElementById('finale').classList.add("_"+finale)
document.querySelectorAll('.mybtn.actif').forEach((el) => {el.classList.remove('actif')})
if (initiale > 0) document.getElementById('syll1').classList.add('actif')
if (glide > 0) document.getElementById('syll2').classList.add('actif')
if (tonale > 0) document.getElementById('syll3').classList.add('actif')
if (finale > 0) document.getElementById('syll4').classList.add('actif')
currentSyll.structure = code
}
function togglePart(part) {
if (part == 1000) {
if (currentSyll.structure < 1000) { makeSyll(1000+currentSyll.structure) } else { makeSyll(currentSyll.structure-1000) }
}
if (part == 100) {
if (currentSyll.structure < 100 || (currentSyll.structure >= 1000 && currentSyll.structure < 1100)) {
makeSyll(currentSyll.structure+100)
} else {
makeSyll(currentSyll.structure-100)
}
}
if (part == 10) {
if ([0, 1, 100, 101, 1000, 1001, 1100, 1101].includes(currentSyll.structure) ) { makeSyll(currentSyll.structure+10) } else { makeSyll(currentSyll.structure-10) }
}
if (part == 1) {
if (currentSyll.structure < 1 || [10, 110, 100, 110, 1000, 1010, 1100, 1110].includes(currentSyll.structure) ) { makeSyll(currentSyll.structure+1) } else { makeSyll(currentSyll.structure-1) }
}
}
currentTone = 0
function toggleTone(nb) {
if (nb == currentTone || nb == 5) {
console.log("Réinitialisation du ton")
// réinitialisation si clique sur ton déjà actif
currentTone = 0
document.getElementById('ton1').style.display = "none"
document.getElementById('ton2').style.display = "none"
document.getElementById('ton3').style.display = "none"
document.getElementById('ton4').style.display = "none"
document.getElementById('ton5').style.display = "none"
document.getElementById('ton6').style.display = "none"
document.getElementById('ton7').style.display = "none"
document.getElementById('ton8').style.display = "none"
currentSyll.tone = 0
} else {
currentSyll.tone = nb
if (nb == 1) {
currentTone = 1
document.getElementById('ton1').style.display = "block"
document.getElementById('ton2').style.display = "none"
document.getElementById('ton3').style.display = "none"
document.getElementById('ton4').style.display = "block"
document.getElementById('ton5').style.display = "none"
document.getElementById('ton6').style.display = "none"
document.getElementById('ton7').style.display = "none"
document.getElementById('ton8').style.display = "none"
}
if (nb == 2) {
currentTone = 2
document.getElementById('ton1').style.display = "none"
document.getElementById('ton2').style.display = "block"
document.getElementById('ton3').style.display = "none"
document.getElementById('ton4').style.display = "block"
document.getElementById('ton5').style.display = "none"
document.getElementById('ton6').style.display = "none"
document.getElementById('ton7').style.display = "none"
document.getElementById('ton8').style.display = "none"
}
if (nb == 3) {
currentTone = 3
document.getElementById('ton1').style.display = "none"
document.getElementById('ton2').style.display = "block"
document.getElementById('ton3').style.display = "none"
document.getElementById('ton4').style.display = "block"
document.getElementById('ton5').style.display = "none"
document.getElementById('ton6').style.display = "none"
document.getElementById('ton7').style.display = "none"
document.getElementById('ton8').style.display = "block"
}
if (nb == 4) {
currentTone = 4
document.getElementById('ton1').style.display = "block"
document.getElementById('ton2').style.display = "none"
document.getElementById('ton3').style.display = "none"
document.getElementById('ton4').style.display = "none"
document.getElementById('ton5').style.display = "none"
document.getElementById('ton6').style.display = "block"
document.getElementById('ton7').style.display = "none"
document.getElementById('ton8').style.display = "none"
}
}
console.log("Ton:", currentTone)
}
let listinitiales = [
'rect_p',
'rect_p_h',
'rect_m',
'rect_f',
'rect_t',
'rect_t_h',
'rect_n',
'rect_l',
'rect_s',
'rect_ts',
'rect_t_hs',
'rect_s_retr',
'rect_ts_retr',
'rect_t_hs_retr',
'rect_z_retr',
'rect_s_slash',
'rect_ts_slash',
'rect_t_hs_slash',
'rect_k',
'rect_x',
'rect_k_h'
]
let gradientToRight = [
'phon_ts',
'phon_t_hs',
'phon_ts_retr',
'phon_t_hs_retr',
'phon_ts_slash',
'phon_t_hs_slash'
]
let listglides = [
'rect_j',
'rect_h_maj',
'rect_w'
]
let listvoyelles = [
'rect_i',
'rect_y',
'rect_1',
'rect_u',
'rect_7',
'rect_o',
'rect_a',
'rect_e',
'rect_e_maj',
'rect_wo'
]
let listtonales = [
'rect_i-t',
'rect_y-t',
'rect_u-t',
'rect_e-t',
'rect_7-t',
'rect_o-t',
'rect_e_maj-t',
'rect_a-t'
]
let listfinales = [
'rect_rho',
'rect_j-f',
'rect_w-f',
'rect_rho-f',
'rect_n-f',
'rect_n_maj-f'
]