Commit 77367276 authored by Sylvain Coulange's avatar Sylvain Coulange

Ajout bouton export texte + code source, Ajout bouton background, Dictionnaire...

Ajout bouton export texte + code source, Ajout bouton background, Dictionnaire des parties du discours + traits pour le français
parent 21f61cf0
static/im/zhtokenspaceblack.png

1.39 KB | W: | H:

static/im/zhtokenspaceblack.png

7.92 KB | W: | H:

static/im/zhtokenspaceblack.png
static/im/zhtokenspaceblack.png
static/im/zhtokenspaceblack.png
static/im/zhtokenspaceblack.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -44,13 +44,31 @@ async function runSpacy() {
// AFFICHAGE DU RÉSULTAT
var result = "";
var stylesCommuns = "font-family: Palatino, Times, KaiTi, Calibri; font-size: 35pt; font-weight: bold; background-color: black;";
var stylesCommuns = "font-family: Palatino, Times, KaiTi, Calibri; font-size: 35pt; font-weight: bold;";
var stylesUnderline = "text-decoration: underline; text-decoration-thickness: 6px;";
for (i=0; i<data.outText.length; i++) {
if (pos[data.outText[i].pos].color == '') col = "#ccc";
else col = pos[data.outText[i].pos].color;
// Traitement des tags en français
if (lang == "fr") {
taglist = Array.from(data.outText[i].tag.replace(/^\w+__/, '').split('|'))
tags = []
taglist.forEach((tag) => {
if (tag in tags2def){
tags.push(tags2def[tag].toLowerCase())
} else {
tags.push(tag)
}
})
if (data.outText[i].tag == data.outText[i].pos) {
data.outText[i].tag = pos[data.outText[i].pos]['def']
} else {
data.outText[i].tag = pos[data.outText[i].pos]['def'] + ' : ' + tags.join(', ')
}
}
// saut de ligne
sdl = data.outText[i].text.split(/[\n¬]+/);
if (sdl.length>1){
......@@ -99,7 +117,11 @@ async function runSpacy() {
switchTags();
switchTags();
}
// On remplace les blancs par noir si bg = blanc
if (defaultBg == 'white') {
document.getElementById('outText').innerHTML = document.getElementById('outText').innerHTML.replace(/#fff;/g,'#000;')
}
}
function getExample() {
......@@ -117,6 +139,21 @@ function erase(){
document.getElementById('outText').innerHTML = "";
}
var defaultBg = "black";
function bg2white() {
if (defaultBg == 'black') {
defaultBg = 'white';
document.getElementById('outText').innerHTML = document.getElementById('outText').innerHTML.replace(/#fff;/g,'#000;')
} else {
defaultBg = 'black';
document.getElementById('outText').innerHTML = document.getElementById('outText').innerHTML.replace(/#000;/g,'#fff;')
}
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('outText').classList.toggle('contours');
}
var tags = false;
switchTags();
function switchTags(){
......@@ -155,4 +192,74 @@ function togglewordspace(){
displaywordspace = true;
divBtnSpace.classList.add("btnActive");
}
}
//////////////////////////////////////
////////// PARAMÉTRAGE POPUP /////////
////////// POUR COPIER TEXTE /////////
//////////////////////////////////////
// Get the modal
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Fonction pour ouvrir le PopUp
function getPopUp() {
var outputContent = document.getElementById('outText').innerHTML;
var finalOutput = outputContent.replace(/#000;/g,'#fff;').replace(/ class="token tokenborder"/g, '').replace(/ title(-data)?=".*?"/g, '')
var finalOutputWhite = outputContent.replace(/#fff;/g,'#000;').replace(/ class="token tokenborder"/g, '').replace(/ title(-data)?=".*?"/g, '')
// Insertion des résultats dans les div associées du popup
document.getElementById('pLienDiv').innerHTML = finalOutput;
document.getElementById('pLienDivCode').innerHTML = finalOutput.toString();
document.getElementById('pLienDivWhite').innerHTML = finalOutputWhite;
document.getElementById('pLienDivWhiteCode').innerHTML = finalOutputWhite.toString();
// Affichage popup
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// COPIE AUTO DU LIEN DANS PRESSE-PAPIER
function toClipBoard(containerid,tooltipid) {
//var copyText = document.getElementById("pLienDiv");
// copyText.select();
// copyText.setSelectionRange(0, 99999);
// document.execCommand("copy");
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().empty();
window.getSelection().addRange(range);
document.execCommand("copy");
}
var tooltip = document.getElementById(tooltipid) ;
tooltip.innerHTML = "Copié !";
}
function outFunc(tooltipid) {
var tooltip = document.getElementById(tooltipid);
tooltip.innerHTML = "Copier";
}
\ No newline at end of file
pos = {
"ADJ": { "color":"#980086"},
"ADP": { "color":"#c00018"},
"ADV": { "color":"#3984c6"},
"AUX": { "color":"#eda01a"},
"CONJ": { "color":"#fff"},
"CCONJ": { "color":"#fff"},
"DET": { "color":"#f3eb20"},
"INTJ": { "color":"#8a9092"},
"NOUN": { "color":"#00b54a"},
"NUM": { "color":"#f3eb20"},
"PART": { "color":""},
"PRON": { "color":"#a56026"},
"PROPN": { "color":"#a56026"},
"PUNCT": { "color":"#fff"},
"SCONJ": { "color":"#fff"},
"SPACE": { "color":""},
"SYM": { "color":""},
"VERB": { "color":"#eda01a"},
"X": { "color":""},
"ADJ": { "color":"#980086", "def":"Adjectif"},
"ADP": { "color":"#c00018", "def":"Préposition adverbiale"},
"ADV": { "color":"#3984c6", "def":"Adverbe"},
"AUX": { "color":"#eda01a", "def":"Auxiliaire"},
"CONJ": { "color":"#fff", "def":"Conjonction"},
"CCONJ": { "color":"#fff", "def":"Conjonction de coordination"},
"DET": { "color":"#f3eb20", "def":"Déterminant"},
"INTJ": { "color":"#8a9092", "def":"Interjection"},
"NOUN": { "color":"#00b54a", "def":"Nom"},
"NUM": { "color":"#f3eb20", "def":"Nombre"},
"PART": { "color":"", "def":"Particule"},
"PRON": { "color":"#a56026", "def":"Pronom"},
"PROPN": { "color":"#a56026", "def":"Nom propre"},
"PUNCT": { "color":"#fff", "def":"Ponctuation"},
"SCONJ": { "color":"#fff", "def":"Conjonction de subordination"},
"SPACE": { "color":"", "def":"Espace"},
"SYM": { "color":"", "def":"Symbole"},
"VERB": { "color":"#eda01a", "def":"Verbe"},
"X": { "color":"", "def":"X"},
"名詞": { "color":"#00b54a"},
"接頭詞": { "color":""},
"動詞": { "color":"#eda01a"},
"形容詞": { "color":"#980086"},
"副詞": { "color":"#3984c6"},
"連体詞": { "color":""},
"接続詞": { "color":"#fff"},
"助詞": { "color":"#f3eb20"},
"助動詞": { "color":"#eda01a"},
"感動詞": { "color":"#8a9092"},
"記号": { "color":"#fff"},
"フィラー": { "color":"#8a9092"}
"名詞": { "color":"#00b54a", "def":""},
"接頭詞": { "color":"", "def":""},
"動詞": { "color":"#eda01a", "def":""},
"形容詞": { "color":"#980086", "def":""},
"副詞": { "color":"#3984c6", "def":""},
"連体詞": { "color":"", "def":""},
"接続詞": { "color":"#fff", "def":""},
"助詞": { "color":"#f3eb20", "def":""},
"助動詞": { "color":"#eda01a", "def":""},
"感動詞": { "color":"#8a9092", "def":""},
"記号": { "color":"#fff", "def":""},
"フィラー": { "color":"#8a9092", "def":""}
}
\ No newline at end of file
var tags2def = {
"Definite=Def" : "Défini",
"Definite=Ind" : "Indéfini",
"Gender=Fem" : "Féminin",
"Gender=Masc" : "Masculin",
"Mood=Cnd" : "Conditionnel",
"Mood=Imp" : "Impératif",
"Mood=Ind" : "Indicatif",
"Mood=Sub" : "Subjonctif",
"Number=Plur" : "Pluriel",
"Number=Sing" : "Singulier",
"NumType=Card" : "Cardinal",
"NumType=Ord" : "Ordinal",
"Person=1" : "1er personne",
"Person=2" : "2ème personne",
"Person=3" : "3ème personne",
"Polarity=Neg" : "Négatif",
"POS=ADJ" : "Adjectif",
"POS=ADP" : "Préposition adverbiale",
"POS=ADV" : "Adverbe",
"POS=AUX" : "Auxiliaire",
"POS=CCONJ" : "Conjonction de coordination",
"POS=DET" : "Déterminant",
"POS=INTJ" : "Interjection",
"POS=NOUN" : "Nom",
"POS=NUM" : "Nombre",
"POS=PART" : "Particule",
"POS=PRON" : "Pronom",
"POS=PROPN" : "Nom propre",
"POS=PUNCT" : "Ponctuation",
"POS=SCONJ" : "Conjonction de subordination",
"Poss=Yes" : "Possessif",
"POS=SYM" : "Symbole",
"POS=VERB" : "Verbe",
"POS=X" : "X",
"PronType=Art" : "Article",
"PronType=Dem" : "Démonstratif",
"PronType=Int" : "Interrogatif",
"PronType=Prs" : "Personnel",
"PronType=Rel" : "Relatif",
"Reflex=Yes" : "Réflexif",
"Tense=Fut" : "Futur",
"Tense=Imp" : "Imparfait",
"Tense=Past" : "Passé composé",
"Tense=Pres" : "Présent",
"VerbForm=Fin" : "Fini",
"VerbForm=Inf" : "Infinitif",
"VerbForm=Part" : "Participe",
"Voice=Pass" : "Passif"
}
\ No newline at end of file
......@@ -59,6 +59,18 @@ var langJson = {
"zh": "Afficher/masquer les catégories au survol de la souris",
"jp":"カーソルを合わせて品詞を表示"
},
"ti_btnCopierColler": {
"fr": "Copier/Coller le contenu",
"en": "Copy/paste content",
"jp": "結果をコピーする",
"zh": "複製結果"
},
"ti_btnCouleurFond": {
"fr": "Changer la couleur du fond",
"en": "Switch background color",
"zh": "切换背景色",
"jp": "背景色の変更"
},
"ti_btnwordspace": {
"fr": "Espacer les mots",
"zh": "单词之间放置空格",
......
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
min-width: 600px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 20px 16px;}
.modal-body p {
text-align: left;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
font-style: italic;
}
/* TextArea du lien à copier */
.copyButton {
position: relative;
display: inline-block;
margin: 5px;
}
.copyButton .copyButtonText {
position: absolute;
bottom: 115px;
left: 50%;
visibility: hidden;
width: 130px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
z-index: 1;
margin: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.copyButton .copyButtonText::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.copyButton:hover .copyButtonText {
visibility: visible;
opacity: 1;
}
.pLienDiv {
/* border: outset; */
/* background-color: black; */
padding: 10px 5px;
font-size: 2em;
text-align: left;
/* font-weight: bold; */
}
/* POP LOG */
.modal2 {
display: none; /* Hidden by default */
position: fixed;
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: scroll;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content2 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
text-align: left;
}
.modal-header2 {
padding: 2px 16px;
background-color: #7fbaf1;
}
.modal-header2 h2 {
font-size: 1.5em;
}
.modal-footer2 {
padding: 2px 16px;
background-color: #7fbaf1;
font-style: italic;
text-align: right;
}
/* POP ADD WORD TO DIC */
.popAddw-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 40%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {left:-300px; opacity:0}
to {left:0; opacity:1}
}
@keyframes animatetop {
from {left:-300px; opacity:0}
to {left:0; opacity:1}
}
.popAddw-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.popAddw-body {padding: 20px 16px;}
\ No newline at end of file
......@@ -79,7 +79,7 @@ button {
}
.btnActive {
border: 1px solid yellow;
border: 1px solid darkgreen;
border-radius: 3px;
}
......@@ -154,9 +154,13 @@ button {
font-weight: bold;
}
.tokenborder {
border: 1px solid transparent;
border-radius: 5px;
padding-top: 10px;
}
.tokenborder:hover {
border: 1px solid rgba(255, 255, 255, 0.74);
border: 1px solid rgba(146, 146, 146, 0.863);
border-radius: 5px;
padding-top: 10px;
}
......
......@@ -9,6 +9,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/loader.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
</head>
<body>
......@@ -39,6 +40,17 @@
<div id="outputDiv" class="win-black outputMainDiv">
<h2><span id="sp_resultat" class="langspan"></span></h2>
<div class="outputParam">
<div class="btnzi langtitle" id="ti_btnCouleurFond" onclick="bg2white()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 15V1a7 7 0 1 1 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</svg>
</div>
<div class="btntags langtitle" id="ti_btnCopierColler" onclick="getPopUp()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
</svg>
</div>
<div class="btntags langtitle" id="ti_btntags" onclick="switchTags()">
<svg viewBox="0 0 16 16" class="bi bi-tag btnzi" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 2v4.586l7 7L13.586 9l-7-7H2zM1 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 1 6.586V2z"/>
......@@ -64,11 +76,50 @@
<span id="sp_info" class="langspan"></span>
</div>
<!-- Modal PopUp qui apparaît pour copier coller le texte -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header" style="display: inline-block;">
<span class="close">&times;</span>
<h2>Copier/coller le résultat</h2>
</div>
<div class="modal-body">
<p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
<div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000;"></div>
<textarea id="pLienDivCode" style="display: none; font-family: 'Courier New', Courier, monospace; font-size: small; width:100%; height:100px"></textarea>
<div class="copyButton">
<button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc('myTooltip')"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
</div>
<div class="copyButton">
<button onclick="document.getElementById('pLienDivCode').style.display = 'block';">Code Source</button>
</div>
<div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
<textarea id="pLienDivWhiteCode" style="display: none; font-family: 'Courier New', Courier, monospace; font-size: small; width:100%; height:100px"></textarea>
<div class="copyButton">
<button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFunc('myTooltipWhite')"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
</div>
<div class="copyButton">
<button onclick="document.getElementById('pLienDivWhiteCode').style.display = 'block';">Code Source</button>
</div>
</div>
<div class="modal-footer">
<h3>GrammaChrome</h3>
</div>
</div>
</div>
{% include 'footer.html' %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
<script type="text/javascript" src="{% static 'js/colors.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tags.js' %}"></script>
<script type="text/javascript" src="{% static 'js/textExamples.js' %}"></script>
<script type="text/javascript" src="{% static 'js/coloriser.js' %}"></script>
</body>
......
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