@teipublisher/pb-components 2.7.0 → 2.9.0

package/i18n/common/cs.json

@@ -111,7 +111,10 @@
     "reset": "Obnovit",
     "placeholder": "Zadejte dotaz",
     "sections": "Hledat v oddílech",
-    "headings": "Hledat v nadpisech"
+    "headings": "Hledat v nadpisech",
+    "title": "Titul",
+    "content": "Text",
+    "scope": "Omezit hledání na"
   },
   "dts": {
     "endpoint": "Vybrat koncový bod",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/runtime": "7.11.2",
     "@cwmr/paper-autocomplete": "^4.0.0",
-    "@jinntec/jinn-codemirror": "^1.11.6",
+    "@jinntec/jinn-codemirror": "^1.13.4",
     "@lrnwebcomponents/es-global-bridge": "^2.7.10",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-ajax": "^3.0.1",
@@ -85,6 +85,7 @@
     "pagedjs": "^0.4.0",
     "path-to-regexp": "^6.2.1",
     "prismjs": "^1.21.0",
+    "tify": "^0.28.1",
     "tippy.js": "^6.2.7",
     "tom-select": "^2.0.2",
     "uniqolor": "^1.0.1",

package/pb-elements.json

@@ -3944,7 +3944,7 @@
           "name": "wait-for",
           "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
           "type": "string",
-          "default": "\"pb-facsimile,pb-image-strip\""
+          "default": "\"pb-facsimile,pb-image-strip,pb-tify\""
         },
         {
           "name": "disabled",
@@ -4025,7 +4025,7 @@
           "attribute": "wait-for",
           "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
           "type": "string",
-          "default": "\"pb-facsimile,pb-image-strip\""
+          "default": "\"pb-facsimile,pb-image-strip,pb-tify\""
         },
         {
           "name": "disabled",
@@ -5624,7 +5624,7 @@
     {
       "name": "pb-link",
       "path": "./src/pb-link.js",
-      "description": "Create an internal link: clicking it will cause connected views to\nupdate and load the corresponding document fragment defined by the\nproperties.",
+      "description": "Create an internal link: clicking it will emit a `pb-refresh`event, \ncausing connected views to update and load the corresponding document fragment defined by the\nproperties.",
       "attributes": [
         {
           "name": "xml-id",
@@ -5657,10 +5657,15 @@
         },
         {
           "name": "history",
-          "description": "Modify browser history: if set, clicking this\nelement will generate a new history entry in the browser's history.\nOnly use this on one element on the page.",
+          "description": "Modify browser history: if set, clicking this\nelement will generate a new history entry in the browser's history.",
           "type": "boolean",
           "default": "true"
         },
+        {
+          "name": "params",
+          "description": "Additional parameters to be passed in the event details.\nShould be specified as a JSON object.",
+          "type": "object"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -5732,10 +5737,16 @@
         {
           "name": "history",
           "attribute": "history",
-          "description": "Modify browser history: if set, clicking this\nelement will generate a new history entry in the browser's history.\nOnly use this on one element on the page.",
+          "description": "Modify browser history: if set, clicking this\nelement will generate a new history entry in the browser's history.",
           "type": "boolean",
           "default": "true"
         },
+        {
+          "name": "params",
+          "attribute": "params",
+          "description": "Additional parameters to be passed in the event details.\nShould be specified as a JSON object.",
+          "type": "object"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -10760,6 +10771,105 @@
         }
       ]
     },
+    {
+      "name": "pb-tify",
+      "path": "./src/pb-tify.js",
+      "description": "Viewer for IIIF presentation manifests based on https://tify.rocks/.\nRequires a proper manifest listing the resources to show. `pb-facs-link`\ncan be used to navigate to a page.",
+      "attributes": [
+        {
+          "name": "manifest",
+          "description": "URL pointing to a IIIF presentation manifest. Relative paths\nare interpreted relative to the API endpoint.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "manifest",
+          "attribute": "manifest",
+          "description": "URL pointing to a IIIF presentation manifest. Relative paths\nare interpreted relative to the API endpoint.",
+          "type": "string"
+        },
+        {
+          "name": "cssPath",
+          "type": "string",
+          "default": "\"../css/tify\""
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "pb-load-facsimile",
+          "description": "when received, opens the page denoted by the\n`order` property in the event (see `pb-facs-link`). Page counts start at 1."
+        }
+      ]
+    },
     {
       "name": "pb-timeline",
       "path": "./src/pb-timeline.js",

package/src/authority/anton.js

@@ -138,6 +138,7 @@ export class Anton extends Registry {
         case 'organization':
           register = 'actors';
           break;
+        case 'origPlace':
         case 'place':
           register = 'places';
           break;
@@ -152,4 +153,4 @@ export class Anton extends Registry {
       }
       return register;
     }
-}
+}

package/src/pb-facs-link.js

@@ -47,7 +47,7 @@ export class PbFacsLink extends pbMixin(LitElement) {
         this.trigger = 'mouseover';
         this.label = '';
         this.order = Number.POSITIVE_INFINITY;
-        this.waitFor = 'pb-facsimile,pb-image-strip';
+        this.waitFor = 'pb-facsimile,pb-image-strip,pb-tify';
         this.default = '';
     }
 
@@ -109,6 +109,7 @@ export class PbFacsLink extends pbMixin(LitElement) {
         this.emitTo('pb-show-annotation', {
             element: this,
             file: this.facs,
+            order: this.getOrder(),
             coordinates: this.coordinates
         });
     }

package/src/pb-link.js

@@ -4,8 +4,8 @@ import { pbMixin } from './pb-mixin.js';
 import { registry } from "./urls.js";
 
 /**
- * Create an internal link: clicking it will cause connected views to
- * update and load the corresponding document fragment defined by the
+ * Create an internal link: clicking it will emit a `pb-refresh`event, 
+ * causing connected views to update and load the corresponding document fragment defined by the
  * properties.
  *
  * @fires pb-refresh - Fires when user clicks the link
@@ -41,10 +41,16 @@ export class PbLink extends pbMixin(LitElement) {
             view: {
                 type: String
             },
+            /**
+             * Additional parameters to be passed in the event details.
+             * Should be specified as a JSON object.
+             */
+            params: {
+                type: Object
+            },
             /**
              * Modify browser history: if set, clicking this
              * element will generate a new history entry in the browser's history.
-             * Only use this on one element on the page.
              */
             history: {
                 type: Boolean
@@ -55,6 +61,7 @@ export class PbLink extends pbMixin(LitElement) {
     constructor() {
         super();
         this.history = true;
+        this.params = null;
     }
 
     connectedCallback() {
@@ -110,6 +117,9 @@ export class PbLink extends pbMixin(LitElement) {
         if (this.view) {
             params.view = this.view;
         }
+        if (this.params) {
+            Object.assign(params, this.params);
+        }
         if (this.history) {
             registry.commit(this, params);
         }

package/src/pb-split-list.js

@@ -131,7 +131,10 @@ export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
     }
 
     load() {
-        const formParams = this._paramsFromSubforms({ category: this.selected });
+        const formParams = this._paramsFromSubforms({});
+        if (this.selected) {
+            formParams.category = this.selected;
+        }
         if (!this._initialized) {
             registry.replace(this, formParams);    
         } else {

package/src/pb-tify.js

@@ -0,0 +1,82 @@
+import { LitElement } from 'lit-element';
+import "tify";
+import { pbMixin, waitOnce } from './pb-mixin.js';
+import { resolveURL } from './utils.js';
+
+function _injectStylesheet(path) {
+    const style = document.querySelector(`link#pb-tify`);
+    if (!style) {
+        const elem = document.createElement('link');
+        elem.type = 'text/css';
+        elem.rel = 'stylesheet';
+        elem.id = `pb-tify`;
+        elem.href = `${resolveURL(path)}/tify.css`;
+        document.head.appendChild(elem);
+    }
+}
+
+/**
+ * Viewer for IIIF presentation manifests based on https://tify.rocks/.
+ * Requires a proper manifest listing the resources to show. `pb-facs-link`
+ * can be used to navigate to a page.
+ *
+ * @fires pb-load-facsimile - when received, opens the page denoted by the
+ * `order` property in the event (see `pb-facs-link`). Page counts start at 1.
+ */
+export class PbTify extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            /**
+             * URL pointing to a IIIF presentation manifest. Relative paths
+             * are interpreted relative to the API endpoint.
+             */
+            manifest: {
+                type: String
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this.cssPath = '../css/tify';
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+
+        _injectStylesheet(this.cssPath);
+
+        this.subscribeTo('pb-load-facsimile', (ev) => {
+            if (ev.detail && ev.detail.order && this._tify) {
+                console.log('<pb-tify> selecting page %d', ev.detail.order);
+                this._tify.setPage(parseInt(ev.detail.order));
+            }
+        });
+    }
+
+    firstUpdated() {
+        super.firstUpdated();
+
+        waitOnce('pb-page-ready', () => {
+            this._tify = new Tify({
+                manifestUrl: this.toAbsoluteURL(this.manifest, this.getEndpoint())
+            });
+            this._tify.ready.then(() => { 
+                this.signalReady();
+            });
+
+            const container = document.createElement('div');
+            container.style.height = '100%';
+            container.style.width = '100%';
+            this.appendChild(container);
+
+            this._tify.mount(container);
+        });
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
+customElements.define('pb-tify', PbTify);

package/src/pb-view.js

@@ -321,6 +321,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 type: Node,
                 attribute: false
             },
+            _additionalParams: {
+                type: Object
+            },
             ...super.properties
         };
     }
@@ -341,6 +344,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         this.beforeUpdate = null;
         this.noScroll = false;
         this._features = {};
+        this._additionalParams = {};
         this._selector = {};
         this._chunks = [];
         this._scrollTarget = null;
@@ -436,8 +440,8 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         this.signalReady();
 
         if (this.onUpdate) {
-            this.subscribeTo('pb-update', () => {
-                this._refresh();
+            this.subscribeTo('pb-update', (ev) => {
+                this._refresh(ev);
             });
         }
     }
@@ -587,6 +591,13 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             } else {
                 this.nodeId = ev.detail.root || this.nodeId;
             }
+
+            // check if the URL template needs any other parameters
+            // and set them on this._additionalParams
+            registry.pathParams.forEach((key) => {
+                this._additionalParams[key] = ev.detail[key];
+            });
+
             if (!this.noScroll) {
                 this._scrollTarget = ev.detail.hash;
             }
@@ -994,6 +1005,12 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         for (const [key, value] of Object.entries(this._features)) {
             params['user.' + key] = value;
         }
+        // add parameters for user-defined parameters supplied via pb-link
+        if (this._additionalParams) {
+            for (const [key, value] of Object.entries(this._additionalParams)) {
+                params[key] = value;
+            }
+        }
         return params;
     }
 
@@ -1162,18 +1179,24 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
 
     _setState(properties) {
         for (const [key, value] of Object.entries(properties)) {
-            switch (key) {
-                case 'odd':
-                case 'view':
-                case 'columnSeparator':
-                case 'xpath':
-                case 'nodeId':
-                case 'path':
-                case 'root':
-                    break;
-                default:
-                    this._features[key] = value;
-                    break;
+            // check if URL template needs the parameter and if
+            // yes, add it to the additional parameter list
+            if (registry.pathParams.has(key)) {
+                this._additionalParams[key] = value;
+            } else {
+                switch (key) {
+                    case 'odd':
+                    case 'view':
+                    case 'columnSeparator':
+                    case 'xpath':
+                    case 'nodeId':
+                    case 'path':
+                    case 'root':
+                        break;
+                    default:
+                        this._features[key] = value;
+                        break;
+                }
             }
         }
         if (properties.odd && !this.getAttribute('odd')) {

package/src/urls.js

@@ -68,7 +68,7 @@ class Registry {
         this.urlPattern = null;
 
         this.urlIgnore = new Set();
-        this._pathParams = new Set();
+        this.pathParams = new Set();
     }
 
     configure(usePath = true, idHash = false, rootPath = '', urlPattern, ignoredParams) {
@@ -84,7 +84,7 @@ class Registry {
             // save a list of parameter names which go into the path
             const pathParams = [];
             pathToRegexp(this.urlPattern, pathParams);
-            pathParams.forEach((param) => this._pathParams.add(param.name));
+            pathParams.forEach((param) => this.pathParams.add(param.name));
             // compile URL pattern into a decode and encode function
             this._decodePath = match(this.urlPattern);
             this._encodePath = compile(this.urlPattern);
@@ -150,7 +150,7 @@ class Registry {
         const urlParams = new URLSearchParams(window.location.search);
         urlParams.forEach((value, key) => {
             if (
-                (this.urlPattern && this._pathParams.has(key)) ||
+                (this.urlPattern && this.pathParams.has(key)) ||
                 (this.usePath && key === 'path')
              ) {
                 console.warn("Found path parameter in query, but usePath is set to true. The path parameter will be ignored.");
@@ -280,8 +280,11 @@ class Registry {
 
         for (const [param, value] of Object.entries(this.state)) {
             if (this.urlPattern) {
-                if (!(this._pathParams.has(param) || this.urlIgnore.has(param))) {
-                    setParam(value, param);
+                // check if param should be ignored or is required by the URL template
+                // fill up missing parameters by stripping potential "user." prefix
+                const normParam = param.replace(/^(?:user\.)?(.*)$/, '$1');
+                if (!(this.pathParams.has(normParam) || this.urlIgnore.has(normParam))) {
+                    setParam(value, normParam);
                 }
             } else if (
                     (param !== 'path' || !this.usePath) && 
@@ -294,7 +297,16 @@ class Registry {
 
         if (this.state.path && this.state.path.length > 0) {
             if (this.urlPattern) {
-                const encoded = this._encodePath(this.state);
+                // path parameters should not be the empty string
+                const normState = {};
+                for (const [key, value] of Object.entries(this.state)) {
+                    if (this.pathParams.has(key) && value === '') {
+                        normState[key] = null;
+                    } else {
+                        normState[key] = value;
+                    }
+                }
+                const encoded = this._encodePath(normState);
                 newUrl.pathname = `${this.rootPath}/${encoded}`;
             } else if (this.usePath) {
                 newUrl.pathname = `${this.rootPath}/${this.state.path}`;