github-stories/github-chat.js at master · namnv080808/github-stories · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
(function () {
  const CHAT_APP_URL = 'https://inquid.github.io/github-chat/';
  const ROOT_ID = 'github-chat-extension-root';

  function getRepositoryFromPath() {
    const parts = window.location.pathname.split('/').filter(Boolean);
    if (parts.length < 2) return '';
    return `${parts[0]}/${parts[1]}`;
  }

  function createChatUrl() {
    const url = new URL(CHAT_APP_URL);
    const repository = getRepositoryFromPath();

    if (repository) {
      url.searchParams.set('repository', repository);
    }

    url.searchParams.set('page', window.location.href);
    return url.toString();
  }

  function createChatRoot() {
    const root = document.createElement('div');
    root.id = ROOT_ID;
    root.innerHTML = `
      <button
        class="github-chat-toggle"
        type="button"
        aria-expanded="false"
        aria-controls="github-chat-panel"
      >
        Chat
      </button>
      <section
        id="github-chat-panel"
        class="github-chat-panel"
        aria-label="GitHub chat"
        hidden
      >
        <header class="github-chat-header">
          <div>
            <strong>GitHub Chat</strong>
            <span>${getRepositoryFromPath() || 'github.com'}</span>
          </div>
          <button class="github-chat-close" type="button" aria-label="Close chat">
            ×
          </button>
        </header>
        <iframe
          class="github-chat-frame"
          title="GitHub Chat"
          src="${createChatUrl()}"
          loading="lazy"
        ></iframe>
      </section>
    `;

    document.body.appendChild(root);
    return root;
  }

  function initGithubChat() {
    if (document.getElementById(ROOT_ID)) return;

    const root = createChatRoot();
    const toggle = root.querySelector('.github-chat-toggle');
    const panel = root.querySelector('.github-chat-panel');
    const close = root.querySelector('.github-chat-close');

    function setOpen(isOpen) {
      panel.hidden = !isOpen;
      toggle.setAttribute('aria-expanded', String(isOpen));
    }

    toggle.addEventListener('click', function () {
      setOpen(panel.hidden);
    });

    close.addEventListener('click', function () {
      setOpen(false);
    });

    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape' && !panel.hidden) {
        setOpen(false);
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initGithubChat);
  } else {
    initGithubChat();
  }
})();