more-accessible-favorite.js

import {getAuthString, getPageDom, getUrlParams, isClickModified} from '../libs/utils';
import {getAllComments, createSiblingLoader} from '../libs/dom-utils';
import {paths} from '../libs/paths';

const loaderCustomStyle = `
	height: 9px;
	margin-left: 5px;
`;

async function defaultButtons() {
	// Query all faveButtons that are, by default, present on the page
	// and have not been injected by this extension. This is achieved
	// by initialising this feature before `more-accessible-favorite`
	const faveButtonsList = document.querySelectorAll('a[href^="fave"]');

	for (const faveButton of faveButtonsList) {
		const auth = getUrlParams('auth', faveButton.href);
		const id = getUrlParams('id', faveButton.href);

		let unfave = faveButton.innerText === 'un-favorite';
		let ongoingFavorite = false;

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

			event.preventDefault();

			if (ongoingFavorite) {
				return;
			}

			ongoingFavorite = true;

			const loader = createSiblingLoader(faveButton, loaderCustomStyle);
			await fetch(faveButton.href).then(() => loader.remove());

			unfave = !unfave;
			faveButton.innerHTML = unfave ? 'un-favorite' : 'favorite';
			faveButton.href = `fave?id=${id}&auth=${auth}${unfave ? '&un=t' : ''}`;

			ongoingFavorite = false;
		});
	}
}

async function commentButtons(metadata) {
	const items = getAllComments();

	for (const item of items) {
		const separatorPipe = document.createTextNode('| ');
		const faveButton = document.createElement('a');
		faveButton.innerText = 'favorite';
		faveButton.classList.add('__rhn__fave-button');

		const toggleButton = item.querySelector('a.togg');
		toggleButton.style.marginLeft = '4px';

		const headSpan = item.querySelector('span.comhead');
		headSpan.insertBefore(separatorPipe, toggleButton);
		headSpan.insertBefore(faveButton, toggleButton);
	}

	let alreadyFaveItems = metadata.favorites;

	if (!alreadyFaveItems) {
		const page = await getPageDom('https://news.ycombinator.com/favorites?comments=t&id=' + metadata.user);
		const fetchedPageItems = page.querySelectorAll('table.itemlist > tbody > tr.athing');
		alreadyFaveItems = [...fetchedPageItems].map(comm => comm.id);
	}

	for (const item of items) {
		const {id} = item;
		const faveButton = item.querySelector('.__rhn__fave-button');
		faveButton.href = 'javascript:void(0)';

		let unfave = false;

		if (alreadyFaveItems.includes(id)) {
			faveButton.innerHTML = 'un-favorite';
			unfave = true;
		} else {
			faveButton.innerHTML = 'favorite';
		}

		let ongoingFavorite = false;

		faveButton.addEventListener('click', async () => {
			if (ongoingFavorite) {
				return;
			}

			ongoingFavorite = true;

			const loader = createSiblingLoader(faveButton, loaderCustomStyle);

			const auth = await getAuthString(id);
			const url = `https://news.ycombinator.com/fave?id=${id}&auth=${auth}${unfave ? '&un=t' : ''}`;

			await fetch(url).then(() => loader.remove());

			unfave = !unfave;
			faveButton.innerHTML = unfave ? 'un-favorite' : 'favorite';

			ongoingFavorite = false;
		});
	}
}

async function storyButtons(metadata) {
	const items = document.querySelectorAll('td.subtext');

	for (const item of items) {
		const lastAnchorButton = item.lastElementChild;

		const separatorPipe = document.createTextNode(' | ');
		const faveButton = document.createElement('a');
		faveButton.innerText = 'favorite';
		faveButton.classList.add('__rhn__fave-button');

		item.insertBefore(faveButton, lastAnchorButton);
		item.insertBefore(separatorPipe, lastAnchorButton);
	}

	let alreadyFaveItems = metadata.favorites;

	if (!alreadyFaveItems) {
		const page = await getPageDom('https://news.ycombinator.com/favorites?id=' + metadata.user);
		const fetchedPageItems = page.querySelectorAll('table.itemlist > tbody > tr.athing');
		alreadyFaveItems = [...fetchedPageItems].map(story => story.id);
	}

	for (const item of items) {
		const faveButton = item.querySelector('.__rhn__fave-button');

		const authStringElement =
			item.querySelector('a[href^="flag"]') ||
			item.querySelector('a[href^="hide"]');

		if (!authStringElement) {
			continue;
		}

		const authStringUrl = authStringElement.href.replace('?', '&');
		const auth = getUrlParams('auth', authStringUrl);
		const id = getUrlParams('id', authStringUrl);

		let unfave = false;

		if (alreadyFaveItems.includes(id)) {
			faveButton.href = `fave?id=${id}&auth=${auth}&un=t`;
			faveButton.innerHTML = 'un-favorite';
			unfave = true;
		} else {
			faveButton.href = `fave?id=${id}&auth=${auth}`;
		}

		let ongoingFavorite = false;

		faveButton.addEventListener('click', async event => {
			event.preventDefault();

			if (ongoingFavorite) {
				return;
			}

			ongoingFavorite = true;

			const loader = createSiblingLoader(faveButton, loaderCustomStyle);
			await fetch(faveButton.href).then(() => loader.remove());

			unfave = !unfave;
			faveButton.innerHTML = unfave ? 'un-favorite' : 'favorite';
			faveButton.href = `fave?id=${id}&auth=${auth}${unfave ? '&un=t' : ''}`;

			ongoingFavorite = false;
		});
	}
}

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

	await defaultButtons();

	if (paths.comments.includes(path)) {
		await commentButtons(metadata);
	} else if (paths.stories.includes(path)) {
		await storyButtons(metadata);
	}

	return true;
}

const details = {
	id: 'more-accessible-favorite',
	pages: {
		include: [
			...paths.stories,
			...paths.comments,
			'/favorites'
		],
		exclude: ['/jobs']
	},
	loginRequired: true,
	init
};

export default details;