Javascript in Tiddlywiki

They can be used where wikitext macros are used. Generally the javascript one uses in a macro is very simple.

here is the macro I wrote for this:

/*\
title: bj/macros/stylethis.js
type: application/javascript
module-type: macro
\*/
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

/**** name of macro and parameters ****/

exports.name = "styleThis";

exports.params = [
	{name: "aclass"},
	{name: "tid"}
];

/***************macro********************/
exports.run = function(aclass, tid) {
var content = $tw.wiki.getTiddlerText(tid);
return `
@@.${aclass}
${content}
@@
`
};
/***************************************/

you use it like this:

use it like this:

<$eventcatcher $click="<$action-menuopen/>" >

<$macrocall $name="styleThis" aclass= ".collapsible-list" tid=<<currentTiddler>>/>

</$eventcatcher>
1 Like

Wow. Thanks @buggyj . It works perfectly now. I have updated the demo wiki including the latest code you shared.

@arunnbabu81 forgive me for my ignorance, but how can I use this macro?

@switchplayer
I will share the tiddlers needed today night once I am back home. Everything except the icon for the viewtoolbar button is in the home page of that wiki…you can try those.the icon tiddlers can be searched in the wiki using command palette plug in (control plus P). I forgot it’s title. Title can be seen within the button tiddler

https://sidetabs-wiki.tiddlyhost.com/#Collapsible%20outliner%20installation

@switchplayer Check this tiddler for adding the macro given by @buggyj

Have you seen Introducing a Copy Code Button Plugin for TiddlyWiki: Enhancing Code Sharing and Efficiency?

That’s a button do the similar thing. but it requires additional click to trigger. it won’t automatically execute on any tiddler with a certain tag.

@buggyj Is this because the Firefox browser doesn’t support it. Any chance of this working in Firefox in the future (bcos I use TW mostly in firefox)

It is part of standard level 4 css - firefox say they will release it soon - but I don’t know when. Is it a useful feature?

@buggyj It differs from person to person. People who have used outliner apps like dynalist, workflowy, roma research, logseq, remnote etc. might like it, especially if they use long text tiddlers frequently.

Awesome! Thank you!

All these replies and comments have been amazing and super helpful. Very appreciative of everyone!

Interesting…I installed it in my wiki, but one of two things happen - i receive an uncaught error message OR when I click the button in the viewtoolbar, it hides the entire body of the tiddler.

@arunnbabu81 any ideas on the reasons for this?

@switchplayer which browser are you using ? As buggyj told this works only in chrome.

Try to use it in an empty tiddlywiki edition and check whether the errors happen there also.

Also if you have many other plug ins installed, disable them in groups to see whether this is due to some incompatility with one of those plug ins.

If none of these works, try uploading a sample of your wiki without any personal contents in tiddlyhost.

Can you share the screenshot of the error message you are getting

Hey @arunnbabu81, here is a tiddlyhost with just the tiddlers of yours. I’m suspecting that it may be a compatibility issue with the theme I have? I’m not sure though.

Thank you!

https://outliner-demo.tiddlyhost.com/
This is a empty TW with just the outliner tiddlers, notebook theme and filter pill macro added and its working there.

I guess this stylesheet tiddler is causing all the problems. Remove or edit it if it’s not needed.

@buggyj Any other way to get this working in firefox other than waiting for them to release the CSS mentioned above ?

at the moment I cannot think of a good solution.

it is possible to switch this on in firefox via

layout.css.has-selector.enabled

in the about:config page, but I do not know if this has any ramifications.

1 Like

Its working in firefox now @buggyj . thanks for the tip. :slightly_smiling_face:

1 Like

This should now be available as default is firefox 121

1 Like