Automatically scroll to current period

This commit is contained in:
PMKuipers 2023-08-04 19:59:28 +02:00
parent ba17118cfd
commit 2020098d03

View File

@ -22,6 +22,29 @@ export default {
install(Vue/*,options*/){ install(Vue/*,options*/){
let debug = new Debugger("treestudyplan-viewer"); let debug = new Debugger("treestudyplan-viewer");
debug.enable(); debug.enable();
let lastCaller = null;
/**
* Scroll current period into view
* @param {*} handle A key to pass so subsequent calls with the same key won't trigger (always triggers when null or undefined)
*/
function scrollCurrentIntoView(handle){
const elScrollContainer = document.querySelector(".r-studyplan-scrollable");
const elCurrentHeader = elScrollContainer.querySelector(".s-studyline-header-period.current");
debug.info(`scrollCurrentIntoView called with handle ${handle}`);
if(elCurrentHeader && ((!handle) || (handle != lastCaller))){
lastCaller = handle;
elCurrentHeader.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "center",
});
}
}
let strings = load_strings({ let strings = load_strings({
invalid: { invalid: {
error: 'error', error: 'error',
@ -310,6 +333,12 @@ export default {
return show; return show;
} }
}, },
mounted() {
scrollCurrentIntoView(this.value.id);
},
updated() {
scrollCurrentIntoView(this.value.id);
},
template: ` template: `
<div class='r-studyplan-content'> <div class='r-studyplan-content'>
<!-- First paint the headings--> <!-- First paint the headings-->