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

package/src/pb-browse.js

@@ -1,83 +1,86 @@
 import { PbLoad } from './pb-load.js';
 import { registry } from './urls.js';
-import { waitOnce } from "./pb-mixin.js";
+import { waitOnce } from './pb-mixin.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. 
+ * 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
-            }
-        };
-    }
+  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;
-    }
+  constructor() {
+    super();
+    this.collection = null;
+    this.static = false;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
-        waitOnce('pb-page-ready', () => {
-            this.collection = registry.state.collection;
-            registry.subscribe(this, (state) => { this.collection = state.collection; });
-        });
-    }
+  connectedCallback() {
+    super.connectedCallback();
+    waitOnce('pb-page-ready', () => {
+      this.collection = registry.state.collection;
+      registry.subscribe(this, state => {
+        this.collection = state.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;
+  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;
-                if (this.history) {
-                    registry.commit(this, { collection: this.collection });
-                }
-                console.log('<pb-browse> loading collection %s', this.collection);
-                this.emitTo('pb-search-resubmit');
-            });
-        });
-    }
+  _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;
+        if (this.history) {
+          registry.commit(this, { collection: this.collection });
+        }
+        console.log('<pb-browse> loading collection %s', this.collection);
+        this.emitTo('pb-search-resubmit');
+      });
+    });
+  }
 }
-customElements.define('pb-browse', PbBrowse);
+customElements.define('pb-browse', PbBrowse);

package/src/pb-clipboard.js

