Source: buttonClass.js

export {Button};
import {config} from './recorder.js';
/**
 * Create a new Button
 * @class
 *
 * @param {Object} parentElem The parent Node. The button will be append to this
 * node
 *
 * @param {Function} func On click on the button, this function will be
 * triggered
 *
 * @param {string} id The id of the button
 *
 * @param {string} text The name of the button (displayed when the mouse is over
 * the button)
 *
 * @param {string} icon The path of the image displayed in the button
 *
 * @param {Button} rightOf The button will be dispplayed to right of this
 * element
 */
class Button {
	constructor(parentElem, func, id, text, icon, rightOf) {
		this.parentElem = parentElem;
		this.func = func;
		this.id = id;
		this.text = text;
		this.icon = "url(" + icon + ")";
		this.width = rightOf != null ? rightOf.getWidth() + 80 : 0;
	}

	setClickable(isClickable) {
        this.button.disabled = isClickable;
    }
	
	/**
	 * Return width of the button
	 */
	getWidth() { return this.width; }

	/**
	 * Set the button to visible
	 */
	show() { this.button.style.visibility = "visible"; }

	/**
	 * Hide the button
	 */
	hide() { this.button.style.visibility = "hidden"; }

	/**
	 * Set all element for a basic button
	 */
	createBasicButton() {
		this.button = document.createElement("input");
		this.button.type = "button";
		this.button.onclick = this.func;
		this.button.id = this.id;
		this.button.style.backgroundImage = this.icon;
		this.button.title = this.text;
		this.style = this.button.style;
	}

	/**
	 * Create main Button (recording button).
	 * Call {@link Button#createBasicButton createBasicButton}.
	 */
	createMenuButton() {
		this.createBasicButton();
		this.button.classList.add("rrweb-Buttons");
		if (config.recordButtonColor)
			this.button.style.backgroundColor = config.recordButtonColor;
		this.parentElem.appendChild(this.button);
	}

	/**
	 * Create others button that are not mainButton.
	 * Call {@link Button#createBasicButton createBasicButton}.
	 */
	createChildButton() {
		this.createBasicButton();
		if (config.recordPauseColor)
			this.button.style.backgroundColor = config.pauseButtonColor;
		this.button.classList.add("rrweb-Buttons");
		this.button.classList.add("rrweb-ChildButton")
		this.button.style.left = this.width + "px";
		this.parentElem.appendChild(this.button);
	}
}