diff --git a/Readme.md b/Readme.md index e1d767044046431fdb325d50b47b0de29b8683e4..e36b62539bb8b7d888cd71684a8b240b9f8c21af 100644 --- a/Readme.md +++ b/Readme.md @@ -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 diff --git a/examlpe/index.html b/examlpe/index.html index a7c26120315a71c34c6f550e0e2aa6783a266971..13b3862b22b95b2461191c5ea50b064ff30e355d 100644 --- a/examlpe/index.html +++ b/examlpe/index.html @@ -45,7 +45,7 @@ } ul li { - list-style: circle; + list-style: square; } @@ -82,6 +82,10 @@ + +

Example 10: Links (similarto) from geolinker dodis: Diedenhofen with credits

+

Example credits

+
diff --git a/src/histhub-widget.js b/src/histhub-widget.js index 94e3588d261b385b509b43af0b9b612a9a82e716..5dc8acc7f8ebe496125ae63d732c005fa39a0007 100644 --- a/src/histhub-widget.js +++ b/src/histhub-widget.js @@ -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%; + }

Histhub Links

+

Links powered by histHub - die Vernetzungsinitiative des Consortium Historicum

`; class HisthubWidget extends HTMLElement { constructor() { super(); this.attachShadow({mode: "open"}); + this.linkTarget = '_blank'; } /** @@ -128,9 +133,14 @@ } } } - const response = await fetch(`${url}${location}?${params.join('&')}`); - const json = await response.json(); - this.links = json.data[resolver].links; + 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 `
  • ${anchor}
  • `; + return `
  • ${anchor}
  • `; }); this._linksSlot.innerHTML = ``; }