How to include some JavaScript code in a Node.js TiddlyWiki

[Max Schillinger]

Hi all,

I wrote some lines of JavaScript in order to navigate through my open tiddlers comfortably just with the keyboard. It maps these keys:

• Esc: Unfocus the seach box
• j: Scroll down to the next open tiddler
• k: Scroll up to the previous open tiddler
• e: Edit the current tiddler
• c: Close the current tiddler

When I load it into my single-file TiddlyWiki, it works as expected:

<script src="navigation.js"></script>

(Just above </body>)

But I have switched to the Node.js TiddlyWiki some days ago and this seems to be more complicated.

I just made a new tiddler, inserted the complete content of navigation.js (see file attached), set the Type to "application/javascript", and added a field "module-type" and set it to "startup" (just guessing). Then I reloaded the wiki (F5) and it worked.

The next day, my wiki didn't start anymore (usually it's started by cron). When I start it manually, I get this error:

$ tiddlywiki .. --listen
Error executing boot module navigation.js: {}

navigation.js:2
var activeElement = document.activeElement;
                    ^

ReferenceError: document is not defined
    at navigation.js:2:21
...

When I change the 'module-type' to 'library' (now within tiddlers/navigation.js.meta), I can start the wiki but the mapped keys don't work anymore. When I change the 'module-type' back to startup (and press F5) it works again, until the next restart of the wiki.

What's the correct way of loading a javascript file (that accesses 'document')?

Best regards,

Max

[Sycom]

Hello,

Not sure :
* You may have to declare your script differently: not using a .js.meta file but with a tiddlyWiki.files file.
* Also the script may need some special declarations as comments, like

```
/*jslint node: true, browser: true */
/*global $tw: false */
```

Did you look at https://github.com/Jermolene/TiddlyWiki5/core/modules/keyboard.js as an "inspiration" ?

Hopefully someone who knows what he does will have a better answer...

Cheers

Sylvain
@sycom

[Miha Lunar]

It should work with .js and .js.meta files. Try using the startup module type and structuring your code like this:

(function () {

/*jslint node: false, browser: true */
/*global $tw: false */
"use strict";

exports.name = "mypluginname"; exports.after = ["rootwidget"];

exports.startup = function () {
... Your startup code here...
}

})();

Using the .after will make tiddlywiki delay your startup until the specified dependencies have been initialized. Not sure if you need to wait for the root widget, but you can try that and back off to an earlier point if needed.

There should be some more info about this scattered around tiddlywiki.com and tiddlywiki.com/dev :)

Hope it helps.

[MaxGyver]

Thanks Sylvain, thanks Miha!

This works perfectly!

For other readers: I added everything Miha posted (which includes Sylvain's special declarations).

Best regards

Max

[Miha Lunar]

Glad to hear it!

The navigation plugin you made seems cool, is it going to be posted anywhere? :) 

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/pjqXOaHGw1w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5737107c-27f2-45b2-ac7a-24a2905fd147%40googlegroups.com.

[Max Schillinger]

Thanks!

I'm going to post it for sure. I'm still working on some details and additional functions:

- If you scroll down half a tiddler, which one should be edited when you press "e"!?

- It would be nice if you could navigate also through the menus in the sidebar (open/recent tiddlers and so on)

- If you can navigate through tiddlers and menus, some highlighting of the current object is necessary

- Maybe I can wrap this tiddler in a right plugin with some settings and documentation

But I will share it before everything is finished because it could be useful for some people as it is right now.

Best regards

Max

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CABAmXk3eJUgyZJHPpjN%3DrAngFpB7Ep8pExkjMs8AtWi%3DQT%3DTPg%40mail.gmail.com.

[MaxGyver]

Hello again,

I fixed some bugs and have created a repo at GitHub and a demo page for this plugin.

Just in case somebody already wants to test it.

I still have to make a proper plugin out of it.

Best regards,

Max

