Vous avez reçu un message "Your GitLab account has been locked ..." ? Pas d'inquiétude : lisez cet article https://docs.gricad-pages.univ-grenoble-alpes.fr/help/unlock/

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

ajout fonction monochrome et bold

parent cc2db2c6
......@@ -7,6 +7,9 @@ $(document).ready(function(){
function selectLang(lang){
if (lang=="en"){
window.alert('English version still experimental :)');
document.getElementById('output').classList.remove('outputBold');
} else if (lang=="fr"){
document.getElementById('output').classList.add('outputBold');
}
}
......@@ -134,6 +137,9 @@ async function getColorisation() {
if (document.getElementById('bicolor').checked) {
toBicolor();
}
if (document.getElementById('monochrome').checked) {
toMonochrome();
}
}
function delInText() {
......@@ -290,6 +296,9 @@ function selectAlign(tok,i){
if (document.getElementById('bicolor').checked == true) {
toBicolor(); // réinitialisation du bicolor (nécessaire si nb phonèmes différents)
};
if (document.getElementById('monochrome').checked == true) {
toMonochrome(); // réinitialisation du monochrome
};
unknownMark();
bugMark();
};
......@@ -298,11 +307,21 @@ function supprAlignPopDiv() {
document.getElementById('alignPopDiv').parentElement.removeChild(document.getElementById('alignPopDiv'));
}
function toSilentWay() {
var phonList = document.getElementsByClassName("phon");
for (var i = 0; i < phonList.length; i++) {
phonList.item(i).classList.remove("monochrome");
phonList.item(i).classList.remove("bicolor1");
phonList.item(i).classList.remove("bicolor2");
};
};
// POUR PASSER EN BICOLOR (se fait à partir du résultat aux couleurs SW)
// on ajoute la classe .bicolor1 ou .bicolor2 alternativement, si la graphie n'est pas .phon_neutre
function toBicolor() {
var phonList = document.getElementsByClassName("phon");
for (var i = 0; i < phonList.length; i++) {
phonList.item(i).classList.remove("monochrome");
phonList.item(i).classList.remove("bicolor1");
phonList.item(i).classList.remove("bicolor2");
if (phonList.item(i).classList.contains('phon_neutre') == false) {
......@@ -315,6 +334,19 @@ function toBicolor() {
};
};
function toMonochrome() {
var phonList = document.getElementsByClassName("phon");
for (var i = 0; i < phonList.length; i++) {
phonList.item(i).classList.remove("bicolor1");
phonList.item(i).classList.remove("bicolor2");
phonList.item(i).classList.add("monochrome");
};
}
function toggleBold() {
document.getElementById('output').classList.toggle('outputBold');
}
// Initialisation couleur background (par défaut black)
// if (document.getElementById('defaultBg').value == 'white') {
// document.getElementById('outputDiv').classList.toggle('win-white');
......@@ -325,10 +357,12 @@ function bg2white() {
if (defaultBg == 'black') {
defaultBg = 'white';
document.documentElement.style.setProperty('--phon_a', '#000000');
document.documentElement.style.setProperty('--phon_monochrome', '#000000');
} else {
defaultBg = 'black';
document.documentElement.style.setProperty('--phon_a', '#ffffff');
document.documentElement.style.setProperty('--phon_monochrome', 'rgb(218, 218, 218)');
}
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('output').classList.toggle('graphContours');
......
:root {
--phon_monochrome: rgb(218, 218, 218);
}
body {
background-image: url(../im/arriereplan.gif);
font-family: Palatino, Times, Calibri;
......@@ -39,13 +43,14 @@ h2 {
}
.param {
position: absolute;
right: 10px;
top: 10px;
text-align: left;
position: relative;
text-align: right;
margin-top: -15px;
}
.inputDiv h2 {
position: absolute;
top: 0;
text-align: left;
}
......@@ -105,6 +110,9 @@ textarea {
text-align: left;
font-size: 35pt;
font-family: Palatino, Times, Calibri;
}
.outputBold {
font-weight: bold;
}
......@@ -141,6 +149,15 @@ textarea {
border-bottom: .5px solid rgba(211, 211, 211, 0.2);
}
.monochrome {
color: var(--phon_monochrome);
background: transparent;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: var(--phon_monochrome);
text-decoration: unset;
}
.alignPopDivBack {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
......
......@@ -32,7 +32,8 @@
<div class="inputDiv">
<div class="param">
<input id="swcolor" type="radio" name="colorType" onclick="getColorisation()" value="sw" checked> <label for="swcolor"><span style="-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;"><span class="text phon_s">S</span><span style="background:-webkit-linear-gradient(white 60%, #e7236d 75%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;">i</span><span class="text phon_l">l</span><span class="text phon_e_maj ">e</span><span class="text phon_n">n</span><span class="text phon_t">t</span><span class="text punct "> </span><span class="text phon_w">W</span><span class="text phon_ei_maj">ay</span></span></label><br/>
<input id="monochrome" type="radio" name="colorType" onclick="toMonochrome()" value="mono"> <label for="monochrome"><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_m monochrome">M</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_q_maj stress1 monochrome">o</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_n monochrome">n</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_arobase schwa monochrome">o</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_k monochrome">ch</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_r_slash monochrome">r</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_arobaseu_maj monochrome">o</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_m monochrome">me</span></label><br/>
<input id="swcolor" type="radio" name="colorType" onclick="toSilentWay()" value="sw" checked> <label for="swcolor"><span style="-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;"><span class="text phon_s">S</span><span style="background:-webkit-linear-gradient(white 60%, #e7236d 75%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;">i</span><span class="text phon_l">l</span><span class="text phon_e_maj ">e</span><span class="text phon_n">n</span><span class="text phon_t">t</span><span class="text punct "> </span><span class="text phon_w">W</span><span class="text phon_ei_maj">ay</span></span></label><br/>
<input id="bicolor" type="radio" name="colorType" onclick="toBicolor()" value="bi"> <label for="bicolor"><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">B</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">i</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">c</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">l</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">re</span></label>
</div>
<h2>Entrer du texte à coloriser :</h2>
......@@ -44,10 +45,11 @@
<div id="outputDiv" class="win-black outputMainDiv">
<div class="outputParam">
<span class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond" onclick="bg2white()"></span><br>
<span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
<span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span><br>
<span class="glyphicon glyphicon-bold" aria-hidden="true" title="Activer/désactiver la police en gras" onclick="toggleBold()"></span>
</div>
<h2>Résultat :</h2>
<div id="output" class="output"></div>
<div id="output" class="output outputBold"></div>
</div>
<div>
......
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