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);
}
});
```
19 lines
522 B
JavaScript
19 lines
522 B
JavaScript
import { createWidget } from 'discourse/widgets/widget';
|
|
import hbs from 'discourse/widgets/hbs-compiler';
|
|
|
|
export default createWidget('post-placeholder', {
|
|
tagName: 'article.placeholder',
|
|
template: hbs`
|
|
<div class='row'>
|
|
<div class='topic-avatar'>
|
|
<div class='placeholder-avatar'></div>
|
|
</div>
|
|
<div class='topic-body'>
|
|
<div class='placeholder-text'></div>
|
|
<div class='placeholder-text'></div>
|
|
<div class='placeholder-text'></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|