@teipublisher/pb-components 2.1.1 → 2.2.0

package/src/pb-collapse.js

@@ -1,184 +1,197 @@
-import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
-import { themableMixin } from "./theming.js";
-import '@polymer/iron-icon';
-import '@polymer/iron-icons';
-import '@polymer/iron-collapse';
-
-
-/**
- * A collapsible block: in collapsed state it only shows a header and expands if clicked.
- * The header should go into slot `collapse-trigger`, the content into `collapse-content`.
- * Example:
- * 
- * ```html
- * <pb-collapse>
- *   <div slot="collapse-trigger">
- *       Metadata
- *   </div>
- *   <pb-view slot="collapse-content" src="document1" subscribe="transcription" xpath="//teiHeader"></pb-view>
- * </pb-collapse>
- * ```
- *
- * @slot collapse-trigger - trigger toggling collapsed content on/off
- * @slot collapse-content - content to be collapsed
- * @cssprop [--pb-collapse-icon-padding=0 4px 0 0] - padding in px for the "caret-down" icon left to the collapsible item
- * @fires pb-collapse-open - Fires opening the collapsed section
- */
-export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * @deprecated
-             * Corresponds to the iron-collapse's horizontal property.
-             */
-            horizontal: {
-                type: Boolean
-            },
-            /**
-             * Corresponds to the iron-collapse's noAnimation property.
-             *
-             */
-            noAnimation: {
-                type: Boolean,
-                attribute: 'no-animation'
-            },
-            /**
-             * Whether currently expanded.
-             *
-             */
-            opened: {
-                type: Boolean
-            },
-            /**
-             * By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.
-             * Set to true to keep multiple pb-collapse open at the same time.
-             */
-            toggles: {
-                type: Boolean
-            },
-            /**
-             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
-             */
-            expandIcon: {
-                type: String,
-                attribute: 'expand-icon'
-            },
-            /**
-             * The icon when expanded.
-             */
-            collapseIcon: {
-                type: String,
-                attribute: 'collapse-icon'
-            },
-            /**
-             * Whether to hide the expand/collapse icon.
-             */
-            noIcons: {
-                type: Boolean,
-                attribute: 'no-icons'
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.horizontal = false;
-        this.noAnimation = false;
-        this.opened = false;
-        this.expandIcon = 'icons:expand-more';
-        this.collapseIcon = 'icons:expand-less';
-        this.noIcons = false;
-        this.toggles = false;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('pb-collapse-open', () => {
-            this.open();
-        });
-        if (this.toggles) {
-            this.subscribeTo('pb-collapse-open', (ev) => {
-                if (!ev.detail || ev.detail._source === this) {
-                    return;
-                }
-                for (const collapse of this.querySelectorAll('pb-collapse')) {
-                    if (collapse === ev.detail._source) {
-                        return;
-                    }
-                }
-                this.close();
-            });
-        }
-    }
-
-    /**
-             * opens the collapsible section
-             */
-    open() {
-        if (this.opened) {
-            return;
-        }
-        this.opened = true;
-
-        this.emitTo('pb-collapse-open', this);
-    }
-
-    /**
-     * closes the collapsible section
-     */
-    close() {
-        if (this.opened) {
-            this.opened = false;
-        }
-    }
-
-    /**
-     * toggles the collapsible state
-     */
-    toggle() {
-        this.opened = !this.opened;
-        if (this.opened) {
-            this.emitTo('pb-collapse-open', this.data);
-        }
-    }
-
-    render() {
-        return html`
-            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
-                ${
-            !this.noIcons ?
-                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
-                null
-            }
-                <slot id="collapseTrigger" name="collapse-trigger"></slot>
-            </div>
-            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
-                <slot name="collapse-content"></slot>
-            </iron-collapse>
-        `;
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            #trigger {
-                display: table-row;
-            }
-
-            #trigger iron-icon {
-                display: table-cell;
-                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
-            }
-
-            slot[name="collapse-trigger"] {
-                display: table-cell;
-            }
-        `;
-    }
-}
-customElements.define('pb-collapse', PbCollapse);
+import {LitElement, html, css} from 'lit-element';
+import {pbMixin} from './pb-mixin.js';
+import {themableMixin} from "./theming.js";
+import '@polymer/iron-icon';
+import '@polymer/iron-icons';
+import '@polymer/iron-collapse';
+
+
+/**
+ * A collapsible block: in collapsed state it only shows a header and expands if clicked.
+ * The header should go into slot `collapse-trigger`, the content into `collapse-content`.
+ * Example:
+ *
+ * ```html
+ * <pb-collapse>
+ *   <div slot="collapse-trigger">
+ *       Metadata
+ *   </div>
+ *   <pb-view slot="collapse-content" src="document1" subscribe="transcription" xpath="//teiHeader"></pb-view>
+ * </pb-collapse>
+ * ```
+ *
+ * By adding a CSS 'icon-right' to a `pb-collapse` the icon can be placed on the right side
+ * ```
+ * <pb-collapse class='icon-right'>
+ * ```
+ *
+ * @slot collapse-trigger - trigger toggling collapsed content on/off
+ * @slot collapse-content - content to be collapsed
+ * @cssprop [--pb-collapse-icon-padding=0 4px 0 0] - padding in px for the "caret-down" icon left to the collapsible item
+ * @fires pb-collapse-open - Fires opening the collapsed section
+ */
+export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
+    static get properties() {
+        return {
+            ...super.properties,
+            /**
+             * @deprecated
+             * Corresponds to the iron-collapse's horizontal property.
+             */
+            horizontal: {
+                type: Boolean
+            },
+            /**
+             * Corresponds to the iron-collapse's noAnimation property.
+             *
+             */
+            noAnimation: {
+                type: Boolean,
+                attribute: 'no-animation'
+            },
+            /**
+             * Whether currently expanded.
+             *
+             */
+            opened: {
+                type: Boolean
+            },
+            /**
+             * By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.
+             * Set to true to keep multiple pb-collapse open at the same time.
+             */
+            toggles: {
+                type: Boolean
+            },
+            /**
+             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
+             */
+            expandIcon: {
+                type: String,
+                attribute: 'expand-icon'
+            },
+            /**
+             * The icon when expanded.
+             */
+            collapseIcon: {
+                type: String,
+                attribute: 'collapse-icon'
+            },
+            /**
+             * Whether to hide the expand/collapse icon.
+             */
+            noIcons: {
+                type: Boolean,
+                attribute: 'no-icons'
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.horizontal = false;
+        this.noAnimation = false;
+        this.opened = false;
+        this.expandIcon = 'icons:expand-more';
+        this.collapseIcon = 'icons:expand-less';
+        this.noIcons = false;
+        this.toggles = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('pb-collapse-open', () => {
+            this.open();
+        });
+        if (this.toggles) {
+            this.subscribeTo('pb-collapse-open', (ev) => {
+                if (!ev.detail || ev.detail._source === this) {
+                    return;
+                }
+                for (const collapse of this.querySelectorAll('pb-collapse')) {
+                    if (collapse === ev.detail._source) {
+                        return;
+                    }
+                }
+                this.close();
+            });
+        }
+    }
+
+    /**
+     * opens the collapsible section
+     */
+    open() {
+        if (this.opened) {
+            return;
+        }
+        this.opened = true;
+
+        this.emitTo('pb-collapse-open', this);
+    }
+
+    /**
+     * closes the collapsible section
+     */
+    close() {
+        if (this.opened) {
+            this.opened = false;
+        }
+    }
+
+    /**
+     * toggles the collapsible state
+     */
+    toggle() {
+        this.opened = !this.opened;
+        if (this.opened) {
+            this.emitTo('pb-collapse-open', this.data);
+        }
+    }
+
+    render() {
+        return html`
+            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
+                ${
+                    !this.noIcons ?
+                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
+                        null
+                }
+                <slot id="collapseTrigger" name="collapse-trigger"></slot>
+            </div>
+            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
+                <slot name="collapse-content"></slot>
+            </iron-collapse>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+                position: relative;
+            }
+
+            #trigger {
+                display: table-row;
+            }
+
+            iron-icon {
+                display: table-cell;
+                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
+            }
+
+            :host(.icon-right) iron-icon {
+                position: absolute;
+                right: 0;
+            }
+
+            slot[name="collapse-trigger"] {
+                display: table-cell;
+            }
+        `;
+    }
+}
+if (!customElements.get('pb-collapse')) {
+    customElements.define('pb-collapse', PbCollapse);
+}

package/src/pb-login.js

@@ -129,16 +129,22 @@ export class PbLogin extends pbMixin(LitElement) {
             };
             this._checkLogin.generateRequest();
         });
+        this.addEventListener('keyup', event => {
+            if (event.keyCode === 13) {
+                event.preventDefault();
+                this._confirmLogin();
+            }
+        });
     }
 
     render() {
         return html`
