totorobook/src/cli/popin.js

/**
 * @constructor
**/
function Popin() {
    this.wrapper = document.createElement("div");
    var overlay = document.createElement("div");
    overlay.classList.add(htmlClasses.popin.overlay);
    this.wrapper.appendChild(overlay);
    var container = document.createElement("div");
    container.classList.add(htmlClasses.popin.container);
    this.wrapper.appendChild(container);
    this.contentWrapper = document.createElement("div");
    this.contentWrapper.className = htmlClasses.popin.imgContent;
    this.img = document.createElement("img");
    this.img.src = "/images/loading.svg";
    this.contentWrapper.appendChild(this.img);
    container.appendChild(this.contentWrapper);
    container.addEventListener("click", (() => this.hide()).bind(this));
    this.contentWrapper.addEventListener("click", e => e.stopPropagation());
    this.query = new XMLHttpRequest();
    this.query.responseType = 'blob';
    this.query.onreadystatechange = (() => {
        if (this.query.readyState === 4) {
            if (Math.floor(this.query.status / 100) === 2 && this.query.response) {
                this.img.src = window.URL.createObjectURL(/** @type {Blob!} */ (this.query.response));
            } else {
                // Http error
                console.error("Cannot get resource", this.query.status);
            }
        }
    }).bind(this);
}

Popin.prototype.show = function() {
    document.body.appendChild(this.wrapper);
};

Popin.prototype.hide = function() {
    this.wrapper.remove();
};

Popin.prototype.setImage = function(src) {
    if (this.query.readyState !== 0 && this.query.readyState !== 4)
        this.query.abort();
    this.query.open("GET", src, true);
    this.query.send();
};

Popin.prototype.setContent = function(fragment) {
    this.img.remove();
    this.contentWrapper.className = htmlClasses.popin.domContent;
    this.contentWrapper.appendChild(fragment);
};