Testing hugo

public/themes/novela/assets/js/addFormStyles.js

@@ -0,0 +1,27 @@
+document.getElementById("submitButton").addEventListener("click", addErrorStyles);
+document.getElementById("emailInput").addEventListener("keyup", updateStyles);
+
+subscriptionForm = document.getElementById("subscriptionForm");
+emailField = document.getElementById("emailInput");
+submitted = false;
+
+function addErrorStyles(){
+    submitted = true;
+    updateClasses();
+}
+
+function updateStyles(){
+    if (submitted === true){
+        updateClasses();
+    }
+}
+
+function updateClasses(){
+    if(emailField.validity.valid){
+        subscriptionForm.classList.remove("submitted-form");
+    }
+    else{
+        subscriptionForm.classList.add("submitted-form");
+        emailField.classList.add("submitted-input");
+    }
+}

public/themes/novela/assets/js/collapseAuthors.js

@@ -0,0 +1,22 @@
+let collapsed = true;
+
+function displayCoauthors(){
+    document.getElementById("uncollapsedCoauthors").classList.remove("hidden");
+}
+
+function hideCoauthors(){
+    document.getElementById("uncollapsedCoauthors").classList.add("hidden");
+}
+
+function bindCollapseAuthors() {
+    const collapsedCoauthorsElement = document.getElementById("collapsedCoauthors");
+
+    if (collapsedCoauthorsElement === null) {
+        return;
+    }
+
+    collapsedCoauthorsElement.addEventListener("click", displayCoauthors);
+    document.getElementById("uncollapsedAction").addEventListener("click", hideCoauthors);
+}
+
+bindCollapseAuthors();

public/themes/novela/assets/js/copyUrl.js

@@ -0,0 +1,18 @@
+document.getElementById("copyButton").addEventListener("click", copyToClipboard);
+    
+let currentUrl = window.location;
+let copyTextContainer = document.getElementById("copyText");
+let toolTip = document.getElementById("toolTip");
+
+function copyToClipboard(){
+    copyTextContainer.value = currentUrl
+    copyTextContainer.focus();
+    copyTextContainer.select();
+    document.execCommand("copy");
+
+    toolTip.style.animationName = "pan-toolbar";
+
+    setTimeout(function(){
+         toolTip.style.removeProperty('animation-name');
+    }, 2000);
+}

public/themes/novela/assets/js/initColors.js

@@ -0,0 +1,58 @@
+
+let be = document.getElementsByTagName("BODY")[0];
+
+initColors();
+
+function initColors(){
+    if (localStorage.getItem("isLight") === null) {
+        localStorage.setItem("isLight", 'true');
+    }
+
+    if (localStorage.getItem("isLight") === 'false'){
+        makeDark();
+    }
+    else{
+        makeLight();
+    }
+}
+
+
+function makeDark(){
+    be.style.setProperty('--primary', "#fff");
+    be.style.setProperty('--secondary', "#fff");
+    be.style.setProperty('--grey', "#73737D");
+    be.style.setProperty('--background-color', "#111216");
+    be.style.setProperty('--accent', "#E9DAAC");
+    be.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)");
+    be.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)");
+    be.style.setProperty('--articleText', "#fff");
+    be.style.setProperty('--track', "rgba(255, 255, 255, 0.3)");
+    be.style.setProperty('--progress', "#fff");
+    be.style.setProperty('--card', "#1D2128");
+    be.style.setProperty('--error', "#EE565B");
+    be.style.setProperty('--success', "#46B17B");
+    be.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)");
+    be.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)");
+    be.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)");
+    be.style.setProperty('--tooltip', "#000");
+}
+
+function makeLight(){
+    be.style.setProperty('--primary', "");
+    be.style.setProperty('--secondary', "");
+    be.style.setProperty('--grey', "");
+    be.style.setProperty('--background-color', "");
+    be.style.setProperty('--accent', "");
+    be.style.setProperty('--hover', "");
+    be.style.setProperty('--gradient', "");
+    be.style.setProperty('--articleText', "");
+    be.style.setProperty('--track', "");
+    be.style.setProperty('--progress', "");
+    be.style.setProperty('--card', "");
+    be.style.setProperty('--error', "");
+    be.style.setProperty('--success', "");
+    be.style.setProperty('--errorBackground', "");
+    be.style.setProperty('--horizontalRule', "");
+    be.style.setProperty('--inputBackground', "");
+    be.style.setProperty('--tooltip', "lightgrey");
+}

