fmartingr
/
keyhinter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: use string labels, refactored

This commit is contained in:
Felipe Martin 2022-09-22 19:44:57 +02:00
parent 9e6f625e9f
commit 126d876ddd
Signed by: fmartingr
GPG Key ID: 716BC147715E716F
1 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
keyhinter.js
View File

@ -9,6 +9,19 @@ function is_descendant(parent, child) {
return false; return false;
} }
Number.prototype.base26 = (function () {
return function base26() {
n = this/* w ww .j a v a 2s. co m*/
ret = "";
while (parseInt(n) > 0) {
--n;
ret += String.fromCharCode("A".charCodeAt(0) + (n % 26));
n /= 26;
}
return ret.split("").reverse().join("").toLowerCase();
};
}());
function isVisible(element) { function isVisible(element) {
// Element is obviously not visible // Element is obviously not visible
if (element.offsetWidth === 0 || element.offsetHeight === 0) return false; if (element.offsetWidth === 0 || element.offsetHeight === 0) return false;
@ -33,14 +46,7 @@ class KeyHinter {
this.number = 0; this.number = 0;
this.nodes = {}; this.nodes = {};
this.currentSelectionNumber = 0;
this.currentSelection = []; this.currentSelection = [];
this.mappings = {}
this.keyCodes = [
48, 49, 50, 51, 52, 53, 54, 55, 56, 57
]
} }
// Highlight // Highlight
@ -51,15 +57,15 @@ class KeyHinter {
this.listenKeybinds() this.listenKeybinds()
var _this = this; var _this = this;
document.querySelectorAll('a, form, input').forEach(function(nodeEl) { document.querySelectorAll('a, form, input').forEach(function (nodeEl) {
if (isVisible(nodeEl)) { if (isVisible(nodeEl)) {
_this.number++; _this.number++;
_this.nodes[_this.number] = nodeEl; _this.nodes[_this.number.base26()] = nodeEl;
var el = _this.generateLabelFor(nodeEl); var el = _this.generateLabelFor(nodeEl);
el.textContent = _this.number; el.textContent = _this.number.base26();
el.setAttribute('data-keyhinter-number', _this.number); el.setAttribute('data-keyhinter-label', _this.number.base26());
document.body.appendChild(el); document.body.appendChild(el);
} }
@ -87,49 +93,47 @@ class KeyHinter {
} }
doClick(obj) { doClick(obj) {
console.log(obj.nodeName) switch (obj.nodeName) {
switch(obj.nodeName) { case 'INPUT':
case 'INPUT': obj.focus();
obj.focus(); break;
break; case 'FORM':
case 'FORM': obj.submit();
obj.submit(); break;
break; default:
default: obj.click();
obj.click(); break;
break;
} }
} }
// Keybinds // Keybinds
listenKeybinds() { listenKeybinds() {
var _this = this; var _this = this;
document.onkeydown = function(event) { document.onkeydown = function (event) {
if (event.keyCode === 27) { // ESC if (event.code === 'Escape') {
event.preventDefault(); event.preventDefault();
_this.destroy(); _this.destroy();
} else if (_this.keyCodes.indexOf(event.keyCode) !== -1) { } else if (event.code.startsWith("Key")) {
event.preventDefault(); event.preventDefault();
var num = event.keyCode - 48; var letter = event.key;
_this.currentSelection.push(num); _this.currentSelection.push(letter);
document.querySelectorAll('[data-keyhinter-number]').forEach(function(item){ document.querySelectorAll('[data-keyhinter-label]').forEach(function (item) {
item.style.visibility = 'hidden'; item.style.visibility = 'hidden';
}) })
var query = document.querySelectorAll('[data-keyhinter-number^="' + _this.currentSelection.join('') + '"]') var query = document.querySelectorAll('[data-keyhinter-label^="' + _this.currentSelection.join('') + '"]')
if (query.length === 1) { if (query.length === 1) {
var node = _this.nodes[_this.currentSelection.join('')]; var node = _this.nodes[_this.currentSelection.join('')];
_this.doClick(node); _this.doClick(node);
_this.destroy(); _this.destroy();
} else { } else {
query.forEach(function(item){ query.forEach(function (item) {
item.style.visibility = 'visible' item.style.visibility = 'visible'
}) })
_this.currentSelectionNumber++;
} }
} else { } else {
console.log("Default:" + event.keyCode) console.log("Default:" + event.code + "," + event.key)
} }
} }
} }
@ -140,7 +144,7 @@ class KeyHinter {
// Non-safe methods // Non-safe methods
destroy() { destroy() {
document.querySelectorAll('.keyhinter-label').forEach(function(node){ document.querySelectorAll('.keyhinter-label').forEach(function (node) {
document.body.removeChild(node); document.body.removeChild(node);
}) })
this.stopListeningKeybinds(); this.stopListeningKeybinds();