Topic footer button API

announcements
1

This new API coming in Discourse 2.3 will let you add buttons at the bottom of a topic as inlines buttons or in the {{topic-footer-mobile-dropdown}} without having to duplicate logic.

Usage

api.registerTopicFooterButton({
    // id of the button, required
    id: null,

    // icon displayed on the button
    icon: null,

    // local key path for title attribute
    title: null,

    // already translated title
    translatedTitle: null,

    // local key path for label
    label: null,

    // already translated label
    translatedLabel: null,

    // is this button displayed in the mobile dropdown or as an inline button ?
    dropdown: false,

    // css class appended to the button
    classNames: [],

    // computed properties which should force a button state refresh
    // eg: ["topic.bookmarked", "topic.category_id"]
    dependentKeys: [],

    // should we display this button ?
    displayed: true,

    // is this button disabled ?
    disabled: false,

    // display order, higher comes first
    priority: 0
  };
});

All keys but id, can be either a value or a function:

icon: "user"

icon() {
  // this here is the context of the topic-footer-buttons component
  // allowing you to access
  // the topic model or this.site for example
  return this.get("topic.some_icon_variable");
}

Focus on dependentKeys

Think of dependentKeys as all the computed properties you need to build your button. The buttons will be re-rendered when one of these keys is changed. Basically anytime you do this.get("something") when defining your button, something should be in the dependentKeys.

Focus on dropdown

The dropdown key will let you define if you want your button to be added inline or in the {{topic-footer-mobile-dropdown}}.

As an example, an implementation creating a button inline on desktop and in the dropdown on mobile, would act like this:

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

Note: at the moment the dropdown will only be shown on mobile anyways. So this is most probably useful if you never want to show it in the dropdown or if you want to force desktop in few cases when presenting mobile view.

Few real life examples

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 Likes