2018-12-08 03:12:23 +00:00
|
|
|
import Vue from 'vue';
|
|
|
|
import UsersCache from './lib/utils/users_cache';
|
|
|
|
import UserPopover from './vue_shared/components/user_popover/user_popover.vue';
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
const removeTitle = (el) => {
|
2020-01-30 21:08:47 +00:00
|
|
|
// Removing titles so its not showing tooltips also
|
|
|
|
|
|
|
|
el.dataset.originalTitle = '';
|
|
|
|
el.setAttribute('title', '');
|
|
|
|
};
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
const getPreloadedUserInfo = (dataset) => {
|
2020-01-30 21:08:47 +00:00
|
|
|
const userId = dataset.user || dataset.userId;
|
|
|
|
const { username, name, avatarUrl } = dataset;
|
|
|
|
|
|
|
|
return {
|
|
|
|
userId,
|
|
|
|
username,
|
|
|
|
name,
|
|
|
|
avatarUrl,
|
|
|
|
};
|
2018-12-08 03:12:23 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Adds a UserPopover component to the body, hands over as much data as the target element has in data attributes.
|
|
|
|
* loads based on data-user-id more data about a user from the API and sets it on the popover
|
|
|
|
*/
|
2020-12-23 21:10:24 +00:00
|
|
|
const populateUserInfo = (user) => {
|
2020-01-30 21:08:47 +00:00
|
|
|
const { userId } = user;
|
|
|
|
|
|
|
|
return Promise.all([UsersCache.retrieveById(userId), UsersCache.retrieveStatusById(userId)]).then(
|
|
|
|
([userData, status]) => {
|
|
|
|
if (userData) {
|
|
|
|
Object.assign(user, {
|
|
|
|
avatarUrl: userData.avatar_url,
|
2021-03-12 21:09:12 +00:00
|
|
|
bot: userData.bot,
|
2020-01-30 21:08:47 +00:00
|
|
|
username: userData.username,
|
|
|
|
name: userData.name,
|
|
|
|
location: userData.location,
|
|
|
|
bio: userData.bio,
|
2020-04-21 15:21:10 +00:00
|
|
|
workInformation: userData.work_information,
|
2020-10-15 18:08:43 +00:00
|
|
|
websiteUrl: userData.website_url,
|
2021-06-18 12:10:03 +00:00
|
|
|
pronouns: userData.pronouns,
|
2021-10-08 06:11:46 +00:00
|
|
|
localTime: userData.local_time,
|
2020-01-30 21:08:47 +00:00
|
|
|
loaded: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (status) {
|
|
|
|
Object.assign(user, {
|
|
|
|
status,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return user;
|
|
|
|
},
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
function initPopover(el, user, mountPopover) {
|
|
|
|
const preloadedUserInfo = getPreloadedUserInfo(el.dataset);
|
2020-02-06 12:10:29 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
Object.assign(user, preloadedUserInfo);
|
2021-02-18 12:09:34 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
if (preloadedUserInfo.userId) {
|
|
|
|
populateUserInfo(user);
|
2021-02-18 12:09:34 +00:00
|
|
|
}
|
2020-02-06 12:10:29 +00:00
|
|
|
const UserPopoverComponent = Vue.extend(UserPopover);
|
2022-03-29 15:09:53 +00:00
|
|
|
const popoverInstance = new UserPopoverComponent({
|
|
|
|
propsData: {
|
|
|
|
target: el,
|
|
|
|
user,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
mountPopover(popoverInstance);
|
|
|
|
// wait for component to actually mount
|
|
|
|
setTimeout(() => {
|
|
|
|
// trigger an event to force tooltip to show
|
|
|
|
const event = new MouseEvent('mouseenter');
|
|
|
|
event.isSelfTriggered = true;
|
|
|
|
el.dispatchEvent(event);
|
|
|
|
});
|
|
|
|
}
|
2020-01-30 21:08:47 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
function initPopovers(userLinks, mountPopover) {
|
|
|
|
userLinks
|
|
|
|
.filter(({ dataset, user }) => !user && (dataset.user || dataset.userId))
|
|
|
|
.forEach((el) => {
|
2020-02-17 21:09:20 +00:00
|
|
|
const user = {
|
|
|
|
location: null,
|
|
|
|
bio: null,
|
2020-04-21 15:21:10 +00:00
|
|
|
workInformation: null,
|
2020-02-17 21:09:20 +00:00
|
|
|
status: null,
|
|
|
|
loaded: false,
|
|
|
|
};
|
2022-03-29 15:09:53 +00:00
|
|
|
el.user = user;
|
|
|
|
const init = initPopover.bind(null, el, user, mountPopover);
|
|
|
|
el.addEventListener('mouseenter', init, { once: true });
|
|
|
|
el.addEventListener('mouseenter', ({ target, isSelfTriggered }) => {
|
|
|
|
if (!isSelfTriggered) return;
|
|
|
|
removeTitle(target);
|
2020-02-17 21:09:20 +00:00
|
|
|
});
|
2022-03-29 15:09:53 +00:00
|
|
|
el.addEventListener('mouseleave', ({ target }) => {
|
|
|
|
target.removeAttribute('aria-describedby');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2020-02-17 21:09:20 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
const userLinkSelector = 'a.js-user-link, a.gfm-project_member';
|
2020-02-17 21:09:20 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
const getUserLinkNodes = (node) => {
|
|
|
|
if (!('matches' in node)) return null;
|
|
|
|
if (node.matches(userLinkSelector)) return [node];
|
|
|
|
return Array.from(node.querySelectorAll(userLinkSelector));
|
|
|
|
};
|
2020-02-17 21:09:20 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
let observer;
|
2020-02-17 21:09:20 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
export default function addPopovers(
|
|
|
|
elements = document.querySelectorAll('.js-user-link'),
|
|
|
|
mountPopover = (popoverInstance) => popoverInstance.$mount(),
|
|
|
|
) {
|
|
|
|
const userLinks = Array.from(elements);
|
2020-02-17 21:09:20 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
initPopovers(userLinks, mountPopover);
|
|
|
|
|
|
|
|
if (!observer) {
|
|
|
|
observer = new MutationObserver((mutationsList) => {
|
|
|
|
const newUserLinks = mutationsList
|
|
|
|
.filter((mutation) => mutation.type === 'childList' && mutation.addedNodes)
|
|
|
|
.reduce((acc, mutation) => {
|
|
|
|
const userLinkNodes = Array.from(mutation.addedNodes)
|
|
|
|
.flatMap(getUserLinkNodes)
|
|
|
|
.filter(Boolean);
|
|
|
|
acc.push(...userLinkNodes);
|
|
|
|
return acc;
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
if (newUserLinks.length !== 0) {
|
|
|
|
initPopovers(newUserLinks, mountPopover);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
|
|
subtree: true,
|
|
|
|
childList: true,
|
|
|
|
});
|
2020-02-17 21:09:20 +00:00
|
|
|
|
2022-03-29 15:09:53 +00:00
|
|
|
document.addEventListener('beforeunload', () => {
|
|
|
|
observer.disconnect();
|
2020-02-17 21:09:20 +00:00
|
|
|
});
|
2022-03-29 15:09:53 +00:00
|
|
|
}
|
2021-02-18 12:09:34 +00:00
|
|
|
}
|