@teipublisher/pb-components 3.4.1 → 3.6.0

package/dist/pb-elements.json

@@ -4723,7 +4723,7 @@
         },
         {
           "name": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -4743,6 +4743,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -4819,7 +4825,7 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -4842,6 +4848,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "attribute": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -5185,11 +5198,11 @@
     {
       "name": "pb-highlight",
       "path": "./src/pb-highlight.js",
-      "description": "Link elements to each other: if the user moves the mouse over one element,\nthe others are highlighted by changing their background color. Which elements\nare linked is determined by the `key` property: elements with the same key\nare linked. If the user moves the mouse over an element, the key is sent with\na `pb-highlight` event. Other elements with the same key react to this event.\n\n`pb-highlight` should be output for relevant elements via ODD processing model.",
+      "description": "Link elements to each other: when a trigger action occurs on one element,\nthe others are highlighted by changing their background color. Which elements\nare linked is determined by the `key` property: elements with the same key\nare linked. Multiple keys (space or comma separated) may be specified; in that\ncase the emitted `pb-highlight-on` event passes an array of ids and receivers\nhighlight when any of their keys matches. The trigger action is configured via the `trigger` property and\nsends a `pb-highlight-on` event. Other elements with the same key react to this event.\n\n`pb-highlight` should be output for relevant elements via ODD processing model.",
       "attributes": [
         {
           "name": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -5209,6 +5222,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -5245,7 +5264,7 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -5268,6 +5287,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "attribute": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "3.4.1",
+  "version": "3.6.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -4723,7 +4723,7 @@
         },
         {
           "name": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -4743,6 +4743,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -4819,7 +4825,7 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -4842,6 +4848,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "attribute": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -5185,11 +5198,11 @@
     {
       "name": "pb-highlight",
       "path": "./src/pb-highlight.js",
-      "description": "Link elements to each other: if the user moves the mouse over one element,\nthe others are highlighted by changing their background color. Which elements\nare linked is determined by the `key` property: elements with the same key\nare linked. If the user moves the mouse over an element, the key is sent with\na `pb-highlight` event. Other elements with the same key react to this event.\n\n`pb-highlight` should be output for relevant elements via ODD processing model.",
+      "description": "Link elements to each other: when a trigger action occurs on one element,\nthe others are highlighted by changing their background color. Which elements\nare linked is determined by the `key` property: elements with the same key\nare linked. Multiple keys (space or comma separated) may be specified; in that\ncase the emitted `pb-highlight-on` event passes an array of ids and receivers\nhighlight when any of their keys matches. The trigger action is configured via the `trigger` property and\nsends a `pb-highlight-on` event. Other elements with the same key react to this event.\n\n`pb-highlight` should be output for relevant elements via ODD processing model.",
       "attributes": [
         {
           "name": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -5209,6 +5222,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -5245,7 +5264,7 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "The key to which this element is connected.",
+          "description": "One or more keys (space or comma separated) to which this element is connected.",
           "type": "string"
         },
         {
@@ -5268,6 +5287,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "trigger",
+          "attribute": "trigger",
+          "description": "Defines one or more actions (space separated) which should cause\nthe highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.",
+          "type": "\"click\" | \"mouseenter\"",
+          "default": "\"mouseenter\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/pb-highlight.js

@@ -2,11 +2,13 @@ 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,
+ * Link elements to each other: when a trigger action occurs on one element,
  * the others are highlighted by changing their background color. Which elements
  * are linked is determined by the `key` property: elements with the same key
- * are linked. If the user moves the mouse over an element, the key is sent with
- * a `pb-highlight` event. Other elements with the same key react to this event.
+ * are linked. Multiple keys (space or comma separated) may be specified; in that
+ * case the emitted `pb-highlight-on` event passes an array of ids and receivers
+ * highlight when any of their keys matches. The trigger action is configured via the `trigger` property and
+ * sends a `pb-highlight-on` event. Other elements with the same key react to this event.
  *
  * `pb-highlight` should be output for relevant elements via ODD processing model.
  *
@@ -16,7 +18,9 @@ import { pbMixin } from './pb-mixin';
  * @fires pb-highlight-off - Fires removal of all highlights that might have existed before
  * @fires pb-highlight-on - Fires highlight event with a key passed to which other pb-highlight elements with the same key will react
  * @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
+ * @fires pb-highlight-on - When received, switches the highlight on if any received key matches one of this element's keys
+ * @prop {"click" | "mouseenter"} trigger - Defines one or more actions (space separated) which should cause
+ * the highlight to show. Default is `mouseenter`. If `click` is among the triggers, matching elements scroll into view.
  * @cssprop --pb-highlight-color - Background color to highlight an element
  */
 export class PbHighlight extends pbMixin(LitElement) {
@@ -24,7 +28,7 @@ export class PbHighlight extends pbMixin(LitElement) {
     return {
       ...super.properties,
       /**
-       * The key to which this element is connected.
+       * One or more keys (space or comma separated) to which this element is connected.
        */
       key: {
         type: String,
@@ -46,6 +50,12 @@ export class PbHighlight extends pbMixin(LitElement) {
         type: Boolean,
         attribute: 'highlight-self',
       },
+      /**
+       * Defines one or more actions (space separated) which should cause the highlight to show.
+       */
+      trigger: {
+        type: String,
+      },
       _className: {
         type: String,
       },
@@ -58,9 +68,38 @@ export class PbHighlight extends pbMixin(LitElement) {
     this.duration = 0;
     this.scroll = false;
     this.highlightSelf = false;
+    this.trigger = 'mouseenter';
     this._className = 'highlight-off';
   }
 
+  _getTriggers() {
+    return (this.trigger || 'mouseenter').trim().split(/\s+/);
+  }
+
+  _getKeys() {
+    return (this.key || '').trim().split(/[\s,]+/).filter(Boolean);
+  }
+
+  _getEventId() {
+    const keys = this._getKeys();
+    return keys.length > 1 ? keys : keys[0] || null;
+  }
+
+  _matchesKey(eventId) {
+    const keys = this._getKeys();
+    if (!keys.length || eventId == null) {
+      return false;
+    }
+    if (Array.isArray(eventId)) {
+      return keys.some(key => eventId.includes(key));
+    }
+    return keys.includes(eventId);
+  }
+
+  _isClickable() {
+    return this._getTriggers().includes('click');
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.subscribeTo('pb-highlight-on', this._highlightOn.bind(this));
@@ -74,17 +113,18 @@ export class PbHighlight extends pbMixin(LitElement) {
     }
   }
 
-  _mouseOver() {
+  _triggerHighlight() {
     this.emitTo('pb-highlight-off', {
       source: this,
     });
+    const id = this._getEventId();
     if (this.highlightSelf) {
-      this._highlightOn({ detail: { id: this.key } });
+      this._highlightOn({ detail: { id } });
     }
     this.emitTo('pb-highlight-on', {
-      id: this.key,
+      id,
       source: this,
-      scroll: this.scroll,
+      scroll: this.scroll || this._isClickable(),
     });
   }
 
@@ -92,7 +132,12 @@ export class PbHighlight extends pbMixin(LitElement) {
     if (this.disabled) {
       return html`<slot></slot>`;
     }
-    return html`<span id="content" class="${this._className}" @mouseover="${this._mouseOver}"
+    const triggers = this._getTriggers();
+    return html`<span
+      id="content"
+      class="${this._className}${this._isClickable() ? ' clickable' : ''}"
+      @mouseenter="${triggers.includes('mouseenter') ? this._triggerHighlight : null}"
+      @click="${triggers.includes('click') ? this._triggerHighlight : null}"
       ><slot></slot
     ></span>`;
   }
@@ -127,14 +172,18 @@ export class PbHighlight extends pbMixin(LitElement) {
       .highlight-off {
         background-color: inherit;
       }
+
+      .clickable {
+        cursor: pointer;
+      }
     `;
   }
 
   _highlightOn(ev) {
-    if (ev.detail.source != this && ev.detail.id === this.key) {
+    if (ev.detail.source != this && this._matchesKey(ev.detail.id)) {
       this._className = 'highlight-on';
       if (ev.detail.scroll && this.disabled == false) {
-        this.scrollIntoView({ block: 'center', behaviour: 'smooth' });
+        this.scrollIntoView({ block: 'center', behavior: 'smooth' });
       }
       if (this.duration > 0) {
         setTimeout(() => {
@@ -151,16 +200,16 @@ export class PbHighlight extends pbMixin(LitElement) {
   }
 
   /**
-   * Fired if mouse pointer enters the element
+   * Fired when a trigger action occurs on the element
    *
    * @event pb-highlight-on
-   * @param {String} id key
+   * @param {String|Array<String>} id key or keys
    * @param {Object} source this element
-   * @param {scroll} should target scroll to highlighted position
+   * @param {Boolean} scroll should target scroll to highlighted position
    */
 
   /**
-   * Fired if mouse pointer leaves the element
+   * Fired before a new highlight is applied
    *
    * @event pb-highlight-off
    * @param {Object} source this element