https://ivaprime.com/static/js/alerts.js

1const Alerts = new class {
2    constructor () {
3        // Show cookie info alert if the user has not previously dismissed it and app is running in browser
4        document.addEventListener("DOMContentLoaded", () => {
5            if (!UserPreferences.get("cookieConsentGiven") && !Utilities.isTauriApp()) {
6                Alerts.showCookieConsentDisclaimer()
7            };
8        });
9    };
10
11
12    /**
13     * Create an orange alert with a lifetime of 5 s.
14     * 
15     * @param {String} title - Title of the alert 
16     * @param {String} body  - Body of alert, can also be html
17     * @param {number} lifetime - Alert lifetime in s
18     * @param {String} color - CSS color for left border and svg icon
19     */
20    warning(title, body, lifetime=5, color="orange", ) {
21        this.showAlert(
22            title,
23            body,
24            lifetime,
25            color,
26        );
27    };
28
29
30    /**
31     * Create a red alert with infinite lifetime.
32     * 
33     * @param {String} title - Title of the alert 
34     * @param {String} body  - Body of alert, can also be html
35     * @param {number} lifetime - Alert lifetime in s
36     * @param {String} color - CSS color for left border and svg icon
37     */
38    error(title, body, lifetime=-1, color="red") {
39        this.showAlert(
40            title,
41            body,
42            lifetime,
43            color,
44        );
45    };
46
47
48    /**
49     * Create an alert and append it to the alert container.
50     * 
51     * @param {String} title - Title of the alert 
52     * @param {String} body  - Body of alert, can also be html
53     * @param {number} lifetime - Alert lifetime in s
54     * @param {String} color - CSS color for left border and svg icon
55     */
56    showAlert(title, body, lifetime=5, color="orange", ) {
57        // Select alert parent container
58        const alertsContainer = document.getElementById("alerts-container");
59        
60        // Create new alert element
61        const alert = document.createElement('div');
62        alert.classList.add("alert");
63        alert.style.borderColor = color;
64
65        // Alert icon
66        const alertIconContainer = document.createElement("DIV");
67        alertIconContainer.classList.add("alert-icon");
68        alert.appendChild(alertIconContainer);
69        const alertIcon = document.createElement('svg');
70        alertIcon.innerHTML = `
71            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
72                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.82664 2.22902C10.7938 0.590326 13.2063 0.590325 14.1735 2.22902L23.6599 18.3024C24.6578 19.9933 23.3638 22 21.4865 22H2.51362C0.63634 22 -0.657696 19.9933 0.340215 18.3024L9.82664 2.22902ZM10.0586 7.05547C10.0268 6.48227 10.483 6 11.0571 6H12.9429C13.517 6 13.9732 6.48227 13.9414 7.05547L13.5525 14.0555C13.523 14.5854 13.0847 15 12.554 15H11.446C10.9153 15 10.477 14.5854 10.4475 14.0555L10.0586 7.05547ZM14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18Z" fill="${color}"/>
73            </svg>
74        `;
75        alertIconContainer.appendChild(alertIcon);
76
77        // Alert main body for title and text
78        const alertBody = document.createElement('div');
79        alertBody.classList.add("alert-body")
80        
81        // Title
82        const alertTitle = document.createElement('h4');
83        alertTitle.innerHTML = title;
84        
85        // Alert text
86        const alertText = document.createElement("div");
87        alertText.classList.add("alert-text")
88        alertText.innerHTML = body;
89        
90        
91        alertBody.append(alertTitle)
92        alertBody.append(alertText)
93        alert.appendChild(alertBody);
94
95        // Close button
96        const closeButton = document.createElement('span');
97        closeButton.classList.add("alert-close-button")
98        closeButton.textContent = '×';
99        closeButton.addEventListener('click', function (e) {
100            Alerts.removeAlert(alert)
101        });
102        alert.appendChild(closeButton);
103
104        // Insert new alert as first child
105        alertsContainer.insertBefore(alert, alertsContainer.firstChild);
106
107
108        // If the alert has a finite lifetime, remove it after the amount specified
109        if (lifetime !== -1) {
110            setTimeout(function (e) {
111                Alerts.removeAlert(alert)
112            }, lifetime*1000);
113        };
114    };
115
116
117    /**
118     * Remove alert after playing animation
119     * 
120     * @param {HTMLElement} alert - Alert HTML element
121     * @param {number} animationDuration - Duration of fade out animation in s
122     */
123    removeAlert(alert, animationDuration=0.5) {
124        // Create temporary css class to set the height of the alert
125        // to its current height
126        const currentHeight = alert.offsetHeight;
127        const tempClass = 'alter-temp-fixed-height-' + Utilities.newUUID();
128        const styleEl = document.createElement('style');
129        styleEl.innerHTML = `.${tempClass} { height: ${currentHeight}px; }`;
130        document.head.appendChild(styleEl);
131        alert.classList.add(tempClass);
132        alert.offsetHeight; // Force update the height by reading it
133
134        // Add class
135        alert.setAttribute("collapsed", "")
136        
137        // Remove alert and temporary css class after animation is done
138        setTimeout(() => {
139            alert.remove();
140            styleEl.parentNode.removeChild(styleEl);
141        }, animationDuration*1000);
142    };
143
144
145    /**
146     * Show the cookie info alert
147     */
148    showCookieConsentDisclaimer() {
149        // Select alert parent container
150        const alertsContainer = document.getElementById("alerts-container");
151        
152        // Create new alert element
153        const alert = document.createElement('div');
154        alert.classList.add("alert");
155        alert.classList.add("cookie-consent")
156        alert.style.borderColor = "#45a049";
157
158        // Alert main body for title and text
159        const alertBody = document.createElement('div');
160        alertBody.classList.add("alert-body");
161        alertBody.classList.add("cookie-consent-body");
162        
163        // Title
164        const alertTitle = document.createElement('h4');

165        alertTitle.innerHTML = "Cookie disclaimer";
166        
167        // Alert text
168        const alertText = document.createElement("div");
169        alertText.classList.add("alert-text");
170        alertText.innerHTML = `
171        <p>
172            IVA Prime uses cookies to store user preferences across sessions. No third-party cookies are used to track or profile users.
173        </p>
174        <p>
175            <a href="/about#privacy-policy" target="_blank" class="underlined-link">Click here for more details</a>
176        </p>`;
177        
178        
179        // Close button
180        const agreeButton = document.createElement('span');
181        agreeButton.classList.add(
182            "button-round",
183            "button-green",
184            "cookie-consent-agree-button"
185        );
186        agreeButton.textContent = "Understood";
187        agreeButton.addEventListener('click', function (e) {
188            UserPreferences.set("cookieConsentGiven", true);
189            Alerts.removeAlert(alert);
190        });
191        
192        
193        // Construct element
194        alertBody.append(alertText)
195        alertBody.appendChild(agreeButton);
196        alert.appendChild(alertBody);
197
198
199        // Add alert
200        alertsContainer.insertBefore(alert, alertsContainer.firstChild);
201    };
202};