@randstad-design/orbit-multitheme/src/assets/js/components/auto-resize.js

multitheme Front-end code based on Randstad Human Forward components

/**
 * auto-resize.js
 * Script to automatically resize input boxes on change
 */

/**
* Declare constants
*/
const attributeBase = 'data-rs-auto-resize';

export class AutoResize {

	constructor(element) {
		this.element = element;
		this.addEventHandlers();
	}

	/**
	 * Add event handlers
	 */
	addEventHandlers() {
		this.element.addEventListener('input', () => {
			this.resizeElement();
		});
		// on window resize, recalculate content height
		window.addEventListener('resize', () => {
			this.resizeElement();
		});
	}

	/**
	 * Get selector
	 */
	static getSelector() {
		return `[${attributeBase}]`;
	}

	/**
	 * Resize element
	 */
	resizeElement() {
		// style height first set to auto, necessary for code to work correctly
		this.element.style.height = 'auto';
		this.element.style.height = `${this.element.scrollHeight + 4}px`;
	}
}