reply-without-leaving-page.js

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

function init(metadata) {
	const searchParams = new URLSearchParams(window.location.search);
	if (metadata.path === '/item' && !searchParams.get('p')) {
		const replyForm = document.querySelector('table.fatitem form');
		if (!replyForm) {
			return false;
		}
	}

	const comments = getAllComments();
	for (const comment of comments) {
		comment.dataset.rhnFormInjected = '0';

		const buttons = [];
		['reply', 'edit', 'delete-confirm'].forEach(action => {
			const link = comment.querySelector(`a[href^="${action}"]`);
			if (link) {
				buttons.push(link);
			}
		});

		const replyDiv = comment.querySelector('div.reply');
		const ACTIVE_DATA = {
			form: undefined,
			button: undefined
		};

		for (const button of buttons) {
			button.dataset.rhnActionName = button.innerText;

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

				event.preventDefault();

				const {italiceQuotedText = false} = metadata.options;
				const wrapperCharacter = italiceQuotedText ? '*' : '';

				// Add '> ' before every new block of selection
				const selection = window.getSelection().toString().trim()
					.split('\n')
					.filter(str => str.length > 0)
					.map(str => '> ' + wrapperCharacter + str + wrapperCharacter)
					.join('\n\n');

				if (ACTIVE_DATA.form) {
					// Removing currently present form
					ACTIVE_DATA.form = undefined;
					replyDiv.querySelector('form').remove();

					if (ACTIVE_DATA.button) {
						ACTIVE_DATA.button.innerText = ACTIVE_DATA.button.dataset.rhnActionName;
					}

					// Adding newly clicked form
					// eslint-disable-next-line no-negated-condition
					if (ACTIVE_DATA.button !== button) {
						button.click();
					} else {
						ACTIVE_DATA.button = undefined;
					}
				} else {
					const loader = createSiblingLoader(button, 'height:9px;margin-left:5px;');
					const page = await getPageDom(button.href);
					loader.remove();

					const form = page.querySelector('form');
					form.classList.add('__rhn__injected-form');

					ACTIVE_DATA.form = form;
					ACTIVE_DATA.button = button;

					button.innerText = 'hide ' + button.dataset.rhnActionName;
					replyDiv.append(form);

					const textarea = form.querySelector('textarea');
					if (textarea) {
						if (selection.length > 0) {
							textarea.value += `${textarea.value.length > 0 ? '\n\n' : ''}${selection}\n\n`;
						}

						textarea.focus();
					}
				}
			});
		}
	}

	return true;
}

const details = {
	id: 'reply-without-leaving-page',
	pages: {
		include: paths.comments,
		exclude: []
	},
	loginRequired: true,
	init
};

export default details;