blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 12:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(Calendar scroll): extends the id of the scroll anchor to include hour/day/week and changes the logic to search for the anchor depend on the week or day view

Browse Source
This commit is contained in:
SimonGschnell
2024-11-12 09:48:03 +01:00
parent 35691b39c4
commit 6cf7a8e35e
3 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Calendar/Calendar.js
+21 -9
View File
@@ -59,19 +59,23 @@ export default {
},
watch:{
// scroll to the first event if the html element was found
scrollTime(newScrollTime){
let previousScrollAnchor = document.getElementById('scroll' + (newScrollTime-1) + this.focusDate.w) // scroll the Stundenplan to the closest event
let scrollAnchor = document.getElementById('scroll' + newScrollTime+this.focusDate.w);
async scrollTime(newScrollTime){
// scroll the Stundenplan to the closest event
await Vue.nextTick();
let previousScrollAnchor = document.getElementById('scroll' + (newScrollTime-1) + this.focusDate.d + this.focusDate.w)
let scrollAnchor = document.getElementById('scroll' + newScrollTime+this.focusDate.d+this.focusDate.w);
if (previousScrollAnchor)
{
previousScrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
}else{
if (scrollAnchor) {
}
else
{
if (scrollAnchor)
{
scrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
}
},
emits: [
@@ -120,12 +124,20 @@ export default {
return result;
}, {});
},
// returns the hour of the earliest event
// returns the hour of the earliest event, used to scroll to the events in the calendar (week / day view)
scrollTime: function () {
if (this.events && Array.isArray(this.events) && this.events.length > 0) {
let filteredEvents = this.events.filter(event => {
// week view filters the elements only for the same week
let eventDate = new CalendarDate(new Date(event.datum));
return this.focusDate.w == eventDate.w;
if(this.mode == 'week'){
return this.focusDate.w == eventDate.w;
}
// day view filters the elements for the same day and the same week
else if(this.mode == 'day'){
return this.focusDate.d == eventDate.d && this.focusDate.w == eventDate.w;
}
})
// return the first beginning time of the filtered events
if(filteredEvents.length > 0)
public/js/components/Calendar/Day/Page.js
+1 -1
View File
@@ -149,7 +149,7 @@ export default {
</div>
</div>
<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
<div :id="'scroll'+hour+week" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div :id="'scroll'+hour+focusDate.d+week" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div v-if="hourPosition" class="position-absolute border-top small" style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
</div>
public/js/components/Calendar/Week/Page.js
+1 -1
View File
@@ -151,7 +151,7 @@ export default {
</div>
</div>
<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
<div :id="'scroll'+hour+week" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div :id="'scroll'+hour+focusDate.d+week" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div v-if="hourPosition" class="position-absolute border-top small" style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
</div>