keyBindings = {
let currentSlide = 0;
let showNotes = () => {};
function keyUp(event) {
const slides = document.querySelectorAll('.observablehq .slide');
switch (event.key) {
case 'ArrowUp':
case 'ArrowLeft':
let cell = slides[currentSlide].parentNode;
let hidden_lis = cell.querySelectorAll("li:not(.hidden)");
console.log(hidden_lis);
if (hidden_lis.length !== 0) {
hidden_lis[hidden_lis.length - 1].classList.add("hidden");
} else {
currentSlide = Math.max(currentSlide - 1, 0);
slides[currentSlide].scrollIntoView();
showNotes(slides[currentSlide]);
}
break;
case 'ArrowDown':
case 'ArrowRight':
currentSlide = Math.min(currentSlide, slides.length - 1);
console.log(currentSlide, slides[currentSlide]);
let current_cell = slides[currentSlide].parentNode;
const lis = current_cell.querySelectorAll("li.hidden");
if (lis.length !== 0) {
lis[0].classList.remove("hidden");
}
else {
currentSlide = Math.min(currentSlide + 1, slides.length - 1);
const slide = slides[currentSlide];
hide_li_elements(slide);
slide.scrollIntoView();
showNotes(slide);
}
break;
}
}
document.removeEventListener('keyup', keyUp);
document.addEventListener('keyup', keyUp);
const button = html`<button>Notes</button>`;
button.onclick = () => {
const notes = open("about:blank", "notes", "width=300,height=200").document
.body;
showNotes = slide => {
notes.innerHTML = "";
let 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;
}
}
};
};
return button;
}