Keyboard controls for Programming Font - Test Drive (http://app.programmingfonts.org)

programming-fonts-userscript.js

// ==UserScript==
// @name         Programming Fonts Controls
// @namespace    https://mcluck90.github.io/
// @version      1.0
// @description  Allow you to control the Programming Fonts Test Drive with your keyboard
// @author       You
// @match        http://app.programmingfonts.org/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function nextFont() {
        const activeLink = document.querySelector('.entry .active');
        const activeEntry = activeLink.parentNode;
        const next = activeEntry.nextSibling;
        if (next && next.matches('.entry')) {
            next.querySelector('a').click();
            next.scrollIntoView();
        }
    }

    function previousFont() {
        const activeLink = document.querySelector('.entry .active');
        const activeEntry = activeLink.parentNode;
        const next = activeEntry.previousSibling;
        if (next && next.matches('.entry')) {
            next.querySelector('a').click();
            next.scrollIntoView();
        }
    }

    function increaseFontSize() {
        const sizeEl = document.getElementById('size');
        sizeEl.value = Number(sizeEl.value) + 1;
        sizeEl.onchange();
    }

    function decreaseFontSize() {
        const sizeEl = document.getElementById('size');
        sizeEl.value = Number(sizeEl.value) - 1;
        sizeEl.onchange();
    }

    function increaseSpacing() {
        const spacingEl = document.getElementById('spacing');
        spacingEl.value = Number(spacingEl.value) + 0.1;
        spacingEl.onchange();
    }

    function decreaseSpacing() {
        const spacingEl = document.getElementById('spacing');
        spacingEl.value = Number(spacingEl.value) - 0.1;
        spacingEl.onchange();
    }

    function toggleAntiAliasing() {
        const aliasingEl = document.getElementById('aliasing');
        aliasingEl.checked = !aliasingEl.checked;
        aliasingEl.onchange();
    }

    window.addEventListener('keydown', (e) => {
        // J
        if (e.keyCode === 74) {
            nextFont();
        }

        // K
        if (e.keyCode === 75) {
            previousFont();
        }

        // A
        if (e.keyCode === 65) {
            increaseFontSize();
        }

        // Z
        if (e.keyCode === 90) {
            decreaseFontSize();
        }

        // S
        if (e.keyCode === 83) {
            increaseSpacing();
        }

        // X
        if (e.keyCode === 88) {
            decreaseSpacing();
        }

        // T
        if (e.keyCode === 84) {
            toggleAntiAliasing();
        }
    });
})();