99 lines
No EOL
2.4 KiB
JavaScript
99 lines
No EOL
2.4 KiB
JavaScript
let selectedButtonId = 'button-home';
|
|
|
|
const changeSelected = (buttonId) => {
|
|
A(`#${selectedButtonId}`).removeClass('button-selected');
|
|
A(`#${buttonId}`).addClass('button-selected');
|
|
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) => {
|
|
if (selectedButtonId === buttonId) {
|
|
return;
|
|
}
|
|
changeSelected(buttonId);
|
|
|
|
let route = buttonMap[buttonId];
|
|
if (!route) {
|
|
route = buttonMap['__NOT_FOUND'];
|
|
}
|
|
|
|
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('.navigation-buttons .button-default').each((el) => {
|
|
A(el).on('click', () => {
|
|
onButtonClick(el.id);
|
|
});
|
|
});
|
|
updateFromCurrentPathname();
|
|
}); |