settimeout based scrolltobottom replaced with nexttick

[jspaaks]

Pull request details

List of related issues or pull requests

Refs: #288

Describe the changes made in this pull request

This PR replaces the setTimeout based scroll-to-bottom behavior with nextTick based behavior. Also in this PR:

• I made the return object for setup() smaller for components ScreenKeywords, ScreenAuthors, and ScreenIdentifiers by moving the function defintions to separate functions
• I changed to using the fat arrow syntax for the methods in aforementioned setup()s

Instructions to review the pull request

cd $(mktemp -d --tmpdir cffinit-pr.XXXXXX)
git clone https://github.com/citation-file-format/cffinit .
git checkout <this branch>
npm clean-install
npm run dev

go to localhost:8080, see if the app works correctly. Particularly, add authors, keywords or identifiers to the point where the list is longer than what fits the page. then scroll up, then click add author/keyword/identifier. The list should scroll down smoothly to the new, emtpy item at the bottom of the list.

npm run lint
npm run test:unit:ci

[abelsiqueira]

Thanks for the PR, great work.
I noticed that the screen moves down as well as the inner box (when it's zoomed in), so I made a suggestion I found in [1].
I noticed the scrollToBottom function is the same for all screens, can it be factored out for reuse?

[1] https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376

[abelsiqueira]

Suggested change

	document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
	document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })

[abelsiqueira]

Suggested change

	document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
	document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })

[abelsiqueira]

Suggested change

	document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
	document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })

[jspaaks]

Thanks for the review, and for the useful link. I've refactored scrollToBottom to be a separate function that is now imported in 3 places. I went with block: end and inline: end, which should result in the same behavior as nearest, due to the fact that you can only be above the target element.

[abelsiqueira]

The block: 'end' option moves it up if your app is scrolled down. Should affect different devices as well as people who zoom in a lot. I don't know how it works, but block: 'nearest' seems to fix it.
Reproduce: On a fresh app, zoom to ~125%, scroll down, add a new author.

[jspaaks]

OK, made changes as requested

[abelsiqueira]

Thanks for the fixes, it's working great now. 🍋

[jspaaks]

Yay, good job being persistent. Glad we were able to get it working