Botones del pie de página de elementos de la lista de temas - contenido de la línea de tiempo

Desarrollador
1

¡Hola! Estoy trabajando en el concepto de contenido de “timeline” para una comunidad con Discourse.

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

Ambos botones “Responder a” y “Compartir” son solo para pruebas. He creado un componente como topic-footer-buttons.hbs (#ember) con algunos cambios:

<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 inserto este componente en topic-list.hbs debajo de la plantilla topic-list-item, ¡funciona! Pero esto no es ideal para futuras actualizaciones de Discourse o para la implementación de plugins. Por eso estoy intentando modificarlo a través de Administración → Personalizar → General → Encabezado (HTML), cambiando topic-list-item.raw:

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

Sin embargo, surgió otro problema: no logro llamar al componente desde la plantilla text/x-handlebars. ¿Existe alguna forma de invocar mi componente de botones del pie dentro de la plantilla topic-list-item.raw? ¿Quizás mediante un helper o un widget que pueda llamar al componente desde allí?

Agradecería mucho tu ayuda para que pueda disipar mis dudas de una vez por todas.

3 Me gusta
2

La forma en que he abordado esto en el pasado ha sido empaquetando los botones en un helper de HTML, que renderiza el HTML sin procesar en las plantillas sin procesar, y que luego puedes insertar mediante un outlet de plugin sin procesar. Aquí tienes un ejemplo:

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

El clic en el botón se maneja en el componente topic-list-item, por ejemplo:

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

@merefield también podría tener algunas ideas :slight_smile:

Además, probablemente querrás usar la estructura de carpetas de JavaScript del tema en lugar de agregar scripts al header.html. Consulta:

4 Me gusta
3

Noté que el commit más reciente a preview-edits eliminó ese evento de clic FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub. ¿Sigue habiendo alguna forma de que el componente topic-list-item maneje el clic del botón?

4

Sí, @angus, eso ya no es recomendable, en mi opinión: estaba causando un pequeño susto a Ember, así que lo eliminé de TLP. Cuando tienes dos eventos de clic simultáneos, por ejemplo, al hacer clic en el título del tema que a su vez tiene un ancla, el navegador termina realizando una recarga completa de la página, lo cual claramente no es lo que deseas en una OPA. Varios usuarios reportaron esto.

Por ahora, en TLP debes hacer clic en el título, el extracto o la miniatura.

Asegúrate de que siempre haya solo una superficie de clic; las que se superponen causarán problemas.

1 me gusta