public/themes/novela/assets/js/progressBar.js

@@ -0,0 +1,42 @@
+window.addEventListener("scroll", updateProgress);
+    
+progressBar = document.getElementById("progressBar");
+scrollProgress = document.getElementById("progressIndicator");
+
+if (document.getElementById("subscriptionSection")){
+    articleSubscription = document.getElementById("subscriptionSection").offsetHeight;
+}
+else{
+    articleSubscription = 0;
+}
+
+if(document.getElementById("articleNext")){
+    articleNext = document.getElementById("articleNext").offsetHeight;
+}
+else{
+    articleNext = 0;
+}
+
+footerSection = 150;
+
+bottomOffset = ((articleSubscription + articleNext + footerSection + 250) / document.body.scrollHeight) * 100 ;
+bottomOffset += bottomOffset * 1.1;
+
+
+function updateProgress(){
+    let percentScrolled = (window.pageYOffset / document.body.scrollHeight) * (100 + bottomOffset);
+    scrollProgress.style.transform = "translateY(" + percentScrolled + "%)";
+
+    if (percentScrolled > 100){
+        progressBar.style.animationName = "progress-fade-out";
+        setTimeout(function(){
+            progressBar.style.opacity = "0";
+        }, 500);
+    }
+    else{
+        progressBar.style.animationName = "progress-fade-in";
+        setTimeout(function(){
+            progressBar.style.opacity = "1";
+        }, 500);
+    }
+}

public/themes/novela/assets/js/toggleBorder.js

@@ -0,0 +1,13 @@
+window.addEventListener("resize", adjustListBorder);
+
+let listRemoveWidth = window.matchMedia("(max-width: 1070px)");
+let listAddWidth = window.matchMedia("(min-width: 1070px)");
+
+function adjustListBorder(){
+    if (listRemoveWidth.matches) {
+        document.getElementById("articlesList").classList.remove("author-alc");
+    }
+    else if (listAddWidth.matches) {
+        document.getElementById("articlesList").classList.add("author-alc");
+    }
+}

public/themes/novela/assets/js/toggleColors.js

