gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Updated Custom Widget (markdown)

zadam 2020-06-14 14:01:55 +02:00
parent e30a921e31
commit 156c299896
1 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
Custom-Widget.md

@ -2,41 +2,70 @@ It's possible to create custom widget in three possible locations where you can
Positions are: Positions are:
* left-pane * left-pane
* center-pane * center-pane
* right-pane * right-pane
## Example ## Example - word count widget
Create a code note of type JS frontend and give it `widget` label. Create a code note of type JS frontend and give it `widget` label.
```javascript ```javascript
const TPL = `<div></div`; const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color);">
<strong>Word count: </strong>
<span class="word-count"></span>
class TestWidget extends api.TabAwareWidget { &nbsp;
get position() { return 15; }
<strong>Character count: </strong>
<span class="character-count"></span>
</div`;
class WordCountWidget extends api.TabAwareWidget {
get position() { return 100; } // higher value means position towards the bottom/right
get parentWidget() { return 'center-pane'; } get parentWidget() { return 'center-pane'; }
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$wordCount = this.$widget.find('.word-count');
this.$characterCount = this.$widget.find('.character-count');
return this.$widget; return this.$widget;
} }
async refreshWithNote(note) { async refreshWithNote(note) {
if (!note.hasOwnedLabel('showTestWidget')) { // show widget only on notes with this label if (note.type !== 'text') { // show widget only on text notes
this.toggleInt(false); // hide this.toggleInt(false); // hide
return; return;
} }
this.toggleInt(true); // display this.toggleInt(true); // display
const {content} = await note.getNoteComplement();
const text = $(content).text(); // get plain text only
const words = text.split(/\s+/);
this.$widget.empty().append($("Hello world!")); this.$wordCount.text(words.length);
this.$characterCount.text(words.join('').length);
}
async entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteContentReloaded(this.noteId)) {
this.refresh();
}
} }
} }
module.exports = new TestWidget(); module.exports = new WordCountWidget();
``` ```
After you make changes it is necessary to restart Trilium so that the layout can be rebuilt. After you make changes it is necessary to restart Trilium so that the layout can be rebuilt.
### Example screenshot
On the bottom you can see the resulting widget:
![](https://user-images.githubusercontent.com/617641/84592613-4a426e00-ae47-11ea-9d9f-fbe59ac976a1.png)