mashlib
Version:
Data mashup library
196 lines (179 loc) • 6.25 kB
HTML
<html id="docHTML">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<script>
// Suppress harmless ResizeObserver loop errors that block the UI
window.addEventListener('error', function(e) {
if (e.message && e.message.includes('ResizeObserver loop')) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
return false;
}
}, true);
</script>
<link type="text/css" rel="stylesheet" href="mash.css" />
<script type="text/javascript" src="mashlib.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const authn = SolidLogic.authn
const authSession = SolidLogic.authSession
const store = SolidLogic.store
const dom = document
// Disable cross-site proxy - modern Solid servers support CORS
// $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)
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')
const pageHeader = dom.getElementById('PageHeader')
function updateHeaderOffset () {
if (!pageHeader) return
const headerHeight = Math.ceil(pageHeader.getBoundingClientRect().height)
document.documentElement.style.setProperty('--browse-header-offset', `${headerHeight}px`)
}
window.addEventListener('resize', updateHeaderOffset)
updateHeaderOffset()
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()
}
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";
updateHeaderOffset()
}
if (authSession) {
authSession.events.on("login", () => {
mungeLoginArea();
go()
})
authSession.events.on("logout", () => {
mungeLoginArea();
webIdArea.innerHTML = "public user";
go()
})
authSession.events.on("sessionRestore", (url) => {
mungeLoginArea();
go()
})
}
mungeLoginArea();
});
</script>
</head>
<body>
<header id="PageHeader" role="banner" class="header-mash">
SolidOS Databrowser
<div class="input-row" id="inputArea">
Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
</div>
</header>
<div class="user-row">
As user <span id="webId"><public user></span>
<span id="loginButtonArea"></span>
</div>
<main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
<table
id="OutlineView"
class="outline-view"
aria-label="Resource browser"
style="width: 100%"
>
</table>
<section
id="GlobalDashboard"
class="global-dashboard"
aria-label="Dashboard"
hidden
>
</section>
</main>
<footer id="PageFooter" role="contentinfo"></footer>
<style>
body {
padding-top: calc(var(--browse-header-offset, var(--app-header-height, 3.8rem)) + 0.35rem);
}
.header-mash {
padding:1em ;
background-color:#ccbbbb ;
}
.input-row {
}
.browser-main {
margin-top: 0 ;
}
.user-row {
margin-top: 0;
padding-top: 0.35em;
padding-bottom: 0.5em;
margin-left:1em;
}
#loginButtonArea input {
display:inline-block;
margin:0.25em ;
padding:0.25em ;
}
#webId {
display:inline-block;
padding-top:0.6em;
padding-bottom:0.6em;
}
#uriField, .uri-field {
font-size:100%;
min-width:25em;
padding:0.5em;
width:70%;
margin-top:0.6em ;
}
/* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
div[style*="min-width: 400px"][style*="box-shadow"],
div[style*="z-index : 10"],
div[style*="z-index: 10"] {
z-index: 2147483647 ;
top: 0 ;
left: 0 ;
right: 0 ;
bottom: 0 ;
justify-content: center ;
align-items: center ;
}
</style>
</body>
</html>