Commit 3dc4cf5e authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout fonctionnalité taille clavier

parent 63014cd5
......@@ -144,7 +144,6 @@ imgGroup.forEach(function(img, idx) {
};
});
*/
var rien = document.getElementById('btn-rien');
var vsm = document.getElementById('btn-vsm');
var bch = document.getElementById('btn-bch');
......@@ -154,4 +153,21 @@ rien.addEventListener('click', function(){pngCalq.src='';});
vsm.addEventListener('click', function(){pngCalq.src='../static/png/03.png';});
bch.addEventListener('click', function(){pngCalq.src='../static/png/04.png';});
cpsg.addEventListener('click', function(){pngCalq.src='../static/png/06.png';});
//////////////////////////////////////////////////////////
\ No newline at end of file
//////////////////////////////////////////////////////////
// Modifier l'encrage et la taille du clavier
var btnmin = document.getElementById('btn-min');
btnmin.addEventListener('click', function(){
var clavSize = getComputedStyle(document.documentElement).getPropertyValue('--clavSize');
var graphSize = getComputedStyle(document.documentElement).getPropertyValue('--graphSize');
document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) - 10 + '%');
document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) + 10 + '%');
});
var btnmax = document.getElementById('btn-max');
btnmax.addEventListener('click', function(){
var clavSize = getComputedStyle(document.documentElement).getPropertyValue('--clavSize');
var graphSize = getComputedStyle(document.documentElement).getPropertyValue('--graphSize');
document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) + 10 + '%');
document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) - 10 + '%');
});
\ No newline at end of file
:root {
--clavSize:70%;
--graphSize:30%;
}
body {
background-image: url(../im/arriereplan.gif);
font-family: Palatino, Times, Calibri;
......@@ -33,8 +38,8 @@ body {
}
.clavier {
-ms-flex: 70%; /* IE10 */
flex: 70%;
-ms-flex: var(--clavSize); /* IE10 */
flex: var(--clavSize);
flex-direction: column;
margin: auto;
position: relative;
......@@ -54,10 +59,20 @@ body {
left: 0;
width: 100%;
}
.control-clavier {
background-color: black;
padding:5px;
border-radius: 3px;
position: absolute;
top: -20px;
}
.control-clavier img {
width: 20px;
}
.graphies {
-ms-flex: 30%; /* IE10 */
flex: 30%;
-ms-flex: var(--graphSize); /* IE10 */
flex: var(--graphSize);
position: relative;
}
#graphiesZone {
......@@ -83,15 +98,16 @@ body {
}
.btn-calq-div {
width: 500px;
height: 80px;
width: 400px;
height: 60px;
text-align: right;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: black;
}
.btn-calq {
width: 100px;
width: 70px;
margin: 5px;
}
.btn-calq:hover {
......
......@@ -21,11 +21,15 @@
</div>
<div class="clavier-graphiesZone">
<div class="clavier">
<div class="clavier" id="clavier">
<embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
<img id="svgColor" src="../static/png/01.png" class="superpose">
<img id="pngCalq" class="superpose">
<embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
<div class="control-clavier">
<img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
<img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
</div>
</div>
<div class="graphies">
......
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