50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
|
const root = document.querySelector('#root');
|
||
|
|
|
||
|
|
let fullName = '';
|
||
|
|
|
||
|
|
|
||
|
|
function updateFullName() {
|
||
|
|
const avatar = document.querySelector('[data-aid="Avatar__image"]');
|
||
|
|
if (avatar)
|
||
|
|
fullName = avatar.getAttribute('alt');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function setClassOnStoriesWithOwner(name, className) {
|
||
|
|
const owners = document.querySelectorAll('.owner');
|
||
|
|
for (const owner of owners) {
|
||
|
|
const story = owner.parentElement.parentElement.parentElement.parentElement;
|
||
|
|
|
||
|
|
if (owner.getAttribute('title') === name)
|
||
|
|
story.classList.add(className);
|
||
|
|
else
|
||
|
|
story.classList.remove(className);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function callback() {
|
||
|
|
if (!fullName) {
|
||
|
|
// Grab the full name from the avatar alt-text.
|
||
|
|
updateFullName();
|
||
|
|
}
|
||
|
|
|
||
|
|
setClassOnStoriesWithOwner(fullName, 'owned');
|
||
|
|
}
|
||
|
|
|
||
|
|
root.addEventListener('mouseover', event => {
|
||
|
|
if (event.target.className === 'owner') {
|
||
|
|
const name = event.target.getAttribute('title');
|
||
|
|
setClassOnStoriesWithOwner(name, 'highlighted');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
root.addEventListener('mouseout', event => {
|
||
|
|
if (event.target.className === 'owner')
|
||
|
|
setClassOnStoriesWithOwner('', 'highlighted');
|
||
|
|
});
|
||
|
|
|
||
|
|
const observer = new MutationObserver(callback);
|
||
|
|
const config = { childList: true, subtree: true };
|
||
|
|
observer.observe(root, config);
|