[1] https://github.com/mfontanini/presenterm
[2] https://www.ssp.sh/brain/markdown-presentations-or-slides/
When the key press event is triggered current is to be increased or decreased if two conditions are met. One shouldn't check just one, take action then change it back if the other condition isn't met.
if(e.key == 'j'){ cur++; }
if(e.key == 'k'){ cur--; }
if(cur < 0){ cur = 0; }
if(cur >= sl.length){ cur = sl.length - 1; }
something like... if(cur<sl.length && e.key=='j'){ cur++ }
else if(cur>0 && e.key=='k'){ cur-- }
The else is there because we don't need to check the other condition if the first is true.Not that the original code doesn't work. I just want to execute instructions needed and avoid unnecessary ones if it is simple enough. The case where we try to increase beyond the array size would still trigger the second check. Even more correct would be:
if(e.key == 'j'){
if(cur < sl.length){
cur++;
}
}else if(e.key == 'k'){
if(cur > 0){
cur--;
}
}
To make it uglier the if can go... cur<sl.length && e.key=='j' && cur++;
cur>0 && e.key=='k' && cur--
As it won't check the next condition if the first fails.This hideous bit...
b+=("j"==d)-("k"==d)
Could be slightly less ugly and one character shorter b+=d=="j";b-=d=="k"
Then we can shovel the other conditions inthere too! b+=d=="j"&&b<l;b-=d=="k"&&b>0
You see, with just a little effort we may improve nothing. (i = slide.nextElementSibling)?.className == "slidenote" ? i : slide
]),
An alternative approach: slide.querySelector(":scope+.slidenote") ?? slide
(|| would work just as well as ??, but ?? feels more appropriate.) // golfed minslides, 173 bytes
let a=document.getElementsByClassName("slide"),b=0,c=a.length-1;
document.addEventListener("keypress",({key:d})=>{b+=("j"==d)-("k"==d),b=0>b?0:b>l?l:b,a[b].scrollIntoView()})I have a special spot in my heart for tools that do a good job of explaining themselves using their own outputs.
I wonder how hard it would be to add the cute old PowerPoint style transitions using CSS
Why would you use it? In PowerPoint the point of notes is to have an aside view for the presenter for extra info. Here all is revealed to the viewer.
Anyway, nice work! I created something similar for our product (a list of divs that switch visibility based on keyboard input).
that's why I will link this presentation I made, in just a few hours, for a school project. it has mobile support, automatic fullscreen, and is still lightweight. unfortunately, I lost the code for the engine alone, so I only have the "exported product".