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

multitheme Front-end code based on Randstad Human Forward components

/**
 * status.js
 * Script to handle status components
 */

import ElementHelpers from '../helpers/element-helpers';

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

export class Status {

	constructor(element) {		
		this.element = element;
		this.activeElement = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.active);
		this.tooltipPointer = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.tooltipPointer);
		this.tooltip = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.tooltip);
		this.tooltipContent = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.tooltipContent);
		this.progressBarContent = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.progressBarContent);
		this.tooltipWidth = this.tooltipContent.offsetWidth;
		this.middleActiveElement = this.activeElement.offsetLeft + (this.activeElement.offsetWidth / 2);
		this.setTooltip();		
	}

	/**
	* Declare attribute constants
	*/
	get attributes() {
		return {
			active: `${attributeBase}-active`,
			tooltipPointer: `${attributeBase}-tooltip-pointer`,
			tooltip: `${attributeBase}-tooltip`,
			tooltipContent: `${attributeBase}-tooltip-content`,
			progressBarContent: `${attributeBase}-progress-bar-content`
		}
	}

	/**
	* Declare position constants
	*/
	get positions() {
		return {
			left: 'left',
			right: 'right',
			middle: 'middle'
		}
	}

	/**
	 * set tooltip
	 */
	setTooltip() {
		// check if tooltip is not too far to the left
		if (this.middleActiveElement - (this.tooltipWidth / 2) > 0) {
			// check if tooltip is not too far to the right
			if (this.middleActiveElement - (this.tooltipWidth / 2) + this.tooltipWidth <= this.progressBarContent.offsetWidth) {
				this.tooltip.style.left = `${this.middleActiveElement - (this.tooltipWidth / 2)}px`;
				this.setTooltipPointer(this.positions.middle);
			}
			else {
				this.tooltip.style.left = `${this.progressBarContent.offsetWidth - this.tooltipWidth}px`;
				this.setTooltipPointer(this.positions.right);
			}
		}
		// tooltip is too far to the left
		else {
			this.setTooltipPointer(this.positions.left);
		}
	}

	/**
	 * set tooltip pointer
	 */
	setTooltipPointer(position) {
		const pointer = this.tooltipPointer.getBoundingClientRect();
		if (position === this.positions.middle) {
			// set tooltip pointer style left to middle of tooltip
			this.tooltipPointer.style.left = `${(this.tooltipContent.offsetWidth / 2) - (pointer.width / 2)}px`;
		}
		else if (position === this.positions.left) {
			// set tooltip pointer style left to middle of active element
			this.tooltipPointer.style.left = `${this.middleActiveElement - (pointer.width / 2)}px`;
		}
		else if (position === this.positions.right) {
			// set tooltip pointer style left to middle of active element minus difference progress bar and tooltip width on the left
			this.tooltipPointer.style.left = `${this.middleActiveElement - (pointer.width / 2) - (this.progressBarContent.offsetWidth - this.tooltipWidth)}px`;
		}
	}

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