navigate page by keyboard!
当前为
// ==UserScript==
// @name DDG-like Vim keybindings for any website
// @namespace https://gist.github.com/KiaraGrouwstra/cbc198f6be09f703c42327b2cb6a6947
// @version 0.0.1
// @description navigate page by keyboard!
// @author KiaraGrouwstra
// @match https://*/*
// @grant none
// @license WTFPL
// ==/UserScript==
(function() {
'use strict';
function unfold(fn, seed) {
var pair = fn(seed);
var result = [];
while (pair && pair.length) {
result[result.length] = pair[0];
pair = fn(pair[1]);
}
return result;
}
function area(el) {
var rect = el.getBoundingClientRect();
return rect.height * rect.width;
}
function max(a, b) {
return b > a ? b : a;
}
var maxBy = (f) => (a, b) => {
var resultB = f(b);
return max(f(a), resultB) === resultB ? b : a;
}
var viableChildren = el => Array.from(el.children).filter(x=>area(x) > 100);
var head = document.getElementsByTagName('head')[0];
var contents = document.getElementById('main') || document.querySelectorAll('[role="main"]')[0] || document.getElementsByTagName('body')[0];
var biggestChild = el => viableChildren(el).reduce(maxBy(area), head);
var candidates = unfold(el => {
let child = biggestChild(el);
return area(child) > 100 ? [child, child] : false;
}, contents);
var parent = candidates.reduce(maxBy(el => area(el) * viableChildren(el).length), head);
// items = viableChildren(document.getElementById('answers'));
var items = viableChildren(parent);
var hit = 0; // global
function select_hit(next = true) {
const get_res = i => items[i];
const el_ = get_res(hit);
if(el_) el_.classList.remove("highlight");
hit = Math.min(items.length-1, Math.max(0, next ? hit + 1 : hit - 1));
const el = get_res(hit);
el.classList.add("highlight");
el.getElementsByTagName("a")[0].focus();
el.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
}
document.addEventListener('keydown', function(event) {
const code = event.keyCode;
if (!['INPUT', 'TEXTAREA'].includes(document.activeElement.nodeName)) {
// if not in a text box, we can safely intercept keys
if (code == 40 || code == 74 || code == 78) { // down / j / n
event.preventDefault();
select_hit(true);
}
if (code == 38 || code == 75 || code == 69) { // up / k / e
event.preventDefault();
select_hit(false);
}
}
});
// define css class
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.highlight { background-color: rgba(120, 120, 255, 0.1); }';
document.getElementsByTagName('head')[0].appendChild(style);
})();