Updated Custom Widget (markdown)

zadam 2020-06-14 16:27:14 +02:00
parent 156c299896
commit ecced24370

@ -11,6 +11,12 @@ Positions are:
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
/*
* This defines a custom widget which displays number of words and characters in a current text note.
* To be activated for a given note, add label 'wordCount' to the note, you can also make it inheritable and thus activate it for the whole subtree.
*
* See it in action in "Books" and its subtree.
*/
const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color);"> const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color);">
<strong>Word count: </strong> <strong>Word count: </strong>
<span class="word-count"></span> <span class="word-count"></span>
@ -34,7 +40,8 @@ class WordCountWidget extends api.TabAwareWidget {
} }
async refreshWithNote(note) { async refreshWithNote(note) {
if (note.type !== 'text') { // show widget only on text notes if (note.type !== 'text' || !note.hasLabel('wordCount')) {
// show widget only on text notes and when marked with 'wordCount' label
this.toggleInt(false); // hide this.toggleInt(false); // hide
return; return;
@ -46,10 +53,29 @@ class WordCountWidget extends api.TabAwareWidget {
const text = $(content).text(); // get plain text only const text = $(content).text(); // get plain text only
const words = text.split(/\s+/); const counts = this.getCounts(text);
this.$wordCount.text(words.length); this.$wordCount.text(counts.words);
this.$characterCount.text(words.join('').length); this.$characterCount.text(counts.characters);
}
getCounts(text) {
const chunks = text
.split(/[\s-+:,/\\]+/)
.filter(chunk => chunk !== '');
let words;
if (chunks.length === 1 && chunks[0] === '') {
words = 0;
}
else {
words = chunks.length;
}
const characters = chunks.join('').length;
return {words, characters};
} }
async entitiesReloadedEvent({loadResults}) { async entitiesReloadedEvent({loadResults}) {