Commit 7e899aca authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

Ajout réglettes

parent 77d1cbfc
......@@ -223,7 +223,7 @@
<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-grammaire-tab" data-bs-toggle="tab" data-bs-target="#nav-grammaire" type="button" role="tab" aria-controls="nav-grammaire" aria-selected="false">Grammaire</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>
</div>
......@@ -239,7 +239,11 @@
<div id="trait-point"></div>
</div>
<div class="tab-pane fade" id="nav-grammaire" role="tabpanel" aria-labelledby="nav-grammaire-tab">
Bientôt !
<div class="d-flex justify-content-around">
<div id="ronds"></div>
<div id="rectangles"></div>
<div id="reglettes"></div>
</div>
</div>
<div class="tab-pane fade" id="nav-parametres" role="tabpanel" aria-labelledby="nav-parametres-tab">
<!-- BORDURES -->
......
......@@ -28,6 +28,59 @@ for (i in tps) {
newDiv.style.backgroundImage = 'url("trait-point/'+tps[i]+'"'
document.getElementById('trait-point').appendChild(newDiv)
}
// Réglettes
let rodColors = [
"#f3e3ca",
"#ea1b39",
"#a8d147",
"#952a8a",
"#fdf001",
"#00834d",
"#1d1d27",
"#9a3724",
"#046cb3",
"#f27322"
]
let rodHeight = 25
for (i=1; i<=10; i++) {
// Création carte & récup infos
var newRod = document.createElement('div')
var newRect = document.createElement('div')
var newCircle = document.createElement('div')
// Formatage de la réglette
newRod.id = `rod${i}`
newRod.className = "rod"
newRod.addEventListener('click', function(){recupPhon(this.id)})
newRod.style.backgroundColor = rodColors[i-1]
newRod.style.width = `${i*rodHeight}px`
newRod.style.margin = "5px"
// Formatage du rectangle
newRect.id = `rect${i}`
newRect.className = "rod"
newRect.addEventListener('click', function(){recupPhon(this.id)})
newRect.style.backgroundColor = rodColors[i-1]
newRect.style.width = `${2*rodHeight}px`
newRect.style.margin = "5px"
// Formatage du cercle
newCircle.id = `circle${i}`
newCircle.className = "rod"
newCircle.addEventListener('click', function(){recupPhon(this.id)})
newCircle.style.backgroundColor = rodColors[i-1]
newCircle.style.width = `${rodHeight}px`
newCircle.style.borderRadius = "50%"
newCircle.style.margin = "5px"
document.getElementById('reglettes').appendChild(newRod)
document.getElementById('rectangles').appendChild(newRect)
document.getElementById('ronds').appendChild(newCircle)
}
///////////////////////////////////////////////////
......@@ -128,6 +181,15 @@ function recupPhon(identifiant){
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
// REGLETTES
} else if (identifiant.match(/rod\d+/) || identifiant.match(/rect\d+/) || identifiant.match(/circle\d+/)) {
let thisRod = document.getElementById(identifiant)
newDiv.style.backgroundColor = thisRod.style.backgroundColor
newDiv.style.width = thisRod.style.width
newDivHeight = rodHeight
newDiv.style.height = rodHeight+"px"
newDiv.style.borderRadius = thisRod.style.borderRadius
// PHON
} else if (famille == "kinephones") {
// rect = w:84 h:26 ry:2.7
......
......@@ -289,6 +289,13 @@ footer {
background-size: 100% 100%;
}
.rod {
border: solid black 1px;
border-radius: 5px;
cursor: pointer;
height: 25px;
}
.selectedPhon {
border-right: black solid 4px;
border-right-color: var(--borders-anchor);
......
Markdown is supported
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