aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/js/base/navbar.js
blob: f0bd94b9658028df1eaa1face1450373a71f50e7 (plain) (blame)
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
"use strict";

const defaultCssElement = $("#bulma-css")[0];
const darkCssElement = $("#bulma-css-dark")[0];

function getCurrentTheme() {
    return document.cookie
        .split('; ')
        .find(row => row.startsWith('theme='))
        .split('=')[1];
}

function displayThemedElements() {
    const defaultElements = Array.from($(".show-default-mode"));
    const darkElements = Array.from($(".show-dark-mode"));

    switch (getCurrentTheme()) {
        case "":
        case "default":
            defaultElements.forEach(e => e.style.display = null);
            darkElements.forEach(e => e.style.display = 'none');
            break;
        case "dark":
            defaultElements.forEach(e => e.style.display = 'none');
            darkElements.forEach(e => e.style.display = null);
            break;
    }
}

function setStyleSheets() {
    switch (getCurrentTheme()) {
        case "":
        case "default":
            defaultCssElement.disabled = false;
            darkCssElement.disabled = true;
            break;
        case "dark":
            defaultCssElement.disabled = true;
            darkCssElement.disabled = false;
            break;
    }
}


// Executed when the page has finished loading.
document.addEventListener("DOMContentLoaded", () => {

    setStyleSheets();
    displayThemedElements();

    $('#theme-switch').on("click", () => {

        // Update cookie
        if (getCurrentTheme() === "dark") {
            document.cookie = "theme=default";
        } else {
            document.cookie = "theme=dark";
        }

        setStyleSheets();
        displayThemedElements();

        // Animations
        let switchToggle = $(".switch")[0];
        let knob = $(".knob")[0];

        if (knob.classList.contains("dark")) {
            knob.classList.remove("dark");
            knob.classList.add("light");

            // After 500ms, switch the icons
            setTimeout(function() {
                switchToggle.classList.remove("dark");
                switchToggle.classList.add("light");
            }, 100);
        } else {
            knob.classList.remove("light");
            knob.classList.add("dark");

            // After 500ms, switch the icons
            setTimeout(function() {
                switchToggle.classList.remove("light");
                switchToggle.classList.add("dark");
            }, 100);
        }
    });
});