@@ -0,0 +1,104 @@
+document.getElementById("themeColorButton").addEventListener("click", toggleColors);
+
+let bodyElement = document.getElementsByTagName("BODY")[0];
+let moonOrSun = document.getElementById("moonOrSun");
+let sunRays = document.getElementById("sunRays");
+let moonMask = document.getElementById("moonMask");
+
+initAnimation();
+
+function initAnimation(){
+    if (localStorage.getItem("isLight") === 'true'){
+        moonMask.style.top = "-8px";
+        moonMask.style.right = "-5px";
+        moonOrSun.style.transform = "scale(1)"
+        sunRays.style.transform = "scale(0.1)"
+    }
+    else{
+        moonMask.style.top = "-25px";
+        moonMask.style.right = "-15px";
+        moonOrSun.style.transform = "scale(0.5)"
+        sunRays.style.transform = "scale(0.6)"
+    }
+}
+
+function toggleColors(){
+    if (localStorage.getItem("isLight") === 'true'){
+        makeDark();
+
+        moonMask.classList.add("mask-to-sun-animation");
+        moonOrSun.classList.add("to-sun-animation");
+        sunRays.classList.add("expand-rays");
+
+        setTimeout(function(){
+            sunRays.classList.remove("expand-rays");
+        }, 500);
+        setTimeout(function(){
+            moonMask.classList.remove("mask-to-sun-animation");
+            moonOrSun.classList.remove("to-sun-animation");
+            initAnimation();
+        }, 400);
+
+        localStorage.setItem("isLight", 'false');
+    }
+    else{
+        makeLight();
+
+        moonMask.classList.add("mask-to-moon-animation");
+        moonOrSun.classList.add("to-moon-animation");
+        sunRays.classList.add("contract-rays");
+
+
+        setTimeout(function(){
+            sunRays.classList.remove("contract-rays");
+        }, 500);
+        setTimeout(function(){
+            moonMask.classList.remove("mask-to-moon-animation");
+            moonOrSun.classList.remove("to-moon-animation");
+            sunRays.classList.remove("contract-rays");
+            initAnimation();
+        }, 400);
+
+        localStorage.setItem("isLight", 'true');
+    }
+}
+
+function makeDark(){
+    bodyElement.style.setProperty('--primary', "#fff");
+    bodyElement.style.setProperty('--secondary', "#fff");
+    bodyElement.style.setProperty('--grey', "#73737D");
+    bodyElement.style.setProperty('--background-color', "#111216");
+    bodyElement.style.setProperty('--accent', "#E9DAAC");
+    bodyElement.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)");
+    bodyElement.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)");
+    bodyElement.style.setProperty('--articleText', "#fff");
+    bodyElement.style.setProperty('--track', "rgba(255, 255, 255, 0.3)");
+    bodyElement.style.setProperty('--progress', "#fff");
+    bodyElement.style.setProperty('--card', "#1D2128");
+    bodyElement.style.setProperty('--error', "#EE565B");
+    bodyElement.style.setProperty('--success', "#46B17B");
+    bodyElement.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)");
+    bodyElement.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)");
+    bodyElement.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)");
+    bodyElement.style.setProperty('--tooltip', "#000");
+}
+
+function makeLight(){
+    bodyElement.style.setProperty('--primary', "");
+    bodyElement.style.setProperty('--secondary', "");
+    bodyElement.style.setProperty('--grey', "");
+    bodyElement.style.setProperty('--background-color', "");
+    bodyElement.style.setProperty('--accent', "");
+    bodyElement.style.setProperty('--hover', "");
+    bodyElement.style.setProperty('--gradient', "");
+    bodyElement.style.setProperty('--articleText', "");
+    bodyElement.style.setProperty('--track', "");
+    bodyElement.style.setProperty('--progress', "");
+    bodyElement.style.setProperty('--card', "");
+    bodyElement.style.setProperty('--error', "");
+    bodyElement.style.setProperty('--success', "");
+    bodyElement.style.setProperty('--errorBackground', "");
+    bodyElement.style.setProperty('--horizontalRule', "");
+    bodyElement.style.setProperty('--inputBackground', "");
+    bodyElement.style.setProperty('--tooltip', "lightgrey");
+}

public/themes/novela/assets/js/toggleLayout.js

@@ -0,0 +1,32 @@
+document.getElementById("btnGrid").addEventListener("click", makeGrid);
+document.getElementById("btnRows").addEventListener("click", makeRows);
+window.addEventListener("resize", adjustListAtMobile);
+
+document.getElementById("rows").style.fill = "var(--grey)";
+
+let listRemoveWidth = window.matchMedia("(max-width: 735px)");
+let listAddWidth = window.matchMedia("(min-width: 735px)");
+let isList = false;
+
+function adjustListAtMobile(){
+    if (listRemoveWidth.matches) {
+        document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    }
+    else if (listAddWidth.matches && isList === true) {
+        document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    }
+}
+
+function makeGrid(){
+    document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    document.getElementById("tiles").style.fill = "var(--primary)";
+    document.getElementById("rows").style.fill = "var(--grey)";
+    isList = false;
+}
+
+function makeRows(){
+    document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    document.getElementById("rows").style.fill = "var(--primary)";
+    document.getElementById("tiles").style.fill = "var(--grey)";
+    isList = true;
+}

public/themes/novela/assets/js/toggleLogos.js

@@ -0,0 +1,15 @@
+window.addEventListener("resize", toggleLogo);
+
+let lrw = window.matchMedia("(max-width: 735px)");
+let law = window.matchMedia("(min-width: 735px)");
+
+function toggleLogo(){
+    if (lrw.matches) {
+        document.getElementById("logo-mobile").classList.remove("hidden");
+        document.getElementById("logo-desktop").classList.add("hidden");
+    }
+    else if (law.matches) {
+        document.getElementById("logo-mobile").classList.add("hidden");
+        document.getElementById("logo-desktop").classList.remove("hidden");
+    }
+}