added ctrl-clicking to link buttons

global/globalScript.js

@@ -161,10 +161,14 @@ document.addEventListener("DOMContentLoaded", async function() {
   debugPrint("isAnimating", isAnimating)
 
   if (showLoading != "true") { 
-    removeLoadingScreen()
+    removeLoadingScreen(true)
   }
   else {
     setLoadingProgress("Cleaning up...")
+    loadingComplete = true
+    if (fakeLoadingComplete) {
+      removeLoadingScreen()
+    }
   }
 }, false)
 

global/loadingScreen.js

@@ -1,6 +1,8 @@
 let isLoading = true
 let stopLoading = false
 let loadingScreenEl = document.getElementById("loadingScreen")
+let loadingComplete = false
+let fakeLoadingComplete = false
 
 
 loadingScreenEl.className = "bgDiv"
@@ -52,18 +54,20 @@ function setLoadingProgress(newText) {
   loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
 }
 
-
 function startLoadingScreen() {
 	loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
 
-	const loadDur = randomFloat(3000, 6000)
+	const loadDur = randomFloat(2000, 4000)
   debugPrint("loadDur initial", loadDur)
 
-	setTimeout(removeLoadingScreen, loadDur)
+	setTimeout(function() {
+    if (loadingComplete) { removeLoadingScreen() }
+    fakeLoadingComplete = true
+  }, loadDur)
 }
 
 
-function removeLoadingScreen() {
+function removeLoadingScreen(rmCornerText = false) {
   if (!isLoading) { return }
 
   setLoadingProgress("Done!")
@@ -76,8 +80,9 @@ function removeLoadingScreen() {
 
     setTimeout(function() {
       loadingScreenEl.style.left = "100vw"
-      loadingScreenEl.style.pointerEvents = "none"
-      document.getElementById("loadingCornerText").remove()
+      if (rmCornerText) {
+        document.getElementById("loadingCornerText").remove()
+      }
       newTip()
     }, fadeOutDur * 1000)
   }, 500)

global/navBar.js

@@ -39,7 +39,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "",
 
   let onClick
   switch (action) {
-    case "navigate": onClick = `slideTransition('${actionValue}')`; break
+    case "navigate": onClick = `slideTransition('${actionValue}', event)`; break
     case "function": onClick = `${actionValue}`; break
     default: ""
   }

global/screenTransition.js

@@ -1,13 +1,14 @@
-function slideTransition(url) {
+let loadingScreen = document.getElementById("loadingScreen")
+let mainDiv = document.getElementById("mainDiv")
+
+function slideTransition(url, event) {
+  const ctrlPressed = event.ctrlKey
   const dur = 500
   const loadingTime = randomFloat(500, 1500)
   debugPrint("loadDur transition", loadingTime)
 
   const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards`
 
-  let loadingScreen = document.getElementById("loadingScreen")
-  let mainDiv = document.getElementById("mainDiv")
-
   loadingScreen.style.animation = slideLeft
   loadingScreen.style.pointerEvents = "auto"
   mainDiv.style.animation = slideLeft
@@ -16,6 +17,30 @@ function slideTransition(url) {
 
   setTimeout(function() {
     setLoadingProgress("Done!")
-    setTimeout(function() { document.location = url }, loadingTime)
+    setTimeout(function() {
+      if (ctrlPressed) {
+        window.open(url, "_blank")
+      }
+      else if (url.startsWith("http")) {
+        window.open(url, "_blank").focus()
+      }
+      else {
+        document.location = url
+      }
+
+      resetLoadingScreen()
+    }, loadingTime)
   }, dur + loadingTime)
 }
+
+function resetLoadingScreen() {
+  const fadeOutDur = 0.5
+
+  loadingScreen.style.left = "0vw"
+  loadingScreen.style.animation = `fade-out ${fadeOutDur}s forwards`
+  mainDiv.style.animation = "none"
+
+  setTimeout(function() {
+    loadingScreen.style.left = "100vw"
+  }, fadeOutDur * 1000)
+}

toys/index.html

@@ -20,7 +20,7 @@
 
     <ul>
       <li class="toyLi">
-        <button onclick="slideTransition('/toys/license')" class="toyContainer borderedRect">
+        <button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect">
           <img class="toyImg" src="/assets/boykisserLicenseEmpty.png">
           <div class="toyTextContainer">
             <h1>Boykisser license generator</h1>

toys/license/index.html

@@ -29,11 +29,11 @@
       <div id="optionsContainer" class="borderedRect">
         <h1 class="optionsCredits h1Top">
           Check out the
-          <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">original</a> by Chilli!<br>
+          <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
           Boykisser picture presets made by 
-          <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004')">greenbandit2004</a>.<br>
+          <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
           Please contact
-          <a onclick="slideTransition('https://www.reddit.com/u/RandomPersonDotExe')">u/RandomPersonDotExe</a>
+          <a onclick="slideTransition('https://www.reddit.com/u/RandomPersonDotExe', event)">u/RandomPersonDotExe</a>
           or Discord @bytedice for takedown requests.
         </h1><br>