diff --git a/Custom-Widget.md b/Custom-Widget.md index 1dab1bf..41d0cd1 100644 --- a/Custom-Widget.md +++ b/Custom-Widget.md @@ -11,6 +11,12 @@ Positions are: Create a code note of type JS frontend and give it `widget` label. ```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 = `
Word count: @@ -34,7 +40,8 @@ class WordCountWidget extends api.TabAwareWidget { } 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 return; @@ -46,10 +53,29 @@ class WordCountWidget extends api.TabAwareWidget { const text = $(content).text(); // get plain text only - const words = text.split(/\s+/); + const counts = this.getCounts(text); - this.$wordCount.text(words.length); - this.$characterCount.text(words.join('').length); + this.$wordCount.text(counts.words); + 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}) {