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

multitheme Front-end code based on Randstad Human Forward components

/**
 * toggable-group.js
 * toggles class  of group of items on click or keyup (spacebar)
 * 
 */

import ElementHelpers from '../helpers/element-helpers';
import Target from './toggable/target';

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

export class ToggableGroup {

	constructor(element) {
		this.element = element;
		this.items = [...ElementHelpers.getElementsByAttributeWithinElement(this.element, this.attributes.item)];
		this.classToToggle = this.element.getAttribute(attributeBase);
		this.addEventHandlers();
	}

	/**
	* Declare attribute constants
	*/
	get attributes() {
		return {
			item: `${attributeBase}-item`,
			active: 'active'
		}
	}

	/**
	* Add event handlers
	*/
	addEventHandlers() {
		this.items.forEach((item) => {
			item.addEventListener('click', (clickEvent) => {
				clickEvent.preventDefault();

				// get active toggable group item => remove attribute and class
				let activeItem = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.item, this.attributes.active);
				activeItem.setAttribute(this.attributes.item, '');
				activeItem.classList.remove(this.classToToggle);
				Target.toggle(activeItem, false);

				// set attribute and class to clicked item
				item.setAttribute(this.attributes.item, this.attributes.active);
				item.classList.add(this.classToToggle);
				Target.toggle(item, true);
			});
		});

		// get active toggable group item => remove attribute and class
		let activeItem = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.item, this.attributes.active);
		Target.toggle(activeItem, true);
	}

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