show-user-info-on-hover.js

import linkifyElement from 'linkifyjs/element';

import {getUserInfo} from '../libs/api';
import {monthNames} from '../libs/utils';

function init() {
	const allUsers = document.querySelectorAll('a.hnuser');
	if (allUsers.length === 0) {
		return false;
	}

	const linkifyOptions = {
		attributes: {
			rel: 'noopener'
		}
	};

	for (const user of allUsers) {
		user.addEventListener('mouseover', async () => {
			let userDiv = user.parentElement.querySelector('.__rhn__hover-info');

			if (!userDiv) {
				userDiv = document.createElement('div');

				userDiv.classList.add('__rhn__hover-info', '__rhn__no-display');
				userDiv.style.left = user.getBoundingClientRect().left + 'px';
				userDiv.innerHTML = `<img src=${browser.extension.getURL('loader.gif')}>`;

				user.parentElement.append(userDiv);

				user.dataset.rhnInfoLoaded = '0';
			}

			userDiv.classList.remove('__rhn__no-display');
			userDiv.style.left = user.getBoundingClientRect().left + 'px';

			if (user.dataset.rhnInfoLoaded === '0') {
				user.dataset.rhnInfoLoaded = '1';
				const userInfo = await getUserInfo(user.innerText.split(' ')[0]);
				const userDate = new Date(userInfo.created * 1000);
				const renderedDate = `${monthNames[userDate.getMonth()]} ${userDate.getDate()}, ${userDate.getFullYear()}`;

				const table = `
					<table>
						<tbody>
							<tr>
								<td>user:</td>
								<td>${userInfo.id}</td>
							</tr>
							<tr>
								<td>created:</td>
								<td>${renderedDate}</td>
							</tr>
							<tr>
								<td>karma:</td>
								<td>${userInfo.karma}</td>
							</tr>
							${userInfo.about ? '<tr><td>about:</td><td>' + userInfo.about + '</td></tr>' : ''}
						</tbody>
					</table>
				`;

				userDiv.innerHTML = table;
				linkifyElement(userDiv, linkifyOptions);
			}
		});

		user.addEventListener('mouseout', () => {
			user.parentElement.querySelector('.__rhn__hover-info').classList.add('__rhn__no-display');
		});
	}

	return true;
}

const details = {
	id: 'show-user-info-on-hover',
	pages: {
		include: ['*'],
		exclude: ['/user']
	},
	loginRequired: false,
	init
};

export default details;