Development #48415
arles-2020: rajouter le template et styles pour le champ liste personnalisé
0%
Description
Pour avoir des images pour chaque item de la liste
Fichiers
Demandes liées
Révisions associées
arles-2020: trigger 'wcs:change' event on list with images (#48415)
arles-2020: ignore no values in lists with images (#48415)
Historique
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Fichier 0001-arles-2020-allow-item-field-customization-by-adding-.patch 0001-arles-2020-allow-item-field-customization-by-adding-.patch ajouté
- Fichier Liste images clicables.png Liste images clicables.png ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Le libellé des champs affichés et l'image mise en exergue lors de la sélection.
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Lié à Development #48413: assets: servir les fichiers du répértoire media si "key" commence par "media:" ajouté
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Fichier 0001-arles-2020-allow-item-field-customization-by-adding-.patch 0001-arles-2020-allow-item-field-customization-by-adding-.patch ajouté
- Fichier 2.png 2.png ajouté
- Fichier 1.png 1.png ajouté
Nouveau patch inspiré de template-meetings.html
pour accéder aux options de chaque item de la liste, et donc l'url de l'image définie dans la source de données.
Items par défaut disposés par 4 sur une ligne. La classe grid-3
ajoutée au champ permet dispose les items par 3 sur une ligne?
Mis à jour par Frédéric Péters il y a plus de 3 ans
grid-3
Je suggérerais de trouver un nom qui ne soit pas énorme source de confusion avec le système de grille actuel.
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Fichier 0001-arles-2020-allow-item-field-customization-by-adding-.patch 0001-arles-2020-allow-item-field-customization-by-adding-.patch ajouté
Maintenant on peut naviguer et sélectionner un item avec les touches du clavier.
Mis à jour par Thomas Jund il y a plus de 3 ans
- `function fill_with_items` n'est pas utilisée
- Quand tu construis tes items `option`(boucle for ligne 40), tu injectes chaque item au sein de la boucle, ça génère une injection DOM pour chaque item. Il serait préférable de les injecter en une seule fois.
Par exemple (à tester) :
var $items = $(); for (var i=0; i<options.length; i++) { var $item= … … $items.add($item) } $list.append($items);
Et ensuite tu peux remplacer tes sélecteurs `$('#form_{{widget.name}}_images_list li')` par $items.
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Fichier 0001-arles-2020-allow-item-field-customization-by-adding-.patch 0001-arles-2020-allow-item-field-customization-by-adding-.patch ajouté
Yep, bonne idée de construire la liste des items et ajouter tout à la fois. En revanche ça doit être une liste et non objet jquery.
click
et keydown
bindés à chaque élément de la liste.
Mis à jour par Thomas Jund il y a plus de 3 ans
Bon, mon exemple était n'était pas assez précis
Mais tu peux. Et ça t'évite de binder dans la boucle et de remplacer tous les `$('#form_{{widget.name}}_images_list li')` par `$items`
var $items = $(); for (var i=0; i<options.length; i++) { var $item= … … $items = $items.add($item) } $list.append($items);
voir https://codepen.io/Sacripant/pen/VwjOJQp
Et dernière remarque. Si tu mets un $ en préfixes des sélecteurs jQuery, le faire aussi pour `var options` ligne 39 => var $options
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Fichier 0001-arles-2020-allow-item-field-customization-by-adding-.patch 0001-arles-2020-allow-item-field-customization-by-adding-.patch ajouté
Ok, merci pour l'astuce.
Mis à jour par Thomas Jund il y a plus de 3 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Serghei Mihai il y a plus de 3 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit f1fb36dcd0a2ae06f13905f3b7e9c89bfde741ff (origin/master, origin/HEAD) Author: Serghei Mihai <smihai@entrouvert.com> Date: Mon Nov 9 18:17:36 2020 +0100 arles-2020: allow item field customization by adding images (#48415)
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Résolu (à déployer) à Solution déployée
arles-2020: allow item field customization by adding images (#48415)