DDG-like Vim keybindings for any website

navigate page by keyboard!
目前為 2024-05-15 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         DDG-like Vim keybindings for any website
// @namespace    https://gist.github.com/KiaraGrouwstra/cbc198f6be09f703c42327b2cb6a6947
// @version      0.0.2
// @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;
  }

  var maxBy = (f) => (a, b) => {
    var resultB = f(b);
    return Math.max(f(a), resultB) === resultB ? b : a;
  }

  var viableChildren = el => Array.from(el.children).filter(x=>area(x) > 100);

  var hit = 0; // global

  var head = document.getElementsByTagName('head')[0];
  console.log({head});

  var contents = document.getElementById('main') || document.querySelectorAll('[role="main"]')[0] || document.getElementsByTagName('body')[0];
  console.log({contents});

  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);
  console.log({candidates});

  var parent = candidates.reduce(maxBy(el => area(el) * viableChildren(el).length), head);
  console.log({parent});

  // items = viableChildren(document.getElementById('answers'));
  var items = viableChildren(parent);
  console.log({items});
  console.log(Array.from(parent.children).filter(x=>area(x) > 100));
  console.log(Array.from(parent.children));

  function select_hit(next = true) {
      const get_res = i => items[i];
      console.log({hit});
      const el_ = get_res(hit);
      console.log({el_});
      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);
      console.log({el});
      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;
      const active = document.activeElement;
      const editing = ['INPUT', 'TEXTAREA'].includes(active.nodeName) ||
            active.getAttribute("contenteditable") == "true" ||
            active.getAttribute("role") == "textbox";
      if (!editing) {
          // 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);

})();