79 lines
2.6 KiB
Plaintext
79 lines
2.6 KiB
Plaintext
---
|
|
import type {timelineEntry} from "@interfaces/timeline.ts";
|
|
const timeline: timelineEntry[] = Astro.props.timeline || [];
|
|
---
|
|
|
|
<custom-timeline>
|
|
|
|
<div class="relative z-10 grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
|
|
data-timeline>
|
|
{timeline.map((entry, index) => (
|
|
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
|
|
data-timeline-node-index={index}
|
|
>
|
|
<h3 class="text-lg font-bold">
|
|
{entry.event}
|
|
</h3>
|
|
<h4 class="font-semibold leading-none">
|
|
{entry.eventDetail}
|
|
</h4>
|
|
<time class="mb-2 mt-1 text-sm italic leading-none">
|
|
{entry.date}
|
|
</time>
|
|
{entry.description && (
|
|
<p class="text-sm font-normal">
|
|
{entry.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</custom-timeline>
|
|
|
|
<script>
|
|
import LeaderLine from "leader-line-new";
|
|
|
|
class CustomTimeline extends HTMLElement {
|
|
_eventElements: Element[];
|
|
|
|
constructor() {
|
|
super();
|
|
this._eventElements = this._getNodeElements();
|
|
this._paintLeaderLines();
|
|
|
|
}
|
|
|
|
_getNodeElements = (): Element[] => {
|
|
return Array.from(
|
|
this.querySelectorAll('[data-timeline-node-index]')
|
|
).sort(
|
|
(elementA, elementB) =>
|
|
Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
|
|
);
|
|
}
|
|
|
|
_paintLeaderLines = () => {
|
|
let pairs = this._eventElements.map((entry, index) => {
|
|
if (index < this._eventElements.length - 1) {
|
|
return [entry, this._eventElements[index + 1]];
|
|
}
|
|
}).filter(pair => pair !== undefined)
|
|
|
|
pairs.forEach(pair => {
|
|
new LeaderLine({
|
|
start: pair[0],
|
|
end: pair[1],
|
|
color: '#10ac25',
|
|
size: 3,
|
|
startSocket: "right",
|
|
endSocket: "left",
|
|
startPlug: "square",
|
|
endPlug: "arrow3"
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define('custom-timeline', CustomTimeline)
|
|
</script>
|