[résolu]Sundaymorning

Question

webide67

26 Aug 2009 à 11:55

Bonjour,
Je viens de télécharger le script sundaymorning ici http://sundaymorning.jaysalvat.com
Je cherche à mettre ce script comme l'exemple 1 sur mon site pour que des gens de différents pays puissent chatter entre eux. Par contre je ne comprends pas comment le mettre en place et que les personnes puissent mettre leur texte pour faire la traduction. Je cherche depuis plusieurs jours sans comprendre comment faire.
Pourriez vous m'aider.
Merci d'avance
Modifié par webide67 (27 Aug 2009 - 11:06)

N-J

26 Aug 2009 à 12:19

Salut,

Ils mettent ça pour la traduction à partir d'un champs:


$('#submitButton').click(function(evt) {
    var text = $('#textInput').val();
    $.sundayMorning(text, {
        destination: 'fr', 
        menuLeft: evt.pageX, 
        menuTop:  evt.pageY},
        function(response) {
            $('#textInput').val(response.translation);
        }
    });	
});

Qu'est-ce que tu veux faire exactement ?
Modifié par N-J (26 Aug 2009 - 12:19)

webide67

26 Aug 2009 à 12:27

Un peu comme dans l'exemple 1 ou tu choisi quelle langue pour la traduction et pas intégrer le script sur le chat, ce serait trop complexe mais créer un champ sous le chat ou les personnes pourraient ou écrire ou coller le texte pour le traduire. Et je ne connais pas du tout jquery. Je cherchais un script de traduction et tous ceux que j'ais trouvais t'ouvres une nouvelle fenêtre pour la traduction ce qui est saoulant alors que je souhaites que la traduction apparaissent sur la m^me page

N-J

26 Aug 2009 à 12:39

Salut,

Tu peux alors modifier ton code pour que la personne aie juste à sélectionner la langue de destination avec des boutons radio avec ce type de chose :


<input type="text" id="textInput">
<input type="radio" name="lng" value="fr">
<input type="radio" name="lng" value="it">
<input type="radio" name="lng" value="es">

<input type="submit" value="Traduire">


var lng='fr';

$('input type=[ radio]').click(function(){
lng=$(this).val();
});


$('#submitButton').click(function(evt) {
    var text = $('#textInput').val();
        $.sundayMorning(text, {
        destination: lng, 
        menuLeft: evt.pageX, 
        menuTop:  evt.pageY},
        function(response) {
            $('#textInput').val(response.translation);
        }
    });	
});

Pour la ligne du lng je ne suis pas sûr mais voilà, le principe est le suivant :
- tu récupère le value du input sélectionné quand a personne clique dessus et fr de base
- tu mets ce value dynamiquement dans ton script
Modifié par N-J (26 Aug 2009 - 12:49)

webide67

26 Aug 2009 à 17:24

Là sa dépasse mes compétences. Pour les boutons radio j'ais compris mais pour le reste, je suis largué Smiley bawling

N-J

26 Aug 2009 à 17:29

Si tu veux, dans la variable lng tu stockes l'intitulé de langue utilisé ici :


destination: lng,

Quand tu cliques sur un bouton cette variable change en fonction de la langue, elle est initialisée en fr au début de script. Tentes de mettre en place ce petit exemple pour voir, ca devrait marcher Smiley cligne

.

webide67

26 Aug 2009 à 17:51

Justement je ne sais pas ou mettre ces variables, si c'est dans un fichier à part ou dans le fichier tranlslate.html que j'ais créé. Je n'utilises jamais ce genre de fichiers (jquery) et franchement bravo pour le gars qui l'as créé mais zéro pointé pour ces explications, on ne comprends rien à moins de s'y connaitre déjà et ce n'est pas du tout mon cas Smiley decu

N-J

26 Aug 2009 à 18:03

Alors voilà la page de test :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Content-language" content="fr" />

	<title>Titre</title>
	<script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/sundaymorning.js" type="text/javascript"></script>
	<script src="js/application.js" type="text/javascript"></script>