@@ -1,76 +1,97 @@
-import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
-import { themableMixin } from "./theming.js";
-import '@polymer/paper-icon-button';
-import '@polymer/iron-icons';
-
-/**
- * A component with a button which copies the contained content to the clipboard.
- * Use for the typical 'quote this content as' hints on a webpage.
- *  
- * @slot content - contains the actual content to copy to the clipboard
- */
-export class PbClipboard extends themableMixin(pbMixin(LitElement)) {
-    static get properties() {
-        return {
-            /**
-             * Label to display above the text to be copied
-             */
-            label: {
-                type: String
-            },
-            ...super.properties
-        };
-    }
-
-    constructor() {
-        super();
-        this.label = 'clipboard.label';
-    }
-
-    render() {
-        return html`
-            <h3>${translate(this.label)}</h3>
-            <div>
-                <slot></slot>
-                <paper-icon-button icon="icons:content-copy" @click="${this._copy}"
-                    title="${translate('clipboard.copy')}"></paper-icon-button>
-            </div>
-        `;
-    }
-
-    /**
-     * Copy text content from the <slot> to the clipboard
-     */
-    _copy() {
-        const slot = this.shadowRoot.querySelector('slot');
-        // first import nodes from the slot into a temporary div
-        const content = document.createElement('div');
-        slot.assignedNodes().forEach((node) => {
-            content.appendChild(document.importNode(node, true));
-        });
-        // copy the innerText of the temp div into the clipboard
-        navigator.clipboard.writeText(content.innerText);
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-            h3 {
-                margin: 0;
-                font-size: .85em;
-                font-weight: normal;
-                color: #3a3a3a;
-            }
-            div {
-                display: flex;
-                align-items: center;
-                padding: 0 16px;
-            }
-        `;
-    }
-}
-customElements.define('pb-clipboard', PbClipboard);
+import { LitElement, html, css } from 'lit';
+import { pbMixin } from './pb-mixin.js';
+import { translate } from './pb-i18n.js';
+import { themableMixin } from './theming.js';
+
+/**
+ * A component with a button which copies the contained content to the clipboard.
+ * Use for the typical 'quote this content as' hints on a webpage.
+ *
+ * @slot content - contains the actual content to copy to the clipboard
+ */
+export class PbClipboard extends themableMixin(pbMixin(LitElement)) {
+  static get properties() {
+    return {
+      /**
+       * Label to display above the text to be copied
+       */
+      label: {
+        type: String,
+      },
+      ...super.properties,
+    };
+  }
+
+  constructor() {
+    super();
+    this.label = 'clipboard.label';
+  }
+
+  render() {
+    return html`
+      <h3>${translate(this.label)}</h3>
+      <div>
+        <slot></slot>
+        <button
+          class="pb-button pb-button--icon copy-button"
+          type="button"
+          @click="${this._copy}"
+          aria-label="${translate('clipboard.copy')}"
+          title="${translate('clipboard.copy')}"
+        >
+          <svg class="copy-button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path
+              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+            ></path>
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+
+  /**
+   * Copy text content from the <slot> to the clipboard
+   */
+  _copy() {
+    const slot = this.shadowRoot.querySelector('slot');
+    // first import nodes from the slot into a temporary div
+    const content = document.createElement('div');
+    slot.assignedNodes().forEach(node => {
+      content.appendChild(document.importNode(node, true));
+    });
+    // copy the innerText of the temp div into the clipboard
+    navigator.clipboard.writeText(content.innerText);
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      h3 {
+        margin: 0;
+        font-size: 0.85em;
+        font-weight: normal;
+        color: #3a3a3a;
+      }
+      div {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        gap: 8px;
+      }
+
+      .copy-button {
+        margin-left: auto;
+        justify-content: center;
+      }
+
+      .copy-button__icon {
+        width: 20px;
+        height: 20px;
+        fill: currentColor;
+      }
+    `;
+  }
+}
+customElements.define('pb-clipboard', PbClipboard);

package/src/pb-code-editor.js

@@ -1,127 +1,135 @@
-import { LitElement, html, css } from 'lit-element';
-import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
-import "@jinntec/jinn-codemirror/dist/src/xml-editor";
-import "@jinntec/jinn-codemirror/dist/src/epidoc-editor";
+import { LitElement, html, css } from 'lit';
+import '@jinntec/jinn-codemirror/dist/src/jinn-codemirror';
+import '@jinntec/jinn-codemirror/dist/src/xml-editor';
+import '@jinntec/jinn-codemirror/dist/src/epidoc-editor';
 import { translate } from './pb-i18n.js';
-import { pbMixin } from "./pb-mixin.js";
-
+import { pbMixin } from './pb-mixin.js';
 
 /**
  * A code editor based on codemirror 6. Provides a wrapper around
  * [@jinntec/jinn-codemirror](https://github.com/JinnElements/jinn-codemirror),
  * mainly for backwards compatibility.
  *
- * @deprecated directly use `jinn-codemirror`/`jinn-xml-editor`/`jinn-epidoc-editor` instead, which are 
+ * @deprecated directly use `jinn-codemirror`/`jinn-xml-editor`/`jinn-epidoc-editor` instead, which are
  * included in the `pb-code-editor` bundle.
  */
 export class PbCodeEditor extends pbMixin(LitElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * the code as a string
+       */
+      code: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * the language mode e.g. 'javascript' or 'xquery'.
+       */
+      mode: {
+        type: String,
+      },
+      /**
+       * label for the editor
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * placeholder if code is empty
+       */
+      placeholder: {
+        type: String,
+      },
+      /**
+       * tab indent size
+       */
+      tabSize: {
+        type: Number,
+      },
+      linter: {
+        attribute: true,
+      },
+    };
+  }
 
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * the code as a string
-             */
-            code: {
-                type: String,
-                reflect: true
-            },
-            /**
-             * the language mode e.g. 'javascript' or 'xquery'.
-             */
-            mode: {
-                type: String
-            },
-            /**
-             * label for the editor
-             */
-            label: {
-                type: String
-            },
-            /**
-             * placeholder if code is empty
-             */
-            placeholder: {
-                type: String
-            },
-            /**
-             * tab indent size
-             */
-            tabSize: {
-                type: Number
-            },
-            linter: {
-                attribute: true
-            }
-        };
-    }
+  constructor() {
+    super();
 
-    constructor() {
-        super();
+    this.code = '';
+    this.mode = 'xml';
+    this.placeholder = 'odd.editor.model.empty';
+    this.tabSize = 2;
+    this.label = '';
+    this.linter = '';
+    this._editor = null;
+  }
 
-        this.code = '';
-        this.mode = 'xml';
-        this.placeholder = 'odd.editor.model.empty';
-        this.tabSize = 2;
-        this.label = '';
-        this.linter = '';
-        this._editor = null;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-    }
+  connectedCallback() {
+    super.connectedCallback();
+  }
 
-    firstUpdated() {
-        super.firstUpdated();
+  firstUpdated() {
+    super.firstUpdated();
 
-        this._editor = this.shadowRoot.getElementById('editor');
-        // this._editor.addEventListener('update', () => {
-        //     this._setCode(this._editor.content);
-        // })
-    }
+    this._editor = this.shadowRoot.getElementById('editor');
+    // this._editor.addEventListener('update', () => {
+    //     this._setCode(this._editor.content);
+    // })
+  }
 
-    render() {
-        return html`
-            <div class="label">${this.label}</div>
-            <jinn-codemirror id="editor" mode="${this.mode}" code="${this.code}" placeholder="${translate(this.placeholder)}"></jinn-codemirror>
-        `;
-    }
+  render() {
+    return html`
+      <div class="label">${this.label}</div>
+      <jinn-codemirror
+        id="editor"
+        mode="${this.mode}"
+        code="${this.code}"
+        placeholder="${translate(this.placeholder)}"
+      ></jinn-codemirror>
+    `;
+  }
 
-    getSource() {
-        if (!this._editor) {
-            return '';
-        }
-        return this._editor.value;
+  getSource() {
+    if (!this._editor) {
+      return '';
     }
+    return this._editor.value;
+  }
 
-    _setCode() {
-        this.dispatchEvent(new CustomEvent('code-changed', { composed: true, bubbles: true, detail: { code: this.getSource() } }));
-    }
+  _setCode() {
+    this.dispatchEvent(
+      new CustomEvent('code-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { code: this.getSource() },
+      }),
+    );
+  }
 
-    refresh() {
-    }
+  refresh() {}
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                width: 100%;
-                margin: 0;
-                position: relative;
-                color:inherit;
-            }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        width: 100%;
+        margin: 0;
+        position: relative;
+        color: inherit;
+      }
 
-            #editor {
-              width: 100%;
-              height: auto;
-            }
+      #editor {
+        width: 100%;
+        height: auto;
+      }
 
-            .label {
-                color: var(--paper-grey-500);
-                margin-bottom:5px;
-            }
-        `;
-    }
+      .label {
+        color: var(--paper-grey-500);
+        margin-bottom: 5px;
+      }
+    `;
+  }
 }
-customElements.define('pb-code-editor', PbCodeEditor);
+customElements.define('pb-code-editor', PbCodeEditor);