Afficher les forums des autres langues

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Maintenant que le multilinguisme est intégré joliment à spip, les utilisateurs de différentes langues vont poster des commentaires dans l’article de leur langue.
Voici un squelette pour afficher les forums de chaque traduction sur une page.

Le multilinguisme risque de cloisonner les discutions entre chaque langue et de limiter la vie communautaire du site.

Evidemment, il n’est pas toujours évident que l’utilisateur connaisse toutes les langues, mais il peut tout de même en comprendre plus d’une et participer aux discutions de chaque traduction.

Choix d’affichage

Comment afficher les plusieurs forums sur une même page. Les boucles spip ne permettent pas de mélanger correctement chaque langue. Les afficher les unes derrière les autres dérouterait l’utilisateur puisqu’on ne garderait pas l’ordre chronologique.

Mon choix a alors été de choisir javascript et le css pour afficher un onglet pour chaque langue.

Avant tout, il faut définir des nouvelles classes css (dans habillage.css par exemple) :

/*
* onglets forums langue
*/


li.onglet a { text-decoration: none; color: #505050; }
li.onglet a:hover { text-decoration: none; color: #303030; background: #efefef; }
li.onglet-last a:hover { text-decoration: none; color: #303030; background: #efefef; }
li.onglet-selected a:hover { text-decoration: none; color: #303030; background: white; }
li.onglet-selected-last a:hover { text-decoration: none; color: #303030; background: white; }

li.onglet, li.onglet-last, li.onglet-selected-last, li.onglet-selected {
 display: inline;
 padding: 3px;
 margin-right: -1px;
 border: 1px solid #a4a4a4;
 font-size: 80%;
}

li.onglet, li.onglet-last {
 color: #a0a0a0;
 background: #efefef; 
}

li.onglet {
 border-right: 0px;
}

li.onglet-selected, li.onglet-selected-last {
 background: #cfcfcf;
} 

li.onglet-selected {
 border-right: 0px; 
} 

div.onglet-content {
 border-top: 1px #a4a4a4 solid;
 margin-left: -16px;
 padding: 3px;
 padding-left: 16px;
 display: block;
 margin-top: -1em;
}

div.onglet-content-hidden {
 visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
}

et un bout de javascript, à mettre soit dans le header de votre page (entre

et

), soit juste avant les boucles présentées ici :

<script language="JavaScript">
 function change(id, newClass) {
   identity=document.getElementById(id);
   identity.className=newClass;
 }
</script>

On n’est pas ici pour faire un cour de css ou de javascript, je vous pointes vers ces pages [1] et [2] pour plus d’information. Libre à vous d’adapter le css (ou pour les experts les boucles à venir) pour une présentation personnalisée.

Squelette

Voici le squelette tout fait, à voir en démo ici ou .

forum_multi.php

<?php
if (!defined("_LICENCE")) {
define("_LICENCE", "1");
?>
<!--
	This is a template for SPIP(spip.net) cms. Developped by Pierre Andrews for 6v8.gamboni.org 

    Copyright (C) 2003  Pierre ANDREWS

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-->
<?php } ?>

<?php

$fond = "forum_multi";
$delais = 24 * 3600;
$multilang = true;

include ("inc-public.php");

?>

forum_multi.html

<?php
if (!defined("_LICENCE")) {
define("_LICENCE", "1");
?>
<!--
	This is a template for SPIP(spip.net) cms. Developped by Pierre Andrews for 6v8.gamboni.org 

    Copyright (C) 2003  Pierre ANDREWS

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-->
<?php } ?>

<!--insérez ici le code javascript par exemple-->

<BOUCLE_global(ARTICLES){id_article}>
<B_traduction_onglets>
<!-- les onglets -->

<div id="onglets">
<ul>
<?php $counter_onglets = 0;?>
<BOUCLE_traduction_onglets(ARTICLES) {traduction}>
<B_forum_onglet>
<?php $nb_forum = #TOTAL_BOUCLE;?>
<BOUCLE_forum_onglet(FORUMS){id_article}>
</BOUCLE_forum_onglet>
<?php $counter_onglets++;?>
<li class="<?php if($menu_lang == "#LANG") { echo "onglet-selected"; } else if($counter_onglets == #TOTAL_BOUCLE) {echo "onglet-last";} else {echo "onglet";}?>" id="#LANG"> 
<?php $counter_onglets_autres = 0;?>
<?php if($nb_forum > 0) {?>
<a href="javascript:;" onClick="change('#LANG','<?php echo ($counter_onglets == #TOTAL_BOUCLE)?"onglet-selected-last":"onglet-selected";?>');change('#LANG-content','onglet-content');<BOUCLE_traduction_onglets_autres(ARTICLES) {traduction}{exclus}><?php $counter_onglets_autres++;?>change('#LANG','<?php echo ($counter_onglets_autres == #TOTAL_BOUCLE)?"onglet-last":"onglet";?>');change('#LANG-content','onglet-content-hidden');</BOUCLE_traduction_onglets_autres>">[(#LANG|traduire_nom_langue)]</a>
<?php } else {?>
[(#LANG|traduire_nom_langue)]
<?php } $nb_forum = 0;?>
</li>
</BOUCLE_traduction_onglets>
</ul>
</div>
</B_traduction_onglets>
<!--pas de traduction ‡ l'article #TITRE-->
<//B_traduction_onglets>
<B_traduction_forum>
<!-- les forums -->
<div>
<BOUCLE_traduction_forum(ARTICLES) {traduction}>
<div class="<?php if($menu_lang=="#LANG") { echo "onglet-content"; } else {echo "onglet-content-hidden";}?>" id="#LANG-content">

<B_forums2>
<ul class="forum-total">

<BOUCLE_forums2(FORUMS){id_article}{par date}{inverse}>

<li>
<div class="forum-fil">

<div class="forum">
<a name="forum#ID_FORUM"></a>
<div class="forum-chapo">
<div class="forum-titre">#TITRE</div>
[(#DATE|affdate)][ | <A HREF="ecrire_auteur.php?id_article=#ID_ARTICLE">(#NOM)</A>]
</div>
<div class="forum-item">
#TEXTE
[<div class='forum-titre'><a href="(#URL_SITE)" class="spip_out">#NOM_SITE</a></div>]
[<div class='forum-repondre-message'><a href="forum.php?(#PARAMETRES_FORUM)">Reply to this message</a></div>]
</div>
</div>

<B_forums_fils2>
	<ul>
	<BOUCLE_forums_fils2(FORUMS){id_parent}{par date}>

	<li>
	<div class="forum">
	<a name="forum#ID_FORUM"></a>
	<div class="forum-chapo">
	<div class="forum-titre">#TITRE</div>
	[(#DATE|affdate)][ | <A HREF="ecrire_auteur.php?id_article=#ID_ARTICLE">(#NOM)</A>]
	</div>
	<div class="forum-item">
	#TEXTE
	[<div class='forum-titre'><a href="(#URL_SITE)" class="spip_out">#NOM_SITE</a></div>]
	[<div class='forum-repondre-message'><a href="forum.php?(#PARAMETRES_FORUM)">Reply to this message</a></div>]
	</div>
	
	</div>

	<BOUCLE_Forums_Boucle2(boucle_forums_fils2)></BOUCLE_Forums_Boucle2>
	</li>

	</BOUCLE_forums_fils2>
	</ul>
</B_forums_fils2>

</div>
</li>
</BOUCLE_forums2>

</ul>
</B_forums2>

</div>
</BOUCLE_traduction_forum>
</div>
</B_traduction_forum>

<B_forums>
<ul class="forum-total">

<BOUCLE_forums(FORUMS){id_article}{par date}{inverse}>

<li>
<div class="forum-fil">

<div class="forum">
<a name="forum#ID_FORUM"></a>
<div class="forum-chapo">
<div class="forum-titre">#TITRE</div>
[(#DATE|affdate)][ | <A HREF="ecrire_auteur.php?id_article=#ID_ARTICLE">(#NOM)</A>]
</div>
<div class="forum-item">
#TEXTE
[<div class='forum-titre'><a href="(#URL_SITE)" class="spip_out">#NOM_SITE</a></div>]
[<div class='forum-repondre-message'><a href="forum.php?(#PARAMETRES_FORUM)">Reply to this message</a></div>]
</div>
</div>

<B_forums_fils>
	<ul>
	<BOUCLE_forums_fils(FORUMS){id_parent}{par date}>

	<li>
	<div class="forum">
	<a name="forum#ID_FORUM"></a>
	<div class="forum-chapo">
	<div class="forum-titre">#TITRE</div>
	[(#DATE|affdate)][ | <A HREF="ecrire_auteur.php?id_article=#ID_ARTICLE">(#NOM)</A>]
	</div>
	<div class="forum-item">
	#TEXTE
	[<div class='forum-titre'><a href="(#URL_SITE)" class="spip_out">#NOM_SITE</a></div>]
	[<div class='forum-repondre-message'><a href="forum.php?(#PARAMETRES_FORUM)">Reply to this message</a></div>]
	</div>
	
	</div>

	<BOUCLE_Forums_Boucle(boucle_forums_fils2)></BOUCLE_Forums_Boucle>
	</li>

	</BOUCLE_forums_fils>
	</ul>
</B_forums_fils>

</div>
</li>
</BOUCLE_forums>

</ul>
</B_forums>

<//B_traduction_forum>

</BOUCLE_global>

-  On commence par une première boucle qui affiche les onglets, il y a un peu de code php pour déterminer celui qu’il faut sélectionner par défaut.
-  Ensuite, on boucle pour afficher le contenu.
-  S’il n’y a pas de traduction, on affiche seulement le forum de cet article, sans onglet.

Utilisation

pensez bien à insérer le code javascript et css comme indiqué. Vous pouvez ensuite importer le squelette directement (depuis le squelette d’article par exemple) avec le code :

<INCLURE(forum_multi.php){id_article}>

Remarquez qu’il faut que l’ID de l’article soit disponible.

Comptabilité

Ce code est testé avec spip 1.7.2pr1, peut être avec spip 1.7.1, je n’ai pas testé, je ne suis pas sûr que $menu_lang soit disponible.

BrowserVersionComptabilité
Safari 1.2.1 oui
Firefox 0.8 os X oui
IE 5.1 oui
Mozilla 5.0 windows oui

faites moi savoir pour les autres systèmes.

Dernière modification de cette page le 5 décembre 2006

Discussion

Une discussion

  • 1

    ouais mais laisse tomber le cacascript (java) c’est nul et ca fonctionne mal suivant les naviguateur

    • e suis preneur de tous conseils pour faire ce genre d’onglet, sans recharger la page, sans javascript ?

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom