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

package/src/pb-navigation.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { pbMixin } from './pb-mixin.js';
-import { pbHotkeys } from "./pb-hotkeys.js";
+import { pbHotkeys } from './pb-hotkeys.js';
 
 /**
  * Navigate backward/forward in a document. This component does not implement any functionality itself.
@@ -12,111 +12,98 @@ import { pbHotkeys } from "./pb-hotkeys.js";
  * @fires pb-update - When received, updates the state of navigation buttons (disables when no forward/backward navigation possible)
  */
 export class PbNavigation extends pbHotkeys(pbMixin(LitElement)) {
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The direction to navigate in, either `forward` or `backward`
+       */
+      direction: {
+        type: String,
+      },
+      /**
+       * Register a shortcut key, e.g. 'left' or 'shift+left'
+       */
+      keyboard: {
+        type: String,
+      },
+      /**
+       * Rendition of the navigation element if it's disabled
+       * Possible values:
+       * - hidden (default if not set; control is removed from the document layout)
+       * - invisible (controll is hidden, but keeped in the document layout)
+       * - visible (control is visible)
+       */
+      rendition: {
+        type: String,
+      },
+    };
+  }
 
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The direction to navigate in, either `forward` or `backward`
-             */
-            direction: {
-                type: String
-            },
-            /**
-             * Register a shortcut key, e.g. 'left' or 'shift+left'
-             */
-            keyboard: {
-                type: String
-            },
-            /**
-             * Rendition of the navigation element if it's disabled
-             * Possible values:
-             * - hidden (default if not set; control is removed from the document layout)
-             * - invisible (controll is hidden, but keeped in the document layout)
-             * - visible (control is visible)
-             */
-            rendition : {
-                type: String
-            },
-            _url: {
-                type: String
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.direction = 'forward';
-        this.disabled = true;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
+  constructor() {
+    super();
+    this.direction = 'forward';
+    this.disabled = true;
+  }
 
-        if (this.keyboard) {
-            this.hotkeys = {
-                'next': this.keyboard
-            }
-        }
+  connectedCallback() {
+    super.connectedCallback();
 
-        this.subscribeTo('pb-update', this._update.bind(this));
+    if (this.keyboard) {
+      this.hotkeys = {
+        next: this.keyboard,
+      };
+    }
 
-        this.registerHotkey('next', () => this.emitTo('pb-navigate', { direction: this.direction }));
+    this.subscribeTo('pb-update', this._update.bind(this));
 
-        this.signalReady();
-    }
+    this.registerHotkey('next', () => this.emitTo('pb-navigate', { direction: this.direction }));
 
-    _update(ev) {
-        this._url = this._computeURL(ev.detail.data);
-        if (this.direction === 'forward') {
-            if (ev.detail.data.next) {
-                this.disabled = false;
-            } else {
-                this.disabled = true;
-            }
-        } else if (ev.detail.data.previous) {
-            this.disabled = false;
-        } else {
-            this.disabled = true;
-        }
-    }
+    this.signalReady();
+  }
 
-    _computeURL(data) {
-        if (this.direction === 'backward') {
-            return data.previousId ? `?id=${data.previousId}` : `?root=${data.previous}`;
-        } else if (this.direction === 'forward') {
-            return data.nextId ? `?id=${data.nextId}` : `?root=${data.next}`;
-        }
+  _update(ev) {
+    if (this.direction === 'forward') {
+      if (ev.detail.data.next) {
+        this.disabled = false;
+      } else {
+        this.disabled = true;
+      }
+    } else if (ev.detail.data.previous) {
+      this.disabled = false;
+    } else {
+      this.disabled = true;
     }
+  }
 
-    _handleClick(ev) {
-        ev.preventDefault();
-        this.emitTo('pb-navigate', { direction: this.direction });
-    }
+  _handleClick() {
+    this.emitTo('pb-navigate', { direction: this.direction });
+  }
 
-    render() {
-        return html`
-            <a id="button" @click="${this._handleClick}" href="${this._url}"><slot></slot></a>
-        `;
-    }
+  render() {
+    return html`
+      <button id="button" @click="${this._handleClick}" type="button"><slot></slot></button>
+    `;
+  }
 
-    static get styles() {
-        return css`
-                :host {
-                    display: inline;
-                }
-                :host([disabled]):host(:not([rendition])), :host([disabled]):host([rendition="hidden"]) {
-                    display: none;
-                }
-                :host([disabled]):host([rendition="invisible"]) {
-                    visibility: hidden;
-                }
-                :host([disabled]):host([rendition="visible"]) {
-                    visibility: visible;
-                    cursor: not-allowed;
-                }
-                `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: inline;
+      }
+      :host([disabled]):host(:not([rendition])),
+      :host([disabled]):host([rendition='hidden']) {
+        display: none;
+      }
+      :host([disabled]):host([rendition='invisible']) {
+        visibility: hidden;
+      }
+      :host([disabled]):host([rendition='visible']) {
+        visibility: visible;
+        cursor: not-allowed;
+      }
+    `;
+  }
 }
 
 customElements.define('pb-navigation', PbNavigation);

package/src/pb-observable.js

@@ -1,56 +1,56 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { pbMixin } from './pb-mixin.js';
 
-const _scrollObserver = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-            const observable = entry.target;
-            observable.emitTo('pb-visible', { data: observable.data });
-        }
-    });
+const _scrollObserver = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      const observable = entry.target;
+      observable.emitTo('pb-visible', { data: observable.data });
+    }
+  });
 });
 
 /**
  * An observable element, which will emit a signal `pb-visible` whenever
  * it becomes visible on the viewport. Use it to determine the current position
  * within a scrollable area.
- * 
+ *
  * @fires pb-visible - fired when the element becomes visible on the viewport
  */
 export class PbObservable extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            /**
-             * Payload data to be passed with the event
-             */
-            data: {
-                type: String
-            },
-            ...super.properties
-        };
-    }
+  static get properties() {
+    return {
+      /**
+       * Payload data to be passed with the event
+       */
+      data: {
+        type: String,
+      },
+      ...super.properties,
+    };
+  }
 
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (_scrollObserver) {
-            _scrollObserver.unobserve(this);
-        }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (_scrollObserver) {
+      _scrollObserver.unobserve(this);
     }
+  }
 
-    firstUpdated() {
-        _scrollObserver.observe(this);
-    }
+  firstUpdated() {
+    _scrollObserver.observe(this);
+  }
 
-    render() {
-        return html`<slot></slot>`;
-    }
+  render() {
+    return html`<slot></slot>`;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: inline;
-            }
-        `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: inline;
+      }
+    `;
+  }
 }
-customElements.define('pb-observable', PbObservable);
+customElements.define('pb-observable', PbObservable);