Aide interactive pour insérer les placeholders des valeurs #53

Open
opened 4 months ago by rastapopoulos · 5 comments

Sans parler d'interface énorme en clic clic qui ne permettrait pas forcément de faire tout ce qu'on veut, tous les champs de config qui permettent d'utiliser des valeurs de champs du formulaire devraient avoir une aide à la saisie.

Cela vaut pour Saisies pour les afficher_si, mais ça vaut aussi dans Formidable dans la config des traitements (mais c'est Saisies qui fourniraient le mécanisme puisqu'il le faut déjà dans le constructeur de Saisies).

L'idée serait par exemple que dès qu'on tape un arobase, ça ouvre un menu de suggestion (comme pour les mentions là dans github/gitea/etc). Attention suivant les endroits, la liste des suggestions n'est pas la même, par ex pour afficher_si, il faut les noms des champs, mais aussi les plugins ou je sais plus tout ce que ça sait faire, alors que pour les traitements, il faut aussi le nom du site, la date ou ce genre. Bref faut pouvoir indiquer une source (mutualisation avec le plugin "sélecteur générique" ?) et pouvoir en avoir plusieurs suivant chaque besoin.

Concrètement, quand je suis dans un input ou textarea qui déclare (par un data-truc dessus) qu'il accepte l'aide de source XXX, alors dès que je tape certains caractères, un menu s'ouvre pour me suggérer des choses :

@input_1@ : Votre nom
@input_2@ : Votre email
@nom_du_site@ : Mon super site
etc

Et quand j'en choisi un, au clic ou au clavier, ça ajoute le @truc@ là où j'étais.

On doit même pouvoir faire en sorte que ce que tape la personne après l'arobase ça cherche dans la clé OU dans la valeur humain, ce qui fait que si je tape "@nom" ça va me suggérer

@input_1@ : Votre nom

Ça serait bien bien plus utile que le bloc d'aide-mémoire qui reste en haut de page, et qui peut être monstrueux si on a 90 champs, donc horrible à s'y retrouver.

Sans parler d'interface énorme en clic clic qui ne permettrait pas forcément de faire tout ce qu'on veut, tous les champs de config qui permettent d'utiliser des valeurs de champs du formulaire devraient avoir une aide à la saisie. Cela vaut pour Saisies pour les afficher_si, mais ça vaut aussi dans Formidable dans la config des traitements (mais c'est Saisies qui fourniraient le mécanisme puisqu'il le faut déjà dans le constructeur de Saisies). L'idée serait par exemple que dès qu'on tape un arobase, ça ouvre un menu de suggestion (comme pour les mentions là dans github/gitea/etc). Attention suivant les endroits, la liste des suggestions n'est pas la même, par ex pour afficher_si, il faut les noms des champs, mais aussi les plugins ou je sais plus tout ce que ça sait faire, alors que pour les traitements, il faut aussi le nom du site, la date ou ce genre. Bref faut pouvoir indiquer une source (mutualisation avec le plugin "sélecteur générique" ?) et pouvoir en avoir plusieurs suivant chaque besoin. Concrètement, quand je suis dans un input ou textarea qui déclare (par un data-truc dessus) qu'il accepte l'aide de source XXX, alors dès que je tape certains caractères, un menu s'ouvre pour me suggérer des choses : ``` @input_1@ : Votre nom @input_2@ : Votre email @nom_du_site@ : Mon super site etc ``` Et quand j'en choisi un, au clic ou au clavier, ça ajoute le @truc@ là où j'étais. On doit même pouvoir faire en sorte que ce que tape la personne après l'arobase ça cherche dans la clé OU dans la valeur humain, ce qui fait que si je tape "@nom" ça va me suggérer ``` @input_1@ : Votre nom ``` Ça serait bien bien plus utile que le bloc d'aide-mémoire qui reste en haut de page, et qui peut être monstrueux si on a 90 champs, donc horrible à s'y retrouver.
Collaborator

bon idée, mais il faudrait pouvoir accéder au formulaire tel qu'il est en sessions.

cf également https://git.spip.net/spip-contrib-extensions/formidable/issues/27

bon idée, mais il faudrait pouvoir accéder au formulaire tel qu'il est en sessions. cf également https://git.spip.net/spip-contrib-extensions/formidable/issues/27
Poster

bien sûr mais comme c'est une aide en JS à la volée, ça va construire la liste à chaque recherche de début de frappe, pas au chargement de la page entière, donc ça sera forcément toujours à jour, et il suffit dans le côté serveur de chercher dans la version session et non pas celle en base en priorité

bien sûr mais comme c'est une aide en JS à la volée, ça va construire la liste à chaque recherche de début de frappe, pas au chargement de la page entière, donc ça sera forcément toujours à jour, et il suffit dans le côté serveur de chercher dans la version session et non pas celle en base en priorité
Collaborator

Analyse comparative à faire des différentes librairies JS
https://bashooka.com/coding/autocomplete-autosuggest-javascript-libraries/

Analyse comparative à faire des différentes librairies JS https://bashooka.com/coding/autocomplete-autosuggest-javascript-libraries/
Poster

Dans l'absolu il faudrait une lib :

  • accessible
  • fonctionnant aussi bien pour remplir un unique input, que pour compléter du texte à l'intérieur d'un grand textarea
  • pouvant aller chercher les choses à compléter par requête distante ajax

Ça permettrait de remplacer l'autocomplete jquery UI du core qui doit être viré bientôt (et qui est utilisé par le plugin Sélecteur générique).

Si ya moyen de pas avoir chacun sa lib et que ce soit une unique lib qui sache tout faire et en avoir qu'une seule dans le core… ça serait évidemment mieux. Ping @marcimat pour la réfléxion.

Dans l'absolu il faudrait une lib : - accessible - fonctionnant aussi bien pour remplir un unique input, que pour compléter du texte à l'intérieur d'un grand textarea - pouvant aller chercher les choses à compléter par requête distante ajax Ça permettrait de remplacer l'autocomplete jquery UI du core qui doit être viré bientôt (et qui est utilisé par le plugin Sélecteur générique). Si ya moyen de pas avoir chacun sa lib et que ce soit une unique lib qui sache tout faire et en avoir qu'une seule dans le core… ça serait évidemment mieux. Ping @marcimat pour la réfléxion.
En ressource j'ai ça : https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/autocomplete/how-to/creating-an-autocomplete-textarea/js/ qui utilise un plugin jQuery : https://github.com/yuku/textcomplete Sur l'accessibilité en particulier : https://adamsilver.io/blog/building-an-accessible-autocomplete-control/
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.