profile-links-dropdown.js

import {isClickModified} from '../libs/utils';
import {paths} from '../libs/paths';

async function init(metadata) {
	const {user} = metadata;

	const links = [
		{
			title: 'profile',
			path: `user?id=${user}`
		},
		{
			title: 'submissions',
			path: `submitted?id=${user}`
		},
		{
			title: 'comments',
			path: `threads?id=${user}`
		},
		{
			title: 'hidden',
			path: 'hidden'
		},
		{
			title: 'upvoted submissions',
			path: `upvoted?id=${user}`
		},
		{
			title: 'upvoted comments',
			path: `upvoted?id=${user}&comments=t`
		},
		{
			title: 'favorite submissions',
			path: `favorites?id=${user}`
		},
		{
			title: 'favorite comments',
			path: `favorites?id=${user}&comments=t`
		}
	];

	const dropdownEl = document.createElement('div');
	const targetCell = document.querySelectorAll('span.pagetop')[1];
	const userLink = document.querySelector('a#me');

	if (!userLink) {
		return false;
	}

	userLink.innerHTML += ' ▾';

	dropdownEl.classList.add('__rhn__no-display', '__rhn__profile-dropdown');
	dropdownEl.style.background = metadata.topcolor;
	let state = 0;

	for (const link of links) {
		const anchorEl = document.createElement('a');
		anchorEl.href = link.path;
		anchorEl.innerHTML = link.title;
		dropdownEl.append(anchorEl);
	}

	targetCell.append(dropdownEl);

	userLink.addEventListener('click', event => {
		if (isClickModified(event)) {
			return;
		}

		event.preventDefault();

		dropdownEl.style.left = userLink.getBoundingClientRect().left + 'px';
		dropdownEl.classList.toggle('__rhn__no-display');
		userLink.innerHTML = `${user} ${state ? '▾' : '▴'}`;
		state = 1 - state;
	});

	return true;
}

const details = {
	id: 'profile-link-dropdown',
	pages: {
		include: ['*'],
		exclude: paths.info
	},
	loginRequired: true,
	runOnJobItems: true,
	init
};

export default details;