From 1f01404ca40c7c07856e8212dd5b0497a95dc7bd Mon Sep 17 00:00:00 2001
From: recklesscoder <57289227+recklesscoder@users.noreply.github.com>
Date: Fri, 14 Oct 2022 23:09:17 +0200
Subject: [PATCH] WebHost: Fixed scrolling to anchors (#1085)

* WebHost: Modernized anchor code

* WebHost: Fixed scrolling to anchors

* WebHost: Fixed scrolling to anchors when fonts are being loaded

* WebHost: Anchor PR changes requested by LegendaryLinux
---
 WebHostLib/static/assets/faq.js          | 26 +++++++++++-------------
 WebHostLib/static/assets/gameInfo.js     | 26 +++++++++++-------------
 WebHostLib/static/assets/glossary.js     | 26 +++++++++++-------------
 WebHostLib/static/assets/tutorial.js     | 26 +++++++++++-------------
 WebHostLib/static/styles/themes/base.css |  2 ++
 5 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/WebHostLib/static/assets/faq.js b/WebHostLib/static/assets/faq.js
index 35f46e16..1bf5e5a6 100644
--- a/WebHostLib/static/assets/faq.js
+++ b/WebHostLib/static/assets/faq.js
@@ -26,24 +26,22 @@ window.addEventListener('load', () => {
         adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
-        const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
-        const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/);
-        for (let i=0; i < headers.length; i++){
-            const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase()
-            headers[i].setAttribute('id', headerId);
-            headers[i].addEventListener('click', () =>
-                window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`);
+        for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
+            const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
+            header.setAttribute('id', headerId);
+            header.addEventListener('click', () => {
+                window.location.hash = `#${headerId}`;
+                header.scrollIntoView();
+            });
         }
 
         // Manually scroll the user to the appropriate header if anchor navigation is used
-        if (scrollTargetIndex > -1) {
-            try{
-                const scrollTarget = window.location.href.substring(scrollTargetIndex + 1);
-                document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" });
-            } catch(error) {
-                console.error(error);
+        document.fonts.ready.finally(() => {
+            if (window.location.hash) {
+                const scrollTarget = document.getElementById(window.location.hash.substring(1));
+                scrollTarget?.scrollIntoView();
             }
-        }
+        });
     }).catch((error) => {
         console.error(error);
         tutorialWrapper.innerHTML =
diff --git a/WebHostLib/static/assets/gameInfo.js b/WebHostLib/static/assets/gameInfo.js
index 8a9c8b3f..b8c56905 100644
--- a/WebHostLib/static/assets/gameInfo.js
+++ b/WebHostLib/static/assets/gameInfo.js
@@ -26,24 +26,22 @@ window.addEventListener('load', () => {
         adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
-        const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
-        const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/);
-        for (let i=0; i < headers.length; i++){
-            const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase()
-            headers[i].setAttribute('id', headerId);
-            headers[i].addEventListener('click', () =>
-                window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`);
+        for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
+            const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
+            header.setAttribute('id', headerId);
+            header.addEventListener('click', () => {
+                window.location.hash = `#${headerId}`;
+                header.scrollIntoView();
+            });
         }
 
         // Manually scroll the user to the appropriate header if anchor navigation is used
-        if (scrollTargetIndex > -1) {
-            try{
-                const scrollTarget = window.location.href.substring(scrollTargetIndex + 1);
-                document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" });
-            } catch(error) {
-                console.error(error);
+        document.fonts.ready.finally(() => {
+            if (window.location.hash) {
+                const scrollTarget = document.getElementById(window.location.hash.substring(1));
+                scrollTarget?.scrollIntoView();
             }
-        }
+        });
     }).catch((error) => {
         console.error(error);
         gameInfo.innerHTML =
diff --git a/WebHostLib/static/assets/glossary.js b/WebHostLib/static/assets/glossary.js
index 44012d69..04a29200 100644
--- a/WebHostLib/static/assets/glossary.js
+++ b/WebHostLib/static/assets/glossary.js
@@ -26,24 +26,22 @@ window.addEventListener('load', () => {
         adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
-        const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
-        const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/);
-        for (let i=0; i < headers.length; i++){
-            const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase()
-            headers[i].setAttribute('id', headerId);
-            headers[i].addEventListener('click', () =>
-                window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`);
+        for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
+            const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
+            header.setAttribute('id', headerId);
+            header.addEventListener('click', () => {
+                window.location.hash = `#${headerId}`;
+                header.scrollIntoView();
+            });
         }
 
         // Manually scroll the user to the appropriate header if anchor navigation is used
-        if (scrollTargetIndex > -1) {
-            try{
-                const scrollTarget = window.location.href.substring(scrollTargetIndex + 1);
-                document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" });
-            } catch(error) {
-                console.error(error);
+        document.fonts.ready.finally(() => {
+            if (window.location.hash) {
+                const scrollTarget = document.getElementById(window.location.hash.substring(1));
+                scrollTarget?.scrollIntoView();
             }
-        }
+        });
     }).catch((error) => {
         console.error(error);
         tutorialWrapper.innerHTML =
diff --git a/WebHostLib/static/assets/tutorial.js b/WebHostLib/static/assets/tutorial.js
index 39fc3569..1db08d85 100644
--- a/WebHostLib/static/assets/tutorial.js
+++ b/WebHostLib/static/assets/tutorial.js
@@ -33,24 +33,22 @@ window.addEventListener('load', () => {
         }
 
         // Reset the id of all header divs to something nicer
-        const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
-        const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/);
-        for (let i=0; i < headers.length; i++){
-            const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase()
-            headers[i].setAttribute('id', headerId);
-            headers[i].addEventListener('click', () =>
-                window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`);
+        for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
+            const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
+            header.setAttribute('id', headerId);
+            header.addEventListener('click', () => {
+                window.location.hash = `#${headerId}`;
+                header.scrollIntoView();
+            });
         }
 
         // Manually scroll the user to the appropriate header if anchor navigation is used
-        if (scrollTargetIndex > -1) {
-            try{
-                const scrollTarget = window.location.href.substring(scrollTargetIndex + 1);
-                document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" });
-            } catch(error) {
-                console.error(error);
+        document.fonts.ready.finally(() => {
+            if (window.location.hash) {
+                const scrollTarget = document.getElementById(window.location.hash.substring(1));
+                scrollTarget?.scrollIntoView();
             }
-        }
+        });
     }).catch((error) => {
         console.error(error);
         tutorialWrapper.innerHTML =
diff --git a/WebHostLib/static/styles/themes/base.css b/WebHostLib/static/styles/themes/base.css
index 0dbdf5f6..fca65a51 100644
--- a/WebHostLib/static/styles/themes/base.css
+++ b/WebHostLib/static/styles/themes/base.css
@@ -1,5 +1,7 @@
 html{
     padding-top: 110px;
+    scroll-padding-top: 100px;
+    scroll-behavior: smooth;
 }
 
 #base-header{