Rang : ordonner une liste par Drag&Drop

Published : 5 May 2018 – updated on 2 May 2023 – by nicod_, Peetdu – 107 commentaires

1
2
3
4
5
28 Votes

Dans l’espace privé, pouvoir ordonner une liste d’objets par glisser-déposer. Par exemple la liste des articles d’une rubrique.

Il devient possible d’utiliser le critère par rang dans vos squelettes.

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é.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

28 discussions

  • 7
    FdM

    Bonjour,

    Je ne parviens pas à mettre les poignées de déplacement dans la liste des inscriptions à un événement (plugin inscriptions libres). L’attribution d’un rang est aléatoire.
    Cela fonctionne bien si j’active le plugin pour les articles.
    Où faut’il que je cherche l’erreur dans le code concerné?

    • nicod_

      Si le plugin en question n’a pas été codé pour prendre en charge la gestion du rang par drag’n drop, ça ne pourra pas marcher.
      Comme dit dans l’article, cette fonctionnalité n’est pas auto-magique, et demande une adaptation des squelettes de l’espace privé.

    • FdM

      C’est bien ce que j’ai fait : coder le squelette adhoc du plugin à partir des recommandations de cet article et en m’inspirant aussi du codage de la liste des articles qui je le répète, fonctionne.

    • nicod_

      Ok, je n’avais pas compris ça.
      On parle de quel plugin, celui ci : https://git.spip.net/spip-contrib-extensions/agenda_inscription ?
      Il me faudrait quelques billes pour pouvoir tester de mon côté.

    • nicod_

      Pour l’endroit où chercher les erreurs : activer l’affichage des erreurs, warnings, et notices PHP, activer aussi un log dans un fichier.
      Dans mes_options.php :

      define('SPIP_ERREUR_REPORT', E_ALL);
error_reporting(SPIP_ERREUR_REPORT);
ini_set("log_errors", 1);
ini_set("error_log", $_SERVER['DOCUMENT_ROOT'] . '/tmp/log/php.log');

      Regarder aussi les erreurs dans la console JS.

    • FdM

      Je ne vois pas grand chose à part une erreur dans le plugin déclarer_parent, que j’ai corrigée.
      Faut dire que le JS est une terra incognita pour moi.

    • nicod_

      Je t’ai posé une question : est ce qu’on parle bien de ce plugin ?
      https://git.spip.net/spip-contrib-extensions/agenda_inscription

      Et notamment de la liste des inscrits ?
      https://git.spip.net/spip-contrib-extensions/agenda_inscription/-/blob/master/prive/objets/liste/evenements_inscrits.html?ref_type=heads

      Je n’y vois pas du tout le code qui gère les rangs.

      Et tu me dis que tu as corrigé une erreur dans Déclarer parent, mais je ne vois pas de modif récente sur ce plugin :
      https://git.spip.net/spip-contrib-extensions/declarerparent/-/commits/master?ref_type=HEADS

      Est ce que tu fais tes modifs directement sur les plugins dans ton coin ?
      Ce n’est pas une bonne idée, elles seraient écrasées dès que tu feras une mise à jour.
      Et puis évidemment, impossible de t’aider dans ce cas.

    • FdM

      Bonjour,

      Il s’agit bien du plugin agenda_inscription pour lequel je voudrais avoir une gestion du type rang.
      Je mets ici les lignes de code incorporées à la liste des inscriptions.

      #SET{activer_rang, #ENV{id_evenement}|et{#VAL{evenements_inscrits}|in_array{#RANG_LISTE_OBJETS}} }
