Rang : ordonner une liste par Drag&Drop

Publié le : 5 mai 2018 – Dernière modification le 2 mai 2023 – par nicod_, Peetdu – 91 commentaires

1
2
3
4
5
26 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 ans 1 an 3 mois Sans limite
par date
Filtrer

25 discussions

  • 6
    Pierrot

    Bonjour,
    Je me demandai quels seraient les travaux nécessaires (voire tout simplement si c’est possible) pour rendre ce plugin actif sur les brèves ? L’objet « Brèves » n’apparait pas dans la liste des objets activables donc la méthode décrite ci-dessus ne semble pas pouvoir s’appliquer puisque le préalable est de cocher l’objet en question ...
    Merci !
    Pierre.

    • Peetdu

      Bonjour Pierrot,

      demande récurrente. Je m’en occupe dans la semaine.
      Ta mission, si tu l’acceptes, seras de faire les tests…

      Ok pour toi ?

    • Pierrot

      C’est pas marrant, ce message ne s’est pas auto-détruit dans les 10 secondes comme dans Mission Impossible ...
      Bref je décolle pour Singapour dès maintenant, l’équipe me rejoint sur place, on attends les instructions sur la liaison cryptée :-)
      Ethan Hunt.

    • Peetdu

      C’est bon avec la v1.0.9.
      Tu me tiens au courant ?

      Cheers
      P

    • Pierrot

      Pour l’instant je ne vois pas la version, dès que je l’ai je teste !
      P.

    • Pierrot

      Bonjour,
      Ok j’ai mis en place manuellement en téléchargeant l’archive depuis Git, premiers tests complètement concluants ! Ça marche !
      Pierre

    • Peetdu

      Cool ! Je viens de créer le tag 1.0.9 correpondant.

      Cheers

    Répondre à ce message

  • 3
    Sylvain Nogues

    Bonjour,
    j’ai installé ce plugin bien pratique sur un spip 3.1.12.
    Je l’utilise pour ordonner les articles.
    Il fonctionne bien en général... sauf pour une rubrique dans laquelle il y a une quarantaine d’articles : l’article « déplacé » ne reste pas à sa nouvelle place. Pourtant, il est bien renuméroté. Il semble que le bug soit lié à la pagination.
    Ce problème existe avec Firefox. J’ai testé avec Chrome, et là, pas de problème, ça glisse !
    Cordialement,
    Sylvain

    • Peetdu

      Bonjour Sylvain,

      je viens de tester avec SPIP 3.1.12 + Rang 1.0.15 + PHP 5.6.38 + FF 75
      -  sur un site de test chez un hébergeur avec une rubrique qui contient 290 articles : plusieurs tests dans différentes sections de la pagination ;
      -  en local, avec une rubrique contenant une vingtaine d’articles : mêmes tests.

      Dans les deux cas, je n’arrive pas à reproduire l’anomalie que tu signales.

      Je reste à ta disposition si tu trouves de nouveaux éléments.

    • Sylvain Nogues

      j’ai redémarré firefox, qui devait être un peu fatigué, voire en burn out, et c’est retombé en marche.
      Désolé pour le bruit...
      Merci !

    • Peetdu

      Cool ! Merci pour ton retour.

    Répondre à ce message

  • 2
    baloo

    bonjour,
    est-il possible de classer un objet editorial « bloc » par rubrique sachant que la rubrique n’est pas son parent . l’objet bloc peut appartenir à 0 ou n rubriques et une rubrique peut avoir 0 à n blocs ( comme les documents) ...
    Je suppose que cela se joue en ajoutant le rang dans la table des liens mais comment ?
    encore merci pour ce plugin

    • Peetdu

      Si c’est bien comme des documents, c’est à dire que ton objet editorial « Bloc » est lié via une table de liaison genre spip_blocs_liens, il te faut alors utiliser le plugin « rang_auteurs » (qui devrait plutôt s’appeler « rang_liens » me semble t-il) et l’adapter à ton cas.
      Voir à ce propos https://core.spip.net/issues/4305

      ps : Je vois qu’on est nombreux à essayer de faire un plugin Bloc :)

    • baloo

      mes blocs fonctionnent bien sur une page accueil ou je peux ordonnancer les blocs, choisir les styles couleurs, contenu mais je n’arrive pas à le généraliser.
      merci pour votre réponse

    Répondre à ce message

  • 5
    DD

    Bonjour,
    Sur un site SPIP 3.2.7 [24473]
    lorsque je veux faire la mise à jour de Rang 1.0.13 - test

    mon site plante (page blanche dès que je lance la moulinette).
    Mon site public est aussi bloqué (erreur 500) et dans l’admin je ne peux pas voir les pages ecrire/ ?exec=xx&id_xx

    Cela bloque (page blanche) après

    		<div id="conteneur" class="">
				<div id="navigation" class='lat' role='contentinfo'>

    J’ai desinstallé ce plugin et quand je veux le réactiver j’ai immédiatement une page blanche.

    Donc tout est bloqué !

    Merci

    • nicod_

      Bonjour,

      la dernière version est la 1.0.15, j’y ai justement corrigé un bug.

      Essaie de supprimer complètement le répertoire du plugin rang (/plugins/auto/rang, à priori), et de vider complètement ton cache (supprimer tout le contenu de /tmp, sauf /tmp/upload éventuellement), de retourner sur l’espace privé, et d’installer la toute dernière version.

    • DD

      Merci de ton aide.
      J’ai réussi à résoudre ce plantage général inédit en réinstallant le site et tous les plugins sauf plugin Métas + 2.3.4 - stable car dès que je l’active le site plante complètement.
      Alors qu’il fonctionnait jusqu’à hier et que je n’ai rien changé depuis. Bref..

      Je n’ai pas réinstallé « déclarer parent » qui ne parait plus utile.

    • nicod_

      Bizarre pour Métas+...
      Il faudrait investiguer un peu plus, j’ai plusieurs sites où tout ça cohabite très bien.

      Par contre pour declarer_parent, il est nécessité par Rang, donc tu dois forcément l’avoir activé.

    • Peetdu

      Hello DD,

      mon site plante (page blanche dès que je lance la moulinette).

      Dans le cas d’une page blanche, tu as un moyen de connaître exactement la cause grâce aux indications données ici : https://www.spip.net/fr_article4453.html#Obtenir-encore-plus-d-informations-pour-le-debuggage.

      En résumé tu ajoutes les instructions suivantes dans ton fichier /config/mes_options.php :

      error_reporting(E_ALL^E_NOTICE);
