Open links easily using only the keyboard
目前為
// ==UserScript==
// @name Easy Keyboard Link Opener
// @description Open links easily using only the keyboard
// @version 0.2.0
// @namespace https://greasyfork.org/en/users/55535-sllypper
// @author sllypper
// @match *://*/*
// @grant none
// @todo add TAB to cycle between links
// ==/UserScript==
(function() {
'use strict';
// on the American keyboard layout, switch it to "`" instead
// or whatever other key you want
const HOTKEY = "'"
// allow or deny links that start with #
const ALLOW_ANCHOR_LINKS = true
// allow or deny buttons
const ALLOW_BUTTONS = true
//
let isSet = false;
let visibleLinks = [];
let page;
const tooltipColor = "#fff"
const tooltipBgColor = "#555"
function setHot() {
document.addEventListener("keydown", event => {
if (!isSet) {
if (event.key === HOTKEY && event.ctrlKey) {
actionHot();
}
} else {
if (event.key >= 0 && event.key < 10) {
let chosen
chosen = event.key === "0" ? visibleLinks[9] : visibleLinks[parseInt(event.key)-1]
chosen.click()
//window.location = chosen.getAttribute('href')
//console.log(chosen.getAttribute('href'))
}
/*else if (event.key === "Tab") {
}*/
//console.log(event.key)
clearAction()
}
})
}
function clearAction() {
// let el
for (let el of document.querySelectorAll('.displayText_container')) { el.remove() }
for (let el of document.querySelectorAll('.displayText')) { el.remove() }
visibleLinks = []
isSet = false
}
function actionHot() {
let selector = ALLOW_BUTTONS ? 'a,button' : 'a'
let links = Array.from(document.querySelectorAll(selector)).filter((el) => {
// separating check to only check the href of anchors
// so it doesn't exclude all buttons, if they're enabled
if (el.nodeName === "A" && el.getAttribute('href') == null) return false;
return !(el.offsetWidth === 0 || el.offsetHeight === 0) && isInViewport(el)
})
if (!ALLOW_ANCHOR_LINKS) links = links.filter((el) => el.getAttribute('href')[0] != '#' )
let numlinks = 0
for (const el of links) {
// line below was duplicated inside and outside the if check
visibleLinks.push(el)
// only create up to 9 tooltips
// then create tooltip 0 and break
if (numlinks >= 9) {
createTooltip(el, 0)
break;
}
numlinks += 1
createTooltip(el, numlinks)
}
isSet = true
}
// Creates tooltip and makes sure it is visible
// Avoids creating tooltip on body because they don't follow fixed elements
function createTooltip(el, num) {
let tooltip = showTooltip(el, numlinks)
if (!isInViewport(tooltip)) {
tooltip.remove()
showTooltipOnBody(el, numlinks)
}
}
function showTooltip(el, num) {
const superEl = document.createElement("span")
superEl.setAttribute('style','position: relative;')
superEl.setAttribute("class", "displayText_container")
let tooltip = document.createElement("span")
tooltip.setAttribute("class", "displayText")
tooltip.innerText = num
superEl.appendChild(tooltip)
el.appendChild(superEl)
return superEl
}
function showTooltipOnBody(el, num) {
const rect = el.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
const tooltip = document.createElement("span")
tooltip.setAttribute("class", "displayText")
tooltip.innerText = num
tooltip.style.margin = '0'
tooltip.style.bottom = 'initial'
tooltip.style.top = rect.top+'px'
tooltip.style.left = rect.right+'px'
document.body.appendChild(tooltip)
return tooltip
}
function addCustomCSS() {
let customStyles = document.createElement("style");
customStyles.setAttribute("type", "text/css");
let styles = ".displayText { position: absolute; bottom: 100%; left: 100%; margin-left: 0; width: initial; background-color: "+tooltipBgColor+"; color: "+tooltipColor+"; text-align: center; border-radius: 2px; padding: 0px 2px; margin-bottom: -20px; line-height: 20px; font-size: 14px; z-index: 9999; }"
customStyles.innerHTML = styles;
document.getElementsByTagName("head")[0].appendChild(customStyles);
}
/*!
* Determine if an element is in the viewport
* (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
* @param {Node} elem The element
* @return {Boolean} Returns true if element is in the viewport
*/
var isInViewport = function (elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
addCustomCSS()
setHot()
})();