Kevin Adametz
c62234e1ca
# Conflicts: # .gitignore # backend/vite.config.js # frontend/package-lock.json
93 lines
5.9 KiB
TypeScript
93 lines
5.9 KiB
TypeScript
import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization';
|
|
|
|
// Sample dot configurations
|
|
const sampleDots: DotConfig[] = [
|
|
{ id: 1, value: -1.8, x: -2, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' },
|
|
{ id: 2, value: 1.2, x: 0, imageUrl: 'https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png', title: 'Omas Annis Geburtstag', description: '02.10.2024', link: '/page2' },
|
|
{ id: 3, value: -0.6, x: 2, imageUrl: 'https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' },
|
|
{ id: 4, value: 2.0, x: 4, imageUrl: 'https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png', title: 'Wanderreiten in den Bergen', description: '04.10.2024', link: '/page4' },
|
|
{ id: 5, value: 0.8, x: 6, imageUrl: 'https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' },
|
|
{ id: 6, value: -2.9, x: 8, imageUrl: 'https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png', title: 'Oma Erna verstorben', description: '06.10.2024', link: '/page6' },
|
|
{ id: 7, value: 1.5, x: 10, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' },
|
|
{ id: 8, value: 0, x: 12, imageUrl: 'https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' },
|
|
{ id: 9, value: 3.1, x: 14, imageUrl: 'https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' },
|
|
{ id: 10, value: -1.8, x: 16, imageUrl: 'https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' },
|
|
{ id: 11, value: 1.2, x: 18, imageUrl: 'https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' },
|
|
{ id: 12, value: -0.6, x: 20, imageUrl: 'https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' },
|
|
{ id: 13, value: 2.7, x: 22, imageUrl: 'https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' },
|
|
{ id: 14, value: 0.8, x: 24, imageUrl: 'https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png', title: 'Entspannung', description: '14.10.2024', link: '/page14' },
|
|
{ id: 15, value: -2.9, x: 26, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' },
|
|
{ id: 16, value: 1.5, x: 28, imageUrl: 'https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png', title: 'Kindergeburtstag', description: '16.10.2024', link: '/page16' },
|
|
{ id: 17, value: 0, x: 30, imageUrl: 'https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' },
|
|
{ id: 18, value: 2.1, x: 32, imageUrl: 'https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' }
|
|
];
|
|
|
|
// Wait for DOM to be fully loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialize the visualization with the sample dots
|
|
const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, {
|
|
// Optional custom configuration
|
|
dotRadius: 8,
|
|
tooltipWidth: 200,
|
|
tooltipHeight: 150
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', () => {
|
|
visualization.resize();
|
|
});
|
|
|
|
// Example of updating dots dynamically (if needed)
|
|
/*
|
|
const updateButton = document.createElement('button');
|
|
updateButton.textContent = 'Update Data';
|
|
updateButton.classList.add('button');
|
|
updateButton.style.marginTop = '10px';
|
|
document.body.appendChild(updateButton);
|
|
|
|
updateButton.addEventListener('click', () => {
|
|
// Generate some new random data with image tooltips
|
|
const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({
|
|
id: i + 1,
|
|
value: Math.random() * 6 - 3, // Random value between -3 and 3
|
|
x: i - 3,
|
|
imageUrl: `https://picsum.photos/200/150?random=${i+10}`,
|
|
title: `Point ${i+1}`,
|
|
description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}`
|
|
}));
|
|
visualization.updateDots(newDots);
|
|
});
|
|
*/
|
|
|
|
const scrollContainer = document.querySelector('.scroll-container');
|
|
|
|
let isDown = false;
|
|
let startX;
|
|
let scrollLeft;
|
|
|
|
scrollContainer.addEventListener('mousedown', (e) => {
|
|
isDown = true;
|
|
scrollContainer.classList.add('active');
|
|
startX = e.pageX - scrollContainer.offsetLeft;
|
|
scrollLeft = scrollContainer.scrollLeft;
|
|
});
|
|
|
|
scrollContainer.addEventListener('mouseleave', () => {
|
|
isDown = false;
|
|
scrollContainer.classList.remove('active');
|
|
});
|
|
|
|
scrollContainer.addEventListener('mouseup', () => {
|
|
isDown = false;
|
|
scrollContainer.classList.remove('active');
|
|
});
|
|
|
|
scrollContainer.addEventListener('mousemove', (e) => {
|
|
if(!isDown) return;
|
|
e.preventDefault();
|
|
const x = e.pageX - scrollContainer.offsetLeft;
|
|
const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling
|
|
scrollContainer.scrollLeft = scrollLeft - walk;
|
|
});
|
|
|
|
});
|