function createDialogIframe(url:string) {
    createDialogHTML(`<iframe src="${url}">`);
}

function createDialogImage(url:string) {
    createDialogHTML(`<img src="${url}">`, "imageDialog");
}

function createDialogHTML(html:string, customClasses = "") {
    var dialog = document.createElement("div");
    dialog.classList.add("dialog");
    dialog.onclick = function () {
        fade(dialog, -0.04, true);
    }

    dialog.innerHTML = `
    <div class="dialogContent ${customClasses}">${html}</div>`;

    document.body.appendChild(dialog);
    fade(dialog, 0.04);
}

function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {
    let opacity:number = +(element.style.opacity) + value;

    element.style.opacity = String(opacity);

    if ((opacity < 1 && value > 0) || (opacity >= 0 && value < 0)) {
        setTimeout(function () {
            fade(element, value, deleteAfterwards);
        }, 10);
    } else if (deleteAfterwards) {
        setTimeout(function () {
            // @ts-ignore
            element.parentNode.removeChild(element);
        }, 10);
    }
}