chore: refactored AnimateCSS to use promises

web/components/apps/apps.js

@@ -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);
 }

web/components/davs/davs.js

@@ -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");
 }

web/components/davs/edit.js

@@ -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();

web/components/davs/explorer.js

@@ -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);
     }
   }
 

web/components/davs/open.js

@@ -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);

web/components/davs/share.js

@@ -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);
     });
   }
 }

web/components/navbar/navbar.js

@@ -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");
       }
     }
   };

web/components/users/users.js

@@ -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");
   }
 }

web/index.html

@@ -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>

web/main.js

@@ -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");
+  }
 }

web/services/common/common.js

-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);

web/services/common/delete.js

@@ -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);
   }

web/services/messages/messages.js

@@ -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);
 }