wikijs/client/js/components/alerts.js

"use strict";

/**
 * Alerts
 */
class Alerts {

	/**
	 * Constructor
	 *
	 * @class
	 */
	constructor() {

		let self = this;

		self.mdl = new Vue({
			el: '#alerts',
			data: {
				children: []
			},
			methods: {
				acknowledge: (uid) => {
					self.close(uid);
				}
			}
		});

		self.uidNext = 1;

	}

	/**
	 * Show a new Alert
	 *
	 * @param      {Object}  options  Alert properties
	 * @return     {null}  Void
	 */
	push(options) {

		let self = this;

		let nAlert = _.defaults(options, {
			_uid: self.uidNext,
			class: 'is-info',
			message: '---',
			sticky: false,
			title: '---'
		});

		self.mdl.children.push(nAlert);

		if(!nAlert.sticky) {
			_.delay(() => {
				self.close(nAlert._uid);
			}, 5000);
		}

		self.uidNext++;

	}

	/**
	 * Shorthand method for pushing errors
	 *
	 * @param      {String}  title    The title
	 * @param      {String}  message  The message
	 */
	pushError(title, message) {
		this.push({
			class: 'is-danger',
			message,
			sticky: false,
			title
		});
	}

	/**
	 * Shorthand method for pushing success messages
	 *
	 * @param      {String}  title    The title
	 * @param      {String}  message  The message
	 */
	pushSuccess(title, message) {
		this.push({
			class: 'is-success',
			message,
			sticky: false,
			title
		});
	}

	/**
	 * Close an alert
	 *
	 * @param      {Integer}  uid     The unique ID of the alert
	 */
	close(uid) {

		let self = this;

		let nAlertIdx = _.findIndex(self.mdl.children, ['_uid', uid]);
		let nAlert = _.nth(self.mdl.children, nAlertIdx);

		if(nAlertIdx >= 0 && nAlert) {
			nAlert.class += ' exit';
			Vue.set(self.mdl.children, nAlertIdx, nAlert);
			_.delay(() => {
				self.mdl.children.splice(nAlertIdx, 1);
			}, 500);
		}

	}

}