Sortable.js à la place de jquery-ui.sortable dans le core. #150

Closed
marcimat wants to merge 1 commits from dev-sortable into master
marcimat commented 2 weeks ago
Owner

Relatif à https://core.spip.net/issues/4573

Ce commit ajoute Sortable.js et Sortable.min.js (https://github.com/SortableJS/Sortable) et l'utilise dans le sélecteur de rubriques et le sélecteur générique.

J'ai testé sur les rubriques restreintes d'auteurs, ainsi que sur Polyhiérarchie, et ça fonctionne, même si j'ai découvert pour le coup que ces sélections étaient déplaçables (rien ne semble ou semblait l'indiquer).

Il y a une PR pour le plugin médias également, plus impacté.

Relatif à https://core.spip.net/issues/4573 Ce commit ajoute Sortable.js et Sortable.min.js (https://github.com/SortableJS/Sortable) et l'utilise dans le sélecteur de rubriques et le sélecteur générique. J'ai testé sur les rubriques restreintes d'auteurs, ainsi que sur Polyhiérarchie, et ça fonctionne, même si j'ai découvert pour le coup que ces sélections étaient déplaçables (rien ne semble ou semblait l'indiquer). Il y a une PR pour le plugin médias également, plus impacté.
marcimat added 1 commit 2 weeks ago

Suivant comment elle marche, il faudra documenter les différences entre la manière d'appeler avant et la manière avec la nouvelle lib.

Pour lister déjà un peu, c'est au moins utilisé dans Saisies et dans Sélection éditoriale.

Suivant comment elle marche, il faudra documenter les différences entre la manière d'appeler avant et la manière avec la nouvelle lib. Pour lister déjà un peu, c'est au moins utilisé dans Saisies et dans Sélection éditoriale.
Poster
Owner

Ça dépend beaucoup des cas d'usages, et donc amha, il faut voir plutôt du côté de leurs documentations respectives.

Ce que je peux dire :

  • On peut récupérer l'instance de Sortable créé auparavant sur un html donné par const sorter = Sortable(document.querySelector('.mon_selecteur'));
  • Les événements à déclarer sont préfixés de "on" tel que "onStart" à la place de "start", et n'ont pas forcément les mêmes nommages (onEnd vs Stop)
  • L'objet 'event' reçu sur les événements a tout ce qu'on a besoin : event.item est l'item qu'on déplace ; event.clone celui qui flotte, event.from la liste de départ, event.to la liste d'arrivée (utile si tu déplaces des éléments d'une liste à une autre comme peut le faire Album il me semble)
  • le "this" dans un événement est l'instance de l'objet Sortable. On peut donc faire un this.toArray() pour pécho l'ordre des listes. Par défaut il cherche chaque attribut "data-id" mais modifiable en option.
