2021-03-24 22:18:55 +01:00
|
|
|
function createDialogImage(url) {
|
2021-02-28 11:21:26 +01:00
|
|
|
createDialogHTML(`<img src="${url}">`, "imageDialog");
|
|
|
|
}
|
|
|
|
|
2021-03-24 22:18:55 +01:00
|
|
|
function createDialogHTML(html, customClasses = "") {
|
2021-03-09 22:35:57 +01:00
|
|
|
let dialog = document.createElement("div");
|
2021-02-28 11:21:26 +01:00
|
|
|
dialog.classList.add("dialog");
|
|
|
|
|
|
|
|
dialog.innerHTML = `
|
2021-03-22 21:03:09 +01:00
|
|
|
<span class="close">×</span>
|
2021-03-09 22:35:57 +01:00
|
|
|
<div class="dialogContent ${customClasses}">
|
|
|
|
${html}
|
|
|
|
</div>`;
|
2021-02-28 11:21:26 +01:00
|
|
|
|
|
|
|
document.body.appendChild(dialog);
|
|
|
|
fade(dialog, 0.04);
|
2021-03-22 21:03:09 +01:00
|
|
|
|
2021-03-24 22:18:55 +01:00
|
|
|
dialog.querySelector(".close").onclick = function (){
|
2021-03-22 21:03:09 +01:00
|
|
|
fade(dialog, -0.04, true);
|
|
|
|
}
|
2021-02-28 11:21:26 +01:00
|
|
|
}
|
|
|
|
|
2021-03-24 22:18:55 +01:00
|
|
|
function fade(element, value = 0.1, deleteAfterwards = false) {
|
|
|
|
let opacity = +(element.style.opacity) + value;
|
2021-02-28 11:21:26 +01:00
|
|
|
|
|
|
|
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 () {
|
|
|
|
element.parentNode.removeChild(element);
|
|
|
|
}, 10);
|
|
|
|
}
|
|
|
|
}
|