Commit ef5359c6 authored by Tobias Steiner's avatar Tobias Steiner
Browse files

Add credits

parent eef32521
......@@ -58,7 +58,9 @@ The webcomponent uses a shadow dom and encapsulate the styles. So it will not us
### 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
......
......@@ -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,10 +50,14 @@
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 {
......@@ -212,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) => {
......
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