jsoneditor/app/web/notify.js

/**
 * Utility to display notifications and error messages.
 * The messages are displayed on the top center of the web page
 * @constructor Notify
 */
function Notify () {
    this.dom = {};

    // TODO: attach the event as soon as there are one or multiple messages displayed,
    //       remove it as soon as they are all gone
    var me = this;
    jsoneditor.util.addEventListener(document, 'keydown', function (event) {
        me.onKeyDown(event);
    });
}

/**
 * Show a notification
 * @param {String} message
 * @return {Element} messageObject
 */
Notify.prototype.showNotification = function (message) {
    return this.showMessage({
        type: 'notification',
        message: message,
        closeButton: false
    });
};

/**
 * Show an error message
 * @param {Error} error
 * @return {Element} messageObject
 */
Notify.prototype.showError = function (error) {
    return this.showMessage({
        type: 'error',
        message: (error.message || error.toString()),
        closeButton: true
    });
};

/**
 * Show a message
 * @param {Object} params    Available parameters:
 *                           {String} message
 *                           {String} type 'error', 'notification'
 *                           {Boolean} closeButton
 * @return {Element} messageObject
 */
Notify.prototype.showMessage = function (params) {
    var frame = this.dom.frame;
    if (!frame) {
        var width = 500;
        var top = 5;
        var windowWidth = document.body.offsetWidth ||  window.innerWidth;
        frame = document.createElement('div');
        frame.style.position = 'absolute';
        frame.style.left = (windowWidth - width) / 2 + 'px';
        frame.style.width = width + 'px';
        frame.style.top = top + 'px';
        document.body.appendChild(frame);
        this.dom.frame = frame;
    }

    var type = params.type || 'notification';
    var closeable = (params.closeButton !== false);
    var divMessage = document.createElement('div');
    divMessage.className = type;
    divMessage.type = type;
    divMessage.closeable = closeable;
    divMessage.style.position = 'relative';
    frame.appendChild(divMessage);

    var table = document.createElement('table');
    table.style.width = '100%';
    divMessage.appendChild(table);
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    var tr = document.createElement('tr');
    tbody.appendChild(tr);

    var tdMessage = document.createElement('td');
    tdMessage.innerHTML = params.message || '';
    tr.appendChild(tdMessage);

    if (closeable) {
        var tdClose = document.createElement('td');
        tdClose.style.textAlign = 'right';
        tdClose.style.verticalAlign = 'top';
        tr.appendChild(tdClose);

        var closeDiv = document.createElement('button');
        closeDiv.innerHTML = '×';
        closeDiv.title = 'Close message (ESC)';
        tdClose.appendChild(closeDiv);
        var me = this;
        closeDiv.onclick = function () {
            me.removeMessage(divMessage);
        }
    }

    return divMessage;
};

/**
 * Remove a message from the list with messages
 * @param {Element} [message]   The HTML DOM of a message
 *                              If undefined, the first closeable message will
 *                              closed.
 */
Notify.prototype.removeMessage = function (message) {
    var frame = this.dom.frame;
    if (!message && frame) {
        // find the first closable message in the list with displayed messages
        var child = frame.firstChild;
        while (child && !child.closeable) {
            child = child.nextSibling;
        }
        if (child && child.closeable) {
            message = child;
        }
    }

    if (message && message.parentNode == frame) {
        message.parentNode.removeChild(message);
    }

    if (frame && frame.childNodes.length == 0) {
        frame.parentNode.removeChild(frame);
        delete this.dom.frame;
    }
};

/**
 * Handle key down event.
 * @param {Event} event
 * @private
 */
Notify.prototype.onKeyDown = function (event) {
    event = event || window.event;
    var keynum = event.which || event.keyCode;
    if (keynum == 27) { // ESC
        // remove the oldest open and closeable message
        this.removeMessage();
        jsoneditor.util.preventDefault(event);
        jsoneditor.util.stopPropagation(event);
    }
};