Corwin Perren
40a673a418
All checks were successful
Build and Test - Staging / determine_version (pull_request) Successful in 30s
Build and Test - Staging / build_and_push (pull_request) Successful in 2m21s
Build and Test - Staging / test (pull_request) Successful in 2s
Build and Test - Staging / deploy_staging (pull_request) Successful in 5s
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import LeaderLine from "leader-line-new";
|
|
|
|
class CustomTimeline extends HTMLElement {
|
|
_eventElements: Element[];
|
|
|
|
constructor() {
|
|
super();
|
|
this._eventElements = this._getNodeElements();
|
|
|
|
|
|
window.addEventListener("load", this._paintLeaderLines);
|
|
|
|
}
|
|
|
|
_getNodeElements = (): Element[] =>
|
|
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) |