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

Add advanced styling options

parent f087f49e
......@@ -18,6 +18,7 @@ Just have a look at the example folder. There you can find a set of working exam
<!-- add the component wehre you like to display the links -->
<histhub-widget endpoint="ENDPOINT" resolver="RESOLVER" location="URL TO LOOK FOR"></histhub-widget>
```
## 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.
......@@ -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;
}
</style>
</head>
<body>
<template id="demo-template">
<style>
/**
* Define your custom styles
*/
ul {
margin-left: 1rem;
padding: 0;
}
h3 {
margin-bottom: 0.5rem;
color: green;
}
ul li {
list-style: circle;
}
</style>
<!-- You may hardcode stuff in here -->
<h3>Example 8: Custom template</h3>
<!-- You need to provide a div with id links. Here we will render the links !-->
<div id="links">Daten werden von Histhub geladen...</div>
</template>
<div class="container">
<h1>Example of the histHub-Net 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>
......@@ -29,7 +69,18 @@
<h3 slot="title">Example 4: Links (similarto) from geolinker dodis: Diedenhofen</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82000000000000">
<h3 slot="title">Example 5: No links (sameas) from geolinker</h3>
<h3 slot="title">Example 5: No links (sameas) from geolinker (will be hidden)</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1-1/similarto/" resolver="resolverelasticsearch" location="https://dodis.ch/G82">
<h3 slot="title" id="custom-title-color">Example 6: Links (similarto) from geolinker dodis: Diedenhofen and custom title color</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1-1/similarto/" resolver="resolverelasticsearch" location="https://dodis.ch/G82">
<h3 slot="title">Example 7: Links (similarto) from geolinker dodis: Diedenhofen</h3>
Additional comment
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82" template="demo-template">
</histhub-widget>
<histhub-widget id="vars" endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
</histhub-widget>
</div>
</body>
......
(function() {
const template = document.createElement('template');
template.innerHTML = `
const defaultTemplate = document.createElement('template');
defaultTemplate.innerHTML = `
<style>
:host{
--histhub-h3-maring: 0 0 0 0.5rem;
--histhub-h3-color: #000;
--histhub-h3-size: 120%;
/** ul **/
--histhub-ul-padding: 0;
--histhub-ul-margin: 1rem 0 0 0;
--histhub-ul-display: block;
--histhub-ul-list-style: circle inside;
/** li **/
--histhub-li-display: list-item;
--histhub-li-padding: 0;
--histhub-li-margin: 0;
/** a **/
--histhub-a-display: inline-block;
--histhub-a-color: black;
--histhub-a-hover-color: grey;
--histhub-a-hover-text-decoration: underline;
}
ul {
margin-left: 1rem;
padding: 0;
margin: var(--histhub-ul-margin);
padding: var(--histhub-ul-padding);
display: var(--histhub-ul-display);
list-style: var(--histhub-ul-list-style);
}
ul li {
margin: var(--histhub-li-margin);
padding: var(--histhub-li-padding);
display: var(--histhub-li-display);
}
ul li a {
color: var(--histhub-a-color);
display: var(--histhub-a-display);
}
::slotted(h3),
h3 {
margin-bottom: 0.5rem;
ul li a:hover {
color: var(--histhub-a-hover-color);
text-decoration: var(--histhub-a-hover-text-decoration);
}
h3 {
font-size: var(--histhub-h3-size);
margin: var(--histhub-h3-margin);
color: var(--histhub-h3-color);
}
</style>
<slot name="title"><h3>Links</h3></slot>
<slot name="links"></slot>`;
<slot name="title"><h3>Histhub Links</h3></slot>
<div id="links">Loading data...</div>
<slot></slot>`;
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';
......
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