From 0050558291c743bfdefbf2b19a32146443862549 Mon Sep 17 00:00:00 2001 From: Tobias Steiner Date: Thu, 8 Aug 2019 14:07:58 +0200 Subject: [PATCH] Add advanced styling options --- Readme.md | 36 +++++++++++++++ examlpe/index.html | 53 ++++++++++++++++++++- src/histhub-widget.js | 104 ++++++++++++++++++++++++++++++++++-------- 3 files changed, 174 insertions(+), 19 deletions(-) diff --git a/Readme.md b/Readme.md index e6bf14b..1d21aec 100644 --- a/Readme.md +++ b/Readme.md @@ -18,6 +18,7 @@ Just have a look at the example folder. There you can find a set of working exam ``` + ## API ### Endpoint The endpoint defines the restapi, where the widget makes the call to get the links. Currently we provide three endpoints for different resource types. @@ -44,5 +45,40 @@ For the `similarto` endpoint the geolinker provides a `elasticsearchresolver`. T ### Location The location is an optional parameter. By default the widget uses the current window.location.href to make the request. You can specify the url to look for over the url parameter +### Template +The `tempate` is an optional parameter. You can provide your own template to modify the structure and styles of the widget. +## 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 +#### 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 +### Use css Variables +To change basic visual aspects of the component you can define css variables and override default settings. You have the following options to change the styles of the shadow dom. +```css +:root { + --histhub-h3-maring: 0 0 0 0.5rem; + --histhub-h3-color: #000; + --histhub-h3-size: 120%; + /** ul element **/ + --histhub-ul-padding: 0; + --histhub-ul-margin: 1rem 0 0 0; + --histhub-ul-display: block; + --histhub-ul-list-style: circle inside; + /** li element **/ + --histhub-li-display: list-item; + --histhub-li-padding: 0; + --histhub-li-margin: 0; + /** a Element **/ + --histhub-a-display: inline-block; + --histhub-a-color: black; + --histhub-a-hover-color: grey; + --histhub-a-hover-text-decoration: underline; +} +``` +### Provide a template +You can provide your own template with your own styles. This will give you the power to modify every visual aspect of the webcomponent. You can define your own styles for the shadowdom and add or remove html elements. The example #8 uses a custom template. diff --git a/examlpe/index.html b/examlpe/index.html index 63f1eb0..401a785 100644 --- a/examlpe/index.html +++ b/examlpe/index.html @@ -10,9 +10,49 @@ margin-left: auto; margin-right: auto; } + + /** + * Override slot h3 + */ + #custom-title-color { + color: red; + } + + /** + * example with css vars + */ + #vars { + --histhub-li-display: inline-block; + --histhub-li-padding: 0 0.5rem 0 0; + --histhub-a-hover-color: blue; + --histhub-a-hover-text-decoration: none; + } +

Example of the histHub-Net widget (beta)

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.

@@ -29,7 +69,18 @@

Example 4: Links (similarto) from geolinker dodis: Diedenhofen

-

Example 5: No links (sameas) from geolinker

+

Example 5: No links (sameas) from geolinker (will be hidden)

+ + +

Example 6: Links (similarto) from geolinker dodis: Diedenhofen and custom title color

+ + +

Example 7: Links (similarto) from geolinker dodis: Diedenhofen

+ Additional comment + + + +
diff --git a/src/histhub-widget.js b/src/histhub-widget.js index ea556db..7a8eff6 100644 --- a/src/histhub-widget.js +++ b/src/histhub-widget.js @@ -1,34 +1,72 @@ (function() { - const template = document.createElement('template'); - template.innerHTML = ` + const defaultTemplate = document.createElement('template'); + defaultTemplate.innerHTML = ` -

Links

 - `; +

Histhub Links

 + + `; class HisthubWidget extends HTMLElement { constructor() { super(); this.attachShadow({mode: "open"}); - this.shadowRoot.appendChild(template.content.cloneNode(true)); - // shortcut for slots - this._titleSlot = this.shadowRoot.querySelector('slot[name=title]'); - this._linksSlot = this.shadowRoot.querySelector('slot[name=links]'); } /** * Observable attributes **/ static get observedAttributes() { - return ["loading", "links"]; + return ["loading", "links", "template"]; } /** @@ -59,6 +97,19 @@ this.setAttribute("links", JSON.stringify(v)); } + get template() { + return this.getAttribute('template'); + } + + set template(template) { + if (template){ + this.setAttribute('template', template); + } else { + this.removeAttribute('template'); + } + this.addShadowDom(); + } + /** * Fetch the links from the endpoint * @param url string @@ -94,6 +145,7 @@ if (typeof url === 'undefined' || typeof resolver === 'undefined' || typeof location === 'undefined') { throw new Error("Missing required parameters"); } + this.addShadowDom(); await this.fetchLinks(url, resolver, location); } @@ -109,16 +161,32 @@ * @param newVal */ attributeChangedCallback(attrName, oldVal, newVal) { - this.render(); + if(oldVal !== newVal) { + this.render(); + } + } + + addShadowDom() { + const { shadowRoot, template } = this; + const templateNode = document.getElementById(template); + shadowRoot.innerHTML = ''; + if (templateNode) { + const content = document.importNode(templateNode.content, true); + shadowRoot.appendChild(content); + } else { + this.shadowRoot.appendChild(defaultTemplate.content.cloneNode(true)); + } + + // shortcut for slots + this._titleSlot = this.shadowRoot.querySelector('slot[name=title]'); + this._linksSlot = this.shadowRoot.querySelector('#links'); } /** * Render the component */ render() { - if (this.loading) { - this._linksSlot.innerHTML = `Loading data...`; - } else { + if (!this.loading) { if(this.links.length === 0) { // hide if there is no data this._linksSlot.style.display = 'none'; -- GitLab