Hi all, I am new in Discourse development, but I am on a project to create few plugins (for specific proposes.)
I’m making a plugin to display a stripe of categories on the site and it has some other nifty effects, to summarize I just need to render a custom component created using select-kit
within a widget that has just an html template.
My component:
createWidget('category-bar', {
tagName: 'div.category-bar-container',
template: hbs`
<ul id="header-tags" class="category-bar">
<li class="category-bar-item">
<a class="category-bar-link" href="/c/sexuality">
{{i18n "ahwaa_categories.sexuality"}}
</a>
</li>
....
</ul>
HERE I WANT TO RENDER LIKE:
<div class="category-bar-link dropdown-structure">
{{categories-bar-dropdown}} <--- this won't work and neither {{attach widget=categories-bar-dropdown}}
</div>
`,
});
My component of dropdown looks like:
export default DropdownSelectBoxComponent.extend({
pluginApiIdentifiers: ["categories-bar-dropdown"],
classNames: "categories-bar-dropdown",
title: I18n.t("ahwaa_categories.more"),
showFullTitle: true,
allowInitialValueMutation: false,
headerIcon: ["caret-down"],
autoHighlight() {},
computeContent() {
const items = [
{ id: "id", name: I18n.t("plugin.locale.key") },
...
];
return items;
},
mutateValue(id) {
// use the id from the computeContent items to do an action
}
});
PD: if you have also the code to loop between the categories of the site will be great (but I haven’t google it yet so we can skip that)