Skip to content

GitLab

Commit 68256ac2 authored by Tobias Steiner's avatar Tobias Steiner
Browse files

Update example and show provider names

parent 77af018d
Hide whitespace changes
Inline Side-by-side
examlpe/index.html
View file @ 68256ac2
......@@ -2,19 +2,29 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Histhub widget </title>
<title>Example of the histhub widget (beta) </title>
<script src="../src/histhub-widget.js"></script>
<style>
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<histhub-widget endpoint="//api.tagcloud.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/T171">
<h3 slot="title">Links from tagcloud</h3>
</histhub-widget>
<histhub-widget endpoint="//api.orgalinker.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/R20">
<h3 slot="title">Links from orgalinker</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G8">
<h3 slot="title">Links from orgalinker</h3>
</histhub-widget>
<div class="container">
<h1>Example of the histhub widget (beta)</h1>
<p>The histhub widget can fetch sameas resources for different resoucrces. It makes a simple http request to one of the backends and gets a list of links from there. It finally renders the links in a list and display them.</p>
<histhub-widget endpoint="//api.tagcloud.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/T171">
<h3 slot="title">Example 1: Links from tagcloud dodis: Aussenpolitik (allg.)</h3>
</histhub-widget>
<histhub-widget endpoint="//api.orgalinker.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/R20">
<h3 slot="title">Example 2: Links from orgalinker dodis: Lombard, Odier & Cie</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
<h3 slot="title">Example 3: Links from geolinker dodis: Diedenhofen</h3>
</histhub-widget>
</div>
</body>
</html>
src/histhub-widget.js
View file @ 68256ac2
......@@ -2,11 +2,12 @@
const template = document.createElement('template');
template.innerHTML = `
<style>
:host ul {
ul {
margin-left: 1rem;
padding: 0;
}
:host h3 {
::slotted(h3),
h3 {
margin-bottom: 0.5rem;
}
</style>
......@@ -122,10 +123,11 @@
const buildLinks = () => this.links.map((link) => {
let anchor = null;
let href = null;
// check f we get an array or an object
if (typeof link === "object") {
const provider = Object.keys(link)[0];
if (typeof provider !== "string" && provider !== "") {
// often we do not have information about the provider
if (typeof provider === "string" && provider !== "") {
anchor = provider;
} else {
anchor = link[provider];
......@@ -135,6 +137,7 @@
href = link;
anchor = link;
}
// build the list
return `<li><a href="${href}"> ${anchor}</a></li>`;
});
this._linksSlot.innerHTML = `<ul>${buildLinks().join("")}</ul>`;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment