1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#trtt span{
background:red;
cursor:pointer;
}
.dg{
position:absolute;
}
.dg div{
background-color:#bbbbbb;
width:110px;
border:1px;
border-style:solid;
cursor:pointer;
color:white;
padding-left:5px;
}
</style>
<script>
function syno_c(conteneur,lui){ //la fonction constructeur
this.conteneur=document.getElementById(conteneur);
this.out_b=this.out.bind(this);
this.nom=lui;
}
syno_c.prototype.synonymes={
"tir": ["frappe","shoot","coup de pied"],
"passe": ["transmission","échange","remise","une-deux"],
"arrêt": ["passe","parade","plongeon","sauvetage","claquette"],
"dribble": ["technique","crochets","enfumage","gri-gri"],
"victoire": ["succès","réussite","triomphe","gain"],
"chance": ["réussite","aubaine","bonheur","hasard"],
"occasion": ["action","enchaînement"],
"arbitre": ["homme en noir"],
"gardien": ["portier","dernier rempart"]
}
syno_c.prototype.dg='';
syno_c.prototype.dina=function (){
var txt=this.conteneur.textContent; //on recupere le texte contenu dans le div
this.conteneur.innerHTML=''; //on vide le div
var tbphrase=txt.split(' '); // on recuper chaques mot en se basant sur les espaces que l'on stock dans un array grace a la methode split de l'oblet string
var pvpv=[]; // on cree un array qui contiendra les point ,point d'exclamation d'interrogation,vigule,et point virgule de la phrase.
for(var i=0;i<tbphrase.length;i++){ //on vas parcourir le tableau contenant tous les mots de la phrase et verifier si il contiennent un point point virgule...etc
if(tbphrase[i].indexOf('.', 0) != -1 || tbphrase[i].indexOf(',', 0)!= -1 || tbphrase[i].indexOf('?', 0)!= -1 || tbphrase[i].indexOf('!', 0) != -1 || tbphrase[i].indexOf(';', 0)!= -1){
var rev=tbphrase[i].substr(tbphrase[i].length-1, 1); //si c'est le cas on stock dans une variable le point, la virgule...etc
}
else{
var rev=null; //sinon on donne comme valeur a la variable null
}
pvpv.push(rev); //ensuite on rempli le array par la valeur contenu dans la variable.
tbphrase[i]=tbphrase[i].replace(rev,''); // et enfin on utilise la methode replace de l'objet string pour retirer les points poin virgule...etc pour les mots en contenant
}
// a ce moment on se retouve avec le array contenant tous les mot de la phrase et un array contenant les points poin virgule...etc.
for(var i=0;i<tbphrase.length;i++){ //on parcoure le array afin d'y extraire les mot un par un
var mot=tbphrase[i]; //la variable mot contient le mot se trouvant dans l'index i du array
for(var j=i+1;j<tbphrase.length;j++){// dans cette boucle on vas comparer le mot contenu dans la variable mot avec toutes clee de l'objet contenant tous les synonyme jusqu'a ce que l'on trouve une correspondance
if(tbphrase[j]==mot && this.synonymes[mot]){ //quand on trouve un mot correspondant (un doublon) on modifie le mot en lui ajoutant un span afin que le mot puisse etre encadre en rouge et on rajoute a la balise l'evenement onclick qui declanchera la fonction servant a cree et afficher le menu avec les synonymes.
tbphrase[j]='<span onclick="'+this.nom+'.choix(this,event,\''+mot+'\')">'+tbphrase[j]+'</span>'; //les parametres que recevra la fonction sont l'element declancheur dans notre cas le span contenant le mot a changé l'evenement clic et le mot lui meme
}
}
}
for(var i=0;i<tbphrase.length;i++){ // pour cette boucle on parcour le array cetenant le points, points virgules ...etc afin de les remettre
if(pvpv[i]!=null){
tbphrase[i]+=pvpv[i];
}
}
var phrase= tbphrase.join(" "); //ici recree la phrase en utilisant la methode join de l'objet string
this.conteneur.innerHTML=phrase; // et enfin on insere la phrase avec les mots marque en rouge dans la page
}
syno_c.prototype.choix=function(lui,e,mot){ //cette fonction sert a cree le menu qui contient les mot proposés
this.dg=='' ? this.dg=document.createElement('div') : this.dg.innerHTML=''; //au premier passage on cree le div pour les autres passage on vide son contenu
this.dg.className='dg'; //on lui assigne une class css
this.dg.style.display='block'; //on le rend visible
this.dg.style.left=e.pageX+10+'px'; //on le position a 10 pixel de la souris en x
this.dg.style.top=e.pageY+20+'px'; //on le position a 10 pixel de la souris en y
for(var i=0;i<=this.synonymes[mot].length;i++){ // dans l'objet synonyme en fonction de la clee (le mot mis en parametre de fonction) on vas parcourir l'array contenant les synonymes du mot
var crea=document.createElement('div'); //pour chaques synonyme on cree un div
crea.textContent=this.synonymes[mot][i]; //on met le synonyme dans le div
var mt=this.synonymes[mot][i]
this.add(crea,mt,lui) //on appel la fonction add qui vas pour chaques synonymes ajouter un evenement clic qui declanchera une fonction anonyme
this.dg.appendChild(crea); //on insere chaques mot dans le div conteneur (le menu)
}
var crea=document.createElement('div');
crea.textContent="ignorer"; //
crea.style.color='black';
crea.style.border='none';
crea.onclick=function(){
lui.previousSibling.textContent+=lui.textContent; //on concerve le mot.
lui.parentNode.removeChild(lui); //on supprime le span contenant le texte.
}
this.dg.appendChild(crea); //on insere annuler dans le div conteneur (le menu).
document.body.appendChild(this.dg); // le div conteneur (le menu) dans la page.
document.addEventListener('mouseup',this.out_b,false); //permet de cacher le menu quand on clic dans la page
}
syno_c.prototype.add=function(crea,mt,lui){
var that=this;
crea.onclick=function(){
lui.previousSibling.textContent+=mt; //on insere le nouveau mot.
lui.parentNode.removeChild(lui); //on supprime le span contenant le texte.
that.dg.style.display='none'; //on cache le menu.
}
}
syno_c.prototype.out=function(crea,mt,lui){ // cache le menu et retire l'evenement mouseup du document.
this.dg.style.display='none';
document.removeEventListener('mouseup',this.out_b,false);
}
function syno_instance(){ //instanciation de l'objet.
is=new syno_c('trtt','is');
document.getElementById('bb').onclick=function(){is.dina()}
}
window.addEventListener("load",syno_instance, false);
</script>
</head>
<body>
<br>
<div id="trtt" class="editable" contenteditable="true" style='overflow:auto;width:400px;height:140px'>
le joueur de football a réalisé un très beau tir. Ce tir, est venu se loger en pleine lucarne, le gardien a rien pu faire. c'est un tir exceptionnel que le gardien ne pouvait arreter.
</div>
<button id='bb'>azerty</button>
</body>
<html> |
Répondre avec citation
Partager