diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-31 00:08:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-31 00:08:47 +0300 |
commit | c8f773a8593926f4f2dec6f446a3b3e59e9c9909 (patch) | |
tree | 4e5ea1d3b861ff99015f6112da567de7873868aa /app/assets/javascripts/user_popovers.js | |
parent | 929b887e5391dea7cb53b88b77b9a35351c87d99 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/user_popovers.js')
-rw-r--r-- | app/assets/javascripts/user_popovers.js | 160 |
1 files changed, 72 insertions, 88 deletions
diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js index 157d89a3a40..5b9e3817f3a 100644 --- a/app/assets/javascripts/user_popovers.js +++ b/app/assets/javascripts/user_popovers.js @@ -3,108 +3,92 @@ 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; - } - target.removeAttribute('aria-describedby'); +const removeTitle = el => { + // Removing titles so its not showing tooltips also + + el.dataset.originalTitle = ''; + el.setAttribute('title', ''); +}; + +const getPreloadedUserInfo = dataset => { + const userId = dataset.user || dataset.userId; + const { username, name, avatarUrl } = dataset; + + return { + userId, + username, + name, + avatarUrl, + }; }; /** * 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 populateUserInfo = user => { + const { userId } = user; + + return Promise.all([UsersCache.retrieveById(userId), UsersCache.retrieveStatusById(userId)]).then( + ([userData, status]) => { + if (userData) { + Object.assign(user, { + avatarUrl: userData.avatar_url, + username: userData.username, + name: userData.name, + location: userData.location, + bio: userData.bio, + organization: userData.organization, + loaded: true, + }); + } + + if (status) { + Object.assign(user, { + status, + }); + } + + return user; + }, + ); +}; + +export default (elements = document.querySelectorAll('.js-user-link')) => { + const userLinks = Array.from(elements); + + return userLinks.map(el => { + const UserPopoverComponent = Vue.extend(UserPopover); 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) { - return undefined; - } - - Object.assign(user, { - avatarUrl: userData.avatar_url, - username: userData.username, - name: userData.name, - location: userData.location, - bio: userData.bio, - organization: userData.organization, - status: userData.status, - loaded: true, - }); - - if (userData.status) { - return Promise.resolve(); - } - - return UsersCache.retrieveStatusById(userId); - }) - .then(status => { - if (!status) { - return; - } - - Object.assign(user, { - status, - }); - }) - .catch(() => { - renderedPopover.$destroy(); - renderedPopover = null; - }); - } - }, 200); // 200ms delay so not every mouseover triggers Popover + API Call -}; + const renderedPopover = new UserPopoverComponent({ + propsData: { + target: el, + user, + }, + }); + + renderedPopover.$mount(); + + el.addEventListener('mouseenter', ({ target }) => { + removeTitle(target); + const preloadedUserInfo = getPreloadedUserInfo(target.dataset); + + Object.assign(user, preloadedUserInfo); -export default elements => { - const userLinks = elements || [...document.querySelectorAll('.js-user-link')]; + if (preloadedUserInfo.userId) { + populateUserInfo(user); + } + }); + el.addEventListener('mouseleave', ({ target }) => { + target.removeAttribute('aria-describedby'); + }); - userLinks.forEach(el => { - el.addEventListener('mouseenter', handleUserPopoverMouseOver); + return renderedPopover; }); }; |