Adding Arrow Key Navigation (Right Key/Next, Left Key/Previous)

[Lakstoties]

What would be the up-to-date and proper way to add Next and Previous page navigation via the keyboard Right and Left arrow keys?

I've tried adding custom javascript using functions I've seen in bundle.ts. While I can get the key events captured, I can't get the next and prev elements and set the location correctly. I've tried resolving the references to the functions and even tried other javascript workarounds, but nothing I'm doing is working correctly.

I'd simply like to use the two functions already defined:
getOptionalElement
setLocation

But, I can't seem to get them defined into the scope the custom javascript is operating in. I think I'd need something like element$ exported, but that's not being done from what I can tell in the bundle.ts. I tend avoid javascript script like the plague, hence using mkdocs and material... So, I need someone who knows the codebase to give me something to work with here, so I can avoid some completely nightmarish hack.

[kamilkrzyskow]

I'm quite sure that the bundle.js file bundled with the theme is both minimized and obfuscated. Also there is RxJS which I'm assuming sandboxes the code even further, so I'm not sure if you can access any of source functions anyways.
How to add a keyboard handler is shown in the documentation https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#customization
I'm assuming you're trying to get the link from the next and previous buttons, right?

keyboard$.subscribe(function(key) {
    // Do nothing when "search" active
    if (key.mode === "search") {
        return;
    }
        
    if (key.type === "ArrowLeft") {
        const prevAnchor = document.querySelector("link[rel=prev]");
        if (prevAnchor) {
            window.location.assign(prevAnchor.href);
        }
    } else if (key.type === "ArrowRight") {
        const nextAnchor = document.querySelector("link[rel=next]");
        if (nextAnchor) {
            window.location.assign(nextAnchor.href);
        }
    } else {
        // Early return to not block other key event handlers
        return;
    }

    // Prevent other key event handlers from running
    key.claim();
});

I guess this is the proper way ✌️ However it relies on the buttons being present on the page. If you want to remove them you'd have to override main.html and pass the prev and next from MkDocs to JavaScript during build.

[squidfunk]

Use the link[rel] tags:

mkdocs-material/src/assets/javascripts/bundle.ts

Lines 176 to 190 in f08bbb4

	/* Go to previous page */
	case "p":
	case ",":
	const prev = getOptionalElement<HTMLLinkElement>("link[rel=prev]")
	if (typeof prev !== "undefined")
	setLocation(prev)
	break
	/* Go to next page */
	case "n":
	case ".":
	const next = getOptionalElement<HTMLLinkElement>("link[rel=next]")
	if (typeof next !== "undefined")
	setLocation(next)
	break

[kamilkrzyskow]

Thanks, I updated the code. I also tested the key.claim more thoroughly. Hence, I added an early return to not block other button handlers. A blocked F5 button was quite weird to experience. 😅

Also here is a version with switch, which is more similar to the TS code:

keyboard$
    .subscribe(key => {
        // Do nothing when "search" active
        if (key.mode === "search")
            return;
        
        switch (key.type) {
            case "ArrowLeft":
                const prev = document.querySelector("link[rel=prev]");
                if (typeof prev !== "undefined")
                    location.href = prev.href;
                break;
            case "ArrowRight":
                const next = document.querySelector("link[rel=next]");
                if (typeof next !== "undefined")
                    location.href = next.href;
                break;
        }
    });

[Lakstoties]

Works perfectly. Looks and feels good, too.

Thank you so much.