</head>

<body>
<div id="contain">
<form>
<input type="text" id="textInput"> 
<label for="fr">Français</label><input type="radio" id="fr" name="lng" value="fr"> 
<label for="it">Italien</label><input type="radio" id="it" name="lng" value="it"> 
<label for="es">Espagnol</label><input type="radio" id="es" name="lng" value="es"> 
<input type="submit" id="submitButton" value="Traduire"> 
</fom>
 </div>

</body>
</html>

Et dans le fichier application.js qui est dans le dossier js :


var lng='fr'; 
 
$('input type=[ radio]').click(function(){ 
lng=$(this).val(); 
}); 
 
 
$('#submitButton').click(function(evt) { 
    var text = $('#textInput').val(); 
        $.sundayMorning(text, { 
        destination: lng,  
        menuLeft: evt.pageX,  
        menuTop:  evt.pageY}, 
        function(response) { 
            $('#textInput').val(response.translation); 
        } 
    });     
});

N'oublie pas de télécharger jquery et de le mettre dans le dossier js sous le nom "jquery.js" Smiley cligne

et aussi le script de traduction Smiley cligne

Modifié par N-J (26 Aug 2009 - 18:04)

webide67

26 Aug 2009 à 18:28

Donc j'ais créé une page test.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-language" content="fr" />
<title>Titre</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.sundaymorning.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="contain">
<form>
<input type="text" id="textInput">
<label for="fr">Français</label>
<input type="radio" id="fr" name="lng" value="fr">
<label for="it">Italien</label><input type="radio" id="it" name="lng" value="it">
<label for="es">Espagnol</label><input type="radio" id="es" name="lng" value="es">
<input type="submit" id="submitButton" value="Traduire">
</form>
</div>
</body>
</html>

Et pour le test j'ais tout mis dans le même dossier (fichiers js et test.htm) l'input appararait ainsi que les boutons, je mets mon texte dans l'input, je selectionnes la langue et lorsque je clique sur le bouton mon texte disparait et pas de traduction (l'input et les bouton radio restent).
Smiley confus

N-J

27 Aug 2009 à 09:43

Salut,

J'avais oublié d'attendre que le document soit chargé avant d'appliquer mes fonctions, voici un lien où ça marche :
Test sundaymorning fr it es
et le lien pour télécharger le zip avec mes sources, d'ailleurs je n'avais pas pensé à mettre leur css + images au cas où toi tu veux mettre d'autres exemples en application :
http://www.nicolas-juen.fr/sundaymorning.zip

Le schéma html à suivre est le suivant:

<label for="fr">Français</label><input type="radio" id="fr" name="lng" value="fr">

là où il y a les fr, tu remplace par la langue que tu as besoin soit :
en:'English',
ar:'العربية',
bg:'български',
ca:'català',
cs:'česky',
da:'Dansk',
de:'Deutsch',
el:'Ελληνικά',
es:'Español',
fi:'suomi',
fr:'Français',
hr:'hrvatski',
id:'Indonesia',
it:'Italiano',
iw:'עברית',
ja:'日本語',
ko:'한국어',
lt:'Lietuvių',
lv:'latviešu',
nl:'Nederlands',
no:'norsk',
pl:'Polski',
pt:'Português',
ro:'Română',
ru:'Русский',
sk:'slovenčina',
sl:'slovenščina',
sr:'српски',
sv:'Svenska',
tl:'Filipino',
uk:'українська',
vi:'Tiếng Việt',
CN:'中文 (简体)',
TW:'中文 (繁體)'

C'est la liste qu'ils donnent sur le site.

webide67

27 Aug 2009 à 10:22

Ecoute c'est génial, merci mille fois pour ton aide et ta patience.

N-J

27 Aug 2009 à 10:25

Pas de problème, si le sujet est résolu ajoute [Résolu] au sujet en éditant ton premier post Smiley cligne

Sujet clos