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

package/src/pb-highlight.js

@@ -1,7 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin';
 
-
 /**
  * Link elements to each other: if the user moves the mouse over one element,
  * the others are highlighted by changing their background color. Which elements
@@ -11,7 +10,7 @@ import { pbMixin } from './pb-mixin';
  *
  * `pb-highlight` should be output for relevant elements via ODD processing model.
  *
- * 
+ *
  *
  * @slot - default unnamed slot for highlight content
  * @fires pb-highlight-off - Fires removal of all highlights that might have existed before
@@ -19,151 +18,152 @@ import { pbMixin } from './pb-mixin';
  * @fires pb-highlight-off - When received, triggers removal of a highlight that might have been on for this element before
  * @fires pb-highlight-on - When received, switches the highlight on if the same key was received as the current element has
  * @cssprop --pb-highlight-color - Background color to highlight an element
-*/
+ */
 export class PbHighlight extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The key to which this element is connected.
-             */
-            key: {
-                type: String
-            },
-            /**
-             * If set to > 0, specifies a duration (in ms) after which
-             * the highlighting will be removed again
-             */
-            duration: {
-                type: Number
-            },
-            /**
-             * Scroll this element into view when it receives a highlight event
-             */
-            scroll: {
-                type: Boolean
-            },
-            highlightSelf: {
-                type: Boolean,
-                attribute: 'highlight-self'
-            },
-            _className: {
-                type: String
-            }
-        };
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The key to which this element is connected.
+       */
+      key: {
+        type: String,
+      },
+      /**
+       * If set to > 0, specifies a duration (in ms) after which
+       * the highlighting will be removed again
+       */
+      duration: {
+        type: Number,
+      },
+      /**
+       * Scroll this element into view when it receives a highlight event
+       */
+      scroll: {
+        type: Boolean,
+      },
+      highlightSelf: {
+        type: Boolean,
+        attribute: 'highlight-self',
+      },
+      _className: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.key = null;
+    this.duration = 0;
+    this.scroll = false;
+    this.highlightSelf = false;
+    this._className = 'highlight-off';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.subscribeTo('pb-highlight-on', this._highlightOn.bind(this));
+    this.subscribeTo('pb-highlight-off', this._highlightOff.bind(this));
+  }
+
+  command(command, state) {
+    super.command(command, state);
+    if (this.disabled) {
+      this._className = 'highlight-off';
     }
-
-    constructor() {
-        super();
-        this.key = null;
-        this.duration = 0;
-        this.scroll = false;
-        this.highlightSelf = false;
-        this._className = 'highlight-off';
+  }
+
+  _mouseOver() {
+    this.emitTo('pb-highlight-off', {
+      source: this,
+    });
+    if (this.highlightSelf) {
+      this._highlightOn({ detail: { id: this.key } });
     }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.subscribeTo('pb-highlight-on', this._highlightOn.bind(this));
-        this.subscribeTo('pb-highlight-off', this._highlightOff.bind(this));
+    this.emitTo('pb-highlight-on', {
+      id: this.key,
+      source: this,
+      scroll: this.scroll,
+    });
+  }
+
+  render() {
+    if (this.disabled) {
+      return html`<slot></slot>`;
     }
-
-    command(command, state) {
-        super.command(command, state);
-        if (this.disabled) {
-            this._className = 'highlight-off';
+    return html`<span id="content" class="${this._className}" @mouseover="${this._mouseOver}"
+      ><slot></slot
+    ></span>`;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline;
+      }
+
+      @keyframes keyFrameBackgroundColorIn {
+        0% {
+          background-color: inherit;
         }
-    }
-
-    _mouseOver() {
-        this.emitTo('pb-highlight-off', {
-            source: this
-        });
-        if (this.highlightSelf) {
-            this._highlightOn({ detail: { id: this.key } });
+        100% {
+          background-color: var(--pb-highlight-color, #f9e976);
         }
-        this.emitTo('pb-highlight-on', {
-            id: this.key,
-            source: this,
-            scroll: this.scroll
-        });
+      }
+
+      #content {
+        display: inline;
+      }
+
+      .highlight-on {
+        background-color: var(--pb-highlight-color, #f9e976);
+        animation-name: keyFrameBackgroundColorIn;
+        animation-duration: 500ms;
+        animation-iteration-count: 1;
+        animation-timing-function: ease-in;
+      }
+
+      .highlight-off {
+        background-color: inherit;
+      }
+    `;
+  }
+
+  _highlightOn(ev) {
+    if (ev.detail.source != this && ev.detail.id === this.key) {
+      this._className = 'highlight-on';
+      if (ev.detail.scroll && this.disabled == false) {
+        this.scrollIntoView({ block: 'center', behaviour: 'smooth' });
+      }
+      if (this.duration > 0) {
+        setTimeout(() => {
+          this._className = 'highlight-off';
+        }, this.duration);
+      }
     }
+  }
 
-    render() {
-        if (this.disabled) {
-            return html`<slot></slot>`;
-        }
-        return html`<span id="content" class="${this._className}" @mouseover="${this._mouseOver}"><slot></slot></span>`;
+  _highlightOff(ev) {
+    if (ev.detail.source != this) {
+      this._className = 'highlight-off';
     }
-
-    static get styles() {
-        return css`
-            :host {
-                display: inline;
-            }
-
-            @keyframes keyFrameBackgroundColorIn {
-                0% {
-                    background-color: inherit;
-                }
-                100% {
-                    background-color: var(--pb-highlight-color, #F9E976);
-                }
-            }
-
-            #content {
-                display: inline;
-            }
-
-            .highlight-on {
-                background-color: var(--pb-highlight-color, #F9E976);
-                animation-name: keyFrameBackgroundColorIn;
-                animation-duration: 500ms;
-                animation-iteration-count: 1;
-                animation-timing-function: ease-in;
-
-            }
-
-            .highlight-off {
-                background-color: inherit;
-            }
-        `;
-    }
-
-    _highlightOn(ev) {
-        if (ev.detail.source != this && ev.detail.id === this.key) {
-            this._className = 'highlight-on';
-            if (ev.detail.scroll && this.disabled == false) {
-                this.scrollIntoView({ block: "center", behaviour: 'smooth' });
-            }
-            if (this.duration > 0) {
-                setTimeout(function () {
-                    this._className = 'highlight-off';
-                }.bind(this), this.duration);
-            }
-        }
-    }
-
-    _highlightOff(ev) {
-        if (ev.detail.source != this) {
-            this._className = 'highlight-off';
-        }
-    }
-
-    /**
-     * Fired if mouse pointer enters the element
-     *
-     * @event pb-highlight-on
-     * @param {String} id key
-     * @param {Object} source this element
-     * @param {scroll} should target scroll to highlighted position
-     */
-
-    /**
-     * Fired if mouse pointer leaves the element
-     *
-     * @event pb-highlight-off
-     * @param {Object} source this element
-     */
+  }
+
+  /**
+   * Fired if mouse pointer enters the element
+   *
+   * @event pb-highlight-on
+   * @param {String} id key
+   * @param {Object} source this element
+   * @param {scroll} should target scroll to highlighted position
+   */
+
+  /**
+   * Fired if mouse pointer leaves the element
+   *
+   * @event pb-highlight-off
+   * @param {Object} source this element
+   */
 }
-customElements.define('pb-highlight', PbHighlight);
+customElements.define('pb-highlight', PbHighlight);

package/src/pb-hotkeys.js

@@ -1,18 +1,16 @@
 import hotkeys from 'hotkeys-js';
 
-const EXCLUDED_TAGS = [
-    'INPUT', 'SELECT', 'TEXTAREA', 'PAPER-INPUT', 'PAPER-TEXTAREA', 'PB-SEARCH'
-];
+const EXCLUDED_TAGS = ['INPUT', 'SELECT', 'TEXTAREA', 'PAPER-INPUT', 'PAPER-TEXTAREA', 'PB-SEARCH'];
 const excluded = new Set(EXCLUDED_TAGS);
 
 // disable hotkeys for form elements
 let firstLoad = true;
 if (firstLoad) {
-    hotkeys.filter = (event) => {
-        const tagName = (event.target || event.srcElement).tagName;
-        return !(tagName.isContentEditable || excluded.has(tagName));
-    }
-    firstLoad = false;
+  hotkeys.filter = event => {
+    const { tagName } = event.target || event.srcElement;
+    return !(tagName.isContentEditable || excluded.has(tagName));
+  };
+  firstLoad = false;
 }
 
 /**
@@ -21,56 +19,56 @@ if (firstLoad) {
  * can then map the symbolic name to a function by calling `registerHotkey`.
  *
  */
-export const pbHotkeys = (superclass) => class PbHotkeys extends superclass {
-
+export const pbHotkeys = superclass =>
+  class PbHotkeys extends superclass {
     static get properties() {
-        return {
-            ...super.properties,
-            hotkeys: {
-                type: Object
-            }
-        };
-    };
+      return {
+        ...super.properties,
+        hotkeys: {
+          type: Object,
+        },
+      };
+    }
 
     constructor() {
-        super();
-        this.hotkeys = {};
+      super();
+      this.hotkeys = {};
     }
 
     /**
-     * 
+     *
      * @param {String} name symbolic name, must be defined in `this.hotkeys`
      * @param {import('hotkeys-js').KeyHandler} callback a callback function
      */
     registerHotkey(name, callback, target) {
-        if (name && this.hotkeys[name]) {
-            if (target) {
-                hotkeys(this.hotkeys[name], { element: target }, callback);
-            } else {
-                hotkeys(this.hotkeys[name], callback);
-            }
+      if (name && this.hotkeys[name]) {
+        if (target) {
+          hotkeys(this.hotkeys[name], { element: target }, callback);
+        } else {
+          hotkeys(this.hotkeys[name], callback);
         }
+      }
     }
 
     display(name) {
-        if (name && this.hotkeys[name]) {
-            let output = [];
-            const keys = this.hotkeys[name].split(/\s*,\s*/);
-            keys.forEach((key) => {
-                output.push(key.replace('+', '-'));
-            });
-            return output.join(', ');
-        }
-        return '';
+      if (name && this.hotkeys[name]) {
+        const output = [];
+        const keys = this.hotkeys[name].split(/\s*,\s*/);
+        keys.forEach(key => {
+          output.push(key.replace('+', '-'));
+        });
+        return output.join(', ');
+      }
+      return '';
     }
-}
+  };
 
 export function registerHotkey(name, callback, target) {
-    if (target) {
-        hotkeys(name, { element: target }, callback);
-    } else {
-        hotkeys(name, callback);
-    }
+  if (target) {
+    hotkeys(name, { element: target }, callback);
+  } else {
+    hotkeys(name, callback);
+  }
 }
 
-window.pbKeyboard = registerHotkey;
+window.pbKeyboard = registerHotkey;

package/src/pb-i18n.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit-element';
-import { directive, NodePart, AttributePart } from "lit-html";
+import { directive, NodePart, AttributePart } from 'lit-html';
 
 // Cache created lit-html parts, so we can update translations
 const partCache = new Map();
@@ -7,92 +7,89 @@ const partCache = new Map();
 // The currently used i18next translation function
 let _translate;
 
-/** 
+/**
  * Called by pb-page before the first pb-i18n-update
  * to make sure the translation function is set.
  */
 export function initTranslation(translate) {
-    _translate = translate;
+  _translate = translate;
 }
 
 function isConnected(part) {
-    if (part instanceof NodePart) {
-        return part.startNode.isConnected;
-
-    }
-    if (part instanceof AttributePart) {
-        return part.committer.element.isConnected;
-
-    }
-    return part.element.isConnected;
+  if (part instanceof NodePart) {
+    return part.startNode.isConnected;
+  }
+  if (part instanceof AttributePart) {
+    return part.committer.element.isConnected;
+  }
+  return part.element.isConnected;
 }
 
 function removeDisconnectedParts() {
-    Object.keys(partCache).forEach((part) => {
-        if (!isConnected(part)) {
-            partCache.delete(part);
-        }
-    });
+  Object.keys(partCache).forEach(part => {
+    if (!isConnected(part)) {
+      partCache.delete(part);
+    }
+  });
 }
 
 function whenIdle(cb) {
-    "requestIdleCallback" in window ? window.requestIdleCallback(cb) : setTimeout(cb)
+  'requestIdleCallback' in window ? window.requestIdleCallback(cb) : setTimeout(cb);
 }
 
 function updatePart(part, cb) {
+  // Grab the new value
+  const newValue = cb();
 
-    // Grab the new value
-    const newValue = cb();
+  // Only set the value if it has changed
+  if (part.value === newValue) {
+    return;
+  }
 
-    // Only set the value if it has changed
-    if (part.value === newValue) {
-        return;
-    }
-
-    // Set the new value
-    part.setValue(newValue);
-    part.commit();
+  // Set the new value
+  part.setValue(newValue);
+  part.commit();
 }
 
 function updateParts(options) {
-    _translate = options.t;
-    partCache.forEach((cb, part) => {
-        if (isConnected(part)) {
-            updatePart(part, cb);
-        }
-    });
+  _translate = options.t;
+  partCache.forEach((cb, part) => {
+    if (isConnected(part)) {
+      updatePart(part, cb);
+    }
+  });
 }
 
 /**
  * Translate the given string using i18n.
- * 
+ *
  * @param {String} key The key to translate
  * @param {Object} [value] Optional object containing interpolation values
- * @returns 
+ * @returns
  */
 export function get(key, value) {
-    if (_translate) {
-        return _translate(key, value);
-    }
-    return key;
+  if (_translate) {
+    return _translate(key, value);
+  }
+  return key;
 }
 
-export const langChanged = directive((cb) => (part) => {
-    partCache.set(part, cb);
-    updatePart(part, cb);
+export const langChanged = directive(cb => part => {
+  partCache.set(part, cb);
+  updatePart(part, cb);
 });
 
 /**
  * lit-html directive to translate a given key into the target language
  * using i18next.
- * 
+ *
  * @param {String} key The key to translate
  * @param {Object} [value] Optional object containing interpolation values
  */
 export const translate = (key, value) => langChanged(() => get(key, value));
 
-document.addEventListener('pb-i18n-update', (ev) => {
-    updateParts(ev.detail);
+document.addEventListener('pb-i18n-update', ev => {
+  updateParts(ev.detail);
 });
 
 // start a background task to garbage collect parts
@@ -103,65 +100,65 @@ setInterval(() => whenIdle(() => removeDisconnectedParts()), 1000 * 60);
  * display the contained content.
  */
 export class PbI18n extends LitElement {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The i18n key to use for looking up the translation.
-             */
-            key: {
-                type: String
-            },
-            /**
-             * Optional interpolation parameters to be passed to the
-             * translation function
-             */
-            options: {
-                type: Object
-            },
-            _translated: {
-                type: String
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.key = 'missing-key';
-        this._options = null;
-        this._translated = null;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        
-        this._fallback = this.innerHTML;
-
-        document.addEventListener('pb-i18n-update', this._translate.bind(this));
-
-        this._translate();
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The i18n key to use for looking up the translation.
+       */
+      key: {
+        type: String,
+      },
+      /**
+       * Optional interpolation parameters to be passed to the
+       * translation function
+       */
+      options: {
+        type: Object,
+      },
+      _translated: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.key = 'missing-key';
+    this._options = null;
+    this._translated = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._fallback = this.innerHTML;
+
+    document.addEventListener('pb-i18n-update', this._translate.bind(this));
+
+    this._translate();
+  }
+
+  set options(value) {
+    this._options = value;
+    this._translate();
+  }
+
+  _translate() {
+    const transl = get(this.key, this._options);
+    if (transl && transl !== this.key) {
+      this._translated = transl;
+    } else {
+      this._translated = null;
     }
+  }
 
-    set options(value) {
-        this._options = value;
-        this._translate();
-    }
+  render() {
+    return this._translated ? this._translated : this._fallback;
+  }
 
-    _translate() {
-        const transl = get(this.key, this._options);
-        if (transl && transl !== this.key) {
-            this._translated = transl;
-        } else {
-            this._translated = null;
-        }
-    }
-
-    render() {
-        return this._translated ? this._translated : this._fallback;
-    }
-
-    createRenderRoot() {
-        return this;
-    }
+  createRenderRoot() {
+    return this;
+  }
 }
-customElements.define('pb-i18n', PbI18n);
+customElements.define('pb-i18n', PbI18n);