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

package/src/pb-facs-link.js

@@ -1,125 +1,154 @@
-import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin';
-
+import { LitElement, html, css } from 'lit';
+import { pbMixin } from './pb-mixin.js';
 
 /**
  * @slot - unnamed default slot for link text
  * @fires pb-show-annotation - Fires when mouse hovers over a pb-facs-link, passing image reference and coordinates that pb-facsimile reacts to
  */
 export class PbFacsLink extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /** URL pointing to the facsimile image to load */
-            facs: {
-                type: String
-            },
-            /** An array of coordinates describing a rectangle to highlight */
-            coordinates: {
-                type: Array
-            },
-            label: {
-                type: String
-            },
-            order: {
-                type: Number
-            },
-            /** 
-             * Type of event which should trigger the facsimile to display. 
-             * Either 'click' or 'mouseover' (default). */
-            trigger: {
-                type: String
-            },
-            /**
-             * If set, trigger a `pb-show-annotation` event as soon as the element is initialized.
-             * Use this to make `pb-facsimile` or `pb-svg` switch to the given image/coordinates upon
-             * load.
-             */
-            emitOnLoad: {
-                type: Boolean,
-                attribute: 'emit-on-load'
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /** URL pointing to the facsimile image to load */
+      facs: {
+        type: String,
+      },
+      /** An array of coordinates describing a rectangle to highlight */
+      coordinates: {
+        type: Array,
+      },
+      label: {
+        type: String,
+      },
+      order: {
+        type: Number,
+      },
+      /**
+       * Type of event which should trigger the facsimile to display.
+       * Either 'click' or 'mouseover' (default). */
+      trigger: {
+        type: String,
+      },
+      /**
+       * If set, trigger a `pb-show-annotation` event as soon as the element is initialized.
+       * Use this to make `pb-facsimile` or `pb-svg` switch to the given image/coordinates upon
+       * load.
+       */
+      emitOnLoad: {
+        type: Boolean,
+        attribute: 'emit-on-load',
+        reflect: true,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.trigger = 'mouseover';
-        this.label = '';
-        this.order = Number.POSITIVE_INFINITY;
-        this.waitFor = 'pb-facsimile,pb-image-strip,pb-tify';
-        this.default = '';
-    }
+  constructor() {
+    super();
+    this.trigger = 'click'; // Changed from 'mouseover' to 'click' to prevent accidental triggering
+    this.label = '';
+    this.order = Number.POSITIVE_INFINITY;
+    this.waitFor = 'pb-facsimile,pb-image-strip,pb-tify';
+    this.default = '';
+    this._loaded = false; // Track if facsimile has been loaded
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-        this.wait(() => {
-            this.emitTo('pb-load-facsimile', {
-                url: this.getImage(),
-                order: this.getOrder(),
-                element: this
-            });
+    // Only emit pb-load-facsimile if emitOnLoad is explicitly true
+    // Default behavior (undefined) should NOT emit to prevent runaway requests
+    if (this.emitOnLoad === true && this.facs && this.facs.trim() !== '') {
+      this.wait(() => {
+        this.emitTo('pb-load-facsimile', {
+          url: this.getImage(),
+          order: this.getOrder(),
+          element: this,
         });
+      });
     }
+  }
 
-    getImage() {
-        return this.facs
-    }
+  getImage() {
+    return this.facs;
+  }
 
-    getLabel() {
-        return this.label
-    }
+  getLabel() {
+    return this.label;
+  }
 
-    getOrder() {
-        return this.order
-    }
+  getOrder() {
+    return this.order;
+  }
 
-    firstUpdated() {
-        const link = this.shadowRoot.querySelector('a');
-        link.addEventListener(this.trigger, this._linkListener.bind(this));
-        if (this.emitOnLoad) {
-            this.wait(() => { this._trigger(); });
-        }
+  firstUpdated() {
+    const link = this.shadowRoot.querySelector('a');
+    link.addEventListener(this.trigger, this._linkListener.bind(this));
+    if (this.emitOnLoad === true) {
+      this.wait(() => {
+        this._trigger();
+      });
     }
+  }
 
-    render() {
-        return html`<a href="javascript:;"><slot>${this.default}</slot></a>`;
-    }
+  render() {
+    return html`<a href="javascript:;"><slot>${this.default}</slot></a>`;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-            }
+  static get styles() {
+    return css`
+      :host {
+      }
 
-            a, a:link {
-                text-decoration: none;
-                color: inherit;
-            }
-        `;
-    }
+      a,
+      a:link {
+        text-decoration: none;
+        color: inherit;
+      }
+    `;
+  }
 
-    _linkListener(ev) {
-        ev.preventDefault();
-        this._trigger();
-    }
+  _linkListener(ev) {
+    ev.preventDefault();
+    this._trigger();
+  }
 
-    _trigger() {
-        console.log("<facs-link> %s %o", this.facs, this.coordinates);
-        this.emitTo('pb-show-annotation', {
-            element: this,
-            file: this.facs,
-            order: this.getOrder(),
-            coordinates: this.coordinates
-        });
+  _trigger() {
+    console.log('<facs-link> %s %o', this.facs, this.coordinates);
+    
+    // Validate facs URL before attempting to load
+    if (!this.facs || this.facs.trim() === '') {
+      console.warn('<pb-facs-link> No facs URL provided');
+      return;
+    }
+    
+    // If emitOnLoad was false or undefined (default), load the facsimile now when user interacts
+    if (this.emitOnLoad !== true && !this._loaded) {
+      this._loaded = true;
+      this.emitTo('pb-load-facsimile', {
+        url: this.getImage(),
+        order: this.getOrder(),
+        element: this,
+      });
+    }
+    
+    // Only emit pb-show-annotation if we're actually going to show something
+    // This prevents runaway requests when users interact with the page
+    if (this.emitOnLoad === true) {
+      this.emitTo('pb-show-annotation', {
+        element: this,
+        file: this.facs,
+        order: this.getOrder(),
+        coordinates: this.coordinates,
+      });
     }
+  }
 
-    /**
-     * Fires when mouse hovers a pb-facs-link
-     *
-     * @event pb-show-annotation
-     * @param {String} file - reference to facsimile file
-     * @param {String} coordinates to highlight
-     */
+  /**
+   * Fires when mouse hovers a pb-facs-link
+   *
+   * @event pb-show-annotation
+   * @param {String} file - reference to facsimile file
+   * @param {String} coordinates to highlight
+   */
 }
-customElements.define('pb-facs-link', PbFacsLink);
+customElements.define('pb-facs-link', PbFacsLink);