-            <a href="#" @click="${this._show}" title="${this.user}">
+            <a href="#" @click="${this._show}" role="button" title="${this.user ? this.user : this.loginLabel}">
                 ${
             this.loggedIn ?
                 html`<iron-icon icon="${this.logoutIcon}"></iron-icon> <span class="label">${translate(this.logoutLabel, { user: this.user })}</span>` :
                 html`<iron-icon icon="${this.loginIcon}"></iron-icon> <span class="label">${translate(this.loginLabel)}</span>`
-            }                
+            }
             </a>
 
             <paper-dialog id="loginDialog">
@@ -191,12 +197,8 @@ export class PbLogin extends pbMixin(LitElement) {
             a {
                 color: var(--pb-login-link-color, --pb-link-color);
                 text-decoration: none;
-            }
-
-            @media (max-width: 1024px) {
-                .label {
-                    display: none;
-                }
+                display: flex;
+                gap:0.5rem;
             }
 
             #message {
@@ -280,4 +282,4 @@ export class PbLogin extends pbMixin(LitElement) {
      * @param {Array<String>} groups groups the user is a member of
      */
 }
-customElements.define('pb-login', PbLogin);
+customElements.define('pb-login', PbLogin);

package/.travis.yml

@@ -1,20 +0,0 @@
-dist: xenial
-language: node_js
-node_js:
-    - 14
-services:
-  - docker
-env:
-  - img=existdb/teipublisher:6.0.0-RC1
-before_install:
-  - docker pull $img
-  - docker create  --name exist-ci -p 8080:8080 $img
-  - npm prune
-install:
-  - npm install -q
-before_script:
-  - docker start exist-ci
-  # exist needs time
-  - sleep 30
-script:
-    - npm test