Am Montag, 28. Oktober 2019 23:25:09 UTC+1 schrieb MaxGyver:

Thanks!

I'm going to post it for sure. I'm still working on some details and additional functions:

- If you scroll down half a tiddler, which one should be edited when you press "e"!?

- It would be nice if you could navigate also through the menus in the sidebar (open/recent tiddlers and so on)

- If you can navigate through tiddlers and menus, some highlighting of the current object is necessary

- Maybe I can wrap this tiddler in a right plugin with some settings and documentation

But I will share it before everything is finished because it could be useful for some people as it is right now.

Best regards

Max

[Jeremy Ruston]

Sorry to be late to the thread, and glad you’ve got things working. Just to add that the special /*\ comment block at the top of JS files is an alternative to having to have a separate .meta file.

There was also a reference to tiddlywiki.files — that’s a mechanism for turning existing files into tiddlers without modifying them. It’s typically used to include 3rd party code. See:

https://tiddlywiki.com/#tiddlywiki.files%20Files

Best wishes

Jeremy

--
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/9bbeacf6-2b0f-42cb-aaf5-edb958a36b2c%40googlegroups.com.

[TonyM]

Max

On your question

- If you scroll down half a tiddler, which one should be edited when you press "e"!?

If you turn on sticky titles in theme tweets and ensure the e operates the tiddlers who's sticky title is visible I think would be the best. Ie the top in the view screen even if, you are looking at the bottom of it. Ideally it could detect if sticky titles was in use or not and if not edit the tiddler who's title is visible at the top.

Regards
Tony

[MaxGyver]

@Jeremy: Thanks for your answer! I was looking for a quick and easy solution at first, but on the long run I want to create a real plugin that can be imported by drag and drop.

@Tony: I have never tried the sticky title option before. This looks like a good feature. And your proposal sounds absolutely reasonable.

[MaxGyver]

Finally, it's a real plugin: see the new demo page.

I followed this HowTo. It recommends adding a README file when creating the GitHub repo. But now this README.md is also included in the plugin (contents tab).

1. How can I exclude it (same for tw5-keyboard-navigation.html and tw5-keyboard-navigation-plugin.html)?
2. Why is does navigation.css include an absolute path? (navigation.js does not!)

Best regards,

Max

[Sycom]

Hi

> How can I exclude it (same for tw5-keyboard-navigation.html and tw5-keyboard-navigation-plugin.html)?

I think you should put them outside your plugins/MaxGyver83 folder

> Why is does navigation.css include an absolute path? (navigation.js does not!)

tw will import tid files as tiddlers but not others (for which it creates basic metadata). Try renaming .css as .tid. You can also put all metadata in a separate .css.meta file.

Hope I did not missed the point

Cheers

Sylvain
@sycom

[MaxGyver]

Hi Sylvain,

Try renaming .css as .tid.

Thank you! That was the solution.

I think you should put them outside your plugins/MaxGyver83 folder

Well, I just followed the instructions on tiddlywiki.com/dev. The plugin folder is a GitHub repo at the same time. So the README.md must be in that folder.

I made a little script that moves README.md to /tmp, runs node ./tiddlywiki.js editions/tw5.com --build index and then moves README.md back into the plugin/repository folder. That's okay, but I'm wondering how other plugin developers do it.

Best regards,

Max

[Sylvain Comte]

Hi,

Yes, the readme.md has to be in your repo. But you may put your plugin files in a plugins/maxgyver83 folder and build your wiki with them only.

I think each Dev has his very own tricks and tips. You may have a look at my repo if you want one example. Some do it another way though...

https://github.com/sycom/TiddlyWiki-Plugins

You may also have to set environment variables for plugin folder : https://tiddlywiki.com/static/Environment%2520Variables%2520on%2520Node.js.html

Cheers

Sylvain

@sycom

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/pjqXOaHGw1w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/172139aa-a4b9-4660-95bd-441e62d501d7%40googlegroups.com.