Ça dépend beaucoup des cas d'usages, et donc amha, il faut voir plutôt du côté de leurs documentations respectives. Ce que je peux dire : - On peut récupérer l'instance de Sortable créé auparavant sur un html donné par `const sorter = Sortable(document.querySelector('.mon_selecteur'));` - Les événements à déclarer sont préfixés de "on" tel que "onStart" à la place de "start", et n'ont pas forcément les mêmes nommages (onEnd vs Stop) - L'objet 'event' reçu sur les événements a tout ce qu'on a besoin : event.item est l'item qu'on déplace ; event.clone celui qui flotte, event.from la liste de départ, event.to la liste d'arrivée (utile si tu déplaces des éléments d'une liste à une autre comme peut le faire Album il me semble) - le "this" dans un événement est l'instance de l'objet Sortable. On peut donc faire un this.toArray() pour pécho l'ordre des listes. Par défaut il cherche chaque attribut "data-id" mais modifiable en option.

Sur mon gitea-miror, je trouve :

\git.spip.net.mirror\spip-contrib-extensions\contact\contact_pipelines.php 3 KB Fichier PHP 06/02/2021 21:16:14 06/02/2021 21:16:14 02/04/2021 10:26:20 1
15 		$plugins[] = 'jquery.ui.sortable';

\git.spip.net.mirror\spip-contrib-extensions\fabrique\formulaires\fabriquer_plugin_actions.php 12 KB Fichier PHP 06/02/2021 21:14:45 06/02/2021 21:14:45 02/04/2021 10:26:28 2
34 		// Deplacement d'un objet (avec ui.tabs + ui.sortable)
56 		// Deplacement d'un champ (avec ui.accordion + ui.sortable)

\git.spip.net.mirror\spip-contrib-extensions\grappes\grappes_pipelines.php 4 KB Fichier PHP 06/02/2021 21:16:52 06/02/2021 21:16:52 02/04/2021 10:26:34 1
45 		$plugins[] = 'jquery.ui.sortable';

\git.spip.net.mirror\spip-contrib-extensions\itineraires\itineraires_pipelines.php 3 KB Fichier PHP 05/03/2021 16:43:36 06/02/2021 21:13:31 02/04/2021 10:26:38 1
112 		$plugins[] = "jquery.ui.sortable";

\git.spip.net.mirror\spip-contrib-extensions\jquery_ui\jqueryui_pipelines.php 6 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1
43 							'jquery.ui.sortable',

\git.spip.net.mirror\spip-contrib-extensions\jquery_ui\jqueryui_pipelines_20.php 4 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1
27 							'ui.sortable',

\git.spip.net.mirror\spip-contrib-extensions\jquery_ui\formulaires\config_jqueryui_20_fonctions.php 3 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1
39 							'ui.sortable',

\git.spip.net.mirror\spip-contrib-extensions\jquery_ui\formulaires\config_jqueryui_fonctions.php 4 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1
55 							'jquery.ui.sortable',

\git.spip.net.mirror\spip-contrib-extensions\jquery_ui\javascript\jquery-ui\ui\jquery-ui.js 370 KB Fichier JS 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 2
3267 $.widget("ui.sortable", $.ui.mouse, {
4327 $.extend($.ui.sortable, {

\git.spip.net.mirror\spip-contrib-extensions\jquery_ui\javascript\jquery-ui\ui\jquery.ui.sortable.js 40 KB Fichier JS 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 3
17 $.widget("ui.sortable", $.ui.mouse, {
1077 $.extend($.ui.sortable, {

\git.spip.net.mirror\spip-contrib-extensions\liaison_objet\liaison_objet_pipelines.php 6 KB Fichier PHP 30/03/2021 17:14:50 06/02/2021 21:12:19 02/04/2021 10:26:40 1
189 	$scripts[] = "jquery.ui.sortable";

\git.spip.net.mirror\spip-contrib-extensions\mosaique\mosaique_pipelines.php 2 KB Fichier PHP 06/02/2021 21:20:45 06/02/2021 21:20:45 02/04/2021 10:26:45 1
14 	$plugins[] = "jquery.ui.sortable";

\git.spip.net.mirror\spip-contrib-extensions\noizetier\noizetier_pipelines.php 16 KB Fichier PHP 05/03/2021 16:43:46 06/02/2021 21:14:03 02/04/2021 10:26:46 1
236 	$plugins[] = 'jquery.ui.sortable';

\git.spip.net.mirror\spip-contrib-extensions\prix_objets\prix_objets_pipelines.php 4 KB Fichier PHP 05/03/2021 16:43:25 06/02/2021 21:12:23 02/04/2021 10:26:53 1
128 	$scripts[] = "jquery.ui.sortable";

\git.spip.net.mirror\spip-contrib-extensions\saisie_liste\saisie_liste_pipelines.php 1 KB Fichier PHP 06/02/2021 21:12:39 06/02/2021 21:12:39 02/04/2021 10:26:59 2
5 	if (! in_array('jquery.ui.sortable', $scripts)) {
6 		$scripts[] = 'jquery.ui.sortable';

\git.spip.net.mirror\spip-contrib-extensions\saisie_liste\javascript\saisie_liste.js.html 2 KB Fichier HTML 06/02/2021 21:12:39 06/02/2021 21:12:39 02/04/2021 10:26:59 2
15                  jquerui.sortable (cf. http://api.jqueryui.com/sortable/).
16                  On peut désactiver jqueryui.sortable en passant false à

\git.spip.net.mirror\spip-contrib-extensions\saisies\formulaires\construire_formulaire.php 27 KB Fichier PHP 30/03/2021 17:15:15 06/02/2021 21:13:49 02/04/2021 10:26:59 1
108 	} elseif (find_in_path('javascript/ui/jquery.ui.sortable.js') and find_in_path('javascript/ui/jquery.ui.draggable.js')) {

\git.spip.net.mirror\spip-contrib-extensions\selection_articles\pb_selection.php 2 KB Fichier PHP 06/02/2021 21:20:56 06/02/2021 21:20:56 02/04/2021 10:27:00 1
44 		$plugins[] = "jquery.ui.sortable";

\git.spip.net.mirror\spip-contrib-extensions\selections_editoriales\selections_editoriales_pipelines.php 10 KB Fichier PHP 30/03/2021 17:15:20 06/02/2021 21:13:57 02/04/2021 10:27:00 1
279 		$plugins[] = 'jquery.ui.sortable';

\git.spip.net.mirror\spip-contrib-extensions\zotspip\zotspip_pipelines.php 4 KB Fichier PHP 06/02/2021 21:19:30 06/02/2021 21:19:30 02/04/2021 10:27:11 1
21 	$scripts[] = "jquery.ui.sortable";


Sur mon gitea-miror, je trouve : ``` \git.spip.net.mirror\spip-contrib-extensions\contact\contact_pipelines.php 3 KB Fichier PHP 06/02/2021 21:16:14 06/02/2021 21:16:14 02/04/2021 10:26:20 1 15 $plugins[] = 'jquery.ui.sortable'; \git.spip.net.mirror\spip-contrib-extensions\fabrique\formulaires\fabriquer_plugin_actions.php 12 KB Fichier PHP 06/02/2021 21:14:45 06/02/2021 21:14:45 02/04/2021 10:26:28 2 34 // Deplacement d'un objet (avec ui.tabs + ui.sortable) 56 // Deplacement d'un champ (avec ui.accordion + ui.sortable) \git.spip.net.mirror\spip-contrib-extensions\grappes\grappes_pipelines.php 4 KB Fichier PHP 06/02/2021 21:16:52 06/02/2021 21:16:52 02/04/2021 10:26:34 1 45 $plugins[] = 'jquery.ui.sortable'; \git.spip.net.mirror\spip-contrib-extensions\itineraires\itineraires_pipelines.php 3 KB Fichier PHP 05/03/2021 16:43:36 06/02/2021 21:13:31 02/04/2021 10:26:38 1 112 $plugins[] = "jquery.ui.sortable"; \git.spip.net.mirror\spip-contrib-extensions\jquery_ui\jqueryui_pipelines.php 6 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1 43 'jquery.ui.sortable', \git.spip.net.mirror\spip-contrib-extensions\jquery_ui\jqueryui_pipelines_20.php 4 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1 27 'ui.sortable', \git.spip.net.mirror\spip-contrib-extensions\jquery_ui\formulaires\config_jqueryui_20_fonctions.php 3 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1 39 'ui.sortable', \git.spip.net.mirror\spip-contrib-extensions\jquery_ui\formulaires\config_jqueryui_fonctions.php 4 KB Fichier PHP 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 1 55 'jquery.ui.sortable', \git.spip.net.mirror\spip-contrib-extensions\jquery_ui\javascript\jquery-ui\ui\jquery-ui.js 370 KB Fichier JS 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 2 3267 $.widget("ui.sortable", $.ui.mouse, { 4327 $.extend($.ui.sortable, { \git.spip.net.mirror\spip-contrib-extensions\jquery_ui\javascript\jquery-ui\ui\jquery.ui.sortable.js 40 KB Fichier JS 06/02/2021 21:20:21 06/02/2021 21:20:21 02/04/2021 10:26:39 3 17 $.widget("ui.sortable", $.ui.mouse, { 1077 $.extend($.ui.sortable, { \git.spip.net.mirror\spip-contrib-extensions\liaison_objet\liaison_objet_pipelines.php 6 KB Fichier PHP 30/03/2021 17:14:50 06/02/2021 21:12:19 02/04/2021 10:26:40 1 189 $scripts[] = "jquery.ui.sortable"; \git.spip.net.mirror\spip-contrib-extensions\mosaique\mosaique_pipelines.php 2 KB Fichier PHP 06/02/2021 21:20:45 06/02/2021 21:20:45 02/04/2021 10:26:45 1 14 $plugins[] = "jquery.ui.sortable"; \git.spip.net.mirror\spip-contrib-extensions\noizetier\noizetier_pipelines.php 16 KB Fichier PHP 05/03/2021 16:43:46 06/02/2021 21:14:03 02/04/2021 10:26:46 1 236 $plugins[] = 'jquery.ui.sortable'; \git.spip.net.mirror\spip-contrib-extensions\prix_objets\prix_objets_pipelines.php 4 KB Fichier PHP 05/03/2021 16:43:25 06/02/2021 21:12:23 02/04/2021 10:26:53 1 128 $scripts[] = "jquery.ui.sortable"; \git.spip.net.mirror\spip-contrib-extensions\saisie_liste\saisie_liste_pipelines.php 1 KB Fichier PHP 06/02/2021 21:12:39 06/02/2021 21:12:39 02/04/2021 10:26:59 2 5 if (! in_array('jquery.ui.sortable', $scripts)) { 6 $scripts[] = 'jquery.ui.sortable'; \git.spip.net.mirror\spip-contrib-extensions\saisie_liste\javascript\saisie_liste.js.html 2 KB Fichier HTML 06/02/2021 21:12:39 06/02/2021 21:12:39 02/04/2021 10:26:59 2 15 jquerui.sortable (cf. http://api.jqueryui.com/sortable/). 16 On peut désactiver jqueryui.sortable en passant false à \git.spip.net.mirror\spip-contrib-extensions\saisies\formulaires\construire_formulaire.php 27 KB Fichier PHP 30/03/2021 17:15:15 06/02/2021 21:13:49 02/04/2021 10:26:59 1 108 } elseif (find_in_path('javascript/ui/jquery.ui.sortable.js') and find_in_path('javascript/ui/jquery.ui.draggable.js')) { \git.spip.net.mirror\spip-contrib-extensions\selection_articles\pb_selection.php 2 KB Fichier PHP 06/02/2021 21:20:56 06/02/2021 21:20:56 02/04/2021 10:27:00 1 44 $plugins[] = "jquery.ui.sortable"; \git.spip.net.mirror\spip-contrib-extensions\selections_editoriales\selections_editoriales_pipelines.php 10 KB Fichier PHP 30/03/2021 17:15:20 06/02/2021 21:13:57 02/04/2021 10:27:00 1 279 $plugins[] = 'jquery.ui.sortable'; \git.spip.net.mirror\spip-contrib-extensions\zotspip\zotspip_pipelines.php 4 KB Fichier PHP 06/02/2021 21:19:30 06/02/2021 21:19:30 02/04/2021 10:27:11 1 21 $scripts[] = "jquery.ui.sortable"; ```
Poster
Owner

Donc @RealET un tri aurait été gentil. On a donc :

  • contact
  • fabrique
  • grappes
  • itineraire
  • liaison_objet
  • mosaique
  • noizetier
  • prix_objet
  • saisie_liste
  • saisies
  • selection_articles
  • selection_editoriale
  • zotspip
Donc @RealET un tri aurait été gentil. On a donc : - [ ] contact - [ ] fabrique - [ ] grappes - [ ] itineraire - [ ] liaison_objet - [ ] mosaique - [ ] noizetier - [ ] prix_objet - [ ] saisie_liste - [ ] saisies - [ ] selection_articles - [ ] selection_editoriale - [ ] zotspip
Owner

Excellent, pour l'utilisateur/trice finale⋅e le glisser-déposer a l'air bien plus agréable à utiliser, notamment avec les listes imbriquées : ça marche du 1er coup, c'est "smooth" et intuitif. En tout cas dans leur démo.
Dans le noizetier par exemple, c'est très capricieux actuellement avec jquery ui, à s'arracher les cheveux parfois ! Hâte de basculer sur la nouvelle lib.

Et toujours pour le noizetier je redoutais qu'il manque l'équivalent du truc de jquery ui qui permet de cloner un item d'une liste à une autre, mais ça y est aussi.
Topito :)

Excellent, pour l'utilisateur/trice finale⋅e le glisser-déposer a l'air bien plus agréable à utiliser, notamment avec les listes imbriquées : ça marche du 1er coup, c'est "smooth" et intuitif. En tout cas dans leur démo. Dans le noizetier par exemple, c'est très capricieux actuellement avec jquery ui, à s'arracher les cheveux parfois ! Hâte de basculer sur la nouvelle lib. Et toujours pour le noizetier je redoutais qu'il manque l'équivalent du truc de jquery ui qui permet de cloner un item d'une liste à une autre, mais ça y est aussi. Topito :)
Owner

Intégré par d6635905ba

Intégré par d6635905ba
cerdic closed this pull request 1 week ago
Please reopen this pull request to perform a merge.
Sign in to join this conversation.
No reviewers
No Label
No Milestone
No Assignees
5 Participants
Notifications
Due Date

No due date set.

Dependencies

This pull request currently doesn't have any dependencies.

Loading…
There is no content yet.