add routing

This commit is contained in:
hippoz 2020-10-25 16:20:23 +02:00
parent 3c5cfb5f8b
commit e869b8a104

View file

@ -6,40 +6,89 @@ const changeSelected = (buttonId) => {
selectedButtonId = buttonId; selectedButtonId = buttonId;
}; };
const stripTrailingSlash = (str) => {
return str.endsWith('/') ? str.slice(0, -1) : str;
};
const peformRouteAction = (pathname) => {
const route = stripTrailingSlash(pathname);
switch (route) {
case '/': {
A('#content-container').load('/pages/home.html');
break;
}
case '/upload': {
A('#content-container').load('/pages/upload.html');
break;
}
case '/git': {
window.location.href = 'https://git.hippoz.xyz/';
break;
}
case '/about': {
A('#content-container').load('/pages/about.html');
break;
}
case '/contact': {
A('#content-container').load('/pages/contact.html');
break;
}
case '/404': {}
default: {
A('#content-container').html('<h2>page not found</h2><p>i think</p>');
break;
}
}
};
const buttonMap = {
'button-home': '/',
'button-file-server': '/upload',
'button-git-server': '/git',
'button-about-me': '/about',
'button-contact-me': '/contact',
'__NOT_FOUND': '/404'
}
const onButtonClick = (buttonId) => { const onButtonClick = (buttonId) => {
if (selectedButtonId === buttonId) { if (selectedButtonId === buttonId) {
return; return;
} }
changeSelected(buttonId); changeSelected(buttonId);
switch (buttonId) {
case 'button-home': { let route = buttonMap[buttonId];
A('#content-container').load('/pages/home.html'); if (!route) {
break; route = buttonMap['__NOT_FOUND'];
}
case 'button-file-server': {
A('#content-container').load('/pages/upload.html');
break;
}
case 'button-git-server': {
window.location.href = 'https://git.hippoz.xyz/';
break;
}
case 'button-about-me': {
A('#content-container').load('/pages/about.html');
break;
}
case 'button-contact-me': {
A('#content-container').load('/pages/contact.html');
break;
}
default: {
console.error('Page not found. Invalid button ID.');
A('#content-container').html('<h2>page not found</h2><p>i think</p>');
return;
}
} }
peformRouteAction(route);
history.pushState({ route }, '', route);
}; };
const getButtonFromPathname = (pathname) => {
let button = 'button-home';
for (const [k, v] of buttonMap) {
if (v === pathname) {
button = k;
break;
}
}
return button;
}
const updateFromCurrentPathname = () => {
let pathname = window.location.pathname;
if (!pathname || pathname === '' || pathname === ' ') {
pathname = '/';
}
const buttonId = getButtonFromPathname(pathname);
changeSelected(buttonId);
peformRouteAction(route);
}
A(() => { A(() => {
A('#content-container').load('/pages/home.html'); A('#content-container').load('/pages/home.html');
A('.navigation-buttons .button-default').each((el) => { A('.navigation-buttons .button-default').each((el) => {