https://reach.wellfound.com/assets/controllers/brain_chat_popover_…611bd91b5c57f4bb9c283d061092906755e16a32.js

1import { Controller } from "@hotwired/stimulus";
2
3const CLOSE_DELAY_MS = 200;
4const PANEL_GAP = 4;
5const PANEL_OFFSET_Y = 16;
6
7export default class extends Controller {
8  static targets = ["panel"];
9
10  connect() {
11    this.closeTimer = null;
12    this.observer = new MutationObserver(() => this.hideIfEmpty());
13    this.observer.observe(this.panelTarget, { childList: true, subtree: true });
14  }
15
16  disconnect() {
17    this.clearCloseTimer();
18    this.observer?.disconnect();
19  }
20
21  show() {
22    this.clearCloseTimer();
23    if (!this.hasConversations()) return;
24
25    this.positionPanel();
26    this.showPanel();
27  }
28
29  scheduleHide() {
30    this.clearCloseTimer();
31    this.closeTimer = setTimeout(() => this.hidePanel(), CLOSE_DELAY_MS);
32  }
33
34  keepOpen() {
35    this.clearCloseTimer();
36  }
37
38  hideIfEmpty() {
39    if (!this.hasConversations()) this.hidePanel();
40  }
41
42  showPanel() {
43    this.panelTarget.classList.remove("invisible", "opacity-0", "translate-x-2");
44    this.panelTarget.classList.add("visible", "opacity-100", "translate-x-0");
45  }
46
47  hidePanel() {
48    this.panelTarget.classList.remove("visible", "opacity-100", "translate-x-0");
49    this.panelTarget.classList.add("invisible", "opacity-0", "translate-x-2");
50  }
51
52  positionPanel() {
53    const rect = this.element.getBoundingClientRect();
54    this.panelTarget.style.left = `${rect.right + PANEL_GAP}px`;
55    this.panelTarget.style.top = `${rect.top - PANEL_OFFSET_Y}px`;
56  }
57
58  hasConversations() {
59    const count = this.panelTarget.querySelector("[data-count]")?.dataset.count;
60    return count && count !== "0";
61  }
62
63  clearCloseTimer() {
64    if (this.closeTimer) {
65      clearTimeout(this.closeTimer);
66      this.closeTimer = null;
67    }
68  }
69};