knotteye
/
satyr
Archived
1
0
Fork 0
Code Issues Pull Requests Releases 5 Wiki Activity

Intercept internal links and render the page without reloading

merge-requests/27/head
knotteye 2020-10-17 00:11:24 -05:00
parent 54a891dac1
commit 58e8be123c
2 changed files with 56 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/index.html
View File

@ -18,6 +18,6 @@
} }
</script> </script>
</head> </head>
<body onload="render()"> <body onload="render(window.location.pathname)">
<script src="/index.js"></script> <script src="/index.js"></script>
</body> </body>

81
site/index.js
View File

@ -1,36 +1,44 @@
async function render(){ async function render(path){
var context = await getContext(); var context = await getContext();
switch(window.location.pathname){ switch(path){
//nothing but context //nothing but context
case (window.location.pathname.match(/^\/about\/?$/) || {}).input: case (path.match(/^\/about\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('about.njk', context); document.body.innerHTML = nunjucks.render('about.njk', context);
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/login\/?$/) || {}).input: case (path.match(/^\/login\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('login.njk', context); document.body.innerHTML = nunjucks.render('login.njk', context);
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/register\/?$/) || {}).input: case (path.match(/^\/register\/?$/) || {}).input:
if(!context.registration) window.location = '/'; if(!context.registration) window.location = '/';
document.body.innerHTML = nunjucks.render('registration.njk', context); document.body.innerHTML = nunjucks.render('registration.njk', context);
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/changepwd\/?$/) || {}).input: case (path.match(/^\/changepwd\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('changepwd.njk', context); document.body.innerHTML = nunjucks.render('changepwd.njk', context);
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/chat\/?$/) || {}).input: case (path.match(/^\/chat\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('chat.html', context); document.body.innerHTML = nunjucks.render('chat.html', context);
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/help\/?$/) || {}).input: case (path.match(/^\/help\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('help.njk', context); document.body.innerHTML = nunjucks.render('help.njk', context);
modifyLinks();
break; break;
//need to hit the API //need to hit the API
case (window.location.pathname.match(/^\/users\/live\/?$/) || {}).input: case (path.match(/^\/users\/live\/?$/) || {}).input:
var list = JSON.parse(await makeRequest("POST", "/api/users/live", JSON.stringify({num: 50}))); var list = JSON.parse(await makeRequest("POST", "/api/users/live", JSON.stringify({num: 50})));
document.body.innerHTML = nunjucks.render('live.njk', Object.assign({list: list.users}, context)); document.body.innerHTML = nunjucks.render('live.njk', Object.assign({list: list.users}, context));
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/users\/?$/) || {}).input: case (path.match(/^\/users\/?$/) || {}).input:
var list = JSON.parse(await makeRequest("POST", "/api/users/all", JSON.stringify({num: 50}))); var list = JSON.parse(await makeRequest("POST", "/api/users/all", JSON.stringify({num: 50})));
document.body.innerHTML = nunjucks.render('list.njk', Object.assign({list: list.users}, context)); document.body.innerHTML = nunjucks.render('list.njk', Object.assign({list: list.users}, context));
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/profile\/chat\/?$/) || {}).input: case (path.match(/^\/profile\/chat\/?$/) || {}).input:
if(!context.auth.name) window.location = '/login'; if(!context.auth.name) window.location = '/login';
var config = JSON.parse(await makeRequest("GET", '/api/'+context.auth.name+'/config')); var config = JSON.parse(await makeRequest("GET", '/api/'+context.auth.name+'/config'));
config = { config = {
@ -42,8 +50,9 @@ async function render(){
} }
}; };
document.body.innerHTML = nunjucks.render('chat_integ.njk', Object.assign(config, context)); document.body.innerHTML = nunjucks.render('chat_integ.njk', Object.assign(config, context));
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/profile\/?$/) || {}).input: case (path.match(/^\/profile\/?$/) || {}).input:
if(!context.auth.name) window.location = '/login'; if(!context.auth.name) window.location = '/login';
var config = JSON.parse(await makeRequest("GET", '/api/'+context.auth.name+'/config')); var config = JSON.parse(await makeRequest("GET", '/api/'+context.auth.name+'/config'));
config = { config = {
@ -55,43 +64,49 @@ async function render(){
twitch: config.twitch_mirror twitch: config.twitch_mirror
}; };
document.body.innerHTML = nunjucks.render('profile.njk', Object.assign(config, context)); document.body.innerHTML = nunjucks.render('profile.njk', Object.assign(config, context));
modifyLinks();
break; break;
//parsing slugs //parsing slugs
case (window.location.pathname.match(/^\/invite\//) || {}).input: // /invite/:code case (path.match(/^\/invite\//) || {}).input: // /invite/:code
document.body.innerHTML = nunjucks.render('invite.njk', Object.assign({icode: window.location.pathname.substring(8)}, context)); document.body.innerHTML = nunjucks.render('invite.njk', Object.assign({icode: path.substring(8)}, context));
modifyLinks();
break; break;
//slugs and API //slugs and API
case (window.location.pathname.match(/^\/users\/.+\/?$/) || {}).input: // /users/:user case (path.match(/^\/users\/.+\/?$/) || {}).input: // /users/:user
if(window.location.pathname.substring(window.location.pathname.length - 1).indexOf('/') !== -1) if(path.substring(path.length - 1).indexOf('/') !== -1)
var usr = window.location.pathname.substring(7, window.location.pathname.length - 1); var usr = path.substring(7, path.length - 1);
else var usr = window.location.pathname.substring(7); else var usr = path.substring(7);
var config = JSON.parse(await makeRequest("GET", '/api/'+usr+'/config')); var config = JSON.parse(await makeRequest("GET", '/api/'+usr+'/config'));
if(!config.title){document.body.innerHTML = nunjucks.render('404.njk', context); break;} if(!config.title){document.body.innerHTML = nunjucks.render('404.njk', context); break;}
document.body.innerHTML = nunjucks.render('user.njk', Object.assign({about: config.about, title: config.title, username: config.username}, context)); document.body.innerHTML = nunjucks.render('user.njk', Object.assign({about: config.about, title: config.title, username: config.username}, context));
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/vods\/.+\/manage\/?$/) || {}).input: // /vods/:user/manage case (path.match(/^\/vods\/.+\/manage\/?$/) || {}).input: // /vods/:user/manage
var usr = window.location.pathname.substring(6, (window.location.pathname.length - 7)); var usr = path.substring(6, (path.length - 7));
if(context.auth.name !== usr) window.location = '/vods/'+usr; if(context.auth.name !== usr) window.location = '/vods/'+usr;
var vods = JSON.parse(await makeRequest("GET", '/api/'+usr+'/vods')); var vods = JSON.parse(await makeRequest("GET", '/api/'+usr+'/vods'));
document.body.innerHTML = nunjucks.render('managevods.njk', Object.assign({user: usr, list: vods.vods.filter(fn => fn.name.endsWith('.mp4'))}, context)); document.body.innerHTML = nunjucks.render('managevods.njk', Object.assign({user: usr, list: vods.vods.filter(fn => fn.name.endsWith('.mp4'))}, context));
modifyLinks();
break; break;
case (window.location.pathname.match(/^\/vods\/.+\/?$/) || {}).input: // /vods/:user case (path.match(/^\/vods\/.+\/?$/) || {}).input: // /vods/:user
if(window.location.pathname.substring(window.location.pathname.length - 1).indexOf('/') !== -1) if(path.substring(path.length - 1).indexOf('/') !== -1)
var usr = window.location.pathname.substring(6, window.location.pathname.length - 1); var usr = path.substring(6, path.length - 1);
else var usr = window.location.pathname.substring(6); else var usr = path.substring(6);
var vods = JSON.parse(await makeRequest("GET", '/api/'+usr+'/vods')); var vods = JSON.parse(await makeRequest("GET", '/api/'+usr+'/vods'));
document.body.innerHTML = nunjucks.render('vods.njk', Object.assign({user: usr, list: vods.vods.filter(fn => fn.name.endsWith('.mp4'))}, context)); document.body.innerHTML = nunjucks.render('vods.njk', Object.assign({user: usr, list: vods.vods.filter(fn => fn.name.endsWith('.mp4'))}, context));
modifyLinks();
break; break;
//root //root
case "/": case "/":
window.location = '/users/live'; render('/users/live');
break; break;
case "": case "":
window.location = '/users/live'; render('/users/live');
break; break;
//404 //404
default: default:
document.body.innerHTML = nunjucks.render('404.njk', context); document.body.innerHTML = nunjucks.render('404.njk', context);
modifyLinks();
} }
} }
@ -139,3 +154,17 @@ function handleLoad() {
var r = JSON.parse(document.getElementById('responseFrame').contentDocument.documentElement.textContent).success var r = JSON.parse(document.getElementById('responseFrame').contentDocument.documentElement.textContent).success
if (typeof(r) !== 'undefined') window.location.href = '/profile' if (typeof(r) !== 'undefined') window.location.href = '/profile'
} }
function modifyLinks() {
for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){
if(ls[i].href.indexOf(location.protocol+'//'+location.host) !== -1) {
//should be a regular link
ls[i].setAttribute('onclick', 'return internalLink(\"'+ls[i].href.substring((location.protocol+'//'+location.host).length)+'\")');
}
}
}
function internalLink(path){
this.render(path);
return false;
}