Rang : ordonner une liste par Drag&Drop

Installation

Il s’installe comme tous les plugins.

Avec SPIP < v4 il nécessite le plugin Déclarer parent (installé en dépendance).

Il est fourni avec une surcharge des squelettes du core et du plugin mots, permettant de ranger les articles et les mots clés dans l’espace privé.

Configuration

Choisir les objets
…pour lesquels vous voulez activer le drag&drop.

Ici vous pouvez activer :

• les Articles,
• les Site référencés,
• les Mots-clés,
• les objets éditoriaux gérés par d’autres plugins.

Ranger les objets
Si cette case est cochée, les nouveaux objets créés seront rangés automatiquement à la fin de la liste, avec le rang le plus élevé +1.

Dans vos squelettes

Il est possible d’utiliser le critère par rang pour les objets activés dans la configuration.

<BOUCLE_articles(ARTICLES){id_rubrique}{par rang}>
	<h2>#TITRE</h2>
	<div>#TEXTE</div>
</BOUCLE_articles>

Cas particulier de classement

Si vous avez un cas particulier, vous pouvez utiliser le pipeline rang_declarer_contexte pour ajouter d’autres contextes à cette liste.

Exemple
Pouvoir classer les définitions qui apparaissent dans la page exec=dictionnaire.

1- déclarer le pipeline dans le fichier paquet.xml (du plugin « prefixplugin » ici)

<pipeline nom="rang_declarer_contexte" inclure="prefixplugin_pipelines.php" />

2- puis dans le fichier prefixplugin_pipelines.php ajouter la fonction suivante :

function prefixplugin_rang_declarer_contexte($flux) {
	$flux[] = 'dictionnaire';
	return $flux;
}

Comment utiliser ce plugin pour faire du drag&drop sur mon objet éditorial

La première chose à faire est bien sûr de cocher l’objet (exemple : Patates) dans la configuration du plugin.

Ensuite, il faut modifier le squelette /prive/objets/liste/patates.html pour y ajouter quelques informations.
Sur la base d’un squelette généré par la Fabrique, voici les modifications à y apporter.

1- Pouvoir trier la liste par rang
Dans le tableau ci-dessous, ajouter l’entrée rang,1

[(#SET{defaut_tri,#ARRAY{
	rang,1,	
	titre,1,
	date,-1,
	id_patate,1,
	points,-1
}})]

2- Vérifier que l’objet a bien été sélectionné dans la configuration
Juste après ce tout premier bloc qui détermine le sens de tri, ajouter le test qui détermine si l’objet est effectivement coché dans la configuration de Rang ou pas, et stocker le résultat pour ne pas le recalculer ensuite.

#SET{activer_rang, #VAL{patates}|in_array{#RANG_LISTE_OBJETS} }

Si l’objet éditorial a un objet parent (par exemple, le parent d’un article est une rubrique, le parent d’un mot est un groupe_mot), il faut aussi tester si l’identifiant du parent est bien reçu dans l’environnement.
On trie alors les objets en fonction de leurs parents.

Dans le cas d’un article par exemple, le test serait :

#SET{activer_rang, #ENV{id_rubrique}|et{#VAL{articles}|in_array{#RANG_LISTE_OBJETS}} }

3- toujours pour le tri
si le rang est activé sur cet objet, on applique un tri par rang par défaut.

[(#GET{activer_rang}|oui) [(#VAL{rang}|setenv{par})] #SET{tri,rang} ]

4- Pour pouvoir insérer et configurer le code javascript qui va gérer le drag&drop
…Il faut préciser sur quel objet il va s’appliquer.
On ajoute donc un attribut data-objets à la table :

<table class="spip liste" data-objet="patates">

5- Afficher le Rang

Par défaut, la Fabrique génère des squelettes qui affichent la balise #RANG à côté du #TITRE. Mais nous voulons pouvoir trier aussi bien par rang que par titre, nous allons donc séparer ces deux colonnes.

Dans le <thead>, on ajoute juste avant celle du titre une colonne pour trier par Rang :

[(#GET{activer_rang}|oui)<th class="rang" scope="col">[(#TRI{rang,<span title="<:rang:lien_trier_rang|attribut_html:>"><:rang:info_rang_abbr:></span>,ajax})]</th>]

Et dans le <tbody>, on ajoute la colonne correspondante :

[(#GET{activer_rang}|oui)<td class="rang">[(#RANG).]</td>]

Dans le <td class="titre principale"> qui contient le titre, on peut donc supprimer la balise [(#RANG).]

6- Ajout de l’attribut data-id_objet
Ajouter un attribut data-id_objet sur le <tr> de chaque objet :

<tr [(#GET{activer_rang}|oui)data-id_objet="#ID_PATATE"] class="[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]">

Le code javascript qui gère le drag&drop ajoutera automatiquement une colonne supplémentaire avec un petit picto symbolisant une poignée, qui indique que les objets peuvent être déplacés dans la liste.

Déclarer le parent d’un objet éditorial

Pour les objets qui ont une liaison directe avec un autre objet (i.e. sont enfants de cet objet par un id_, par exemple spip_articles qui contient un id_rubrique), le plugin rang a besoin de savoir quel est le parent des objets qu’on veut classer.

Il utilise pour ça la fonction du core objet_lister_parents() (dans ecrire/base/objets.php).

Cette déclaration peut être faite soit par la déclaration d’un [’parent’] dans la description de la table de l’objet :

	'parent' => 
		[
			'type' => 'type_du_parent', 
			'champ' => 'id_type_du_parent'
		],

soit par l’utilisation du pipeline objet_lister_parents.

Notes techniques

a/ La balise #RANG_LISTE_OBJETS calcule automatiquement la liste des contextes (i.e. pages /?exec=patates) sur lesquels il insère le code javascript qui gère le drag&drop.

Cette liste est calculée à partir des objets cochés dans la configuration, et y ajoute les noms des objets parents au singulier. Si vous avez coché Articles dans la configuration, la liste des contextes contiendra articles et rubrique.

Le calcul s’appuie sur la convention que les noms des squelettes correspondent aux noms des objets, par exemple, les objets patates sont listés dans le squelette /prive/objets/liste/patates.html et affichés dans /prive/objets/contenu/patate.html.

Enfin la balise #RANG_LISTE_OBJETS offre l’avantage de ne plus être interprétée si le plugin est désactivé ou désinstallé. Les surcharges de squelettes sont donc compatible « avec et sans » le plugin Rang, et ne génèreront pas d’erreurs.

b/ Ce plugin surcharge la balise #RANG du core de SPIP.

c/ Lorsque vous activez un objet dans la config, le plugin va créer un champ ’rang’ dans la table de l’objet sélectionné.