[(#GET{activer_rang}|oui) [(#VAL{rang}|setenv{par})] #SET{tri,rang} ]

.....

<div class="liste-objets evenements_inscrits">
<table class="spip liste" data-objet="evenements_inscrits">
	[<caption><strong class="caption">(#GRAND_TOTAL|singulier_ou_pluriel{evenements_inscrit:info_1_evenements_inscrit,evenements_inscrit:info_nb_evenements_inscrits})</strong></caption>]
	<thead>
		<tr class="first_row">	
			<th class="statut" scope="col">[(#TRI{statut,<span title="<:lien_trier_statut|attribut_html:>">#</span>,ajax})]</th>
			[(#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>]

..... 

<BOUCLE_liste_evenements_inscrits(EVENEMENTS_INSCRITS){id_?}{where?}{statut?}{recherche?}{tri #ENV{par,num nom},#GET{defaut_tri}}{par nom}>
		<tr [(#GET{activer_rang}|oui) data-id_objet="#ID_EVENEMENTS_INSCRIT"] class="[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]">
			<td class="statut">[(#STATUT|puce_statut{evenements_inscrit,#ID_EVENEMENTS_INSCRIT})]</td>
			[(#GET{activer_rang}|oui)<td class="rang">[(#RANG)]</td>]


.....

      Pour le reste, le plugin Déclarer parent n’est pas nécessaire pour spip > 4.0. Je l’ai même désactiver et placer la déclaration du parent événement dans un plugin perso.

    Reply to this message

  • 1
    ivandps

    Bonjour,
    est-il possible d’appliquer le plugin a l’objet rubrique ?

    • nicod_

      Non, pas facilement.
      Les squelettes qui gèrent les rubriques dans l’espace privé sont très différents des autres.

    Reply to this message

  • 8
    FdM

    J’ai un peu de mal avec la mise en place de Rang 2.0.6.
    Je l’essaie sur une table du plugin événements_inscrits. La colonne de numérotation est bien présente et triée, mais pas de poignée de déplacement.

    J’imagine que c’est du côté du javascript

    <table class="spip liste" data-objet="evenements_inscrit">
    <tr [(#GET{activer_rang}|oui)data-id_objet="#ID_EVENEMENTS_INSCRIT"] class="[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]">

    Qu’est-ce que j’ai foiré

    spip 4.1.9
    agenda 4.5.4
    inscription libre 1.4.1

    • nicod_

      Si tu examines le code source avec les outils de dév, le data-id_objet est bien généré sur les tr ?

      Tu as fait un var_mode=recalcul sur la page, ou vidé le cache ?

    • nicod_

      A la réflexion, je pense qu’il manque de toute façon quelque chose pour que ça fonctionne : le plugin rang a besoin de savoir quel est l’objet parent d’un objet qu’on veut classer.
      Il utilise pour ça la fonction objet_lister_parents() du core (dans ecrire/base/objets.php)

      Je pense qu’il manque cette déclaration dans le plugin agenda_inscription, soit par la déclaration d’un ['parent'] dans la description de la table :

      	'parent' => 
		[
			'type' => 'evenement', 
			'champ' => 'id_evenement'
		],

      soit par l’utilisation du pipeline objet_lister_parents

    • nicod_

      La doc mériterait d’être mise à jour sur ce point là d’ailleurs.

    • nicod_

      J’ai ajouté une note dans la doc.

    • FdM

      OK résolu.
      Le problème était dans la définition de l’objet parent

      Merci

    • FdM

      Je relance ce sujet.

      A la suite d’une modification du site, le plugin ne donne pas de résultats:
      La colonne est là avec la fonction de tri, mais pas de poignée, ni d’encodage automatique du rang.

      La déclaration du parent “évenement” est faite et comme ci-dessus.

      <table class="spip liste" data-objet="evenements_inscrits">
      <tr [(#GET{activer_rang}|oui)data-id_objet="#ID_EVENEMENTS_INSCRIT"] class="[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]">
[(#GET{activer_rang}|oui)<td class="rang">[(#RANG)]</td>]

      Où se trouverait le problème ?

    • nicod_

      Difficile à dire comme ça.

      Tu parles d’une modification du site, mais de quel ordre ?
      Mise à jour de SPIP ? Du plugin ? ou de ton code à toi ?

    • FdM

      Les 3 à la suite d’une refonte du site:
      Mise à jour spip 4.4.3
      Réinstallation du plugin 2.1.0
      Modification, de la liste évenements_inscrits comme proposé ci-dessus

    Reply to this message

  • 2
    beno

    Petit bug ? (sous SPIP 4.1, Rang 2.0.8), le plugin n’est pas fonctionnel pour hiérarchiser les articles si on les a au préalable triés par Date ou par ID...

    • Peetdu

      Hello beno,

      je ne reproduis pas chez moi.

      Mais peut être confond tu Tri et Rang ?
      Si tu tris tes articles par date et que, ensuite, tu reclasses le rang d’un article par drag&drop, l’article ne bouge pas de sa position dans le tableau des articles puisque sa date ne change pas.
      Par contre son nouveau rang a bien été pris en compte.

      Dis moi…

    • beno

      Bonjour Peetdu,
      En fait, après avoir modifié l’ordre via ID ou Date, il faut parfois recharger la page pour que soit pris en compte le nouvel ordonnancement...

    Reply to this message

  • pipol

    J’ai testé de forcer pour la 4.2 et il me semble que cela fonctionne. Peut être pourrait on mettre la compatibilité à jour ?

    Reply to this message

  • 4
    DD

    Bonjour,

    Ce plugin “Rang” fonctionne bien avec SPIP 4.2 sauf pour ranger des albums. (j’ai bien coché la case “albums” dans la config).
    Le tri se fait dans la partie privée mais pas sur le site public (j’ai un article avec plusieurs albums).
    C’est peut-être à voir dans le plugin “album” ? car le tri {par titre} fonctionne mais pas {par rang}

    dd

    Reply to this message

  • 2
    John Delmoore

    Bonjour,
    est-ce qu’il est possible d’utiliser ce super plugin pour trier des tables de liens leur de la liaison à un objet PARACHUTE.
    Je vois que cela existe dans SPIP4 “ecrire/action/editer_liens” pour les documents.
    Merci bien pour la réponse même négative !
    J.

    Reply to this message

  • 4

    Bonjour

    Est-ce qu’il serait possible d’effectuer un tri par rang pour des articles liés à un mot clé ?

    • Peetdu

      Pas sûr de comprendre ta question.

      Mais bon…

      -  avec le plugin Rang, tu peux ordonner des mots-clés dans un groupe de mots clés.
      -  avec le plugin Rang auteurs, tu peux ordonner des mots clés liés à un article par exemple. Il te faut pour cela créer une surcharge du squelettes “prive/objets/liste/mots_lies”, à l’image de la surcharge du squelettes “prive/objets/liste/auteurs_lies” fourni dans ce même plugin.

    • Merci pour le retour.

      En fait, je souhaiterais pouvoir ordonner une liste d’articles associés à un mot clé.
      Donc si je consulte le mot clé “piscine”, j’ai une liste de 25 articles, que je souhaiterais pouvoir ordonner pour récupérer ce tri dans l’espace public.
      Exactement comme une liste d’article dans une rubrique.

    • Peetdu

      Ok.

      Dans ton cas, on va dire que le mot piscine a l’id_mot=6.
      Il te faudrait donc pouvoir classer les article sur la page ecrire/?exec=mot&id_mot=6.

      C’est possible. Il faut que tu actives dans le plugin Rang le contexte “mot” grâce au pipeline «rang_declarer_contexte» (explications dans la doc de cette même page).
      Mais attention : un article = un rang. Tu devra choisir une fois pour toute où tu veux classer tes articles : dans des rubriques ou dans un la liste des articles associés à un mot-clé. C’est l’un ou l’autre.

      A tester donc…

    • Ok, merci.

      Est-ce qu’il serait possible de pouvoir classer à la fois dans les rubriques et dans les mots clés ?

    Reply to this message

  • 2
    Pierrot

    Bonjour,

    J’ai passé un site en v4, supprimé “Déclarer parent” et mis à jour Rang en 2.0.2, cela semble cassé sur les Brèves (la possibilité de les ordonner avait été ajoutée récemment, je n’ai pas de squelette qui ordonne par rang les articles pour voir si ça marche) ... j’imagine, je suppose, que cela est probablement dû au fait que Brèves n’est plus un plugin de la dist ?
    Quand on met le critère “par rang” cela revient dans l’ordre des id pas des rangs décidés dans le back-office.

    Reply to this message

  • 2
    Pierrot

    Bonjour,
    Je suis en train de regarder la possibilité de passer un certain site de 3.2.11 en 4.0 et ce site utilise Rang et Déclarer Parent. Rang semble ok (même si le plugin Compatibilité ne signale pas l’existence d’une version compatible) mais pas Déclarer Parent, par contre tout ce que je lis me semble indiquer que Déclarer Parent a été intégré au core, je voulais m’assurer que c’était le cas: en v4 on installe Rang et c’est tout ? on peut enlever Déclarer Parent ?
    Merci d’avance,
    Pierre

    • Peetdu

      Hello,

      oui, le plugin «Déclarer Parent» n’est plus utile en SPIP 4.
      Pour info cette API a été intégré dans le core de SPIP.

      Je corrige la doc de suite à ce propos.
      Cheers

    • Pierrot

      Top merci !
      Pierre

    Reply to this message

Add a comment

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.

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