show-item-info-on-hover.js

import linkifyElement from 'linkifyjs/element';

import {getItemInfo} from '../libs/api';
import {paths} from '../libs/paths';
import {getUrlParams, monthNames} from '../libs/utils';

function init() {
	const links = document.querySelectorAll('span.commtext a[href*="news.ycombinator.com/item?id="]');

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

	for (const link of links) {
		const itemDiv = document.createElement('div');

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

		link.parentElement.insertBefore(itemDiv, link.nextSibling);

		link.dataset.rhnInfoLoaded = '0';

		link.addEventListener('mouseover', async () => {
			itemDiv.classList.remove('__rhn__no-display');
			itemDiv.style.left = link.getBoundingClientRect().left + 'px';

			if (link.dataset.rhnInfoLoaded === '0') {
				link.dataset.rhnInfoLoaded = '1';
				const id = getUrlParams('id', link.href);

				const itemInfo = await getItemInfo(id);
				const itemDate = new Date(itemInfo.time * 1000);
				const renderedDate = `${monthNames[itemDate.getMonth()]} ${itemDate.getDate()}, ${itemDate.getFullYear()}`;

				let table = '';

				switch (itemInfo.type) {
					case 'comment': {
						table = `
							<table>
								<tbody>
									<tr>
										<td>by:</td>
										<td>${itemInfo.by}</td>
									</tr>
									<tr>
										<td>date:</td>
										<td>${renderedDate}</td>
									</tr>
									<tr>
										<td>text:</td>
										<td>${itemInfo.text}</td>
									</tr>
								</tbody>
							</table>
						`;

						break;
					}

					case 'story': {
						const text = itemInfo.text ?
							`<tr>
								<td>text:</td>
								<td>${itemInfo.text}</td>
							</tr>` : '';

						const url = itemInfo.url ?
							`<tr>
								<td>url:</td>
								<td>${itemInfo.url}</td>
							</tr>` : '';

						const comments = itemInfo.kids ?
							`<tr>
								<td>comments:</td>
								<td>${itemInfo.kids.length}</td>
							</tr>` : '';

						table = `
							<table>
								<tbody>
									<tr>
										<td>title:</td>
										<td>${itemInfo.title}</td>
									</tr>
									${url}
									<tr>
										<td>by:</td>
										<td>${itemInfo.by}</td>
									</tr>
									<tr>
										<td>date:</td>
										<td>${renderedDate}</td>
									</tr>
									<tr>
										<td>score:</td>
										<td>${itemInfo.score}</td>
									</tr>
									${comments}
									${text}
								</tbody>
							</table>
						`;

						break;
					}

					default:
						break;
				}

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

		link.addEventListener('mouseout', () => {
			itemDiv.classList.add('__rhn__no-display');
		});
	}

	return true;
}

const details = {
	id: 'show-item-info-on-hover',
	pages: {
		include: [
			...paths.comments,
			...paths.specialComments
		],
		exclude: ['']
	},
	loginRequired: false,
	init
};

export default details;