debian-mirror-gitlab/app/assets/javascripts/user_popovers.js

111 lines
2.9 KiB
JavaScript
Raw Normal View History

2019-02-15 15:39:39 +05:30
import Vue from 'vue';
import UsersCache from './lib/utils/users_cache';
import UserPopover from './vue_shared/components/user_popover/user_popover.vue';
let renderedPopover;
let renderFn;
const handleUserPopoverMouseOut = event => {
const { target } = event;
target.removeEventListener('mouseleave', handleUserPopoverMouseOut);
if (renderFn) {
clearTimeout(renderFn);
}
if (renderedPopover) {
renderedPopover.$destroy();
renderedPopover = null;
}
2020-01-01 13:55:28 +05:30
target.removeAttribute('aria-describedby');
2019-02-15 15:39:39 +05:30
};
/**
* 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
*/
const handleUserPopoverMouseOver = event => {
const { target } = event;
// Add listener to actually remove it again
target.addEventListener('mouseleave', handleUserPopoverMouseOut);
renderFn = setTimeout(() => {
// Helps us to use current markdown setup without maybe breaking or duplicating for now
if (target.dataset.user) {
target.dataset.userId = target.dataset.user;
// Removing titles so its not showing tooltips also
target.dataset.originalTitle = '';
target.setAttribute('title', '');
}
const { userId, username, name, avatarUrl } = target.dataset;
const user = {
userId,
username,
name,
avatarUrl,
location: null,
bio: null,
organization: null,
status: null,
loaded: false,
};
if (userId || username) {
const UserPopoverComponent = Vue.extend(UserPopover);
renderedPopover = new UserPopoverComponent({
propsData: {
target,
user,
},
});
renderedPopover.$mount();
UsersCache.retrieveById(userId)
.then(userData => {
if (!userData) {
2019-12-21 20:55:43 +05:30
return undefined;
2019-02-15 15:39:39 +05:30
}
Object.assign(user, {
avatarUrl: userData.avatar_url,
username: userData.username,
name: userData.name,
location: userData.location,
bio: userData.bio,
organization: userData.organization,
2019-12-26 22:10:19 +05:30
status: userData.status,
2019-02-15 15:39:39 +05:30
loaded: true,
});
2019-12-26 22:10:19 +05:30
if (userData.status) {
return Promise.resolve();
}
2019-12-21 20:55:43 +05:30
return UsersCache.retrieveStatusById(userId);
})
.then(status => {
if (!status) {
return;
}
2019-02-15 15:39:39 +05:30
2019-12-21 20:55:43 +05:30
Object.assign(user, {
status,
});
2019-02-15 15:39:39 +05:30
})
.catch(() => {
renderedPopover.$destroy();
renderedPopover = null;
});
}
}, 200); // 200ms delay so not every mouseover triggers Popover + API Call
};
export default elements => {
const userLinks = elements || [...document.querySelectorAll('.js-user-link')];
userLinks.forEach(el => {
el.addEventListener('mouseenter', handleUserPopoverMouseOver);
});
};