mimouchat/cli/confirmDialog.js

/**
 * @constructor
 * @param {string} title
 * @param {string|Element} content
**/
function ConfirmDialog(title, content) {
    /** @const @type {string} */
    this.title = title;

    /** @const @type {string|Element} */
    this.content = content;

    /** @const @type {Element} */
    this.dom = this.createDom();

    /** @const @type {Element} */
    this.domOverlay = this.createDomOverlay();

    /** @type {Array.<function()>} */
    this.confirmHandlers = [];

    /** @type {Array.<function()>} */
    this.dissmissHandler = [];
}

/**
 * @return {Element}
**/
ConfirmDialog.prototype.createDom = function() {
    var 
        dom = document.createElement("div")
        ,domTitle = document.createElement("header")
        ,titleLabel = document.createElement("span")
        ,closeButton = document.createElement("span")
        ,domBody = document.createElement("div")
        ,domButtons = document.createElement("footer");
    var _this = this;

    dom.confirmButton = document.createElement("span");
    dom.dissmissButton = document.createElement("span");

    titleLabel.textContent = this.title;
    if (typeof this.content == "string")
        domBody.innerHTML = this.content;
    else
        domBody.appendChild(this.content);

    domTitle.className = R.klass.dialog.title;
    titleLabel.className = R.klass.dialog.titleLabel;
    closeButton.className = R.klass.dialog.closeButton;
    closeButton.textContent = 'x';
    domTitle.appendChild(titleLabel);
    domTitle.appendChild(closeButton);
    dom.appendChild(domTitle);

    domBody.className = R.klass.dialog.body;
    dom.appendChild(domBody);

    dom.dissmissButton.className = R.klass.button;
    dom.dissmissButton.textContent = locale.dissmiss;

    dom.dissmissButton.addEventListener("click", function() {
        _this.buttonClicked(false);
    });
    closeButton.addEventListener("click", function() {
        _this.buttonClicked(false);
    });
    dom.confirmButton.addEventListener("click", function() {
        _this.buttonClicked(true);
    });
    domButtons.appendChild(dom.dissmissButton);

    dom.confirmButton.className = R.klass.button;
    dom.confirmButton.textContent = locale.ok;
    domButtons.appendChild(dom.confirmButton);
    domButtons.className = R.klass.buttonContainer +' ' +R.klass.dialog.buttonBar;

    dom.appendChild(domButtons);
    dom.className = R.klass.dialog.container;

    return dom;
};

/**
 * @param {boolean} confirmed
**/
ConfirmDialog.prototype.buttonClicked = function(confirmed) {
    (confirmed ? this.confirmHandlers : this.dissmissHandler).forEach(function(handler) {
        handler();
    });
    this.close();
};

/**
 * @return {Element}
**/
ConfirmDialog.prototype.createDomOverlay = function() {
    var dom = document.createElement("div");

    dom.className = R.klass.dialog.overlay;
    dom.addEventListener("click", (function() {
        this.buttonClicked(false);
    }).bind(this));
    return dom;
};

/**
 * @param {string} confirmText
 * @param {string} dissmissText
 * @return {ConfirmDialog}
**/
ConfirmDialog.prototype.setButtonText = function(confirmText, dissmissText) {
    this.dom.confirmButton.textContent = confirmText;
    this.dom.dissmissButton.textContent = dissmissText;
    return this;
};

/**
 * @param {Element=} domParent
 * @return {ConfirmDialog}
**/
ConfirmDialog.prototype.spawn = function(domParent) {
    domParent = domParent || document.body;
    domParent.appendChild(this.domOverlay);
    domParent.appendChild(this.dom);
    return this;
};

/**
 * @return {ConfirmDialog}
**/
ConfirmDialog.prototype.close = function() {
    this.dom.remove();
    this.domOverlay.remove();
    return this;
};

/**
 * @param {function()} handler
 * @return {ConfirmDialog}
**/
ConfirmDialog.prototype.onConfirm = function(handler) {
    this.confirmHandlers.push(handler);
    return this;
};

/**
 * @param {function()} handler
 * @return {ConfirmDialog}
**/
ConfirmDialog.prototype.onDissmiss = function(handler) {
    this.dissmissHandler.push(handler);
    return this;
};