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;
}
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) {
// Element is obviously not visible
if (element.offsetWidth === 0 || element.offsetHeight === 0) return false;
@ -33,14 +46,7 @@ class KeyHinter {
this.number = 0;
this.nodes = {};
this.currentSelectionNumber = 0;
this.currentSelection = [];
this.mappings = {}
this.keyCodes = [
48, 49, 50, 51, 52, 53, 54, 55, 56, 57
]
}
// Highlight
@ -51,15 +57,15 @@ class KeyHinter {
this.listenKeybinds()
var _this = this;
document.querySelectorAll('a, form, input').forEach(function(nodeEl) {
document.querySelectorAll('a, form, input').forEach(function (nodeEl) {
if (isVisible(nodeEl)) {
_this.number++;
_this.nodes[_this.number] = nodeEl;
_this.nodes[_this.number.base26()] = nodeEl;
var el = _this.generateLabelFor(nodeEl);
el.textContent = _this.number;
el.setAttribute('data-keyhinter-number', _this.number);
el.textContent = _this.number.base26();
el.setAttribute('data-keyhinter-label', _this.number.base26());
document.body.appendChild(el);
}
@ -87,49 +93,47 @@ class KeyHinter {
}
doClick(obj) {
console.log(obj.nodeName)
switch(obj.nodeName) {
case 'INPUT':
obj.focus();
break;
case 'FORM':
obj.submit();
break;
default:
obj.click();
break;
switch (obj.nodeName) {
case 'INPUT':
obj.focus();
break;
case 'FORM':
obj.submit();
break;
default:
obj.click();
break;
}
}
// Keybinds
listenKeybinds() {
var _this = this;
document.onkeydown = function(event) {
if (event.keyCode === 27) { // ESC
document.onkeydown = function (event) {
if (event.code === 'Escape') {
event.preventDefault();
_this.destroy();
} else if (_this.keyCodes.indexOf(event.keyCode) !== -1) {
} else if (event.code.startsWith("Key")) {
event.preventDefault();
var num = event.keyCode - 48;
_this.currentSelection.push(num);
var letter = event.key;
_this.currentSelection.push(letter);
document.querySelectorAll('[data-keyhinter-number]').forEach(function(item){
document.querySelectorAll('[data-keyhinter-label]').forEach(function (item) {
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) {
var node = _this.nodes[_this.currentSelection.join('')];
_this.doClick(node);
_this.destroy();
} else {
query.forEach(function(item){
query.forEach(function (item) {
item.style.visibility = 'visible'
})
_this.currentSelectionNumber++;
}
} else {
console.log("Default:" + event.keyCode)
console.log("Default:" + event.code + "," + event.key)
}
}
}
@ -140,7 +144,7 @@ class KeyHinter {
// Non-safe methods
destroy() {
document.querySelectorAll('.keyhinter-label').forEach(function(node){
document.querySelectorAll('.keyhinter-label').forEach(function (node) {
document.body.removeChild(node);
})
this.stopListeningKeybinds();