dffb1fc4ee
Widgets can now specify a template which is precompiled using Glimmer's
AST and then converted into our virtual dom code.
Example:
```javascript
createWidget('post-link-arrow', {
template: hbs`
{{#if attrs.above}}
<a class="post-info arrow" title={{i18n "topic.jump_reply_up"}}>
{{fa-icon "arrow-up"}}
</a>
{{else}}
<a class="post-info arrow" title={{i18n "topic.jump_reply_down"}}>
{{fa-icon "arrow-down"}}
</a>
{{/if}}
`,
click() {
DiscourseURL.routeTo(this.attrs.shareUrl);
}
});
```
41 lines
875 B
JavaScript
41 lines
875 B
JavaScript
import hbs from 'discourse/widgets/hbs-compiler';
|
|
import { createWidget } from 'discourse/widgets/widget';
|
|
import { h } from 'virtual-dom';
|
|
|
|
createWidget('menu-links', {
|
|
html(attrs) {
|
|
const links = [].concat(attrs.contents());
|
|
const liOpts = {};
|
|
|
|
if (attrs.heading) {
|
|
liOpts.className = 'header';
|
|
}
|
|
|
|
const result = [];
|
|
result.push(h('ul.menu-links.columned', links.map(l => h('li', liOpts, l))));
|
|
|
|
result.push(h('div.clearfix'));
|
|
if (!attrs.omitRule) {
|
|
result.push(h('hr'));
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
createWidget('menu-panel', {
|
|
tagName: 'div.menu-panel',
|
|
template: hbs`
|
|
<div class='panel-body'>
|
|
<div class='panel-body-contents clearfix'>
|
|
{{yield}}
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
buildAttributes(attrs) {
|
|
if (attrs.maxWidth) {
|
|
return { 'data-max-width': attrs.maxWidth };
|
|
}
|
|
},
|
|
});
|