Writing Widget in JS using ES6 Class syntax

[Lin Onetwo]

This is based on Mark S.'s example in https://groups.google.com/forum/#!msg/TiddlyWiki/bjludozbMqY/ja1YJa9g1k8J

I'd like to create custom widget in the way that is similar to React, so I do a simple refactor, seems it is OK to write Widget in ES6 Class syntax:

/*\

title: $:/core/modules/widgets/addup.js

type: application/javascript

module-type: widget

Sum up to 5 variables widget

Usage: <$addup val1="20" val2="80" />

\*/

(function () {

/*jslint node: true, browser: true */

/*global $tw: false */

'use strict';

const Widget = require('$:/core/modules/widgets/widget.js').widget;

class AddUpWidget extends Widget {

constructor(parseTreeNode, options) {

super(parseTreeNode, options);

this.initialise(parseTreeNode, options);

}

/*

Render this widget into the DOM

*/

render(parent, nextSibling) {

this.parentDomNode = parent;

this.computeAttributes();

this.execute();

const textNode = this.document.createTextNode(this.currentSum);

parent.insertBefore(textNode, nextSibling);

this.domNodes.push(textNode);

}

/*

Compute the internal state of the widget

*/

execute() {

// Get parameters from our attributes

this.val1 = this.getAttribute('val1', '0');

this.val2 = this.getAttribute('val2', '0');

this.val3 = this.getAttribute('val3', '0');

this.val4 = this.getAttribute('val4', '0');

this.val5 = this.getAttribute('val5', '0');

// Execute the math

this.currentSum =

Number(this.val1) + Number(this.val2) + Number(this.val3) + Number(this.val4) + Number(this.val5);

}

/*

Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering

*/

refresh(changedTiddlers) {

// Re-execute the filter to get the count

this.computeAttributes();

var oldCount = this.currentSum;

this.execute();

if (this.currentSum !== oldCount) {

// Regenerate and reRender the widget and replace the existing DOM node

this.refreshSelf();

return true;

} else {

return false;

}

}

}

exports.addup = AddUpWidget;

})();

In this way, I think I can create a button widget that can execute JS. I seems not very strightforward to execute javascript using built-in button widget, at least I didn't find a doc about this.

[Lin Onetwo]

I've wrote a widget button using javascript to import Google Calendar as tiddlers to TiddlyWiki, using this technique

https://github.com/linonetwo/Meme-of-LinOnetwo/blob/2b146617dc0a37182646c365d733e232ca48155f/MemeOfLinonetwo/tiddlers/%E5%AF%BC%E5%85%A5GoogleCalendar%E7%9A%84%E6%8C%89%E9%92%AE.js

在 2020年4月29日星期三 UTC+8下午10:01:32，Lin Onetwo写道：

[Jed Carty]

The widget looks good!

you can have your widget take any number of inputs using this. The attributes can have any name an there can be any number of them:

execute() {

this.currentSum = 0;

// Get parameters from our attributes

$tw.utils.each(this.attributes,function(attribute,name) {

this.currentSum += attribute;

[Mohammad]

Great work Lin,

 I like to add  http://ireade.github.io/inlinetweetjs/ to Tiddlywiki. It it possible to do it via the procedure of this post?

--Mohammad

[Lin Onetwo]

Hi Mohammad,

I think inlinetweetjs is self contained, you can just place

<script src="path/to/inline-tweet.min.js"></script>
into a tiddler tagged with $:/tags/RawMarkup

Then warp any text with <span data-inline-tweet>
will just work.

With custom widget you can call complex SDK's API, for example Google API in my case or Twitter API, but you won't need that when using inlinetweetjs ! 

[Mohammad Rahmani]

Many thanks Lin,

I got the point.

Best wishes

Mohammad

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/796c8668-7478-4ef6-b1e2-f8ee3fe20a43%40googlegroups.com.