feat Site: Add progress bar

prplwtf · May 25, 2024 · df8e643 · df8e643
1 parent 494d5ab
commit df8e643
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 7 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,8 @@
+#ProgressBarElement {
+  border-top: 4px var(--bs-danger) solid;
+  position: fixed;
+  left: 0;
+  top: 0;
+  transition: width .4s, left 1s;
+  z-index: 5;
+}
diff --git a/configuration/Configuration.yml b/configuration/Configuration.yml
@@ -1,2 +1,2 @@
 Application:
-  Title: "Gravity"
+  Title: "gravity"
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Scripts and stylesheets -->
+    <link href="./assets/style.css" rel="stylesheet">
     <link href="./vendor/css/materialstyle.min.css" rel="stylesheet">
     <link href="./vendor/css/bootstrap-icons.min.css" rel="stylesheet">
     <script src="./vendor/js/materialstyle.min.js"></script>
@@ -20,13 +21,16 @@
     <script src="./src/App.js"></script>
     <script src="./src/imports/ImportElements.js"></script>
     <script src="./src/imports/ImportConfigurations.js"></script>
+    <script src="./src/router/ProgressBar.js"></script>
     <script src="./src/router/Route.js"></script>
     <script src="./src/router/Import.js"></script>
     <script src="./src/router/Unload.js"></script>
 
   </head>
   <body>
 
+    <div id="ProgressBarElement" style="width: 0%"></div>
+
     <div class="container py-5">
       <div id="App"></div>
     </div>

diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,18 @@
 document.addEventListener("DOMContentLoaded", (async () => {
   // Register global variables
-  App = document.getElementById("App")
-  AppTitle = document.getElementById("AppTitle")
+  var App = document.getElementById("App")
+  var AppTitle = document.getElementById("AppTitle")
+  var ProgressBarElement = document.getElementById("ProgressBarElement")
 
   // Import components
   await ImportConfigurations()
   await ImportElements()
 
-  // Navigate home
+  // Navigate
   var interval = setInterval(function() {
     if (typeof window.Configuration == 'undefined') return;
     clearInterval(interval);
 
-    Route("")
+    Route(window.location.hash)
   }, 10);
 }))
diff --git a/src/components/elements/NavigationBarElement.js b/src/components/elements/NavigationBarElement.js
@@ -3,6 +3,7 @@ function NavigationBarElement() {
   if(window.location.hash != "#blog") {
     ButtonClass = "btn-danger"
   }
+
   return `
     <div class="row">
       <div class="col-9">
@@ -11,8 +12,9 @@ function NavigationBarElement() {
         </h3>
       </div>
       <div class="col-3">
-        <button class="btn ${ButtonClass} float-end" onclick="Route('#blog')">
+        <button type="button" class="btn ${ButtonClass} float-end rounded-5" onclick="Route('#blog')">
           Blogs
+          <span class="ripple-surface"></span>
         </button>
       </div>
     </div>

diff --git a/src/components/sections/BlogSection.js b/src/components/sections/BlogSection.js
@@ -1,4 +1,5 @@
 function BlogSection() {
+  ProgressBar(100)
   return `
     ${NavigationBarElement()}
     <p> blog section </p>

diff --git a/src/imports/ImportElements.js b/src/imports/ImportElements.js
@@ -1,6 +1,6 @@
 async function ImportElements() {
   const Elements = [
-		{ Identifier: "NavigationBarElement", Path: "NavigationBarElement.js" }
+		{ Identifier: "NavigationBarElement", Path: "NavigationBarElement.js" },
 	]
 
   for (let i = Elements.length - 1; i >= 0; i--) {

diff --git a/src/router/ProgressBar.js b/src/router/ProgressBar.js
@@ -0,0 +1,25 @@
+var IsAnimating = false
+
+function ProgressBar(length) {
+  if(IsAnimating) return;
+
+  ProgressBarElement.style.opacity = 1
+  IsAnimating = true
+
+  if(length == 100) {
+    ProgressBarElement.style.width = length+"%"
+    ProgressBarElement.style.left = length+"%"
+    setTimeout(() => {
+      ProgressBarElement.style.opacity = 0
+      ProgressBarElement.style.width = 0
+      ProgressBarElement.style.left = 0
+    }, 1000);
+    setTimeout(() => {
+      IsAnimating = false
+    }, 2000)
+    return;
+  }
+
+  ProgressBarElement.style.width = length+"%"
+  IsAnimating = false
+}
diff --git a/src/router/Route.js b/src/router/Route.js
@@ -1,19 +1,26 @@
 function Route(view) {
   window.location.hash = view
   Unload("Section")
+  ProgressBar(25)
 
+
+  // #
   if(view == "" || view == "#") {
     return Import("./src/components/sections/RootSection.js", "Section", function() {
       App.innerHTML = `${RootSection()}`
+      ProgressBar(100)
     })
   }
 
+  // #blog
   if(view == "#blog") {
     return Import("./src/components/sections/BlogSection.js", "Section", function() {
       App.innerHTML = `${BlogSection()}`
+      ProgressBar(100)
     })
   }
 
+  ProgressBar(100)
   return App.innerHTML = `An unknown error occured, check your browser console for more information.`
 }