Function openPluginDetailsModal

website/src/scripts/pages/plugins.ts:117–184

(path: string, trigger?: HTMLElement)

}

function openPluginDetailsModal(path: string, trigger?: HTMLElement): void {
  const item = pluginByPath.get(path);
  if (!item) {
    return;
  }

  const metaParts: string[] = [];
  metaParts.push(
    `<span class="resource-tag">${
      item.external ? 'External plugin' : `${item.itemCount} items`
    }</span>`
  );

  if (item.author?.name) {
    metaParts.push(`<span class="resource-tag">by ${escapeHtml(item.author.name)}</span>`);
  }

  if (item.lastUpdated) {
    metaParts.push(
      `<span class="last-updated">Updated ${escapeHtml(
        formatRelativeTime(item.lastUpdated)
      )}</span>`
    );
  }

  const tagHtml = (item.tags || [])
    .map((tagText) => `<span class="resource-tag">${escapeHtml(tagText)}</span>`)
    .join('');

  const includedItems = item.items || [];
  const includedItemHtml = includedItems
    .slice(0, 24)
    .map(
      (pluginItem) =>
        `<span class="resource-tag tag-plugin-item">${escapeHtml(getPluginItemLabel(pluginItem))}</span>`
    )
    .join('');
  const includedMoreHtml =
    includedItems.length > 24
      ? `<span class="resource-tag">+${includedItems.length - 24} more</span>`
      : '';

  const actions = [
    item.external
      ? ''
      : `<button id="plugin-details-install" class="btn btn-primary" type="button" data-plugin-name="${escapeHtml(
          item.name
        )}">Copy Install</button>`,
    item.external
      ? `<a class="btn btn-secondary" href="${escapeHtml(
          getPluginRepositoryUrl(item)
        )}" target="_blank" rel="noopener noreferrer">Repository</a>`
      : `<button class="btn btn-secondary" type="button" data-open-file-path="${escapeHtml(
          item.path
        )}" data-open-file-type="plugin">Source</button>`,
  ].filter(Boolean);

  openCardDetailsModal({