Federico Brigante
7 years ago
committed by
Sindre Sorhus
3 changed files with 38 additions and 78 deletions
@ -1,72 +1,34 @@ |
|||||
|
import debounce from 'debounce-fn'; |
||||
|
import select from 'select-dom'; |
||||
import {h} from 'dom-chef'; |
import {h} from 'dom-chef'; |
||||
import {emptyElement} from './utils'; |
import {getUsername} from './utils'; |
||||
|
|
||||
function add(currentUser) { |
function add() { |
||||
$('.comment-reactions.has-reactions').each((index, reactionsContainer) => { |
const currentUser = getUsername(); |
||||
const $reactionsContainer = $(reactionsContainer); |
for (const element of select.all(` |
||||
const $reactionButtons = $reactionsContainer.find('.comment-reactions-options .reaction-summary-item[aria-label]'); |
.comment-reactions.has-reactions |
||||
|
.comment-reactions-options |
||||
$reactionButtons.each((index, element) => { |
.reaction-summary-item[aria-label]:not(.rgh-reactions) |
||||
const $element = $(element); |
`)) {
|
||||
const participantCount = Number($element.html().split('/g-emoji>')[1]); |
element.classList.add('rgh-reactions'); |
||||
const participants = $element.attr('aria-label') |
const participants = element.getAttribute('aria-label') |
||||
.replace(/ reacted with.*/, '') |
.replace(/ reacted with.*/, '') |
||||
.replace(/,? and /, ', ') |
.replace(/,? and /, ', ') |
||||
.replace(/, \d+ more/, '') |
.replace(/, \d+ more/, '') |
||||
.split(', '); |
.split(', ') |
||||
const userPosition = participants.indexOf(currentUser); |
.filter(username => username !== currentUser) |
||||
|
.filter((u, i) => i < 3) // Limit to 3 avatars
|
||||
// If the user is the only participant, leave as is
|
.map(user => ( |
||||
if (participantCount === 1 && userPosition > -1) { |
<a href={`/${user}`}> |
||||
return; |
<img src={`/${user}.png`}/> |
||||
} |
</a> |
||||
|
)); |
||||
// Add participant container
|
|
||||
if (!element.querySelector('div.participants-container')) { |
element.append(...participants); |
||||
element.append(<div class="participants-container"></div>); |
|
||||
} |
|
||||
|
|
||||
// Remove self from participant list so you don't see your own avatar
|
|
||||
if (userPosition > -1) { |
|
||||
participants.splice(userPosition, 1); |
|
||||
} |
|
||||
|
|
||||
const firstThreeParticipants = participants.slice(0, 3); |
|
||||
const participantsContainer = element.querySelector('.participants-container'); |
|
||||
|
|
||||
// Clear any existing avatars and remainder count
|
|
||||
emptyElement(participantsContainer); |
|
||||
|
|
||||
for (const participant of firstThreeParticipants) { |
|
||||
participantsContainer.append( |
|
||||
<a href={`/${participant}`}> |
|
||||
<img src={`/${participant}.png`}/> |
|
||||
</a> |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function reapply(event, currentUser) { |
|
||||
if ($(event.target).closest('.add-reactions-options-item, .reaction-summary-item').not('.add-reaction-btn').length === 0) { |
|
||||
return; |
|
||||
} |
} |
||||
|
|
||||
const applyReactions = setInterval(() => { |
|
||||
add(currentUser); |
|
||||
clearInterval(applyReactions); |
|
||||
}, 500); |
|
||||
} |
|
||||
|
|
||||
function addListener(currentUser) { |
|
||||
$(document).on('click', event => { |
|
||||
reapply(event, currentUser); |
|
||||
}); |
|
||||
} |
} |
||||
|
|
||||
export default { |
export default () => { |
||||
add, |
add(); |
||||
reapply, |
document.addEventListener('socket:message', debounce(add, {wait: 100})); |
||||
addListener |
|
||||
}; |
}; |
||||
|
Loading…
Reference in new issue