hedera-web/js/htk/toast/index.js

require('./style.scss');

/**
 * Class to show toast messages.
 */
module.exports =
{
	 maxMessages: 6
	,timeout: 10 /* Seconds */
	,_container: null
	,_timeouts: null
	,_topHeap: []

	/**
	 * Shows a normal toast message.
	 *
	 * @param {String} message The message text
	 */
	,showMessage(message) {
		this._showText(message, 'message');
	}
	
	/**
	 * Shows a warning toast message.
	 *
	 * @param {String} message The message text
	 */
	,showWarning(message) {
		this._showText(message, 'warning');
	}
	
	/**
	 * Shows an error toast message.
	 *
	 * @param {String} message The message text
	 */
	,showError(message) {
		this._showText(message, 'error');
	}
	
	,pushTop(top) {
		this._topHeap.push(top);
		this._refreshPosition();
	}
	
	,popTop() {
		var top = this._topHeap.pop();
		this._refreshPosition();
		return top;
	}

	,_refreshPosition() {
		if (!this._container)
			return;
		
		var left;
		var heapLen = this._topHeap.length;
		
		if (heapLen > 0) {
			var top = this._topHeap[heapLen - 1];
			var rect = top.getBoundingClientRect();
			left = (rect.left + parseInt(rect.width / 2) - window.pageXOffset) +'px';
		} else
			left = '';

		this._container.style.left = left;
	}
	
	/**
	 * Hides all currently displayed toast messages.
	 */
	,hide() {
		if (!this._container)
			return;

		if (this._timeouts)
		for (var i = 0; i < this._timeouts.length; i++)
			clearTimeout(this._timeouts[i]);

		this._timeouts = null;			

		document.removeEventListener('mousedown', this.hideHandler);
		Vn.Node.remove(this._container);
		this._container = null;
		this.nodes = [];
		this.lastMessage = null;
	}

	,_createContainer() {
		if (!this._container) {
			var container = document.createElement('div');
			container.className = 'htk-toast';
			document.body.appendChild(container);

			this.hideHandler = this.hide.bind(this);
			document.addEventListener('mousedown', this.hideHandler);

			this._timeouts = [];
			this._container = container;
		}

		this._refreshPosition();
	}

	,_showText(message, className) {
		if (!message) return;

		const last = this.lastMessage;
		if (last
		&& last.message == message
		&& last.className == className)
			return;
		this.lastMessage = {message, className};

		this._createContainer();

		if (this._timeouts.length >= this.maxMessages)
			this._onMessageTimeout();
		
		var toast = document.createElement('div');
		toast.className = className;
		toast.addEventListener('mousedown', this._onMessageMouseDown);

		var textNode = document.createTextNode(message);
		toast.appendChild(textNode);

		this._container.appendChild(toast);

		var timeoutId = setTimeout(this._onMessageTimeout.bind(this), this.timeout * 1000);
		this._timeouts.push(timeoutId);
		
		setTimeout(this._onShowToastTimeout.bind(this, toast), 50);
	}
	
	,_onShowToastTimeout(toast) {
		Vn.Node.addClass(toast, 'show');
	}

	,_onMessageTimeout() {
		if (!this._container)
			return;
	
		var nodes = this._container.childNodes;
	
		if (nodes.length > 0) {
			clearTimeout(this._timeouts.shift());
			Vn.Node.remove(nodes[0]);
		}
		if (nodes.length == 0)
			this.hide();
	}
	
	,_onMessageMouseDown(event) {
		event.stopPropagation();
	}
};