@teipublisher/pb-components 1.38.7 → 1.40.0

package/pb-elements.json

@@ -1397,6 +1397,7 @@
         },
         {
           "name": "userParams",
+          "description": "Additional, user-defined parameters to be sent with the request.",
           "type": "object"
         },
         {
@@ -1413,14 +1414,22 @@
         },
         {
           "name": "history",
+          "description": "Indicates if the parameters of the request made should be saved to the browser\nhistory and URL. Default: false.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "event",
+          "description": "The event which will trigger a new request to be sent. Default is 'pb-load'.",
           "type": "string",
           "default": "\"pb-load\""
         },
+        {
+          "name": "no-credentials",
+          "description": "Indicates whether or not cross-site Access-Control requests should be made.\nDefault is false.",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -1581,6 +1590,7 @@
         {
           "name": "userParams",
           "attribute": "userParams",
+          "description": "Additional, user-defined parameters to be sent with the request.",
           "type": "object"
         },
         {
@@ -1600,12 +1610,14 @@
         {
           "name": "history",
           "attribute": "history",
+          "description": "Indicates if the parameters of the request made should be saved to the browser\nhistory and URL. Default: false.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "event",
           "attribute": "event",
+          "description": "The event which will trigger a new request to be sent. Default is 'pb-load'.",
           "type": "string",
           "default": "\"pb-load\""
         },
@@ -1617,6 +1629,13 @@
         {
           "name": "language"
         },
+        {
+          "name": "noCredentials",
+          "attribute": "no-credentials",
+          "description": "Indicates whether or not cross-site Access-Control requests should be made.\nDefault is false.",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -2012,6 +2031,11 @@
           "name": "--pb-code-highlight-white-space",
           "description": "configures line wrapping",
           "default": "\"pre\""
+        },
+        {
+          "name": "--pb-code-highlight-theme",
+          "description": "configures the default theme to be used",
+          "default": "\"default\""
         }
       ]
     },
@@ -2487,6 +2511,7 @@
         },
         {
           "name": "userParams",
+          "description": "Additional, user-defined parameters to be sent with the request.",
           "type": "object"
         },
         {
@@ -2503,14 +2528,22 @@
         },
         {
           "name": "history",
+          "description": "Indicates if the parameters of the request made should be saved to the browser\nhistory and URL. Default: false.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "event",
+          "description": "The event which will trigger a new request to be sent. Default is 'pb-load'.",
           "type": "string",
           "default": "\"pb-load\""
         },
+        {
+          "name": "no-credentials",
+          "description": "Indicates whether or not cross-site Access-Control requests should be made.\nDefault is false.",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -2595,6 +2628,7 @@
         {
           "name": "userParams",
           "attribute": "userParams",
+          "description": "Additional, user-defined parameters to be sent with the request.",
           "type": "object"
         },
         {
@@ -2614,12 +2648,14 @@
         {
           "name": "history",
           "attribute": "history",
+          "description": "Indicates if the parameters of the request made should be saved to the browser\nhistory and URL. Default: false.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "event",
           "attribute": "event",
+          "description": "The event which will trigger a new request to be sent. Default is 'pb-load'.",
           "type": "string",
           "default": "\"pb-load\""
         },
@@ -2631,6 +2667,13 @@
         {
           "name": "language"
         },
+        {
+          "name": "noCredentials",
+          "attribute": "no-credentials",
+          "description": "Indicates whether or not cross-site Access-Control requests should be made.\nDefault is false.",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -5196,6 +5239,7 @@
         },
         {
           "name": "userParams",
+          "description": "Additional, user-defined parameters to be sent with the request.",
           "type": "object"
         },
         {
@@ -5212,14 +5256,22 @@
         },
         {
           "name": "history",
+          "description": "Indicates if the parameters of the request made should be saved to the browser\nhistory and URL. Default: false.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "event",
+          "description": "The event which will trigger a new request to be sent. Default is 'pb-load'.",
           "type": "string",
           "default": "\"pb-load\""
         },
+        {
+          "name": "no-credentials",
+          "description": "Indicates whether or not cross-site Access-Control requests should be made.\nDefault is false.",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -5298,6 +5350,7 @@
         {
           "name": "userParams",
           "attribute": "userParams",
+          "description": "Additional, user-defined parameters to be sent with the request.",
           "type": "object"
         },
         {
@@ -5317,12 +5370,14 @@
         {
           "name": "history",
           "attribute": "history",
+          "description": "Indicates if the parameters of the request made should be saved to the browser\nhistory and URL. Default: false.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "event",
           "attribute": "event",
+          "description": "The event which will trigger a new request to be sent. Default is 'pb-load'.",
           "type": "string",
           "default": "\"pb-load\""
         },
@@ -5334,6 +5389,13 @@
         {
           "name": "language"
         },
+        {
+          "name": "noCredentials",
+          "attribute": "no-credentials",
+          "description": "Indicates whether or not cross-site Access-Control requests should be made.\nDefault is false.",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/pb-code-highlight.js

@@ -3,7 +3,30 @@ import "prismjs/prism";
 import 'prismjs/components/prism-xquery';
 import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
-import { resolveURL } from './utils.js';
+import { resolveURL, getCSSProperty } from './utils.js';
+
+const PRISM_THEMES = new Map();
+
+function loadTheme(theme) {
+    const themeName = theme === 'default' ? 'prism.css' : `prism-${theme}.css`;
+    if (PRISM_THEMES.has(themeName)) {
+        console.log('Using cached theme: %s', themeName);
+        return PRISM_THEMES.get(themeName);
+    }
+
+    const promise = new Promise((resolve) => {
+        const resource = resolveURL('../css/prismjs/') + themeName;
+        console.log('<pb-code-highlight> loading theme %s from %s', theme, resource);
+        fetch(resource)
+            .then(response => response.text())
+            .catch(() => resolve(''))
+            .then(text => {
+                resolve(html`<style>${text}</style>`);
+            });
+    });
+    PRISM_THEMES.set(themeName, promise);
+    return promise;
+}
 
 /**
  * Highlight a code snippet. The snippet may either be passed in a template child
@@ -12,6 +35,7 @@ import { resolveURL } from './utils.js';
  * pass the code to be highlighted in the `code` property.
  *
  * @cssprop [--pb-code-highlight-white-space=pre] - configures line wrapping
+ * @cssprop [--pb-code-highlight-theme=default] - configures the default theme to be used
  */
 export class PbCodeHighlight extends LitElement {
     static get properties() {
@@ -41,7 +65,7 @@ export class PbCodeHighlight extends LitElement {
                 type: Boolean,
                 attribute: 'line-numbers'
             },
-            _styles: {
+            _themeStyles: {
                 type: String
             }
         };
@@ -52,13 +76,15 @@ export class PbCodeHighlight extends LitElement {
         this.language = 'xml';
         this.theme = 'default';
         this.lineNumbers = false;
+        this._themeStyles = null;
     }
 
     connectedCallback() {
         super.connectedCallback();
-        const theme = this.getAttribute('theme');
+        let theme = this.getAttribute('theme');
         if (theme === null) {
-            this.setAttribute('theme', 'default');
+            theme = getCSSProperty(this, '--pb-code-highlight-theme', 'default');
+            this.setAttribute('theme', theme);
         }
     }
 
@@ -79,8 +105,8 @@ export class PbCodeHighlight extends LitElement {
         super.attributeChangedCallback(name, oldValue, newValue);
         switch (name) {
             case 'theme':
-                PbCodeHighlight.loadTheme(newValue).then((styles) => {
-                    this._styles = styles;
+                loadTheme(newValue).then(loadedStyles => {
+                    this._themeStyles = loadedStyles;
                 });
                 break;
             default:
@@ -102,23 +128,13 @@ export class PbCodeHighlight extends LitElement {
     render() {
         if (this.code) {
             return html`
-                ${this._styles}
+                ${this._themeStyles}
                 <pre class="${this.lineNumbers ? 'line-numbers' : ''} language-${this.language}"><code>${this.code}</code></pre>
             `;
         }
         return html`<pre class="line-numbers"><code><code></pre>`;
     }
 
-    static async loadTheme(theme) {
-        const themeName = theme === 'default' ? 'prism.css' : `prism-${theme}.css`;
-        const resource = resolveURL('../css/prismjs/') + themeName;
-        console.log('<pb-code-highlight> loading theme %s from %s', theme, resource);
-
-        const fetchedStyles = await fetch(resource).then(async response => response.text()).catch(e => '');
-
-        return html`<style>${fetchedStyles}</style>`;
-    }
-
     static get styles() {
         return css`
             :host {

package/src/pb-load.js

@@ -87,12 +87,30 @@ export class PbLoad extends pbMixin(LitElement) {
                 type: Boolean,
                 attribute: 'use-language'
             },
+            /**
+             * Indicates whether or not cross-site Access-Control requests should be made.
+             * Default is false.
+             */
+            noCredentials: {
+                type: Boolean,
+                attribute: 'no-credentials'
+            },
+            /**
+             * Indicates if the parameters of the request made should be saved to the browser
+             * history and URL. Default: false.
+             */
             history: {
                 type: Boolean
             },
+            /**
+             * The event which will trigger a new request to be sent. Default is 'pb-load'.
+             */
             event: {
                 type: String
             },
+            /**
+             * Additional, user-defined parameters to be sent with the request.
+             */
             userParams: {
                 type: Object
             }
@@ -107,6 +125,7 @@ export class PbLoad extends pbMixin(LitElement) {
         this.event = 'pb-load';
         this.loaded = false;
         this.language = null;
+        this.noCredentials = true;
     }
 
     connectedCallback() {
@@ -169,6 +188,23 @@ export class PbLoad extends pbMixin(LitElement) {
         }
     }
 
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (oldValue && oldValue !== newValue) {
+            switch (name) {
+                case 'url':
+                case 'userParams':
+                case 'start':
+                    PbLoad.waitOnce('pb-page-ready', () => {
+                        this.load();
+                    });
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
     render() {
         return html`
             <slot></slot>
@@ -177,7 +213,7 @@ export class PbLoad extends pbMixin(LitElement) {
                 verbose
                 handle-as="text"
                 method="get"
-                with-credentials
+                ?with-credentials="${!this.noCredentials}"
                 @response="${this._handleContent}"
                 @error="${this._handleError}"></iron-ajax>
             <paper-dialog id="errorDialog">

package/src/pb-page.js

@@ -174,6 +174,8 @@ class PbPage extends pbMixin(LitElement) {
             return;
         }
 
+        this.endpoint = this.endpoint.replace(/\/+$/, '');
+        
         if (this.locales && this._localeFallbacks.indexOf('app') === -1) {
             this._localeFallbacks.push('app');
         }
@@ -202,7 +204,12 @@ class PbPage extends pbMixin(LitElement) {
                 return fetch(`${this.endpoint}/api/version`)
                     .then((res2) => res2.json());
             })
-            .catch(() => null)
+            .catch((error) => {
+                if (error.response.status === 404) {
+                    return fetch(`${this.endpoint}/api/version`)
+                        .then((res2) => res2.json());
+                }
+            });
             
             if (json) {
                 this.apiVersion = json.api;
@@ -219,6 +226,13 @@ class PbPage extends pbMixin(LitElement) {
                 template: this.template,
                 apiVersion: this.apiVersion
             });
+        } else if (this._i18nInstance) {
+            this.signalReady('pb-page-ready', {
+                endpoint: this.endpoint,
+                apiVersion: this.apiVersion,
+                template: this.template,
+                language: this._i18nInstance.language
+            });
         }
     }
 
@@ -287,7 +301,7 @@ class PbPage extends pbMixin(LitElement) {
             // initialized and ready to go!
             this._updateI18n(t);
             this.signalReady('pb-i18n-update', { t, language: this._i18nInstance.language });
-            if (this.requireLanguage) {
+            if (this.requireLanguage && this.apiVersion) {
                 this.signalReady('pb-page-ready', {
                     endpoint: this.endpoint,
                     apiVersion: this.apiVersion,

package/src/pb-popover.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import tippy from 'tippy.js';
 import { pbMixin } from './pb-mixin.js';
+import { getCSSProperty } from "./utils.js";
 import * as themes from './pb-popover-themes.js';
 
 function _injectStylesheet(root, name, cssCode) {
@@ -161,34 +162,22 @@ export class PbPopover extends pbMixin(LitElement) {
 
     _checkCSSProperties() {
         if (!this.theme && this.theme !== 'none') {
-            this.theme = this._getCSSProperty('--pb-popover-theme', 'none');
+            this.theme = getCSSProperty(this, '--pb-popover-theme', 'none');
         }
         if (!this.placement) {
-            this.placement = this._getCSSProperty('--pb-popover-placement', 'auto');
+            this.placement = getCSSProperty(this, '--pb-popover-placement', 'auto');
         }
         if (!this.fallbackPlacement) {
-            this.fallbackPlacement = this._getCSSProperty('--pb-popover-fallback-placement', null);
+            this.fallbackPlacement = getCSSProperty(this, '--pb-popover-fallback-placement', null);
         }
         if (!this.persistent) {
-            this.persistent = this._getCSSProperty('--pb-popover-persistent', false);
+            this.persistent = getCSSProperty(this, '--pb-popover-persistent', false);
         }
         if (!this.trigger) {
-            this.trigger = this._getCSSProperty('--pb-popover-trigger', null);
+            this.trigger = getCSSProperty(this, '--pb-popover-trigger', null);
         }
     }
 
-    _getCSSProperty(name, defaultValue) {
-        const property = getComputedStyle(this).getPropertyValue(name);
-        if (property) {
-            try {
-                return JSON.parse(property);
-            } catch (e) {
-                return defaultValue;
-            }
-        }
-        return defaultValue;
-    }
-
     _injectStyles() {
         this._checkCSSProperties();
 

package/src/pb-upload.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
+import { getCSSProperty } from "./utils.js";
 import '@vaadin/vaadin-upload';
 import '@polymer/paper-button';
 import '@polymer/paper-icon-button';
@@ -108,8 +109,8 @@ export class PbUpload extends pbMixin(LitElement) {
     }
 
     render() {
-        const uploadIcon = this._getCSSProperty('--pb-upload-button-icon', 'icons:file-upload');
-        const dropLabelIcon = this._getCSSProperty('--pb-upload-drop-icon', null);
+        const uploadIcon = getCSSProperty(this, '--pb-upload-button-icon', 'icons:file-upload');
+        const dropLabelIcon = getCSSProperty(this, '--pb-upload-drop-icon', null);
         return html`
             <vaadin-upload id="uploader" accept="${this.accept}" method="post" tabindex="-1" form-data-name="files[]"
                 with-credentials>
@@ -170,18 +171,6 @@ export class PbUpload extends pbMixin(LitElement) {
         this.requestUpdate();
     }
 
-    _getCSSProperty(name, defaultValue) {
-        const property = getComputedStyle(this).getPropertyValue(name);
-        if (property) {
-            try {
-                return JSON.parse(property);
-            } catch (e) {
-                return defaultValue;
-            }
-        }
-        return defaultValue;
-    }
-
     static get styles() {
         return css`
             ul {

package/src/utils.js

@@ -29,4 +29,24 @@ export function cmpVersion(a, b) {
 
 export function minVersion(given, required) {
     return cmpVersion(given, required) >= 0;
+}
+
+/**
+ * Retrieve value of a CSS property.
+ * 
+ * @param {Element} elem the component
+ * @param {string} name name of the property
+ * @param {any} defaultValue default value
+ * @returns the value or defaultValue if it does not exist
+ */
+export function getCSSProperty(elem, name, defaultValue) {
+    const property = getComputedStyle(elem).getPropertyValue(name);
+    if (property) {
+        try {
+            return JSON.parse(property);
+        } catch (e) {
+            return defaultValue;
+        }
+    }
+    return defaultValue;
 }