Skip to content

GitLab

Commit b2f91ea0 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout paragraphe d'info générales + traductions des popus

parent ea78d0fe
Hide whitespace changes
Inline Side-by-side
static/languages/languages.js
View file @ b2f91ea0
var langJson = {
"ti_titre": {
"fr":"WikiColor - Cliquez ici pour en savoir plus !",
"en":"WikiColor - Clic here to know more!"
},
"sp_header": {
"fr":"Cette application est un prototype en cours de conception. <a href='https://groups.google.com/d/forum/alem-app' target='_blank'><b>Accéder au forum</b></a> pour échanger avec la communauté et faire vos suggestions.",
"en":"This application still is a prototype under development. <a href='https://groups.google.com/d/forum/alem-app' target='_blank'><b>Access to the forum</b></a> to share and make suggestions."
......@@ -43,6 +47,26 @@ var langJson = {
"fr": "Résultat :",
"en": "Output:"
},
"ti_btnCouleurFond": {
"fr": "Changer la couleur du fond",
"en": "Switch background color"
},
"ti_btnCopierColler": {
"fr": "Copier/Coller le contenu",
"en": "Copy/paste content"
},
"ti_btnBold": {
"fr": "Activer/désactiver la police en gras",
"en": "Switch font boldness"
},
"ti_multitrans": {
"fr": "changer de prononciation",
"en": "switch pronunciation"
},
"sp_infoWiki": {
"fr": "WikiColor est un coloriseur automatique de texte basé sur les transcriptions phonétiques du Wiktionnaire et de la collaboration de nombreux utilisateurs. Vous pouvez consulter et participer à l'amélioration du dictionnaire en cliquant sur le bouton ci-dessous. L'alignement phono-graphémique reste encore expérimental, toute suggestion de votre part est bienvenue ! N'hésitez pas à visiter <a href='https://alem.hypotheses.org/outils-alem-app/wikicolor'>notre site</a>, et participez aux discussions sur <a href='https://groups.google.com/forum/#!forum/alem-app'>le forum</a>.",
"en": "WikiColor is an automatic text coloriser based on Wiktionary's phonetic transcriptions, CMU Pronunciation Dictionary and collaboration of our users community. English dictionary isn't editable yet, but it will be soon! Phono-graphemic alignment still is experimental, especially for English, every suggestion from you will be welcome! We are still working on the phonologic representation of English, which is a big challenge. Please let us know your suggestions in <a href='https://groups.google.com/forum/#!forum/alem-app'>our Forum</a>. We also have <a href='https://alem.hypotheses.org/outils-alem-app/wikicolor'>a website</a> (English content will come soon!)."
},
"sp_btnEditDico": {
"fr": "Consulter/éditer le dictionnaire",
"en": "Search/edit WikiColor's dictionary"
......
static/scripts/main.js
View file @ b2f91ea0
......@@ -56,18 +56,27 @@ function selectLang(lang){
function interface(lang) {
console.log("Langue d'interface:",lang);
thisPageLang = lang;
var langspanList = document.getElementsByClassName("langspan");
var langspanList = document.getElementsByClassName("langspan");
var langtitleList = document.getElementsByClassName("langtitle");
if (lang == "en") {
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["en"];
}
}
for (i=0; i<langtitleList.length; i++) {
title = langtitleList[i];
title.title = langJson[title.id]["en"];
}
} else { // "fr" par défaut
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["fr"];
}
}
for (i=0; i<langtitleList.length; i++) {
title = langtitleList[i];
title.title = langJson[title.id]["fr"];
}
}
}
......@@ -184,15 +193,13 @@ async function getColorisation() {
var tokens = document.getElementsByClassName("tokens");
for (i = 0; i < tokens.length; i++) {
if (dicoTok[tokens[i].id].length > 1) {
// dicoTok[tokens[i].id] = dicoTok[tokens[i].id].sort(function(a, b){
// // ASC -> a.length - b.length
// // DESC -> b.length - a.length
// return b.length - a.length;
// });
tokens[i].innerHTML = dicoTok[tokens[i].id][0][0];
$('#'+tokens[i].id).addClass('transMult');
$('#'+tokens[i].id).prop('title', 'changer de prononciation');
if (lang=="en") {
$('#'+tokens[i].id).prop('title', langJson['ti_multitrans']['en']);
} else {
$('#'+tokens[i].id).prop('title', langJson['ti_multitrans']['fr']);
}
} else {
tokens[i].innerHTML = dicoTok[tokens[i].id][0][0];
};
......
static/styles/styles.css
View file @ b2f91ea0
......@@ -18,6 +18,10 @@ h2 {
-webkit-text-stroke-color: black;
}
button {
margin:5px;
}
.choixLang {
position: absolute;
top: 15px;
......@@ -31,6 +35,7 @@ h2 {
width: 80%;
background-color: white;
border: solid black 1px;
border-radius: 10px;
padding: 10px;
margin: 10px;
text-align: center;
......@@ -39,6 +44,11 @@ h2 {
.inText {
width: 95%;
height: 80px;
margin: 5px;
padding: 10px;
border: solid 1px gray;
border-radius: 4px;
}
.param {
......@@ -54,20 +64,13 @@ h2 {
text-align: left;
}
textarea {
height: 80px;
width: 90%;
padding: 10px;
margin: 5px;
border-radius: 4px;
}
.win-black {
position: relative;
display: inline-table;
background-color: black;
color: white;
border: outset;
border: solid 2px darkgrey;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
......@@ -186,6 +189,12 @@ textarea {
background-color: rgba(255, 255, 255, 0.192);
}
.divInfoWiki {
margin: 10px 20px;
font-size: 1em;
font-style: italic;
}
/* Responsive layout */
@media screen and (max-width: 900px) {
.outputMainDiv {
......
templates/coloriseur.html
View file @ b2f91ea0
......@@ -18,7 +18,7 @@
<body>
<div class="header"><span id="sp_header" class="langspan"></span></div>
<a href="https://alem.hypotheses.org/outils-alem-app/wikicolor" target="_blank"><img src="{% static 'im/logo_wikicolor6b.png'%}" width="40%" title="WikiColor"></a>
<a href="https://alem.hypotheses.org/outils-alem-app/wikicolor" target="_blank"><img src="{% static 'im/logo_wikicolor6b.png'%}" width="40%" class="langtitle" id="ti_titre"></a>
<h2 id="subtitle"><span id="sp_subtitle" class="langspan"></span></h2>
<div class="choixLang">
......@@ -42,14 +42,18 @@
<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><br>
<span class="glyphicon glyphicon-bold" aria-hidden="true" title="Activer/désactiver la police en gras" onclick="toggleBold()"></span>
<span class="glyphicon glyphicon-adjust langtitle" aria-hidden="true" id="ti_btnCouleurFond" onclick="bg2white()"></span><br>
<span class="glyphicon glyphicon-duplicate langtitle" aria-hidden="true" id="ti_btnCopierColler" onclick="getPopUp()"></span><br>
<span class="glyphicon glyphicon-bold langtitle" aria-hidden="true" id="ti_btnBold" onclick="toggleBold()"></span>
</div>
<h2><span id="sp_output" class="langspan"></span></h2>
<div id="output" class="output outputBold"></div>
</div>
<div class="divInfoWiki">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <span id="sp_infoWiki" class="langspan"></span>
</div>
<div>
<a href="/app/dico/"><button><span id="sp_btnEditDico" class="langspan"></span></button></a>
</div>
......
templates/footer.html
View file @ b2f91ea0
{% load static %}
<footer>
<div style="font-size: 20pt;"><a href="https://alem.hypotheses.org/outils-alem-app/wikicolor" target="_blank"><span id="sp_tuto" class="langspan"></span></a></div>
<div style="font-size: 20pt;"><a href="https://alem.hypotheses.org/category/tutoriels/tutoriels-wikicolor" target="_blank"><span id="sp_tuto" class="langspan"></span></a></div>
<div>S.Coulange, {{data.update}} |
<a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/wikicolor"><span id="sp_footcode" class="langspan"></span></a>
- <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/wikicolor/commits/master"><span id="sp_footjournal" class="langspan"></span></a>
......
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