(
public comment: IssueComment,
private currentUser: string | null,
locked: boolean
)
| 18 | public readonly element: HTMLElement; |
| 19 | |
| 20 | constructor( |
| 21 | public comment: IssueComment, |
| 22 | private currentUser: string | null, |
| 23 | locked: boolean |
| 24 | ) { |
| 25 | const { user, html_url, created_at, body_html, author_association, reactions } = comment; |
| 26 | this.element = document.createElement('article'); |
| 27 | this.element.classList.add('timeline-comment'); |
| 28 | if (user.login === currentUser) { |
| 29 | this.element.classList.add('current-user'); |
| 30 | } |
| 31 | const association = displayAssociations[author_association]; |
| 32 | const reactionCount = reactionTypes.reduce((sum, id) => sum + reactions[id], 0); |
| 33 | let headerReactionsMenu = ''; |
| 34 | let footerReactionsMenu = ''; |
| 35 | if (!locked) { |
| 36 | if (currentUser) { |
| 37 | headerReactionsMenu = getReactionsMenuHtml(comment.reactions.url, 'right'); |
| 38 | footerReactionsMenu = getReactionsMenuHtml(comment.reactions.url, 'center'); |
| 39 | } else { |
| 40 | headerReactionsMenu = getSignInToReactMenuHtml('right'); |
| 41 | footerReactionsMenu = getSignInToReactMenuHtml('center'); |
| 42 | } |
| 43 | } |
| 44 | this.element.innerHTML = ` |
| 45 | <a class="avatar" href="${user.html_url}" target="_blank" tabindex="-1"> |
| 46 | <img alt="@${user.login}" height="44" width="44" |
| 47 | src="${user.avatar_url}${avatarArgs}"> |
| 48 | </a> |
| 49 | <div class="comment"> |
| 50 | <header class="comment-header"> |
| 51 | <span class="comment-meta"> |
| 52 | <a class="text-link" href="${user.html_url}" target="_blank"><strong>${user.login}</strong></a> |
| 53 | commented |
| 54 | <a class="text-link" href="${html_url}" target="_blank">${timeAgo(Date.now(), new Date(created_at))}</a> |
| 55 | </span> |
| 56 | <div class="comment-actions"> |
| 57 | ${association ? `<span class="author-association-badge">${association}</span>` : ''} |
| 58 | ${headerReactionsMenu} |
| 59 | </div> |
| 60 | </header> |
| 61 | <div class="markdown-body markdown-body-scrollable"> |
| 62 | ${body_html} |
| 63 | </div> |
| 64 | <div class="comment-footer" reaction-count="${reactionCount}" reaction-url="${reactions.url}"> |
| 65 | <form class="reaction-list BtnGroup" action="javascript:"> |
| 66 | ${reactionTypes.map(id => getReactionHtml(reactions.url, id, !currentUser || locked, reactions[id])).join('')} |
| 67 | </form> |
| 68 | ${footerReactionsMenu} |
| 69 | </div> |
| 70 | </div>`; |
| 71 | |
| 72 | const markdownBody = this.element.querySelector('.markdown-body')!; |
| 73 | const emailToggle = markdownBody.querySelector('.email-hidden-toggle a') as HTMLAnchorElement; |
| 74 | if (emailToggle) { |
| 75 | const emailReply = markdownBody.querySelector('.email-hidden-reply') as HTMLDivElement; |
| 76 | emailToggle.onclick = event => { |
| 77 | event.preventDefault(); |
nothing calls this directly
no test coverage detected