API del botón de pie de página del tema

Esta nueva API que llegará en Discourse 2.3 te permitirá agregar botones en la parte inferior de un tema, ya sea como botones en línea o en {{topic-footer-mobile-dropdown}}, sin tener que duplicar la lógica.

Uso

api.registerTopicFooterButton({
    // id del botón, obligatorio
    id: null,

    // icono mostrado en el botón
    icon: null,

    // ruta de clave local para el atributo de título
    title: null,

    // título ya traducido
    translatedTitle: null,

    // ruta de clave local para la etiqueta
    label: null,

    // etiqueta ya traducida
    translatedLabel: null,

    // ¿este botón se muestra en el menú desplegable móvil o como un botón en línea?
    dropdown: false,

    // clases CSS agregadas al botón
    classNames: [],

    // propiedades calculadas que deben forzar una actualización del estado del botón
    // ej: ["topic.bookmarked", "topic.category_id"]
    dependentKeys: [],

    // ¿deberíamos mostrar este botón?
    displayed: true,

    // ¿este botón está deshabilitado?
    disabled: false,

    // orden de visualización, mayor primero
    priority: 0
  }
);

Todas las claves excepto id pueden ser un valor o una función:

icon: "user"
icon() {
  // aquí 'this' es el contexto del componente topic-footer-buttons
  // permitiéndote acceder
  // al modelo de tema o a this.site, por ejemplo
  return this.get("topic.some_icon_variable");
}

Enfoque en dependentKeys

Considera dependentKeys como todas las propiedades calculadas que necesitas para construir tu botón. Los botones se volverán a renderizar cuando una de estas claves cambie. Básicamente, cada vez que haces this.get("algo") al definir tu botón, algo debe estar en dependentKeys.

Enfoque en dropdown

La clave dropdown te permitirá definir si quieres que tu botón se agregue en línea o en {{topic-footer-mobile-dropdown}}.

Como ejemplo, una implementación que crea un botón en línea en escritorio y en el menú desplegable en móvil, se comportaría así:

dropdown() { return this.site.mobileView; }

Nota: por el momento, el menú desplegable solo se mostrará en móvil de todos modos. Por lo tanto, esto es probablemente útil si nunca quieres mostrarlo en el menú desplegable o si quieres forzar la vista de escritorio en algunos casos al presentar la vista móvil.

Algunos ejemplos de la vida real

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/initializers/topic-footer-buttons.js.es6#L7

https://github.com/discourse/discourse-code-review/blob/master/assets/javascripts/discourse/initializers/init-code-review.js.es6#L78

19 Me gusta