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

multitheme Front-end code based on Randstad Human Forward components

/**
 * untouched.js
 * Removes 'untouched' class from select elements for styling purposes
 */

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

export class Untouched {

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

	/**
	* Declare classes
	*/
	get classes() {
		return {
			untouched: 'untouched'
		}
	}

	/**
	 * Add event handlers
	 */
	addEventHandlers() {
		this.element.addEventListener('focus', () => {
			this.removeUntouchedClass(this.element);
		});
		this.element.addEventListener('click', () => {
			this.removeUntouchedClass(this.element);
		});
		this.element.addEventListener('keyup', () => {
			this.removeUntouchedClass(this.element);
		});
		this.element.addEventListener('change', () => {
			this.removeUntouchedClass(this.element);
		});
	}

	/**
	 * Remove untouched class
	 */
	removeUntouchedClass(element) {
		element.classList.remove(this.classes.untouched);
	}

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