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

package/src/pb-highlight.js

@@ -1,6 +1,5 @@
-import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin';
-
+import { LitElement, html, css } from 'lit';
+import { pbMixin } from './pb-mixin.js';
 
 /**
  * Link elements to each other: if the user moves the mouse over one element,
@@ -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;