widgets: add a search control to map widget (#72558) #67

Merged
csechet merged 1 commits from wip/72558-integrer-un-bouton-de-recherche- into main 2023-02-16 20:56:58 +01:00
Owner

Dans l'idée de mettre ça dans Combo, je n'ai pas utilisé jquery-ui-autocomplete, pour éviter d'ajouter une dépendance à jquery-ui qui est vieux et semble déprécié (et il a été évoqué de se passer de jQuery avec Thomas J. de plus). Pas utilisé select2 non plus, parce que ça ne correspond pas exactement à notre cas d'usage. Et dans un cas comme dans l'autre, Leaflet fait des choses un peu ésotériques avec les events (C.F le debounce sur le focusout / focusin), qui avaient tendance à créer des bugs pénibles à contourner si on utilise une lib pour le dropdown. (Et il en reste : Leaflet met des style d'outline en dur sur certains éléments au focus, je n'ai pas trouvé comment désactiver ça).

Pas sur de l'endroit où j'ai posé le CSS, je ne sais pas si ça doit se mettre là ou dans Gadjo ou ailleurs.

image

Dans l'idée de mettre ça dans Combo, je n'ai pas utilisé jquery-ui-autocomplete, pour éviter d'ajouter une dépendance à jquery-ui qui est vieux et semble déprécié (et il a été évoqué de se passer de jQuery avec Thomas J. de plus). Pas utilisé select2 non plus, parce que ça ne correspond pas exactement à notre cas d'usage. Et dans un cas comme dans l'autre, Leaflet fait des choses un peu ésotériques avec les events (C.F le debounce sur le focusout / focusin), qui avaient tendance à créer des bugs pénibles à contourner si on utilise une lib pour le dropdown. (Et il en reste : Leaflet met des style d'outline en dur sur certains éléments au focus, je n'ai pas trouvé comment désactiver ça). Pas sur de l'endroit où j'ai posé le CSS, je ne sais pas si ça doit se mettre là ou dans Gadjo ou ailleurs. ![image](/attachments/76303a3d-e8d6-4e98-a824-5258354f8b5f)
426 KiB
Owner

Sur un clic sur un résultat mon idée était de centrer la carte uniquement, pas forcer le marqueur.

Sur un clic sur un résultat mon idée était de centrer la carte uniquement, pas forcer le marqueur.
Owner

Je cherche "rue de liedekerke" ça me donne un résultat, je clique dessus, ça me déplace, je reclique sur la loupe pour chercher et la zone avec le résultat apparait toujours, mais vide, cf fichier attaché où on voit ça mais aussi que la bonne valeur est dans l'<option>. (ça rejoint le "j'ai un peu peur de ce choix de balisage" que je note dans https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/143).

Je cherche "rue de liedekerke" ça me donne un résultat, je clique dessus, ça me déplace, je reclique sur la loupe pour chercher et la zone avec le résultat apparait toujours, mais vide, cf fichier attaché où on voit ça mais aussi que la bonne valeur est dans l'`<option>`. (ça rejoint le "j'ai un peu peur de ce choix de balisage" que je note dans https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/143).
Author
Owner

C'est fixé, et j'ai commenté dans https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/143 à propos du choix de select / option.

C'est fixé, et j'ai commenté dans https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/143 à propos du choix de select / option.
Owner

Pour rester au plus proche de la bonne sémantique html et donc d'une accessibilité par défaut, l'idéal pour ce genre de widget serait un <datalist> + <option>.
(Ne pas oublier de tester sur un mobile)
(Mais je suis loin de comprendre l'UI juste à la lecture du JS leaflet, il faudrait que je puisse installer en local et tester)

Pour rester au plus proche de la bonne sémantique html et donc d'une accessibilité par défaut, l'idéal pour ce genre de widget serait un `<datalist> + <option>`. (Ne pas oublier de tester sur un mobile) (Mais je suis loin de comprendre l'UI juste à la lecture du JS leaflet, il faudrait que je puisse installer en local et tester)
Owner

(Mais je suis loin de comprendre l'UI juste à la lecture du JS leaflet, il faudrait que je puisse installer en local et tester)

Ça se fait en se mettant wcs sur cette branche + la branche de publik-base-theme correspondante. (mais je ne sais pas si c'était une demande sur la manière de faire, ou une demande qu'on attende que tu aies le temps, ou autre chose).

> (Mais je suis loin de comprendre l'UI juste à la lecture du JS leaflet, il faudrait que je puisse installer en local et tester) Ça se fait en se mettant wcs sur cette branche + la branche de publik-base-theme correspondante. (mais je ne sais pas si c'était une demande sur la manière de faire, ou une demande qu'on attende que tu aies le temps, ou autre chose).
Author
Owner

Pour rester au plus proche de la bonne sémantique html et donc d'une accessibilité par défaut, l'idéal pour ce genre de widget serait un <datalist> + <option>.

Après tests, j'ai un avis différent.

Ce n'est pas un champ texte pour lequel on veut une liste de suggestions, c'est un champ texte qui filtre une liste d'options cliquables. On ne peut pas ajouter d'events handlers sur les datalist, donc aucun moyen de surcharger le comportement par défaut qui remplace le contenu du champ texte, ou d’exécuter du code au clic sur un élément de la liste. (Et il semblerait que appearance: none ne soit pas supporté dessus, donc pas de possibilité de styler quoi que ce soit concernant le pointeur).

> Pour rester au plus proche de la bonne sémantique html et donc d'une accessibilité par défaut, l'idéal pour ce genre de widget serait un &lt;datalist&gt; + &lt;option&gt;. Après tests, j'ai un avis différent. Ce n'est pas un champ texte pour lequel on veut une liste de suggestions, c'est un champ texte qui filtre une liste d'options cliquables. On ne peut pas ajouter d'events handlers sur les datalist, donc aucun moyen de surcharger le comportement par défaut qui remplace le contenu du champ texte, ou d’exécuter du code au clic sur un élément de la liste. (Et il semblerait que appearance: none ne soit pas supporté dessus, donc pas de possibilité de styler quoi que ce soit concernant le pointeur).
csechet force-pushed wip/72558-integrer-un-bouton-de-recherche- from 3f5dc816ba to dbff109115 2023-02-16 20:04:07 +01:00 Compare
Author
Owner

Fred disait sur Jabber que ça serait bien que ça passe ce cycle, en l'état : je merge.

Fred disait sur Jabber que ça serait bien que ça passe ce cycle, en l'état : je merge.
csechet force-pushed wip/72558-integrer-un-bouton-de-recherche- from dbff109115 to 7cd4bbff3e 2023-02-16 20:31:53 +01:00 Compare
csechet merged commit 7cd4bbff3e into main 2023-02-16 20:56:58 +01:00
csechet deleted branch wip/72558-integrer-un-bouton-de-recherche- 2023-02-16 20:56:58 +01:00
Sign in to join this conversation.
No reviewers
No Label
No Milestone
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: entrouvert/wcs#67
No description provided.