1 files changed, 43 insertions, 0 deletions
diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
new file mode 100644
index 00000000..ce90f3e5
--- /dev/null
+++ b/web_src/js/features/contextpopup.js
@@ -0,0 +1,43 @@
+import {createApp} from 'vue';
+import ContextPopup from '../components/ContextPopup.vue';
+import {parseIssueHref} from '../utils.js';
+import {createTippy} from '../modules/tippy.js';
+
+export function initContextPopups() {
+  const refIssues = document.querySelectorAll('.ref-issue');
+  attachRefIssueContextPopup(refIssues);
+}
+
+export function attachRefIssueContextPopup(refIssues) {
+  for (const refIssue of refIssues) {
+    if (refIssue.classList.contains('ref-external-issue')) {
+      return;
+    }
+
+    const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href'));
+    if (!owner) return;
+
+    const el = document.createElement('div');
+    refIssue.parentNode.insertBefore(el, refIssue.nextSibling);
+
+    const view = createApp(ContextPopup);
+
+    try {
+      view.mount(el);
+    } catch (err) {
+      console.error(err);
+      el.textContent = 'ContextPopup failed to load';
+    }
+
+    createTippy(refIssue, {
+      content: el,
+      placement: 'top-start',
+      interactive: true,
+      role: 'dialog',
+      interactiveBorder: 5,
+      onShow: () => {
+        el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
+      },
+    });
+  }
+}