Afficher les forums des autres langues

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 là.

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.

Browser	Version	Comptabilité
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.

Vos commentaires

# Le 29 juillet 2004 à 17:15, par ? En réponse à : > Afficher les forums des autres langues

ouais mais laisse tomber le cacascript (java) c’est nul et ca fonctionne mal suivant les naviguateur
- # ^ Le 29 juillet 2004 à 23:19, par mortimer En réponse à : > Afficher les forums des autres langues
  
  e suis preneur de tous conseils pour faire ce genre d’onglet, sans recharger la page, sans javascript ?
Répondre à ce message

SPIP-Contrib

Afficher les forums des autres langues

Choix d’affichage

Squelette

Utilisation

Comptabilité

Notes

Rubriques

Derniers commentaires

Téléchargement(s)

Archives Multilinguisme

Vos commentaires

Répondre à cet article

Ça discute par ici

Zpip-dist en HTML5

Une licence pour un article

Plugin Parrainage

Formulaire de contact libre

Plugin Mot de Passe Compliqué

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN