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

multitheme Front-end code based on Randstad Human Forward components

/**
 * checkable.js
 * Sets animation classes for checkable input elements
 */

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

export class Checkable {

	constructor(element) {
		this.element = element;
		this.currentState = this.element.dataset.rsCheckable;
		this.input = this.element.querySelector(`[${this.attributes.input}]`);
		this.inputLabel = this.element.querySelector(`[${this.attributes.inputLabel}]`);
		this.icon = this.element.querySelector(`[${this.attributes.icon}]`);
		this.addEventHandlers();
	}

	/**
	* Declare attribute constants
	*/
	get attributes() {
		return {
			input: `${attributeBase}-input`,
			inputLabel: `${attributeBase}-input-label`,
			icon: `${attributeBase}-icon`
		}
	}

	/**
	* Declare classes
	*/
	get classes() {
		return {
			selectionControlIndeterminate: 'selection-control--indeterminate',
			selectionControlIndeterminateAnimate: 'selection-control--indeterminate--animate'
		}
	}

	/**
	* Declare state constants
	*/
	get states() {
		return {
			checked: 'checked',
			unchecked: 'unchecked',
			indeterminate: 'indeterminate'
		}
	}

	/**
	 * Add event handlers
	 */
	addEventHandlers() {	
		this.input.addEventListener('change', () => {
			this.setState(this.element);
		});
	}

	/**
	 * Set state of the input element to 'indeterminate', 'checked' or 'unchecked'
	 */
	setState(element) {
		if (this.currentState === this.states.indeterminate) {
			element.classList.remove(this.classes.selectionControlIndeterminate);
			element.classList.add(this.classes.selectionControlIndeterminateAnimate);
			if (this.icon !== null) {
				this.icon.addEventListener('transitionend', () => {
					if (this.input.checked) {
						element.dataset.rsCheckable = this.states.checked;
					}
				});
			}
			this.currentState = this.states.checked;
		}
		else if (this.currentState === this.states.checked) {
			element.dataset.rsCheckable = this.states.unchecked;
			this.currentState = this.states.unchecked;
		}
		else if (this.currentState === this.states.unchecked) {
			element.dataset.rsCheckable = this.states.checked;
			this.currentState = this.states.checked;
		}
	}

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