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
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/CAO1-dWWXyeOc47Jj-j%2Bi-CwEx_UO6hcY1YysvO0e6Rn0Jw8-ig%40mail.gmail.com.
// unselect search box on startup
var activeElement = document.activeElement;
activeElement.blur();
const SMOOTH_SCROLLING = false;
function isElementCloseToTop(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= -10 && rect.top <= 10);
}
function findTopmostTiddler(tiddlers) {
var i = 0;
while (i < tiddlers.length && tiddlers[i].getBoundingClientRect().top <= -10)
{
i++;
}
return i;
}
var tiddler_index = 0;
document.onkeyup = function(e) {
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
var activeElement = document.activeElement;
if (activeElement && activeElement.tagName.toLowerCase() == "input") {
if (e.code == "Escape") {
// unfocus search box
activeElement.blur();
//window.focus();
}
return;
}
var tiddlers = document.getElementsByClassName('tc-tiddler-frame');
if (e.code == "KeyJ") {
// go down
if (!isElementCloseToTop(tiddlers[tiddler_index])) {
tiddler_index = findTopmostTiddler(tiddlers) - 1;
}
tiddler_index += 1;
if (tiddler_index >= tiddlers.length) tiddler_index = 0;
//alert(e.code+" J key was pressed. index = "+tiddler_index);
if (SMOOTH_SCROLLING)
tiddlers[tiddler_index].scrollIntoView({behavior: "smooth", block:
"start", inline: "nearest"});
else
tiddlers[tiddler_index].scrollIntoView();
} else if (e.code == "KeyK") {
// go up
if (!isElementCloseToTop(tiddlers[tiddler_index])) {
tiddler_index = findTopmostTiddler(tiddlers);
}
tiddler_index -= 1;
if (tiddler_index < 0) tiddler_index = tiddlers.length - 1;
if (SMOOTH_SCROLLING)
tiddlers[tiddler_index].scrollIntoView({behavior: "smooth", block:
"start", inline: "nearest"});
else
tiddlers[tiddler_index].scrollIntoView();
} else if (e.code == "KeyC") {
// close current tiddler
tiddler_index = findTopmostTiddler(tiddlers);
var button =
tiddlers[tiddler_index].getElementsByClassName('tc-btn-%24%3A%2Fcore%2Fui%2FButtons%2Fclose')[0];
button.click();
} else if (e.code == "KeyE" && e.key != "ArrowUp") {
// check for ArrowUp because AltGr+E is ArrowUp in Neo2, AdNW, KOY and
other keyboard layouts
// edit current tiddler
tiddler_index = findTopmostTiddler(tiddlers);
var button =
tiddlers[tiddler_index].getElementsByClassName('tc-btn-%24%3A%2Fcore%2Fui%2FButtons%2Fedit')[0];
button.click();
}
};
