@teipublisher/pb-components 1.43.5 → 1.44.0

package/src/pb-browse.js

@@ -0,0 +1,77 @@
+import { PbLoad } from './pb-load.js';
+
+/**
+ * Extends PbLoad to support browsing collections.
+ * 
+ * This is a reduced version of `pb-browse-docs`, which differs
+ * from a plain `pb-load` only in that it scans the returned
+ * collection listing for links to subcollections and keeps
+ * track of the current collection. 
+ *
+ * All UI elements present in `pb-browse-docs` have been removed.
+ */
+export class PbBrowse extends PbLoad {
+ 
+    static get properties() {
+        return {
+            ...super.properties,
+            /** The collection currently being browsed (if any) */
+            collection: {
+                type: String
+            },
+            /**
+             * If set, rewrite URLs to load pages as static HTML files,
+             * so no TEI Publisher instance is required
+             */
+            static: {
+                type: Boolean
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.collection = null;
+        this.static = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.collection = this.getParameter('collection');
+    }
+
+    getURL(params) {
+        if (this.static) {
+            // use a static URL
+            return `collections/${this.collection ? this.collection + '/' : ''}${params.start || '1'}.html`;
+        }
+        const url = super.getURL(params);
+        return this.collection ? `${url}/${this.collection}` : url;
+    }
+
+    _onLoad(content) {
+        window.scrollTo(0, 0);
+        const div = content.querySelector('[data-root]');
+        const collection = div && div.getAttribute('data-root');
+        const writable = div && div.classList.contains('writable');
+        this.emitTo('pb-collection', {
+            writable,
+            collection
+        });
+        document.querySelectorAll('[can-write]').forEach((elem) => {
+            elem.disabled = !writable;
+        });
+        content.querySelectorAll('[data-collection]').forEach(link => {
+            link.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                this.collection = link.getAttribute('data-collection');
+                this.start = 1;
+                this.setParameter('collection', this.collection);
+                this.pushHistory('browse collection');
+                console.log('<pb-browse> loading collection %s', this.collection);
+                this.emitTo('pb-search-resubmit');
+            });
+        });
+    }
+}
+customElements.define('pb-browse', PbBrowse);

package/src/pb-components.js

@@ -8,6 +8,7 @@ import './pb-link.js';
 import './pb-facs-link.js';
 import './pb-collapse.js';
 import './pb-browse-docs.js';
+import './pb-browse.js';
 import './pb-document.js';
 import './pb-load.js';
 import './pb-navigation.js';

package/src/pb-message.js

@@ -6,13 +6,7 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { translate } from "./pb-i18n.js";
 
 /**
- * Show a dialog with buttons. Used by editor.
- *
- *
- * todo:confirmation is only partly implemented needs some method to detect which button was clicked
- * @customElement
- * @polymer
- * @demo demo/pb-message.html
+ * Show a dialog with buttons. Used by ODD editor.
  */
 export class PbMessage extends LitElement {
 
@@ -58,14 +52,16 @@ export class PbMessage extends LitElement {
         super();
         this.title = '';
         this.message = '';
-        this.type = 'message'; //defaults to 'message'
+        this.type = 'message'; // defaults to 'message'
     }
 
     render() {
         return html`
         <paper-dialog id="modal">
-            <h2 id="title">${this.title}</h2>
-            <paper-dialog-scrollable id="message" class="message" tabindex="0">${unsafeHTML(this.message)}</paper-dialog-scrollable>
+            <h2 id="title">${unsafeHTML(this.title)}</h2>
+            <paper-dialog-scrollable id="message" class="message" tabindex="0">
+            ${ this.message ? unsafeHTML(this.message) : html`<slot></slot>` }
+            </paper-dialog-scrollable>
 
             <div class="buttons">
                 <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus" ?hidden="${this.isConfirm()}">${translate('dialogs.close')}</paper-button>