Annuaire d’auteurs avec Spip Bonux

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Pour ceux qui ont besoin de présenter un annuaire des auteurs d’un site, plusieurs contributions existent dont :
-  Tri alphabétique des auteurs de Erational

Je me suis inspiré de cette contribution, à laquelle j’ai intégré l’apport de Spip Bonux quant à la gestion des tableaux (#ARRAY), notamment la balise #SET_PUSH.

J’utilise notamment le filtre proposé par Erational qui permet de rechercher la première lettre du dernier mot du champs #NOM de l’auteur. Ainsi Harry Cover sera pointé par la lettre C. J’y ai ajouté un petit filtre permettant de trier les tableaux.

Le principal apport de cette nouvelle contribution est d’ordre pédagogique et permettra peut-être à ceux qui cherchent de s’y retrouver. D’un point de vue fonctionnel, l’évolution porte sur la présentation et les fonctions par défaut :

-  navigation dans une barre alphabétique complète (façon répertoire)
-  seules les lettres comprenant des auteurs ont des liens actifs, et leur présentation peut être distinguée via CSS
-  par défaut, la barre s’active sur la première lettre comprenant des auteurs.

Tout cela est inclus dans un modèle, le fichier annuaire.html qui est appelé par la balise [(#MODELE{annuaire}{lettre=#ENV{lettre}})] ou lettre est la variable de choix, si elle existe.

Barre de navigation alphabétique

Pour mémoire : le filtre proposé par Erational

// ---------------------------------------
// Filtre lastfirstletter
// extrait la première lettre du dernier mot et la passe en majuscules
// ex. marcel duchamp -> D
// ---------------------------------------
function lastfirstletter($texte) {

  $pos = strrpos(trim($texte), " ");
  if ($pos === false) { // pas trouvé -> 1er lettre
      $texte = $texte{0};
  } else {
      $texte = $texte{$pos+1};
  }
	// remplacement des caractères accentués
	$texte = strtr($texte, "\xA1\xAA\xBA\xBF\xC0\xC1\xC2\xC3\xC5\xC7\xC8\xC9\xCA\xCB\xCC\xCD\xCE\xCF\xD0\xD1\xD2\xD3\xD4\xD5\xD8\xD9\xDA\xDB\xDD\xE0\xE1\xE2\xE3\xE5\xE7\xE8\xE9\xEA\xEB\xEC\xED\xEE\xEF\xF0\xF1\xF2\xF3\xF4\xF5\xF8\xF9\xFA\xFB\xFD\xFF", "!ao?AAAAACEEEEIIIIDNOOOOOUUUYaaaaaceeeeiiiidnooooouuuyy");
	$texte = strtr($texte, array("\xC4"=>"Ae", "\xC6"=>"AE", "\xD6"=>"Oe", "\xDC"=>"Ue", "\xDE"=>"TH", "\xDF"=>"ss", "\xE4"=>"ae", "\xE6"=>"ae", "\xF6"=>"oe", "\xFC"=>"ue", "\xFE"=>"th"));
	$texte = strtoupper($texte);          // tout en majuscules
	if (is_numeric($texte)) $texte = "";  // on supprime les chiffres
	return $texte;
	
} // lastfirstletter

// ajout filtre de tri de tableaux

function array_sort($tableau) {
	sort($tableau);
	return $tableau;
}

Le modele annuaire.html

Initialisation

Dans un premier temps, on va initialiser plusieurs tableaux :

  • un tableau alphabet, reprenant ... l’alphabet
  • une série de X tableaux commence_parX : tableau de chaque lettre avec les ID AUTEUR correspondant. Ex : commence_parT contient tous les auteurs dont le nom commence par T
  • un tableau comprenant les lettres utiles (permet de différencier les lettres ayant un auteur des autres) : auteurs_alpha

L’utilisation de #SET_PUSH de Spip-Bonux rend les choses particulièrement faciles.

[(#SET{alphabet, [(#VAL{ABCDEFGHIJKLMNOPQRSTUVWXYZ}|str_split)]})]

<BOUCLE_listalpha(AUTEURS){par nom}{tout}>
[(#SET_PUSH{commence_par[(#NOM|lastfirstletter)],#ID_AUTEUR})]
[(#SET_PUSH{auteurs_alpha,#NOM|lastfirstletter})]
</BOUCLE_listalpha>
#SET{mondebut,#GET{auteurs_alpha}|array_sort|table_valeur{0} }

Construction de la barre de navigation alphabétique

On balaie le tableau alphabet et pour chaque valeur, on contrôle si celle-ci est présente dans le tableau beginalpha.

  • Si c’est le cas, on pose un lien avec une balise #SELF agrémentée de la lettre pointée (variable lettre). Dans le même temps, on affecte la classe « plein » à la balise li correspondante, pour un traitement par CSS.
  • Dans le cas contraire, on affiche simplement la lettre, sans style particulier ni lien.
  • La barre utilise par defaut la première valeur du tableau beginalpha.
<B_alphabet>
<div class="alphabet">
<ul>
<BOUCLE_alphabet(POUR){tableau #GET{alphabet}}>
<li class='[(#VALEUR|=={[(#ENV{lettre,#GET{mondebut} })]}|?{on})] [(#VALEUR|in_array{#GET{auteurs_alpha}}|oui)plein]'>[(#VALEUR|in_array{#GET{auteurs_alpha}}|oui)<a href="[(#SELF|parametre_url{lettre,#VALEUR})]">]#VALEUR</li>[(#VALEUR|in_array{#GET{auteurs_alpha}}|oui)</a>]
</BOUCLE_alphabet>
</ul>
</div>
</B_alphabet>

Affichage des résultats

Une dernière boucle va sélectionner les auteurs correspondant

  • soit à la lettre cliquée
  • soit à la première lettre comportant des auteurs (valeur par défaut).

Dans le premier cas, la boucle va balayer le tableau beginbyX ou X est la valeur de la lettre choisie.

[(#REM) Traitement des listes d'auteurs
- on peut aussi utiliser un modele d'affichage ]

<B_artlettre>
<div class="liste_auteur">
<BOUCLE_artlettre(AUTEURS){id_auteur IN #GET{commence_par#ENV{lettre,#GET{mondebut} }}}{tout}>
<a href="#URL_AUTEUR">#NOM</a><br />  
</BOUCLE_artlettre>
</div>
</B_artlettre>

Naturellement, il s’agit là d’un traitement de données très basique. On peut construire, à sa guise, un modèle d’affichage qui reprendra les informations complètes de l’auteur où celles gérées par le plugin Inscription2.

La finition par les styles CSS

Il suffit de quelques styles CSS pour obtenir ce que vous voudrez de ce modèle. Voici, pour exemple, un ensemble de style que j’ai utilisé pour obtenir le résultat affiché plus haut.

div.alphabet{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #999;
}
div.alphabet ul{
	margin:0;
	padding:0;
}
div.alphabet ul li{
	margin:0;
	padding:0;
	display:inline-block;
	width:10px;
	text-align:center;	
	padding:2px;
	margin-right:2px;
	background-color: #E3E3E3;
	border: 1px solid #E3E3E3;	
}
div.alphabet ul li.on{
	background-color: #006;
}
div.alphabet ul li.plein{
	border: 1px solid #666;
}
div.alphabet ul li a{
	display:inline-block;
	width:10px;	
	text-align:center;	
}

div.alphabet ul li a:hover{
	color:#006;
	text-decoration:none;
	font-weight:bold;
}
div.alphabet ul li.on a{
		color: #fff;
		font-weight:bold;
		text-decoration:none;
}

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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