block-ui.js

const events = ['click', 'touchstart', 'touchmove', 'touchend', 'mousedown', 'mousemove', 'mouseup', 'keydown', 'keyup'];

const defaults = {
	timeout: 5000
};

let timer = null;


function BlockUi(context, options) {

	this.options = Object.assign({}, defaults, options || {});


	this.element = context || document.body;
	this.blocker = document.createElement('div');
	this.attachEvents();
	this.setBounds();
}

BlockUi.prototype.attachEvents = function () {
	const self = this;
	events.forEach((event) => {
		self.blocker.addEventListener(event, () => false);
	});
}

BlockUi.prototype.setBounds = function () {
	this.element.style.position = 'relative';

	this.blocker.style.position = 'absolute';
	this.blocker.style.top = 0;
	this.blocker.style.left = 0;
	this.blocker.style.right = 0;
	this.blocker.style.bottom = 0;
	this.blocker.style.zIndex = 99999;

}

BlockUi.prototype.show = function () {
	this.element.appendChild(this.blocker);

	timer = setTimeout(this.destroy.bind(this), this.options.timeout);
}

BlockUi.prototype.hide = function () {
	this.element.style.position = '';
	this.element.removeChild(this.blocker);

	timer && clearTimeout(timer);
}

BlockUi.prototype.destroy = function () {
	const self = this;
	events.forEach((event) => {
		self.blocker.removeEventListener(event, () => {
			return false;
		});
	});

	this.hide();
	this.element = null;
	this.blocker = null;
}

export default BlockUi;