@cesium/engine/Source/Core/Credit.js

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin.

// @ts-check

import DOMPurify from "dompurify";
import Check from "./Check.js";
import defined from "./defined.js";

let nextCreditId = 0;
/**
 * @private
 * @type {Record<string, number>}
 */
const creditToId = {};

/**
 * A credit contains data pertaining to how to display attributions/credits for certain content on the screen.
 *
 * @example
 * // Create a credit with a tooltip, image and link
 * const credit = new Cesium.Credit('<a href="https://cesium.com/" target="_blank"><img src="/images/cesium_logo.png"  style="vertical-align: -7px" title="Cesium"/></a>');
 */
class Credit {
  /**
   * @param {string} html An string representing an html code snippet
   * @param {boolean} [showOnScreen=false] If true, the credit will be visible in the main credit container.  Otherwise, it will appear in a popover. All credits are displayed `inline`, if you have an image we recommend sizing it correctly to match the text or use css to `vertical-align` it.
   *
   * @exception {DeveloperError} html is required.
   */
  constructor(html, showOnScreen) {
    //>>includeStart('debug', pragmas.debug);
    Check.typeOf.string("html", html);
    //>>includeEnd('debug');
    let id;
    const key = html;

    if (defined(creditToId[key])) {
      id = creditToId[key];
    } else {
      id = nextCreditId++;
      creditToId[key] = id;
    }

    showOnScreen = showOnScreen ?? false;

    // Credits are immutable so generate an id to use to optimize equal()
    this._id = id;
    this._html = html;
    this._showOnScreen = showOnScreen;
    this._element = undefined;
  }

  /**
   * The credit content
   * @type {string}
   * @readonly
   */
  get html() {
    return this._html;
  }

  /**
   * @type {number}
   * @readonly
   *
   * @private
   */
  get id() {
    return this._id;
  }

  /**
   * Whether the credit should be displayed on screen or in a lightbox
   * @type {boolean}
   */
  get showOnScreen() {
    return this._showOnScreen;
  }

  set showOnScreen(value) {
    this._showOnScreen = value;
  }

  /**
   * Gets the credit element
   * @type {HTMLElement}
   * @readonly
   */
  get element() {
    if (!defined(this._element)) {
      const html = DOMPurify.sanitize(this._html);

      const div = document.createElement("div");
      div.className = "cesium-credit-wrapper";
      // @ts-expect-error Consider using a data-id attribute, instead.
      div._creditId = this._id;
      div.style.display = "inline";
      div.innerHTML = html;

      const links = div.querySelectorAll("a");
      for (let i = 0; i < links.length; i++) {
        links[i].setAttribute("target", "_blank");
      }

      this._element = div;
    }
    return this._element;
  }

  /**
   * Returns true if the credits are equal
   *
   * @param {Credit} [left] The first credit
   * @param {Credit} [right] The second credit
   * @returns {boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.
   */
  static equals(left, right) {
    return (
      left === right ||
      (defined(left) &&
        defined(right) &&
        left._id === right._id &&
        left._showOnScreen === right._showOnScreen)
    );
  }

  /**
   * Returns true if the credits are equal
   *
   * @param {Credit} [credit] The credit to compare to.
   * @returns {boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.
   */
  equals(credit) {
    return Credit.equals(this, credit);
  }

  /**
   * @private
   */
  isIon() {
    return this.html.indexOf("ion-credit.png") !== -1;
  }

  /**
   * @private
   * @param attribution
   * @return {Credit}
   */
  // @ts-expect-error Define type for GeocoderService.attributions
  static getIonCredit(attribution) {
    const showOnScreen =
      defined(attribution.collapsible) && !attribution.collapsible;
    const credit = new Credit(attribution.html, showOnScreen);

    return credit;
  }

  /**
   * Duplicates a Credit instance.
   *
   * @param {Credit} [credit] The Credit to duplicate.
   * @returns {Credit} A new Credit instance that is a duplicate of the one provided. (Returns undefined if the credit is undefined)
   */
  static clone(credit) {
    if (defined(credit)) {
      return new Credit(credit.html, credit.showOnScreen);
    }
  }
}

export default Credit;