keyBindings = {
let currentSlide = -1;
let showNotes = () => {};
function keyUp(event) {
const slides = document.querySelectorAll('.observablehq .slide');
switch (event.key) {
case 'ArrowUp':
case 'ArrowLeft':
currentSlide = Math.max(currentSlide - 1, 0);
slides[currentSlide].scrollIntoView();
showNotes(slides[currentSlide]);
break;
case 'ArrowDown':
case 'ArrowRight':
currentSlide = Math.min(currentSlide + 1, slides.length - 1);
slides[currentSlide].scrollIntoView();
showNotes(slides[currentSlide]);
break;
}
}
document.addEventListener('keyup', keyUp);
invalidation.then(() => document.removeEventListener('keyup', keyUp));
return Object.assign(
html`<button>Notes</button>`, {
onclick() {
const notes = open("about:blank", "notes", "width=600,height=400").document.body;
showNotes = slide => {
notes.innerHTML = "";
const cell = slide.parentNode;
const siblings = Array.from(document.querySelectorAll('.observablehq'));
for (const sibling of siblings.slice(siblings.indexOf(cell))) {
if (sibling.querySelector('.notes')) {
notes.innerHTML = sibling.innerHTML;
break;
}
}
}
}
});
}