project-template/timeline.js at master · s-e-a-m/project-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
document.addEventListener('DOMContentLoaded', function() {
    const commitNodes = document.querySelectorAll('.commit-node');
    const tooltip = document.getElementById('post-tooltip');
    const tooltipTitle = document.getElementById('tooltip-title');
    const tooltipExcerpt = document.getElementById('tooltip-excerpt');
    const tooltipLink = document.getElementById('tooltip-link');

    if (!tooltip) {
        console.warn('Tooltip element #post-tooltip not found.');
        return;
    }

    commitNodes.forEach(node => {
        node.addEventListener('mouseover', function(event) {
            const title = this.dataset.title;
            const excerpt = this.dataset.excerpt;
            const url = this.dataset.url;

            tooltipTitle.textContent = title || 'Nessun titolo';
            tooltipExcerpt.textContent = excerpt || 'Nessun excerpt.';
            if (url) {
                tooltipLink.href = url;
                tooltipLink.style.display = 'inline';
            } else {
                tooltipLink.style.display = 'none';
            }


            // Posizionamento del tooltip
            // Un po' a destra e sotto il cursore
            let top = event.pageY + 15;
            let left = event.pageX + 15;

            tooltip.style.left = left + 'px';
            tooltip.style.top = top + 'px';
            tooltip.style.display = 'block';

            // Aggiustamento se il tooltip esce dalla finestra
            const rect = tooltip.getBoundingClientRect();
            if (rect.right > window.innerWidth) {
                tooltip.style.left = (window.innerWidth - rect.width - 15) + 'px';
            }
            if (rect.bottom > window.innerHeight) {
                tooltip.style.top = (event.pageY - rect.height - 15) + 'px';
            }
        });

        node.addEventListener('mousemove', function(event) {
            // Aggiorna la posizione mentre il mouse si muove sul nodo
            // per evitare che il tooltip "scatti" se il mouse si muove velocemente
             let top = event.pageY + 15;
             let left = event.pageX + 15;
             tooltip.style.left = left + 'px';
             tooltip.style.top = top + 'px';

             const rect = tooltip.getBoundingClientRect();
             if (rect.right > window.innerWidth) {
                 tooltip.style.left = (window.innerWidth - rect.width - 15) + 'px';
             }
             if (rect.bottom > window.innerHeight) {
                 tooltip.style.top = (event.pageY - rect.height - 15) + 'px';
             }
        });

        node.addEventListener('mouseout', function() {
            tooltip.style.display = 'none';
        });

        // Aggiungi un click listener per andare al post
        node.addEventListener('click', function() {
            const url = this.dataset.url;
            if (url) {
                window.location.href = url;
            }
        });
    });
});