RatingGraph keyboard controls

Add keyboard controls to RatingGraph

当前为 2025-06-05 提交的版本,查看 最新版本

// ==UserScript==
// @name         RatingGraph keyboard controls
// @version      0.1.0
// @description  Add keyboard controls to RatingGraph
// @author       CennoxX
// @namespace    https://greasyfork.org/users/21515
// @homepage     https://github.com/CennoxX/userscripts
// @supportURL   https://github.com/CennoxX/userscripts/issues/new?title=[RatingGraph%20keyboard%20controls]%20
// @match        https://www.ratingraph.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ratingraph.com
// @grant        none
// @license      MIT
// ==/UserScript==
/* jshint esversion: 11 */
/* eslint curly: "off" */

(function() {
    "use strict";
    var styleTag = document.createElement("style");
    styleTag.textContent = `
  .results a.selected {
    background: #ffeebb;
    box-shadow: inset 4px 0 0 #e04e4e;
  }
.titles.results a:focus span {
  color: black;
  background: #ffeebb;
  box-shadow: inset 4px 0 0 #e04e4e;
}
`;
    document.head.appendChild(styleTag);
    document.querySelector(".titles.results a")?.focus();
    var currentIndex = -1;
    var search = document.querySelector("#search");
    document.addEventListener("keydown", (e) => {
        if (e.key == "q" && e.ctrlKey) {
            search.focus();
        } else if (e.key == "Escape") {
            search.blur();
        }
    });
    document.querySelector(".titles.results")?.addEventListener("keydown", (e) => {
        if (e.key == "ArrowRight" || e.key == "ArrowLeft"  || e.key == "ArrowDown"  || e.key == "ArrowUp") {
            var focusables = [...document.querySelectorAll(".titles.results a")].filter(el => el.offsetParent !== null);
            var active = document.activeElement;
            var idx = focusables.indexOf(active);
            if (idx == -1) idx = 0;
            switch (e.key) {
                case "ArrowRight":
                    idx += 1;
                    break;
                case "ArrowLeft":
                    idx -= 1;
                    break;
                case "ArrowDown":
                    idx += 7;
                    break;
                case "ArrowUp":
                    idx -= 7;
                    break;
            }
            idx = (idx + focusables.length) % focusables.length;
            focusables[idx].focus();
            e.preventDefault();
        }
    });

    search.addEventListener("keydown", (e) => {
        var results = document.querySelectorAll("a.result");
        if (!results.length){
            return;
        }
        if (e.key == "ArrowDown") {
            e.preventDefault();
            currentIndex = currentIndex >= results.length - 1 ? 0 : currentIndex + 1;
            updateSelection(results);
        } else if (e.key == "ArrowUp") {
            e.preventDefault();
            currentIndex = currentIndex <= 0 ? results.length - 1 : currentIndex - 1;
            updateSelection(results);
        } else if (e.key == "Enter" && currentIndex > -1) {
            e.preventDefault();
            results[currentIndex].click();
        } else {
            currentIndex = -1;
        }
    });


    function updateSelection(results) {
        results.forEach((result, index) => { result.classList.toggle("selected", index == currentIndex) });
    }
})();