purldb/packagedb/templates/base.html at f5451a10895ab30749b204446ded2f2e271c1e97 · aboutcode-org/purldb · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}PurlDB.io{% endblock %}</title>
    <link rel="icon" href="{% static 'images/favicon.ico' %}" />

    <link rel="stylesheet" href="{% static 'css/bulma.css' %}" />
    <link rel="stylesheet" href="{% static 'css/custom.css' %}" />
    <link rel="stylesheet" href="{% static 'css/font-awesome.css' %}" />
    <link rel="stylesheet" href="{% static 'css/bulma-tooltip.css' %}" />

    <script src="{% static 'js/clipboard-2.0.0.min.js' %}" integrity="sha384-5tfO0soa+FisnuBhaHP2VmPXQG/JZ8dLcRL43IkJFzbsXTXT6zIX8q8sIT0VSe2G" crossorigin="anonymous"></script>

    {% block extrahead %}{% endblock %}
</head>
<body class="Site">
    <div class="container is-max-widescreen">
        {% include "navbar.html" %}
        {% block content %}{% endblock %}
        {% include "footer.html" %}
    </div>

    {% block scripts %}
    {% endblock %}

    {% block javascript %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Set initial data-tooltip value
            document.querySelectorAll('.btn-clipboard').forEach(button => {
                console.info('span:', button.querySelector('span'));
                const span = button.querySelector('span');
                if (span && !span.getAttribute('data-tooltip')) {
                    span.setAttribute('data-tooltip', 'Copy to clipboard');
                    span.setAttribute('class', 'tooltip-narrow');
                }
            });

            // clipboard.js
            let clip = new ClipboardJS(".btn-clipboard", {
                target: function (trigger) {
                    return trigger.nextElementSibling
                }
            });

            clip.on("success", function (clip) {
                const button = clip.trigger;
                const span = button.querySelector('span');
                span.setAttribute('data-tooltip', 'Copied!');
                span.setAttribute('class', 'tooltip-narrow-success');
                span.classList.add('has-tooltip-active');
                button.classList.add('tooltip-visible');
                clip.clearSelection()
            });

            clip.on("error", function (e) {
                console.error('Failed to copy: ', e);
                const span = e.trigger.querySelector('span');
                span.setAttribute('data-tooltip', 'Failed to copy');
            });

            // Display button when mouse enters the copyable area.
            document.querySelectorAll('.btn-clipboard').forEach(button => {
                const span = button.querySelector('span');
                if (span) {
                    span.setAttribute('data-original-tooltip', span.getAttribute('data-tooltip'));
                    button.nextElementSibling.addEventListener('mouseenter', () => {
                        button.style.display = '';
                    });
                }
            });

            //Adjust tooltip position when close to page left/right border.
            document.querySelectorAll('.has-tooltip-multiline').forEach(el => {
                const rect = el.getBoundingClientRect();
                if (rect.left < 100) {
                    el.classList.add('has-tooltip-right');
                } else if (rect.right > window.innerWidth - 100) {
                    el.classList.add('has-tooltip-left');
                }
            });


            //<!-- Tooltips that can contain clickable links. -->
            const tooltipTriggers = document.querySelectorAll('.tooltip-trigger');

            function hideTooltipWithDelay(tooltipContent) {
                setTimeout(() => {
                    if (!tooltipContent.matches(':hover') && !tooltipContent.previousElementSibling.matches(':hover')) {
                         tooltipContent.style.display = 'none';
                    }
                }, 200); // Delay to allow the user to hover over the tooltip
            }

            tooltipTriggers.forEach(trigger => {
                trigger.addEventListener('mouseenter', function() {
                    const tooltipContent = this.nextElementSibling;

                    if (tooltipContent) {
                       tooltipContent.style.display = 'block';
                    }
                });

                trigger.addEventListener('mouseleave', function() {
                    const tooltipContent = this.nextElementSibling;

                    if (tooltipContent) {
                        hideTooltipWithDelay(tooltipContent);
                    }
                });
            });

            // Keep the tooltip visible when the user hovers over the tooltip itself
            document.querySelectorAll('.tooltip-content').forEach(content => {
                content.addEventListener('mouseenter', function() {
                    this.style.display = 'block';
                });

                content.addEventListener('mouseleave', function() {
                    hideTooltipWithDelay(this);
                });
            });

          });
    </script>

    {% endblock %}
</body>
</html>