Skip to content

Instantly share code, notes, and snippets.

@romasan
Last active October 31, 2019 20:37
Show Gist options
  • Select an option

  • Save romasan/31400b3ba0d97df271c27d0cef13e5a4 to your computer and use it in GitHub Desktop.

Select an option

Save romasan/31400b3ba0d97df271c27d0cef13e5a4 to your computer and use it in GitHub Desktop.
const barHeight = 72;
const list = document.querySelectorAll('a h3');
let index = 0;
list[index].classList.add('selected');
document.body.addEventListener('keydown', e => {
if (e.keyCode === 38 || e.keyCode === 40) { e.preventDefault(); }
});
document.body.addEventListener('keyup', e => {
const { keyCode, shiftKey } = e;
if (keyCode === 38) { index--; } // arrow up
if (keyCode === 40) { index++; } // arrow down
list.forEach(item => {
item.classList.remove('selected');
});
if (index >= 0 && index < list.length) {
if (keyCode === 13) { // enter
const link = list[index].parentNode.href;
if (shiftKey) {
window.open(link, '_blank');
} else {
document.location.href = link;
}
}
const current = list[index];
current.classList.add('selected');
const { y, height } = current.getBoundingClientRect();
const elBottom = y + height + window.scrollY;
const wBottom = window.innerHeight + window.scrollY;
if (elBottom > wBottom || y < 0) {
window.scrollTo({
behavior: 'smooth',
top: window.scrollY + y - barHeight
});
}
} else {
index = -1;
}
if (keyCode === 80) { // p
[...document.querySelectorAll('a span')].find(e => ['Картинки', 'Images'].includes(e.parentNode.innerText)).parentNode.click();
}
});
/**
* CSS
*
.selected {
position: relative;
}
.selected::after {
content: '►';
position: absolute;
left: -20px;
color: #0000ff;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment