input-field-tweaks.js

import fitTextarea from 'fit-textarea';

import {newReplyTextareasObserver} from '../libs/dom-utils';
import {paths} from '../libs/paths';

// Dynamically change textarea height
function watchTextareas() {
	const textareas = document.querySelectorAll('textarea');

	for (const textarea of textareas) {
		fitTextarea.watch(textarea);
	}

	newReplyTextareasObserver(event => {
		fitTextarea.watch(event.target);
	});

	return true;
}

// Dynamically increase / decrease title field length
function dynamicallyChangeWidth(path) {
	if (['/reply', '/user', ...paths.comments].includes(path)) {
		return false;
	}

	const titleInput = document.querySelector('input[name="title"]');
	if (!titleInput) {
		return false;
	}

	titleInput.style.width = '49ch';

	titleInput.addEventListener('input', () => {
		const {length} = titleInput.value;
		titleInput.style.width = length < 49 ? '49ch' : (length + 1) + 'ch';
	});

	return true;
}

// Show characters remaining beside title field
function charactersRemainging(path) {
	if (['/reply', '/newpoll', '/user', ...paths.comments].includes(path)) {
		return false;
	}

	const titleInput = document.querySelector('input[name="title"]');
	if (!titleInput) {
		return false;
	}

	const titleLengthLimit = 80;

	const span = document.createElement('span');
	span.classList.add('__rhn__characters-under');
	titleInput.nextElementSibling.classList.add('__rhn__characters-over');
	titleInput.parentElement.append(span);

	titleInput.addEventListener('input', () => {
		const {length} = titleInput.value;

		span.innerHTML = length <= titleLengthLimit ?
			`${titleLengthLimit - length} remaining` :
			'';
	});

	return true;
}

function init(metadata) {
	watchTextareas();
	dynamicallyChangeWidth(metadata.path);
	charactersRemainging(metadata.path);

	return true;
}

const details = {
	id: 'input-field-tweaks',
	pages: {
		include: [
			...paths.forms,
			...paths.comments,
			'/user'
		],
		exclude: [
			'/delete-confirm',
			'/changepw'
		]
	},
	loginRequired: false,
	init
};

export default details;