Afficher les forums des autres langues

All contributions published for previous SPIP versions

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.

updated on 5 December 2006

Discussion

Une discussion

  • 1

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

    • mortimer

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

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom