@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/pb-split-list.js

@@ -1,11 +1,11 @@
-import { LitElement, html, css } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { themableMixin } from "./theming.js";
-import { registry } from "./urls.js";
+import { themableMixin } from './theming.js';
+import { registry } from './urls.js';
 
 /**
- * Implements a list which is split into different categories 
+ * Implements a list which is split into different categories
  * (e.g. letters of the alphabet, countries ...).
  * Only one category is shown at a time unless the server reports
  * no categories (e.g. if the number of items to display goes below
@@ -13,13 +13,13 @@ import { registry } from "./urls.js";
  *
  * The server-side API endpoint should return a JSON object with two
  * properties:
- * 
- * + `categories`: an array of category descriptions: each item should 
+ *
+ * + `categories`: an array of category descriptions: each item should
  *  be an object with two properties: `category` - containing the name of the category
  *  and `count` - containing a count of items available under this category.
  * + `items`: an array with the items to be shown for the currently selected
  *  category. Those may contain HTML markup.
- * 
+ *
  * Sample JSON object for pb-split-list
  * ```javascript
  * {
@@ -49,192 +49,197 @@ import { registry } from "./urls.js";
  *    ]
  * }
  * ```
- * 
- * Sample Usage 
+ *
+ * Sample Usage
  * ```xml
  * <pb-split-list url="api/people" subforms="#options" selected="A" emit="transcription" subscribe="transcription"></pb-split-list>
  * ```
- * See https://www.briefedition.alfred-escher.ch/kontexte/personen/?category=A&search=&view=correspondents for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: 
+ * See https://www.briefedition.alfred-escher.ch/kontexte/personen/?category=A&search=&view=correspondents for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are:
  * - [templates/index.html](https://github.com/stazh/briefedition-escher/blob/master/templates/index.html#L223) - usage of pb-timeline
  * - [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1098) - `/api/people` endpoint delivering required JSON object
- * 
+ *
  * @cssprop --pb-categorized-list-columns - the number of columns to display (default: 2)
  * @fires pb-submit - when received, submit a request to the server and refresh
  * @fires pb-start-update - sent before the element sends the request to the server
  * @fires pb-end-update - sent after new content has been received
  */
 export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
-    static get properties() {
-        return {
-            /**
-             * Server-side API endpoint to retrieve items from
-             */
-            url: {
-                type: String
-            },
-            /**
-             * The initially selected category
-             */
-            selected: {
-                type: String
-            },
-            /**
-             * A CSS selector pointing to one or more `pb-custom-form`
-             * instances. The element will collect additional parameters
-             * from those forms and includes them in the request to the server
-             */
-            subforms: {
-                type: String
-            },
-            _categories: {
-                type: Array
-            },
-            ...super.properties
-        };
+  static get properties() {
+    return {
+      /**
+       * Server-side API endpoint to retrieve items from
+       */
+      url: {
+        type: String,
+      },
+      /**
+       * The initially selected category
+       */
+      selected: {
+        type: String,
+      },
+      /**
+       * A CSS selector pointing to one or more `pb-custom-form`
+       * instances. The element will collect additional parameters
+       * from those forms and includes them in the request to the server
+       */
+      subforms: {
+        type: String,
+      },
+      _categories: {
+        type: Array,
+      },
+      ...super.properties,
+    };
+  }
+
+  constructor() {
+    super();
+    this._categories = [];
+    this._params = {};
+    this.selected = null;
+    this.subforms = null;
+    this._initialized = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    waitOnce('pb-page-ready', () => {
+      this.selected = registry.state.category || this.selected;
+
+      registry.subscribe(this, state => {
+        console.log('<pb-split-list> popstate: %o', state);
+        this.selected = state.category;
+        this.submit(false);
+      });
+    });
+
+    this.subscribeTo('pb-submit', this.load.bind(this));
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+
+    waitOnce('pb-page-ready', () => {
+      this.load();
+    });
+  }
+
+  submit(commit = true) {
+    this.load(commit);
+  }
+
+  load(commit = true) {
+    const formParams = this._paramsFromSubforms({});
+    if (this.selected) {
+      formParams.category = this.selected;
     }
-
-    constructor() {
-        super();
-        this._categories = [];
-        this._params = {};
-        this.selected = null;
-        this.subforms = null;
-        this._initialized = false;
+    if (commit) {
+      if (!this._initialized) {
+        registry.replace(this, formParams);
+      } else {
+        registry.commit(this, formParams);
+      }
     }
+    this._initialized = true;
 
-    connectedCallback() {
-        super.connectedCallback();
+    const params = new URLSearchParams(formParams);
 
-        waitOnce('pb-page-ready', () => {
-            this.selected = registry.state.category || this.selected;
-
-            registry.subscribe(this, (state) => {
-                console.log('<pb-split-list> popstate: %o', state);
-                this.selected = state.category;
-                this.submit(false);
-            });
-        });
-
-        this.subscribeTo('pb-submit', this.load.bind(this));
-    }
-
-    firstUpdated() {
-        super.firstUpdated();
-        
-        waitOnce('pb-page-ready', () => {
-            this.load();
-        });
-    }
+    const url = `${this.toAbsoluteURL(this.url)}?${params.toString()}`;
+    console.log(`<pb-split-list> Fetching from URL: ${url}`);
 
-    submit(commit = true) {
-        this.load(commit);
-    }
+    this.emitTo('pb-start-update');
 
-    load(commit = true) {
-        const formParams = this._paramsFromSubforms({});
-        if (this.selected) {
-            formParams.category = this.selected;
-        }
-        if (commit) {
-            if (!this._initialized) {
-                registry.replace(this, formParams);    
-            } else {
-                registry.commit(this, formParams);
-            }
+    fetch(url)
+      .then(response => {
+        if (response.ok) {
+          return response.json();
         }
-        this._initialized = true;
-
-        const params = new URLSearchParams(formParams);
-
-        const url = `${this.toAbsoluteURL(this.url)}?${params.toString()}`;
-        console.log(`<pb-split-list> Fetching from URL: ${url}`);
-
-        this.emitTo('pb-start-update');
-
-        fetch(url)
-        .then((response) => {
-            if (response.ok) {
-                return response.json();
-            }
-            return Promise.reject(response.status);
-        })
-        .then((json) => {
-            this._categories = json.categories;
-            this.innerHTML = json.items.join('');
-            this.emitTo('pb-end-update');
-        })
-        .catch((error) => {
-            console.error(`<pb-split-list> Error caught: ${error}`);
-            this.emitTo('pb-end-update');
-        });
-    }
-
-    _selectCategory(ev, category) {
-        ev.preventDefault();
-        this.selected = category;
-        this.load();
-    }
-
-    _paramsFromSubforms(params) {
-        if (this.subforms) {
-            document.querySelectorAll(this.subforms).forEach((form) => {
-                if (form.serializeForm) {
-                    Object.assign(params, form.serializeForm());
-                }
-            });
+        return Promise.reject(response.status);
+      })
+      .then(json => {
+        this._categories = json.categories;
+        this.innerHTML = json.items.join('');
+        this.emitTo('pb-end-update');
+      })
+      .catch(error => {
+        console.error(`<pb-split-list> Error caught: ${error}`);
+        this.emitTo('pb-end-update');
+      });
+  }
+
+  _selectCategory(ev, category) {
+    ev.preventDefault();
+    this.selected = category;
+    this.load();
+  }
+
+  _paramsFromSubforms(params) {
+    if (this.subforms) {
+      document.querySelectorAll(this.subforms).forEach(form => {
+        if (form.serializeForm) {
+          Object.assign(params, form.serializeForm());
         }
-        return params;
-    }
-
-    render() {
-        return html`
-            <header>
-            ${
-                this._categories.map((cat) =>
-                    html`
-                        <a part="${this.selected === cat.category ? 'active-category' : 'category'}" href="#${cat.category}" title="${cat.count}" class="${this.selected === cat.category ? 'active' : ''}"
-                            @click="${(ev) => this._selectCategory(ev, cat.category)}">
-                            ${cat.label ? unsafeHTML(cat.label) : cat.category}
-                        </a>
-                    `
-                )
-            }
-            </header>
-            <div id="items" part="items"><slot></slot></div>
-        `;
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            header {
-                display: flex;
-                flex-wrap: wrap;
-                column-gap: 10px;
-                width: 100%;
-            }
-
-            #items {
-                display: grid;
-                grid-template-columns: repeat(var(--pb-categorized-list-columns, 2), auto);
-                grid-auto-rows: 1fr;
-                column-gap: 10px;
-                width: 100%;
-            }
-
-            [part=category], #items a {
-                text-decoration: none;
-                color: var(--pb-link-color);
-            }
-
-            [part=active-category] {
-                text-decoration: none;
-                color: var(--pb-highlight-color);
-            }
-        `;
+      });
     }
+    return params;
+  }
+
+  render() {
+    return html`
+      <header>
+        ${this._categories.map(
+          cat =>
+            html`
+              <a
+                part="${this.selected === cat.category ? 'active-category' : 'category'}"
+                href="#${cat.category}"
+                title="${cat.count}"
+                class="${this.selected === cat.category ? 'active' : ''}"
+                @click="${ev => this._selectCategory(ev, cat.category)}"
+              >
+                ${cat.label ? unsafeHTML(cat.label) : cat.category}
+              </a>
+            `,
+        )}
+      </header>
+      <div id="items" part="items"><slot></slot></div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      header {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 10px;
+        width: 100%;
+      }
+
+      #items {
+        display: grid;
+        grid-template-columns: repeat(var(--pb-categorized-list-columns, 2), auto);
+        grid-auto-rows: 1fr;
+        column-gap: 10px;
+        width: 100%;
+      }
+
+      [part='category'],
+      #items a {
+        text-decoration: none;
+        color: var(--pb-link-color);
+      }
+
+      [part='active-category'] {
+        text-decoration: none;
+        color: var(--pb-highlight-color);
+      }
+    `;
+  }
 }
-customElements.define('pb-split-list', PbSplitList);
+customElements.define('pb-split-list', PbSplitList);

package/src/pb-svg.js

@@ -1,8 +1,7 @@
-import { LitElement, html, css } from 'lit-element';
-import "@lrnwebcomponents/es-global-bridge";
+import { LitElement, html, css } from 'lit';
+import '@lrnwebcomponents/es-global-bridge';
 import { pbMixin } from './pb-mixin.js';
 
-
 /**
  * Show an SVG image with zoom and pan functionality. The image URL may
  * either be specified via the `url` property or an `pb-show-annotation` event
@@ -14,94 +13,96 @@ import { pbMixin } from './pb-mixin.js';
  * @cssprop --pb-svg-width - Width of the SVG element
  */
 export class PbSvg extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The URL to load the SVG from.
-             */
-            url: {
-                type: String
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The URL to load the SVG from.
+       */
+      url: {
+        type: String,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this._pan = null;
-    }
+  constructor() {
+    super();
+    this._pan = null;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-        window.ESGlobalBridge.requestAvailability();
-        window.ESGlobalBridge.instance.load("svg-pan-zoom", `https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js`);
+    window.ESGlobalBridge.requestAvailability();
+    window.ESGlobalBridge.instance.load(
+      'svg-pan-zoom',
+      `https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js`,
+    );
 
-        this.subscribeTo('pb-show-annotation', (ev) => {
-            if (this.url === ev.detail.file) {
-                return;
-            }
-            this.url = ev.detail.file;
-        });
-    }
+    this.subscribeTo('pb-show-annotation', ev => {
+      if (this.url === ev.detail.file) {
+        return;
+      }
+      this.url = ev.detail.file;
+    });
+  }
 
-    firstUpdated() {
-        super.firstUpdated();
+  firstUpdated() {
+    super.firstUpdated();
 
-        this.container = this.shadowRoot.getElementById('image');
-    }
+    this.container = this.shadowRoot.getElementById('image');
+  }
 
-    updated(changed) {
-        if (changed.has('url') && this.url && this.url !== changed.get('url')) {
-            this.load();
-        }
+  updated(changed) {
+    if (changed.has('url') && this.url && this.url !== changed.get('url')) {
+      this.load();
     }
+  }
 
-    load() {
-        if (!this.url) {
-            return;
-        }
-        const uri = this.toAbsoluteURL(this.url);
-        console.log('<pb-svg> Loading %s', uri);
-        if (this._pan) {
-            this._pan.destroy();
-            this._pan = null;
-            this.container.innerHTML = '';
-        }
-        fetch(uri)
-            .then((response) => response.text())
-            .then((data) => {
-                if (!window.svgPanZoom) {
-                    console.error('<pb-svg> svgPanZoom not available');
-                    return;
-                }
-                const doc = new DOMParser().parseFromString(data, "image/svg+xml");
-                const svg = doc.documentElement;
-                this.container.appendChild(svg);
-                this._pan =
-                    window.svgPanZoom(svg, {
-                        controlIconsEnabled: true,
-                        fit: true,
-                        center: true
-                    });
-            });
+  load() {
+    if (!this.url) {
+      return;
     }
-
-    render() {
-        return html`<div id="image"></div>`;
+    const uri = this.toAbsoluteURL(this.url);
+    console.log('<pb-svg> Loading %s', uri);
+    if (this._pan) {
+      this._pan.destroy();
+      this._pan = null;
+      this.container.innerHTML = '';
     }
+    fetch(uri)
+      .then(response => response.text())
+      .then(data => {
+        if (!window.svgPanZoom) {
+          console.error('<pb-svg> svgPanZoom not available');
+          return;
+        }
+        const doc = new DOMParser().parseFromString(data, 'image/svg+xml');
+        const svg = doc.documentElement;
+        this.container.appendChild(svg);
+        this._pan = window.svgPanZoom(svg, {
+          controlIconsEnabled: true,
+          fit: true,
+          center: true,
+        });
+      });
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
+  render() {
+    return html`<div id="image"></div>`;
+  }
 
-            #image svg {
-                height: var(--pb-svg-height, 100%);
-                width: var(--pb-svg-width, 100%);
-            }
-        `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      #image svg {
+        height: var(--pb-svg-height, 100%);
+        width: var(--pb-svg-width, 100%);
+      }
+    `;
+  }
 }
-customElements.define('pb-svg', PbSvg);
+customElements.define('pb-svg', PbSvg);