notxia/notxia.github.io
1
0
Fork 0
mirror of https://github.com/NotXia/notxia.github.io.git synced 2025-12-15 19:22:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix timeline

Browse Source
This commit is contained in:
Tian Cheng (Riccardo) Xia
2024-12-29 17:55:59 +01:00
parent c9d4ecbb9d
commit dc095f7fa7
2 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/Timeline.vue
View File

@ -11,10 +11,10 @@
<li class="mr-4 absolute right-0" v-for="event in left_events" :key="props.left[event.index].title" :style="`top: ${event.offset*month_offset}px`">
<div class="relative">
<!-- Start point -->
<div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem"></div>
<div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem; bottom: 0"></div>
<div v-if="monthDifference(props.left[event.index].start, props.left[event.index].end) > 0" >
<!-- End point -->
<div v-if="!props.left[event.index].current" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem; bottom: 0"></div>
<div v-if="props.left[event.index].end <= new Date()" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem"></div>
<!-- Interval line -->
<div class="absolute rounded-full border-l-2 border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; right: -1.12rem"></div>
</div>
@ -40,7 +40,7 @@
<div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem; bottom: 0"></div>
<div v-if="monthDifference(props.right[event.index].start, props.right[event.index].end) > 0">
<!-- End point -->
<div v-if="!props.right[event.index].current" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem"></div>
<div v-if="props.right[event.index].end <= new Date()" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem"></div>
<!-- Interval line -->
<div class="absolute rounded-full border-l-2 border-we border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; left: -1.12rem"></div>
</div>
@ -64,7 +64,7 @@
<script setup lang="ts">
interface Event {
title: string, description: string, time_label: string,
start: Date, end: Date, current?: boolean
start: Date, end: Date
};
const props = defineProps({
@ -92,6 +92,10 @@
return end_date.getMonth() - start_date.getMonth() + (12 * (end_date.getFullYear() - start_date.getFullYear()));
}
function dateClip(date: Date): Date {
return date > new Date() ? new Date() : date
}
function updateTimelineSize():void {
const available_space:number = container_timeline.value?.clientHeight ?? 0;
let events_min_date:Date = new Date(),
@ -104,7 +108,7 @@
});
min_date.value = events_min_date;
max_date.value = events_max_date;
max_date.value = dateClip(events_max_date);
month_offset.value = Math.floor( available_space / (monthDifference(events_min_date, events_max_date)) );
}
@ -113,14 +117,23 @@
updateTimelineSize();
// Computes the offset w.r.t. the end of the time interval
right_events.value = props.right.map((event, index) => ({
offset: monthDifference(event.end, max_date.value),
index: index
}));
left_events.value = props.left.map((event, index) => ({
offset: monthDifference(event.end, max_date.value),
index: index
}));
right_events.value = props.right
.map((event, index) => ({
offset: monthDifference(dateClip(event.end), max_date.value),
index: index,
}))
.filter((event) => (
props.right[event.index].start <= new Date()
));
left_events.value = props.left
.map((event, index) => ({
offset: monthDifference(dateClip(event.end), max_date.value),
index: index,
}))
.filter((event) => (
props.left[event.index].start <= new Date()
));
new ResizeObserver(updateTimelineSize).observe(document.querySelector("html") as Element)
})