feat: modules JS + script pour éditer des valeurs tabulaires

Contexte

Pour l'histoire, ceci fait suite à une autre PR sur le plugin livraison (livraison!22), le besoin était de simplifier l'UX lors de l'édition des modes de livraison au moyen d'un script JS.

@rastapopoulos trouvait le besoin suffisemment générique pour être intégré directement dans Saisies.

Modules JS

Pour ajouter le script dans Saisies je voulais 2 choses :

• Qu'il s'agisse d'un module
• Qu'il ne soit chargé que quand on en a besoin, c'est à dire en présence d'éléments précis dans la page

Je profite de l'occasion pour proposer un canevas pour l'ajout de modules JS dans Saisies. À terme certains des scripts actuels pourraient ainsi être convertis en modules, et éventuellement ne plus être chargés en permanence (voir explications plus bas).

Proposition :

• Tous les modules JS de Saisies doivent être placés dans javascript/modules/saisies. Il peut s'agir de vrais fichier JS ou de squelettes JS.
• Tout fichier présent dans ce dossier est automatiquement détecté et ajouté dans un importmap propre à Saisies, ce qui permet de faire import { xxx } from "saisies_xxx.js"
• Tous les modules sont chargés via le fichier javascript/saisies_init.js.html

Ce fichier est divisé en 3 parties :

1. Chargement d'un module de configuration globale : contient des options ou des éléments nécessitant le compilateur (chaînes de langue, chemins, etc.)
2. Modules chargés en permanence : ne contient rien pour l'instant, mais à terme certains scripts non ESM pourraient être convertis en module et chargés ici.
3. Modules chargés conditionnellement : quand on ne veut charger des scripts que quand c'est nécessaire, c'est à dire en présence d'éléments précis dans la page. Idem, certains scripts non ESM pourraient être convertis en modules et chargés ici.

À partir de SPIP 5, ça continuerait à fonctionner tel quel, mais idéalement il faudrait utiliser le pipeline importmap plutôt que générer le notre manuellement.

Script pour faciliter l'édition de valeurs tabulaires

Description

Le script concerne les textareas qui contiennent des valeurs "tabulaires", c'est à dire des lignes d'éléments séparés par un caractère précis. L'édition de ces champs est rebutante pour les non initié⋅es, le script a pour but d'améliorer l'UX.

Exemple, textarea sans le script :

Textarea avec le script :

Et un screencast :

Screencast

Fonctionnement

Pour activer le script sur un textarea, il faut ajoouter un attribut data précis : data-saisies-editer-valeurs-tabulaires. La valeur est un JSON avec ces clés possibles :

• (array) colonnes_labels : Obligatoire, liste les labels des colonnes, et par conséquent le nb de colonnes.
• (string) colonnes_separateur : indique le séparateur des valeurs, par défaut un pipe.
• (string) label_ajouter : label personnalisé pour le bouton ajouter.
• (string) label_supprimer : label personnalisé pour le bouton supprimer.
• (string) label_deplacer : label personnalisé pour le bouton déplacer.

'attributs_data' => [
  'saisies-editer-valeurs-tabulaires' => [
    'colonnes_labels' => [
      'Poids (g)',
      'Prix HT',
    ],
  ]
],

Le script masque le textarea et lui substitue un tableau. Le tableau ne poste rien : le textarea est mis à jour quand on édite le tableau.

Pour tester

Faire un formulaire avec ces saisies :

$saisies = [
  [
    'saisie' => 'textarea',
    'options' => [
      'nom' => 'lorem',
      'label' => 'Tableau Poids / Prix',
      'rows' => 4,
      'attributs_data' => [
        'saisies-editer-valeurs-tabulaires' => [
          'colonnes_labels' => [
            'Poids (g)',
            'Prix HT',
          ],
        ]
      ],
    ],
  ],
]