Commit 0ff1c92b authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

finalisation AJAX coloriseur.html

parent ada3d8cc
......@@ -39,6 +39,7 @@ async function getColorisation() {
outputDiv.innerHTML = "";
dicoTok = {};
dicoId = {};
var noSpace = false;
for (i=0; i<outText.length; i++) {
......@@ -47,10 +48,21 @@ async function getColorisation() {
for (h=0; h<outText[i][0][0].graph.length; h++) {
outputDiv.innerHTML = outputDiv.innerHTML + '<br>';
}
} else if (outText[i][0][0].graph.match(/,|\.|\)|\]|\}|%|>/)) {
} else if (outText[i][0][0].graph.match(/^(,|\.|…|\)|\]|\}|%|>|»|”|-)$/)) {
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon_neutre">'+ outText[i][0][0].graph +'</span>';
if (outText[i][0][0].graph.match(/^-$/)) noSpace = true; else noSpace = false;
} else if (outText[i][0][0].graph.match(/\(|\[|\{|<|«|“/)) {
outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="phon_neutre">'+ outText[i][0][0].graph +'</span>';
noSpace = true;
// } else if (outText[i][0][0].graph.match(/.*’/)) {
// outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="phon_neutre">'+ outText[i][0][0].graph +'</span>';
// noSpace = true;
} else if (noSpace) {
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="tokens" id="tok'+ i +'" onclick="changeAlign(this.id)"></span>';
if (outText[i][0][0].graph.match(/.*’/)) noSpace = true; else noSpace = false;
} else {
outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="tokens" id="tok'+ i +'" onclick="changeAlign(this.id)"></span>';
if (outText[i][0][0].graph.match(/.*’/)) noSpace = true; else noSpace = false;
}
// FORMATAGE DES SPANS
......@@ -59,7 +71,7 @@ async function getColorisation() {
for (j=0; j<outText[i].length; j++) {
var newWord = '';
for (k=0; k<outText[i][j].length; k++) {
console.log(outText[i][j][k]);
//console.log(outText[i][j][k]);
newWord = newWord + '<span class="phon '+ outText[i][j][k].phon +'">'+ outText[i][j][k].graph +'</span>';
}
dicoTok['tok'+i].push(newWord);
......@@ -82,6 +94,10 @@ async function getColorisation() {
};
unknownMark();
bugMark();
if (document.getElementById('bicolor').checked) {
toBicolor();
}
}
function delInText() {
......@@ -146,7 +162,8 @@ function validEntry(mot, trans) {
console.log(data.reponse);
window.alert(data.reponse);
document.getElementById('popAddw').style.display = 'none';
document.location.reload(true); // recharge la page
//document.location.reload(true); // recharge la page
getColorisation();
},
error: function(){
// document.getElementById('loader').style.display = 'none';
......@@ -221,12 +238,15 @@ function toBicolor() {
// document.getElementById('outputDiv').classList.toggle('win-white');
// document.getElementById('output').classList.toggle('graphContours');
// };
var defaultBg = "black";
function bg2white() {
if (document.getElementById('defaultBg').value == 'black') {
document.getElementById('defaultBg').value = 'white';
if (defaultBg == 'black') {
defaultBg = 'white';
document.documentElement.style.setProperty('--phon_a', '#000000');
} else {
document.getElementById('defaultBg').value = 'black';
defaultBg = 'black';
document.documentElement.style.setProperty('--phon_a', '#ffffff');
}
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('output').classList.toggle('graphContours');
......
......@@ -34,6 +34,10 @@ h2 {
position: relative;
}
.inText {
width: 95%;
}
.param {
position: absolute;
right: 10px;
......
......@@ -23,7 +23,7 @@
<span> </span><span class="phon_f">Ph</span><span class="phon_o_maj">o</span><span class="phon_n">n</span><span class="phon_o_maj">o</span><span class="phon_g">g</span><span class="phon_r_maj">r</span><span class="phon_a">a</span><span class="phon_f">ph</span><span class="phon_e">é</span><span class="phon_m">m</span><span class="phon_i">i</span><span class="phon_k">que</span>
</h2>
<div class="choixLang">
<div class="choixLang" style="display: none;">
<select id="choixLang" onchange="selectLang(this.value)">
<option value="fr">Français</option>
<option value="en">English</option>
......@@ -32,11 +32,11 @@
<div class="inputDiv">
<div class="param">
<input id="swcolor" type="radio" name="colorType" 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" 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>
<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="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>
<textarea id="inText"></textarea><br/>
<textarea id="inText" class="inText"></textarea><br/>
<button id="coloriser" onclick="getColorisation()">Coloriser</button>
<button id="delInText" onclick="delInText()">Effacer</button>
</div>
......@@ -96,24 +96,6 @@
{% include 'footer.html' %}
<script type="text/javascript">
// var dicoTok = {
// {% for token in data.pphh %}
// {% if token != "§" %}
// 'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="phon {{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
// {% endif %}
// {% endfor %}
// };
// var dicoId = {
// {% for token in data.pphh %}
// {% if token != "§" %}
// 'tok{{ forloop.counter }}' : 0,
// {% endif %}
// {% endfor %}
// };
</script>
<script src="{% static 'scripts/main.js' %}"></script>
<script src="{% static 'scripts/keyboard.js' %}"></script>
......
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