monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
recklesscoder 2022-10-14 23:09:17 +02:00 committed by GitHub
parent bbb6ee89cf
commit 1f01404ca4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
WebHostLib/static/assets/faq.js
View File

@ -26,24 +26,22 @@ window.addEventListener('load', () => {
adjustHeaderWidth(); adjustHeaderWidth();
// Reset the id of all header divs to something nicer // Reset the id of all header divs to something nicer
const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')); for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/); const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
for (let i=0; i < headers.length; i++){ header.setAttribute('id', headerId);
const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase() header.addEventListener('click', () => {
headers[i].setAttribute('id', headerId); window.location.hash = `#${headerId}`;
headers[i].addEventListener('click', () => header.scrollIntoView();
window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`); });
} }
// Manually scroll the user to the appropriate header if anchor navigation is used // Manually scroll the user to the appropriate header if anchor navigation is used
if (scrollTargetIndex > -1) { document.fonts.ready.finally(() => {
try{ if (window.location.hash) {
const scrollTarget = window.location.href.substring(scrollTargetIndex + 1); const scrollTarget = document.getElementById(window.location.hash.substring(1));
document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" }); scrollTarget?.scrollIntoView();
} catch(error) {
console.error(error);
} }
} });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
tutorialWrapper.innerHTML = tutorialWrapper.innerHTML =

26
WebHostLib/static/assets/gameInfo.js
View File

@ -26,24 +26,22 @@ window.addEventListener('load', () => {
adjustHeaderWidth(); adjustHeaderWidth();
// Reset the id of all header divs to something nicer // Reset the id of all header divs to something nicer
const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')); for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/); const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
for (let i=0; i < headers.length; i++){ header.setAttribute('id', headerId);
const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase() header.addEventListener('click', () => {
headers[i].setAttribute('id', headerId); window.location.hash = `#${headerId}`;
headers[i].addEventListener('click', () => header.scrollIntoView();
window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`); });
} }
// Manually scroll the user to the appropriate header if anchor navigation is used // Manually scroll the user to the appropriate header if anchor navigation is used
if (scrollTargetIndex > -1) { document.fonts.ready.finally(() => {
try{ if (window.location.hash) {
const scrollTarget = window.location.href.substring(scrollTargetIndex + 1); const scrollTarget = document.getElementById(window.location.hash.substring(1));
document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" }); scrollTarget?.scrollIntoView();
} catch(error) {
console.error(error);
} }
} });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
gameInfo.innerHTML = gameInfo.innerHTML =

26
WebHostLib/static/assets/glossary.js
View File

@ -26,24 +26,22 @@ window.addEventListener('load', () => {
adjustHeaderWidth(); adjustHeaderWidth();
// Reset the id of all header divs to something nicer // Reset the id of all header divs to something nicer
const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')); for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/); const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
for (let i=0; i < headers.length; i++){ header.setAttribute('id', headerId);
const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase() header.addEventListener('click', () => {
headers[i].setAttribute('id', headerId); window.location.hash = `#${headerId}`;
headers[i].addEventListener('click', () => header.scrollIntoView();
window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`); });
} }
// Manually scroll the user to the appropriate header if anchor navigation is used // Manually scroll the user to the appropriate header if anchor navigation is used
if (scrollTargetIndex > -1) { document.fonts.ready.finally(() => {
try{ if (window.location.hash) {
const scrollTarget = window.location.href.substring(scrollTargetIndex + 1); const scrollTarget = document.getElementById(window.location.hash.substring(1));
document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" }); scrollTarget?.scrollIntoView();
} catch(error) {
console.error(error);
} }
} });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
tutorialWrapper.innerHTML = tutorialWrapper.innerHTML =

26
WebHostLib/static/assets/tutorial.js
View File

@ -33,24 +33,22 @@ window.addEventListener('load', () => {
} }
// Reset the id of all header divs to something nicer // Reset the id of all header divs to something nicer
const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')); for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/); const headerId = header.innerText.replace(/\s+/g, '-').toLowerCase();
for (let i=0; i < headers.length; i++){ header.setAttribute('id', headerId);
const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase() header.addEventListener('click', () => {
headers[i].setAttribute('id', headerId); window.location.hash = `#${headerId}`;
headers[i].addEventListener('click', () => header.scrollIntoView();
window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`); });
} }
// Manually scroll the user to the appropriate header if anchor navigation is used // Manually scroll the user to the appropriate header if anchor navigation is used
if (scrollTargetIndex > -1) { document.fonts.ready.finally(() => {
try{ if (window.location.hash) {
const scrollTarget = window.location.href.substring(scrollTargetIndex + 1); const scrollTarget = document.getElementById(window.location.hash.substring(1));
document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" }); scrollTarget?.scrollIntoView();
} catch(error) {
console.error(error);
} }
} });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
tutorialWrapper.innerHTML = tutorialWrapper.innerHTML =

2
WebHostLib/static/styles/themes/base.css
View File

@ -1,5 +1,7 @@
html{ html{
padding-top: 110px; padding-top: 110px;
scroll-padding-top: 100px;
scroll-behavior: smooth;
} }
#base-header{ #base-header{