Control the search bar, suggestion list, and result grid entirely with the keyboard on RatingGraph
// ==UserScript==
// @name RatingGraph keyboard controls
// @version 0.3.0
// @description Control the search bar, suggestion list, and result grid entirely with the keyboard on 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 currentIndex = -1;
var search = document.querySelector("#search");
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();
document.addEventListener("keydown", (e) => {
if (e.key == "q" && e.ctrlKey) {
search.focus();
} else if (e.key == "Escape") {
search.blur();
document.querySelector(".titles.results a")?.focus();
}
});
document.querySelector(".titles.results")?.addEventListener("keydown", (e) => {
if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key))
return;
var focusables = [...document.querySelectorAll(".titles.results a")].filter(el => el.offsetParent);
var idx = focusables.indexOf(document.activeElement);
if (idx == -1)
idx = 0;
switch (e.key) {
case "ArrowRight":
idx++;
break;
case "ArrowLeft":
idx--;
break;
case "ArrowDown":
idx = idx + 7 < focusables.length ? idx + 7 : idx % 7;
break;
case "ArrowUp":
if (idx - 7 >= 0) idx -= 7;
else {
var i = focusables.length - 1;
while (i % 7 !== idx % 7) i--;
idx = i;
}
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 + 1) % results.length;
} else if (e.key == "ArrowUp") {
e.preventDefault();
currentIndex = currentIndex <= 0 ? results.length - 1 : currentIndex - 1;
} else if (e.key == "Enter") {
e.preventDefault();
results[(currentIndex == -1 ? results.length - 1 : currentIndex)].click();
} else {
currentIndex = -1;
}
updateSelection(results);
});
function updateSelection(results) {
results.forEach((result, index) => { result.classList.toggle("selected", index == currentIndex) });
}
})();