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

static/js/coloriser.js

@@ -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

static/js/colors.js

 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

static/js/tags.js

+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

static/languages/languages.js

@@ -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": "单词之间放置空格",

static/styles/popup.css

+/* 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

static/styles/styles.css

@@ -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;
 }

templates/coloriser.html

@@ -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>