serv/surwiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better scroll handling when toggling editing.

Browse source 
It will now retain the scroll position relative to the full document height when entering and leaving editing mode. This places the viewport closer to the contents you were watching. This is likely less disorienting
This commit is contained in:
Magnus Hovland Hoff 2018-10-01 09:01:27 +02:00
parent 619ba14b3f
commit 17c23da9bf
1 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
assets/script.js
View file

@ -82,11 +82,12 @@ function openEditor() {
textarea.style.height = rendered.clientHeight + "px";
container.classList.add('edit');
retainScrollRatio(() => {
container.classList.add('edit');
autosizeTextarea(textarea, shadow);
});
updateFormEnabledState();
autosizeTextarea(textarea, shadow);
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
textarea.focus();
@ -112,6 +113,18 @@ function openEditor() {
// TODO: edit-link in footer?
}
function retainScrollRatio(innerFunction) {
const scrollElement = document.body.parentElement;
const savedScrollRatio = scrollElement.scrollTop / (scrollElement.scrollHeight - scrollElement.clientHeight);
innerFunction();
scrollElement.scrollTop = (scrollElement.scrollHeight - scrollElement.clientHeight) * savedScrollRatio;
}
function closeEditor() {
retainScrollRatio(() => container.classList.remove('edit'));
document.activeElement && document.activeElement.blur();
}
function doSave() {
state.saving = true;
updateFormEnabledState();
@ -170,8 +183,7 @@ function openEditor() {
}
if (!result.conflict) {
container.classList.remove('edit');
document.activeElement && document.activeElement.blur();
closeEditor();
}
state.saving = false;
@ -196,8 +208,7 @@ function openEditor() {
Promise.resolve(!isEdited(form) || confirmDiscard())
.then(doReset => {
if (doReset) {
container.classList.remove('edit');
document.activeElement && document.activeElement.blur();
closeEditor();
updateFormEnabledState();
form.reset();