website/script.js at main · themesjs/website · 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
platformLinkDisplay = document.getElementById("platformLinkDisplay");

function show_platform(platform) {
    switch (platform) {
        case "themesjs":
            platformLinkDisplay.innerText = "https://use.themesjs.de/releases/latest/themesjs.min.js";
            break;
        case "download":
            window.open("https://use.themesjs.de/releases/latest/themesjs.min.js", "_blank");
            break;
        case "jsdelivr":
            platformLinkDisplay.innerText = "https://cdn.jsdelivr.net/gh/themes-js/themes.js/themes.min.js";
            break;
    }
}

function copyPlatformLink() {
    navigator.clipboard.writeText(document.getElementById('platformLinkDisplay').innerText);
    document.querySelectorAll(".platformLink>*").forEach((element) => {
        element.style.backgroundColor = "#888";
        window.setTimeout(() => element.style.backgroundColor = "var(--slide_platforms_bg-color)", 250);
    });
}

function setPlatformlinkWidth() { document.getElementById("platformLink").style.width = document.getElementById("platformContainer").offsetWidth + "px" };
window.addEventListener("load", setPlatformlinkWidth);
window.addEventListener("resize", setPlatformlinkWidth);

// Catchphrases
const catchphrases = [
    'The <span class="background-accent">only library</span> you will ever need to theme your Website.',
    'The <span class="background-accent">only library</span> you will ever need to theme your App.',
    'Revamp your Website with seamless <span class="background-accent">theme integration</span>.',
    '<span class="background-accent">Transform</span> the look of your Website with Themes.js!',
    'Revamp your App with seamless <span class="background-accent">theme integration</span>.',
    '<span class="background-accent">Transform</span> the look of your App with Themes.js!',
    '<span class="background-accent">Customize</span> your Website with Themes.js!',
    'Create stunning <span class="background-accent">Themes</span> with Themes.js!',
    'Take your design to the <span class="background-accent">next level</span>.',
    'The <span class="background-accent">best</span> way to theme your Website.',
    '<span class="background-accent">Customize</span> your App with Themes.js!',
    'Let your Website be <span class="background-accent">unforgettable</span>.',
    'The easiest <span class="background-accent">Theme managment</span> Tool.',
    'Simplify your <span class="background-accent">Theme management</span>.',
    'The <span class="background-accent">best</span> way to theme your App.',
    'Let your App be <span class="background-accent">unforgettable</span>.',
    'Make your Website <span class="background-accent">stand out</span>!',
    'Make your Website <span class="background-accent">beautiful</span>.',
    '<span class="background-accent">Theme management</span> made easy!',
    'Make your Website <span class="background-accent">unique</span>.',
    'Make your App <span class="background-accent">beautiful</span>.',
    'Unleash your <span class="background-accent">creativity</span>!',
    'Make your App <span class="background-accent">stand out</span>!',
    'Let your Website <span class="background-accent">shine</span>!',
    'Make your Website <span class="background-accent">pop</span>!',
    'Make your App <span class="background-accent">unique</span>.',
    'Let your App <span class="background-accent">shine</span>!',
    'Make your App <span class="background-accent">pop</span>.'
];
var currentCatchphrase = 0;
const catchphrase = document.getElementById("catchphrase");

window.setInterval(() => {
    // Get a random catchphrase that is not the current one and also not ±1 of the current one
    while (true) {
        var randomCatchphrase = Math.floor(Math.random() * catchphrases.length);
        if (randomCatchphrase != currentCatchphrase && randomCatchphrase != currentCatchphrase + 1 && randomCatchphrase != currentCatchphrase - 1) break;
    }
    currentCatchphrase = randomCatchphrase;
    // Fade out the current catchphrase
    catchphrase.style.opacity = 0;
    window.setTimeout(() => {
        // Change the text
        catchphrase.innerHTML = catchphrases[currentCatchphrase];
        // Fade in the new catchphrase
        catchphrase.style.opacity = 1;
    }, 1000);

}, 15000);

function setCatchphraseHeight() {
    catchphrase.innerHTML = catchphrases.reduce((a, b) => a.length > b.length ? a : b);
    catchphrase.style.height = catchphrase.offsetHeight + "px";
    catchphrase.innerHTML = catchphrases[currentCatchphrase];
}
window.setTimeout(setCatchphraseHeight, 10);

// Arrow down
const arrow_down = document.getElementById("arrow-down")

function scrollEvent() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        arrow_down.style.cursor = "initial";
        arrow_down.style.opacity = "0";
    } else {
        arrow_down.style.cursor = "pointer";
        arrow_down.style.opacity = "1";
    }
}
window.addEventListener("scroll", scrollEvent);
scrollEvent();
arrow_down.addEventListener("click", () => {
    arrow_down.scrollIntoView({ behavior: "smooth" });
});

// Arrow to bottom or top
document.getElementById("arrow_bottom").addEventListener("click", () => {
    document.getElementById("slide-docs").scrollIntoView({ behavior: "smooth" });
});
document.getElementById("arrow_top").addEventListener("click", () => {
    document.getElementById("slide-title").scrollIntoView({ behavior: "smooth" });
});