Pieds de page des boutons de liste de sujets - contenu de la chronologie

Dev
1

Bonjour ! Je travaille sur un concept de contenu « timeline » avec Discourse.

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

Les deux boutons « Répondre à » et « Partager » sont à titre de test. J’ai créé un composant comme topic-footer-buttons.hbs (#ember) avec quelques modifications

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

Si j’insère ce composant dans topic-list.hbs sous le modèle topic-list-item, cela fonctionne ! Mais ce n’est pas idéal pour les futures mises à jour de Discourse ou l’implémentation de plugins. Je tente donc de manipuler via Admin → Personnaliser → Commun → En-tête (HTML), en modifiant topic-list-item.raw.

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

Mais un autre problème est apparu : je n’arrive pas à appeler le composant depuis le modèle text/x-handlebars. Existe-t-il une façon d’appeler mon composant de boutons de pied de page à l’intérieur du modèle topic-list-item.raw ? Par exemple, via un helper ou un widget capable d’appeler le composant ?

Je vous remercie par avance pour votre aide, afin que je puisse dissiper mes doutes une fois pour toutes.

2

La méthode que j’ai utilisée par le passé consiste à regrouper les boutons dans un helper HTML, qui rendra le HTML brut dans les modèles bruts, que vous pourrez ensuite insérer via un point d’accès (plugin outlet) brut. Voici un exemple :

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

Le clic sur le bouton est géré dans le composant topic-list-item, par exemple :

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield a peut-être aussi quelques idées à partager :slight_smile:

Par ailleurs, vous voudrez probablement utiliser la structure de dossiers JavaScript des thèmes plutôt que d’ajouter des scripts dans header.html. Consultez :

3

J’ai remarqué que le commit le plus récent sur preview-edits a supprimé cet événement de clic FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub. Existe-t-il toujours un moyen de gérer le clic du bouton via le composant topic-list-item ?

4

Oui, @angus, ce n’est plus recommandé à mon avis — cela provoquait un léger malaise à Ember, alors je l’ai retiré de TLP. Lorsque vous avez deux événements de clic simultanés, par exemple en cliquant sur le titre du sujet qui contient lui-même un lien, le navigateur finit par effectuer un rechargement complet de la page, ce qui n’est clairement pas ce que vous souhaitez dans une OPA. Plusieurs utilisateurs ont signalé ce problème.

Pour l’instant, dans TLP, vous devez cliquer sur le titre, l’extrait ou la miniature.

Assurez-vous qu’il n’y ait jamais qu’une seule zone cliquable : des zones qui se chevauchent vont causer des problèmes.