ini_set ("display_errors", "On");
define('SPIP_ERREUR_REPORT',E_ALL);

      …et tu relances ta page. Elle devrait alors afficher un message d’erreur PHP indiquant la cause du problème. En général cela fait gagner beaucoup de temps.

    • DD

      Merci de ton aide.

      Voici l’erreur fatale :
      Fatal error: Uncaught ArgumentCountError: Too few arguments to function extraire_attribut(), 1 passed in /var/www/html/site/ecrire/public/composer.php(92) : eval()'d code on line 271 and at least 2 expected in /var/www/html/site/ecrire/inc/filtres.php:1906 Stack trace: #0 /var/www/html/site/ecrire/public/composer.php(92) : eval()'d code(271): extraire_attribut('Arr\xC3\xAAt\xC3\xA9 pr\xC3\xA9fe...') #1 /var/www/html/site/ecrire/public/composer.php(92) : eval()'d code(14): BOUCLE_principalehtml_7f8032ebe241add05fcb7a4deb98dfd1(Array, Array, Array, Array, 1) #2 /var/www/html/site/ecrire/public/parametrer.php(128): html_7f8032ebe241add05fcb7a4deb98dfd1(Array, Array) #3 /var/www/html/site/ecrire/public/assembler.php(314): public_parametrer_dist('article', Array, 'c50cfbd1bc647de...', NULL) #4 /var/www/html/site/ecrire/public/assembler.php(117): public_produire_page_dist('article', Array, 1, 'c50cfbd1bc647de...', NULL, Array, 1585333100, NULL) #5 /var/www/html/site/ecrire/public.php(117): assemb in /var/www/html/site/ecrire/inc/filtres.php on line 1906

      Ce n’est pas un problème de version de serveur car là je fais les tests en local avec le même site que celui en production et mon système est à jour.
      Bon c’est un site SPIP qui date de 2003 mais il est à jour des plugins et de version SPIP 3.2.7 [24473]

      Donc je clos ceci sur cette page du plugin « rang » qui n’est pas en cause.

    Répondre à ce message

  • 1
    Des Trois Maisons

    Est-ce que c’est possible de trier par drag & drop dans une rubrique de l’espace publique ?

    • nicod_

      Ce serait possible mais ça demanderait forcément un développement spécifique (PHP + Javascript).

    Répondre à ce message

  • 4
    baloo

    Bonjour,
    j’utilise le plugin rang.
    J’ai rajouté un objet avec la fabrique et cela fonctionne bien avec le code donné dans la doc.
    J’ai un pb par ailleurs : Je peux ordonner les articles dans une rubrique mais je voudrais aussi ou à la place pouvoir ordonner les articles associé à un mot clé ..
    J’ai activé le rang par mot clé mais cela sert a classe les mots clés dans un groupe de mot clé
    avez vous une idée du code ?
    merci

    • Peetdu

      Bonjour Baloo,

      Je peux ordonner les articles dans une rubrique mais je voudrais aussi ou à la place pouvoir ordonner les articles associé à un mot clé ..

      Important : ce sera l’un ou l’autre.

      Il est possible de privilégier le classement des articles associés à un mot clé.
      Il me semble qu’avec les modifs suivantes ça devrait le faire :

      1. comme il est dit ici (https://contrib.spip.net/Rang-ordonner-une-liste-par-Drag-Drop#Notes-techniques) tu dois déclarer le nouveau contexte « exec=mot »
      2. il te faudra surcharger le fichier rang/prive/liste/articles

      Virer la ligne

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

      et la remplacer par

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

      et voilà…

    • baloo

      bonjour,
      Pour aller plus loin
      n’est-il pas possible d’ajouter un rang dans la table spip_mots _liens et ainsi pouvoir classer les objets de chacun des mots clés id_mot id_objet objet ? ( quelque soit le type d’objet)

    • baloo

      bonjour,
      Pour aller plus loin
      peux t-on classer classer les articles (les objets) pour chacun des mots clés auxquels il est associés .
      par exemple en ajoutant un rang dans la table spip_mots _liens ?

    • Peetdu

      Bonne idée !
      Mais c’est sur https://core.spip.net/issues/4305 qu’il te faut faire cette proposition.

    Répondre à ce message

  • 4
    DesignWeb

    Bonjour,

    Je cherche un moyen de trier les auteurs des articles par rang. Est-ce possible de le faire avec votre plugin ou pensez-vous ajouter cette fonction prochainement ?

    Merci d’avance

    Répondre à ce message

  • 1
    baloo

    encore moi ..
    j’ai un objet bloc ( table spip_ blocs, id_bloc) avec un parent page ( table spip_pages, id_page) ..je voudrais ranger mes blocs dans ma page.
    si je met
    #SET{activer_rang, #ENV{id_page}|et{#VAL{blocs}|in_array{#RANG_LISTE_OBJETS}} }
    je n’ai pas la poignée et je ne peux déplacer les objets de ma page.

    Si je remplace , pour tester, #SET{activer_rang, #VAL{patates}|in_array{#RANG_LISTE_OBJETS} }
    je peux déplacer les blocs sur une liste de tous les blocs ( pas par page bien sur ... ) ce qui a l’air de montrer que le reste des modifs de /prive/objets/liste/blocs.html est ok.

    je n’ai pas fait de déclarer contexte ...
    avez vous une idée du pb ?
    merci

    • baloo

      Bon maintenant ça fonctionne ... j’ai toujours le même code , aux espaces prés, je devais avoir un pb ailleurs

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

    Répondre à ce message

  • 6
    rjadot

    Bonjour,

    j’ai activé le plugin, pour les articles, une poignée drag and drop apparaît bien, lorsque le suis dans une rubrique mais les articles ne se déplacent pas… J’ai loupé une étape ?

    • Peetdu

      Bonjour rjadot,

      J’utilise ce plugin sur de nombreux sites et je ne reproduis pas le problème que tu décrits. Peux-tu m’en dire plus ?

    • rjadot

      Il y a un plugin qui entre en conflit, j’essaie de trouver lequel et je te dis ça.

    • rjadot

      J’ai trouvé, il y a un conflit avec le plugin « traduction d’articles autrement »

    • rjadot

      Ça y est j’ai trouvé, il s’agit du plugin « traduction d’articles autrement »

    • nicod_

      Salut,
      quelqu’un a eu ce problème récemment avec taa (Traduction d’articles autrement) : ce plugin surcharge le squelette de liste d’articles du privé, pour ajouter une colonne sur les traductions, et du coup les données nécessaires au plugin rang ne sont plus là.

      Si c’est ton cas, il faut voir avec l’auteur du plugin s’il peut ajouter les attributs data-objet et data-id_objet.
      Ça ne casse rien du tout, ce sont juste des attributs sur les balises.

    • beno

      Bonjour,
      Signalement : le plugin Rang s’arrête de fonctionner après l’activation de « Interface de traduction pour objets ».

    Répondre à ce message

  • Julien

    J’ai un problème sur SPIP 3.2.4 que je ne m’explique pas où le tri des articles ne fonctionnait pas (je n’ai pas essayé d’autres tri).

    J’ai dû rajouter $parent_champ = ’id_rubrique’ ; à la ligne 46 de action/trier_items.php car le champ $parent_champ était vide.

    Je suis dispo pour plus d’infos si besoin.

    Répondre à ce message

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