Pulsanti piè di pagina per elementi elenco argomenti - contenuto della cronologia

Sviluppatore
1

Ciao! Sto lavorando su un concetto di community basato sul contenuto “timeline” con Discourse.

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

Entrambi i pulsanti “Rispondi a” e “Condividi” sono a scopo di test. Ho creato un componente simile a topic-footer-buttons.hbs (#ember) apportando alcune modifiche:

<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>

Se inserisco questo componente in topic-list.hbs sotto il template topic-list-item, funziona! Tuttavia, non è una buona soluzione per futuri aggiornamenti di Discourse o per l’implementazione di plugin. Quindi sto cercando di intervenire tramite Amministrazione → Personalizza → Comune → Intestazione (HTML), modificando topic-list-item.raw:

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

Ma è sorto un altro problema: non riesco a chiamare il componente da un template text/x-handlebars. Esiste un modo per richiamare il mio componente dei pulsanti del piè di pagina all’interno del template topic-list-item.raw? Forse tramite un helper o un widget che possa chiamare il componente?

Apprezzerei molto il tuo aiuto in modo da poter chiarire definitivamente i miei dubbi.

2

Il modo in cui ho affrontato questo problema in passato è stato incapsulare i pulsanti in un helper HTML, che renderizza l’HTML grezzo nei template grezzi, che puoi poi inserire tramite un outlet plugin grezzo. Ecco un esempio:

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

Il clic sul pulsante viene gestito nel componente topic-list-item, ad esempio:

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

@merefield potrebbe avere anche qualche idea da condividere :slight_smile:

Inoltre, probabilmente vorrai utilizzare la struttura delle cartelle JavaScript del tema invece di aggiungere script all’header.html. Consulta:

3

Ho notato che l’ultimo commit a preview-edits ha rimosso quell’evento click FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub esiste ancora un modo per far sì che il click del pulsante venga gestito dal componente topic-list-item?

4

Sì, @angus, a mio avviso non è più consigliabile: stava causando a Ember un piccolo infarto, quindi l’ho rimosso da TLP. Quando hai due eventi di click simultanei, ad esempio cliccando sul titolo dell’argomento che a sua volta contiene un link, il browser finisce per eseguire un aggiornamento completo della pagina, il che chiaramente non è ciò che desideri in un OPA. Questo problema è stato segnalato da diversi utenti.

Per ora in TLP devi cliccare sul Titolo, sull’Estratto o sull’Anteprima.

Devi assicurarti che ci sia sempre una sola area cliccabile: aree sovrapposte causeranno problemi.