mashlib
Version:
Data mashup library
136 lines (124 loc) • 4.41 kB
HTML
<html id="docHTML">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<link type="text/css" rel="stylesheet" href="mash.css" />
<script type="text/javascript" src="mashlib.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const authn = UI.authn
const authSession = UI.authn.authSession
const store = UI.store
const $rdf = UI.rdf
const dom = document
$rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
const uri = window.location.href
window.document.title = 'SolidOS Web App: ' + uri
const outliner = panes.getOutliner(dom) //function from solid-panes
function go (event) {
let uri = $rdf.uri.join(uriField.value, window.location.href)
console.log("User field " + uriField.value)
console.log("User requests " + uri)
const params = new URLSearchParams(location.search)
params.set('uri', uri);
window.history.replaceState({}, '', `${location.origin}${location.pathname}?${params}`);
var subject = $rdf.sym(uri);
outliner.GotoSubject(subject, true, undefined, true, undefined);
mungeLoginArea();
}
const uriField = dom.getElementById('uriField')
const goButton = dom.getElementById('goButton')
const loginButtonArea = document.getElementById("loginButtonArea");
const webIdArea = dom.getElementById('webId')
const banner = dom.getElementById('inputArea')
uriField.addEventListener('keyup', function (e) {
if (e.keyCode === 13) {
go(e)
}
}, false)
goButton.addEventListener('click', go, false);
let initial = new URLSearchParams(self.location.search).get("uri")
if (initial) {
uriField.value = initial
go()
} else {
console.log('ready for user input')
}
async function mungeLoginArea(){
loginButtonArea.innerHTML="";
if(uriField.value) {
loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
}
const me = authn.currentUser()
if (me) {
const logoutButton = loginButtonArea.querySelector('input');
logoutButton.value = "Logout";
let displayId = `<${me.value}>`;
webIdArea.innerHTML = displayId;
banner.style.backgroundColor="#bbccbb";
} else {
banner.style.backgroundColor="#ccbbbb";
}
loginButtonArea.style.display="inline-block";
}
if (authSession) {
authSession.onLogin(() => {
mungeLoginArea();
go()
})
authSession.onLogout(() => {
mungeLoginArea();
webIdArea.innerHTML = "public user";
go()
})
authSession.onSessionRestore((url) => {
mungeLoginArea();
go()
})
}
mungeLoginArea();
});
</script>
</head>
<body>
<div style="width:100%;" id="inputArea">
<div style="margin-bottom:0.6em">
The SolidOS Databrowser
</div>
<div style="margin-left:1em">
Viewing <input id="uriField" type="text" style="font-size:100%; min-width:25em; padding:0.5em;" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
</div>
<div style="margin-top:0.5em;margin-left:1em">
As user <span id="webId"><public user></span> <span id="loginButtonArea"></span>
</div>
</div>
<table style="width:100%;">
<tr>
<div class="TabulatorOutline" id="DummyUUID" role="main">
<table id="outline"></table>
<div id="GlobalDashboard"></div>
</div>
</tr>
</table>
<style>
#inputArea {
width:100%;
padding:0.5em;
background-color:#d0d0d0;
}
#loginButtonArea input {
display:inline-block;
margin:0.25em ;
padding:0.25em ;
}
#webId {
display:inline-block;
padding-top:0.6em;
padding-bottom:0.6em;
}
#uriField {
width:70%;
margin-top:0.6em ;
}
</style>
</body></html>