Commit c72b8f9a authored by Nicolas Pernoud's avatar Nicolas Pernoud
Browse files

chore: refactored AnimateCSS to use promises

parent ff6a212d
Pipeline #6083 passed with stages
in 2 minutes and 46 seconds
......@@ -426,21 +426,20 @@ async function reloadAppsOnServer() {
}
}
function toggleModal() {
async function toggleModal() {
toggleForwardServe();
toggleRoles();
updateIcon();
const modal = document.getElementById("apps-modal");
const card = document.getElementById("apps-modal-card");
if (modal.classList.contains("is-active")) {
AnimateCSS(modal, "animate__fadeOut");
AnimateCSS(card, "animate__zoomOut", function () {
modal.classList.remove("is-active");
});
AnimateCSS(modal, "fadeOut");
await AnimateCSS(card, "zoomOut");
modal.classList.remove("is-active");
} else {
modal.classList.add("is-active");
AnimateCSS(modal, "animate__fadeIn");
AnimateCSS(card, "animate__zoomIn");
AnimateCSS(modal, "fadeIn");
AnimateCSS(card, "zoomIn");
}
}
......@@ -507,11 +506,10 @@ function openWebview(app) {
<footer class="modal-card-foot"></footer>
</div>
`;
webview.querySelector("#" + "apps-webview-close").addEventListener("click", () => {
AnimateCSS(webview.getElementsByClassName("modal-background")[0], "animate__fadeOut", function () {
webview.parentNode.removeChild(webview);
});
AnimateCSS(webview.getElementsByClassName("modal-card")[0], "animate__zoomOut");
webview.querySelector("#" + "apps-webview-close").addEventListener("click", async () => {
AnimateCSS(webview.getElementsByClassName("modal-background")[0], "fadeOut");
await AnimateCSS(webview.getElementsByClassName("modal-card")[0], "zoomOut");
webview.parentNode.removeChild(webview);
});
document.body.appendChild(webview);
}
......@@ -382,20 +382,19 @@ async function reloadDavsOnServer() {
}
}
function toggleModal() {
async function toggleModal() {
toggleRoles();
updateIcon();
const modal = document.getElementById("davs-modal");
const card = document.getElementById("davs-modal-card");
if (modal.classList.contains("is-active")) {
AnimateCSS(modal, "animate__fadeOut");
AnimateCSS(card, "animate__zoomOut", function () {
modal.classList.remove("is-active");
});
AnimateCSS(modal, "fadeOut");
await AnimateCSS(card, "zoomOut");
modal.classList.remove("is-active");
} else {
modal.classList.add("is-active");
AnimateCSS(modal, "animate__fadeIn");
AnimateCSS(card, "animate__zoomIn");
AnimateCSS(modal, "fadeIn");
AnimateCSS(card, "zoomIn");
}
}
......@@ -441,6 +440,6 @@ function openExplorerModal(hostname, readwrite, encrypted) {
const explorer = new Explorer(hostname);
explorer.mount("davs-explorer-modal-card", readwrite, encrypted);
modal.classList.add("is-active");
AnimateCSS(modal, "animate__fadeIn");
AnimateCSS(card, "animate__zoomIn");
AnimateCSS(modal, "fadeIn");
AnimateCSS(card, "zoomIn");
}
......@@ -40,10 +40,9 @@ export class Edit {
}
this.editModal.innerHTML = this.computeTemplate(content);
document.body.appendChild(this.editModal);
this.gid("edit-close").addEventListener("click", () => {
AnimateCSS(this.editModal, "animate__fadeOut", () => {
this.editModal.parentNode.removeChild(this.editModal);
});
this.gid("edit-close").addEventListener("click", async () => {
await AnimateCSS(this.editModal, "fadeOut");
this.editModal.parentNode.removeChild(this.editModal);
});
this.gid("edit-save").addEventListener("click", () => {
this.save();
......
......@@ -58,12 +58,11 @@ export class Explorer {
</footer>
`;
this.user = await Auth.GetUser();
document.getElementById(`explorer-modal-close`).addEventListener("click", function () {
document.getElementById(`explorer-modal-close`).addEventListener("click", async function () {
const modal = card.parentNode;
AnimateCSS(modal, "animate__fadeOut");
AnimateCSS(card, "animate__zoomOut", function () {
modal.classList.remove("is-active");
});
AnimateCSS(modal, "fadeOut");
await AnimateCSS(card, "zoomOut");
modal.classList.remove("is-active");
});
document.getElementById(`explorer-modal-back`).addEventListener("click", () => {
this.navigate(goUp(this.path));
......@@ -311,14 +310,12 @@ export class Explorer {
} catch (e) {
HandleError(e);
}
AnimateCSS(renameModal, "animate__fadeOut", function () {
renameModal.parentNode.removeChild(renameModal);
});
await AnimateCSS(renameModal, "fadeOut");
renameModal.parentNode.removeChild(renameModal);
});
renameCancel.addEventListener("click", () => {
AnimateCSS(renameModal, "animate__fadeOut", function () {
renameModal.parentNode.removeChild(renameModal);
});
renameCancel.addEventListener("click", async () => {
await AnimateCSS(renameModal, "fadeOut");
renameModal.parentNode.removeChild(renameModal);
});
document.body.appendChild(renameModal);
field.focus();
......@@ -358,14 +355,12 @@ export class Explorer {
} catch (e) {
HandleError(e);
}
AnimateCSS(pasteControl, "animate__zoomOut", function () {
pasteControl.parentNode.removeChild(pasteControl);
});
await AnimateCSS(pasteControl, "zoomOut");
pasteControl.parentNode.removeChild(pasteControl);
});
pasteControl.getElementsByTagName("a")[1].addEventListener("click", async () => {
AnimateCSS(pasteControl, "animate__zoomOut", function () {
pasteControl.parentNode.removeChild(pasteControl);
});
await AnimateCSS(pasteControl, "zoomOut");
pasteControl.parentNode.removeChild(pasteControl);
});
document.getElementById("explorer-modal-footer-buttons").appendChild(pasteControl);
}
......@@ -495,9 +490,8 @@ export class Explorer {
console.error(e.statusText);
Messages.Show("is-warning", e.statusText);
}
AnimateCSS(msg, "animate__fadeOutDown", function () {
msg.parentNode.removeChild(msg);
});
await AnimateCSS(msg, "fadeOutDown");
msg.parentNode.removeChild(msg);
}
}
......
......@@ -85,10 +85,9 @@ export class Open {
}
this.openModal.innerHTML = this.computeTemplate(content, token);
document.body.appendChild(this.openModal);
this.gid("open-close").addEventListener("click", () => {
AnimateCSS(this.openModal, "animate__fadeOut", () => {
this.openModal.parentNode.removeChild(this.openModal);
});
this.gid("open-close").addEventListener("click", async () => {
await AnimateCSS(this.openModal, "fadeOut");
this.openModal.parentNode.removeChild(this.openModal);
});
this.gid("open-previous").addEventListener("click", () => {
this.update(false);
......
......@@ -100,22 +100,19 @@ export class Share {
</div>
`;
document.body.appendChild(resultModal);
this.gid("explorer-result-close").addEventListener("click", () => {
AnimateCSS(resultModal, "animate__fadeOut", function () {
resultModal.parentNode.removeChild(resultModal);
});
this.gid("explorer-result-close").addEventListener("click", async () => {
await AnimateCSS(resultModal, "fadeOut");
resultModal.parentNode.removeChild(resultModal);
});
} catch (e) {
HandleError(e);
}
AnimateCSS(shareModal, "animate__fadeOut", function () {
shareModal.parentNode.removeChild(shareModal);
});
await AnimateCSS(shareModal, "fadeOut");
shareModal.parentNode.removeChild(shareModal);
});
this.gid("share-cancel").addEventListener("click", () => {
AnimateCSS(shareModal, "animate__fadeOut", function () {
shareModal.parentNode.removeChild(shareModal);
});
this.gid("share-cancel").addEventListener("click", async () => {
await AnimateCSS(shareModal, "fadeOut");
shareModal.parentNode.removeChild(shareModal);
});
}
}
......@@ -24,17 +24,16 @@ export function mount(mountpoint) {
// Hamburger menu
const burger = document.getElementById("navbar-burger");
menu = document.getElementById("navbar-menu");
const openClose = (e) => {
const openClose = async (e) => {
if (burger.classList.contains("is-active")) {
AnimateCSS(menu, "animate__slideOutRight", function () {
menu.classList.remove("is-active");
burger.classList.remove("is-active");
});
await AnimateCSS(menu, "slideOutRight");
menu.classList.remove("is-active");
burger.classList.remove("is-active");
} else {
if (e.srcElement == burger) {
menu.classList.add("is-active");
burger.classList.add("is-active");
AnimateCSS(menu, "animate__slideInRight");
AnimateCSS(menu, "slideInRight");
}
}
};
......
......@@ -282,17 +282,16 @@ async function postUser() {
toggleModal();
}
function toggleModal() {
async function toggleModal() {
const modal = document.getElementById("users-modal");
const card = document.getElementById("users-modal-card");
if (modal.classList.contains("is-active")) {
AnimateCSS(modal, "animate__fadeOut");
AnimateCSS(card, "animate__zoomOut", function () {
modal.classList.remove("is-active");
});
AnimateCSS(modal, "fadeOut");
await AnimateCSS(card, "zoomOut");
modal.classList.remove("is-active");
} else {
modal.classList.add("is-active");
AnimateCSS(modal, "animate__fadeIn");
AnimateCSS(card, "animate__zoomIn");
AnimateCSS(modal, "fadeIn");
AnimateCSS(card, "zoomIn");
}
}
......@@ -75,7 +75,7 @@
</div>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item"><p>v4.3.24</p></div>
<div class="navbar-item"><p>v4.3.25</p></div>
</div>
</div>
</nav>
......
......@@ -52,18 +52,15 @@ async function navigate() {
}
async function load(element, domAlteration) {
AnimateCSS(element, "animate__fadeOut", async function () {
element.classList.add("is-hidden");
spinner.classList.remove("is-hidden");
AnimateCSS(spinner, "animate__fadeIn", async () => {
if (typeof domAlteration === "function") {
await domAlteration();
AnimateCSS(spinner, "animate__fadeOut", () => {
spinner.classList.add("is-hidden");
element.classList.remove("is-hidden");
AnimateCSS(element, "animate__fadeIn");
});
}
});
});
await AnimateCSS(element, "fadeOut");
element.classList.add("is-hidden");
spinner.classList.remove("is-hidden");
await AnimateCSS(spinner, "fadeIn");
if (typeof domAlteration === "function") {
await domAlteration();
await AnimateCSS(spinner, "fadeOut");
spinner.classList.add("is-hidden");
element.classList.remove("is-hidden");
AnimateCSS(element, "fadeIn");
}
}
export function AnimateCSS(el, animationName, callback) {
el.classList.add("animate__animated", animationName);
function handleAnimationEnd() {
el.classList.remove("animate__animated", animationName);
el.removeEventListener("animationend", handleAnimationEnd);
if (typeof callback === "function") callback();
}
el.addEventListener("animationend", handleAnimationEnd);
}
export const AnimateCSS = (element, animation, prefix = "animate__") =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
element.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd() {
element.classList.remove(`${prefix}animated`, animationName);
element.removeEventListener("animationend", handleAnimationEnd);
resolve("Animation ended");
}
element.addEventListener("animationend", handleAnimationEnd);
});
export let GID = (obj, id) => {
return document.getElementById(obj.prefix + id);
......
......@@ -38,14 +38,12 @@ export class Delete {
toggleButtons();
await okFunction();
toggleButtons();
AnimateCSS(deleteModal, "animate__fadeOut", function () {
deleteModal.parentNode.removeChild(deleteModal);
});
await AnimateCSS(deleteModal, "fadeOut");
deleteModal.parentNode.removeChild(deleteModal);
});
deleteCancel.addEventListener("click", () => {
AnimateCSS(deleteModal, "animate__fadeOut", function () {
deleteModal.parentNode.removeChild(deleteModal);
});
deleteCancel.addEventListener("click", async () => {
await AnimateCSS(deleteModal, "fadeOut");
deleteModal.parentNode.removeChild(deleteModal);
});
document.body.appendChild(deleteModal);
}
......
......@@ -29,13 +29,11 @@ export function Show(bulmaClass, message) {
}
}
function removeMsg(msg, message, height) {
AnimateCSS(msg, "animate__fadeOutDown", function () {
msg.parentNode.removeChild(msg);
});
offset = offset - height;
async function removeMsg(msg, message, height) {
const index = messages.indexOf(message);
if (index > -1) {
messages.splice(index, 1);
}
await AnimateCSS(msg, "fadeOutDown");
msg.parentNode.removeChild(msg);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment