Commit 25ab80c8 authored by Tobinsk's avatar Tobinsk
Browse files

Merge branch '7-add-credits' into 'master'

Resolve "Add credits"

Closes #7

See merge request !8
parents 93aa64d1 ef5359c6
......@@ -51,12 +51,16 @@ The `tempate` is an optional parameter. You can provide your own template to mod
The `language` parameter is optional (default=de) and let you define the language of the provider. We resolve the name of the provider over the url pattern. Possible languages are `de`, `fr`, `it` and `en`.
### Timeout
The architecture of the `geolinker` waits for a certain timeout (default=2000) for the microservices to find an answer to the query. You can define that timeout. If you often get 404 try to set a higher timeout
### Link-target
By default the target of a link is `_blank`. If you wish to change this you can configure the zarget over the `link-target` attribute.
## Styling
The webcomponent uses a shadow dom and encapsulate the styles. So it will not use your sites default css styles but also not change any other styles in your site. There are two option to override the component default styles
### Slots
Slots provides the possibility to override some part of the webcomponent. The histhub-widget provides a `title` and a `defaut` slot.
#### Heading (slot)
You can change the Heading of the widget with the `title` slot. This slot will override the default title. In allmost all examples we use this slot to change the title. If you override a slot your site css rules applies for this element. Example #6 changes the color of the heading
You can change the Heading of the widget with the `title` slot. This slot will override the default title. In almost all examples we use this slot to change the title. If you override a slot your site css rules applies for this element. Example #6 changes the color of the heading
#### Credits
You can change the `credits` in the corresponding slot. Please make sure you mention our work. In the example
#### Default Slot
If you want to display some additional text beneath the links you can use the default slot. Just put the content inside the histhub-widget element. Example #7 adds additional information under the links
### Css Variables
......
......@@ -45,7 +45,7 @@
}
ul li {
list-style: circle;
list-style: square;
}
</style>
<!-- You may hardcode stuff in here -->
......@@ -82,6 +82,10 @@
</histhub-widget>
<histhub-widget id="vars" endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
<h3 slot="title">Example 10: Links (similarto) from geolinker dodis: Diedenhofen with credits</h3>
<p slot="credits">Example credits</p>
</histhub-widget>
</div>
</body>
</html>
......@@ -35,12 +35,12 @@
display: var(--histhub-li-display);
}
ul li a {
a {
color: var(--histhub-a-color);
display: var(--histhub-a-display);
}
ul li a:hover {
a:hover {
color: var(--histhub-a-hover-color);
text-decoration: var(--histhub-a-hover-text-decoration);
}
......@@ -50,16 +50,21 @@
margin: var(--histhub-h3-margin);
color: var(--histhub-h3-color);
}
.credits {
font-size: 75%;
}
</style>
<slot name="title"><h3>Histhub Links</h3></slot>
<div id="links">Loading data...</div>
<slot name="credits"><p class="credits">Links powered by <a href="//histhub.ch" target="_blank" title="Histhub">histHub</a> - die Vernetzungsinitiative des Consortium Historicum</p></slot>
<slot></slot>`;
class HisthubWidget extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: "open"});
this.linkTarget = '_blank';
}
/**
......@@ -128,9 +133,14 @@
}
}
}
try {
const response = await fetch(`${url}${location}?${params.join('&')}`);
const json = await response.json();
this.links = json.data[resolver].links;
} catch(error) {
// 404, no data or another error
this.links = [];
}
this.loading = false;
}
......@@ -154,6 +164,7 @@
const language = this.getAttribute('language') || null;
const timeout = this.getAttribute('timeout') || null;
const location = this.getAttribute('location') || window.location.href;
this.linkTarget = this.getAttribute('link-target') || '_blank';
if (typeof url === 'undefined' || typeof resolver === 'undefined' || typeof location === 'undefined') {
throw new Error("Missing required parameters");
}
......@@ -205,8 +216,7 @@
if (!this.loading) {
if (this.links === null || this.links.length === 0 ) {
// hide if there is no data
this._linksSlot.style.display = 'none';
this._titleSlot.style.display = 'none';
this.shadowRoot.host.style.display = 'none';
} else {
// small util to build the links
const buildLinks = () => this.links.map((link) => {
......@@ -227,7 +237,7 @@
anchor = link;
}
// build the list
return `<li><a href="${href}"> ${anchor}</a></li>`;
return `<li><a href="${href}" target="${this.linkTarget}"> ${anchor}</a></li>`;
});
this._linksSlot.innerHTML = `<ul>${buildLinks().join("")}</ul>`;
}
......
Markdown is supported
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