Add advanced styling options

00505582 · Tobias Steiner · f087f49e · 00505582 · 00505582 · 00505582
Commit 00505582 authored Aug 08, 2019 by Tobias Steiner
--- 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
 <!-- 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.


--- 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;
+        }
    </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>

--- a/src/histhub-widget.js
+++ b/src/histhub-widget.js
 (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';