Scroll through entire element before moving to next
This is primarily so that we can read the entire chat message that comes in, not just the beginning part that fits on the screen. The implementation is still a bit jumpy and needs some work, but at least you can now use it to have a functional conversation. Addresses #3 but maybe needs more work.
This commit is contained in:
parent
aa0f1c5641
commit
f76bb30987
|
@ -55,6 +55,54 @@
|
|||
targetElement.focus()
|
||||
}
|
||||
|
||||
/**
|
||||
* Okay, so here's a slightly complicated function.
|
||||
* What we're trying to do is scroll down (in the case
|
||||
* of a long element that overflows the screen), or, if
|
||||
* we've got to the end of that element, then to move on
|
||||
* to the next one. This may not be the neatest way to
|
||||
* do it but let's start with this and see how it goes...
|
||||
*/
|
||||
function navDown() {
|
||||
// list.scrollTop > dong.offsetTop + dong.offsetHeight - (list.offsetHeight) // when this turns true, it means we've gone past
|
||||
|
||||
// Check if the parent scrolls
|
||||
if (document.activeElement?.parentElement?.scrollTop > 0) {
|
||||
|
||||
// Yes it does! Okay, we've got to handle this carefully
|
||||
let el = document.activeElement
|
||||
let scrollEl = el.parentElement
|
||||
|
||||
// If we're already maxed out, time to navigate on
|
||||
if (scrollEl.scrollTop == scrollEl.scrollTopMax) {
|
||||
nav(1)
|
||||
return
|
||||
}
|
||||
|
||||
// First, scroll down a bit
|
||||
scrollEl.scrollTop += scrollEl.offsetHeight * 0.5
|
||||
|
||||
// Now, check if we're still in view
|
||||
if (scrollEl.scrollTop > // current scroll greater than
|
||||
el.offsetTop // place where element starts
|
||||
+ el.offsetHeight // plus height of element
|
||||
- (scrollEl.offsetHeight * 0.4) // minus a wee bit
|
||||
) {
|
||||
// Now the previous thing's scrolled reasonably away
|
||||
// so we can safely focus on the next one
|
||||
nav(1)
|
||||
|
||||
// But let's just scroll back up a bit to make sure
|
||||
// everything's still in view
|
||||
scrollEl.scrollTop -= scrollEl.offsetHeight * 0.5
|
||||
}
|
||||
} else {
|
||||
// Viewport not scrollable; just navigate without
|
||||
// any funky stuff
|
||||
nav(1)
|
||||
}
|
||||
}
|
||||
|
||||
// Key-down handler
|
||||
function handleKeydown(e) {
|
||||
switch(e.key) {
|
||||
|
@ -62,7 +110,7 @@
|
|||
nav(-1)
|
||||
break
|
||||
case 'ArrowDown':
|
||||
nav(1)
|
||||
navDown()
|
||||
break
|
||||
case 'SoftLeft':
|
||||
case '[':
|
||||
|
|
Loading…
Reference in a new issue