| 77 | } |
| 78 | |
| 79 | export function getReactionsMenuHtml(url: string, align: 'center' | 'right') { |
| 80 | const position = align === 'center' ? 'left: 50%;transform: translateX(-50%)' : 'right:6px'; |
| 81 | const alignmentClass = align === 'center' ? '' : 'Popover-message--top-right'; |
| 82 | const getButtonAndSpan = (id: ReactionID) => getReactionHtml(url, id, false, 0) |
| 83 | + `<span class="reaction-name" aria-hidden="true">${reactionNames[id]}</span>`; |
| 84 | return ` |
| 85 | <details class="details-overlay details-popover reactions-popover"> |
| 86 | <summary ${align === 'center' ? 'tabindex="-1"' : ''}>${addReactionSvgs}</summary> |
| 87 | <div class="Popover" style="${position}"> |
| 88 | <form class="Popover-message ${alignmentClass} box-shadow-large" action="javascript:"> |
| 89 | <span class="reaction-name">Pick your reaction</span> |
| 90 | <div class="BtnGroup"> |
| 91 | ${reactionTypes.slice(0, 4).map(getButtonAndSpan).join('')} |
| 92 | </div> |
| 93 | <div class="BtnGroup"> |
| 94 | ${reactionTypes.slice(4).map(getButtonAndSpan).join('')} |
| 95 | </div> |
| 96 | </form> |
| 97 | </div> |
| 98 | </details>`; |
| 99 | } |
| 100 | |
| 101 | export function getSignInToReactMenuHtml(align: 'center' | 'right') { |
| 102 | const position = align === 'center' ? 'left: 50%;transform: translateX(-50%)' : 'right:6px'; |