Initial Commit

static/js/header.js

@@ -0,0 +1,23 @@
+const logo = document.getElementById('logo');
+const header = document.getElementById("header");
+const menuIcon = document.getElementById("menu-icon");
+const scrollHeaderListener = () => {
+    if (window.scrollY > 0) {
+    logo.className = "small-logo"
+    menuIcon.classList.add("small-icon")
+    } else {
+    logo.className = "logo"
+    menuIcon.classList.remove("small-icon")
+    }
+};
+
+window.addEventListener("scroll", scrollHeaderListener);
+
+function unfoldHeader() {
+    var headerItems = document.getElementById("header-items");
+    if (headerItems.className === "header-items") {
+    headerItems.classList.add("responsive")
+    } else {
+    headerItems.classList.remove("responsive")
+    }
+}

static/js/progress.js

@@ -0,0 +1,11 @@
+var h = document.documentElement,
+    b = document.body,
+    st = 'scrollTop',
+    sh = 'scrollHeight',
+    progress = document.querySelector('.progress'),
+    scroll;
+
+document.addEventListener('scroll', function() {
+    scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
+    progress.style.setProperty('--scroll', scroll + '%');
+});

static/js/slider.js

@@ -0,0 +1,50 @@
+function setActiveSlideLink(slideNr) {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    for (i = 0; i < slidelinks.length; i++) {
+    if (i == slideNr){
+        slidelinks[i].classList.add("slide-link-active");
+    } else {
+        slidelinks[i].classList.remove("slide-link-active");
+    }
+    }
+}
+
+function scrollToSlide(slideNr) {
+    const slider = document.querySelector('.slider');
+    const slides = slider.querySelector('.slides');
+    const width = slider.querySelector('.slide').clientWidth;
+    slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
+    setActiveSlideLink(slideNr);
+}
+
+function scrollToNextSlideNr(slideNr) {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    nextSlide = slideNr + 1;
+    if (nextSlide >= slidelinks.length){
+        nextSlide = 0;
+    }          
+    scrollToSlide(nextSlide);
+}
+
+function scrollToPrevSlideNr(slideNr) {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    prevSlide = slideNr - 1;
+    if (prevSlide < 0) {
+        prevSlide = slidelinks.length - 1;
+    }
+    scrollToSlide(prevSlide);
+}
+
+function scrollToNextSlide() {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    for (i = 0; i < slidelinks.length; i++) {
+        if (slidelinks[i].classList.contains("slide-link-active")){
+            nextSlide = i+1;
+            if (nextSlide >= slidelinks.length){
+                nextSlide = 0;
+            }          
+            scrollToSlide(nextSlide);
+            break;
+        }
+    }
+}

static/js/totop.js

@@ -0,0 +1,10 @@
+const scrollToTopButton = document.getElementById('totop');
+const scrollToTopListener = () => {
+    if (window.scrollY > 0) {
+        scrollToTopButton.className = "totop show";
+    } else {
+        scrollToTopButton.className = "totop hide";
+    }
+};
+
+window.addEventListener("scroll", scrollToTopListener);