Feature

dist/alert.js

@@ -1,20 +1,19 @@
-function closeAlert(event){
-  let alert = event.currentTarget.getAttribute("data-target");
-  if(alert){
-    alert = document.querySelectorAll(alert);
-    for (var index = 0; index < alert.length; index++) {
-      alert[index].parentNode.removeChild(alert[index]);
-    }
-  }
-}
-
-function initAlert(){
-  let dataClose = document.querySelectorAll("[data-close='alert']");
-  for (var index = 0; index < dataClose.length; index++) {
-    dataClose[index].addEventListener("click",closeAlert);
-  }
-}
-
-(function () {
-  initAlert();
-}());
+const closeAlert = e => {
+  let alert = e.currentTarget.getAttribute("data-target");
+
+  if (alert) {
+    alert = document.querySelectorAll(alert);
+
+    for (let i of alert) {
+      fadeOut(i);
+
+      setTimeout(() => i.remove(), 450);
+    }
+  }
+}
+
+const initAlert = () => {
+  const dataClose = document.querySelectorAll("[data-close='alert'");
+
+  for (let i of dataClose) i.addEventListener("click", closeAlert);
+}

dist/animations.js

@@ -0,0 +1,89 @@
+const fadeIn = (id, duration) => {
+    id.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: duration ? duration : 500,
+        easing: "linear"
+    })
+}
+
+const fadeOut = (id, duration) => {
+    id.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: duration ? duration : 500,
+        easing: "linear"
+    })
+}
+
+const slideInBottom = id => {
+    id.animate([
+        {
+            opacity: 0,
+            transform: "translateY(25%)"
+        },
+
+        {
+            opacity: 1,
+            transform: "translateY(0)"
+        }
+    ], 
+
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
+
+const slideOutBottom = id => {
+    id.animate([
+        {
+            opacity: 1,
+            transform: "translateY(0)"
+        },
+
+        {
+            opacity: 0,
+            transform: "translateY(25%)"
+        }
+    ], 
+
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
+
+const dropdownIn = id => {
+    id.animate([
+        {
+            opacity: 0,
+            transform: "translate(0, 50px)"
+        },
+
+        {
+            opacity: 1,
+            transform: "translate(0, 38px)"
+        }
+    ], 
+
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
+
+const dropdownOut = id => {
+    id.animate([
+        {
+            opacity: 1,
+            transform: "translate(0, 38px)"
+        },
+
+        {
+            opacity: 0,
+            transform: "translate(0, 50px)"
+        }
+    ], 
+
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}

dist/collapse.js

@@ -1,15 +1,11 @@
-function toggleCollapse(event){
-  let collapseID = event.currentTarget.getAttribute("data-target")
-  document.querySelector(collapseID).classList.toggle("hidden");
-}
-
-function initCollapse(){
-  let dataCollapse = document.querySelectorAll("[data-toggle='collapse']");
-  for (var index = 0; index < dataCollapse.length; index++) {
-    dataCollapse[index].addEventListener("click",toggleCollapse);
-  }
-}
-
-(function () {
-  initCollapse();
-}());
+const toggleCollapse = e => {
+  const collapseID  = e.currentTarget.getAttribute("data-target");
+
+  document.querySelector(collapseID).classList.toggle("hidden");
+}
+
+const initCollapse = () => {
+  const dataCollapse = document.querySelectorAll("[data-toggle='collapse']");
+
+  for (let i of dataCollapse) i.addEventListener("click",toggleCollapse);
+}

dist/dropdown.js

@@ -1,41 +1,48 @@
-function togglePopper(event){
-  let element = event.currentTarget;
-  let popperID = element.getAttribute("data-target");
-  let placement = element.getAttribute("data-placement");
-  let popperElement = document.querySelector(popperID);
-  let popperInnerElement = popperElement.querySelector("div");
-  let popper = Popper.createPopper(element, popperElement, {
-    placement: (placement ? placement : 'bottom')
-  });
-  popperElement.classList.toggle("hidden");
-  placement = popper.state.placement
-  let marginClass;
-  switch (placement) {
-    case "bottom":
-      marginClass = "mt-3"
-      break;
-    case "top":
-      marginClass = "mb-3"
-      break;
-    case "left":
-      marginClass = "mr-3"
-      break;
-    case "right":
-      marginClass = "ml-3"
-      break;
-    default:
-      break;
-  }
-  popperInnerElement.classList.toggle(marginClass);
-}
-
-function initDropdowns(){
-  let dropdownData = document.querySelectorAll("[data-toggle='dropdown']");
-  for (var index = 0; index < dropdownData.length; index++) {
-    dropdownData[index].addEventListener("click",togglePopper);
-  }
-}
-
-(function () {
-  initDropdowns();
-}());
+const toggleDropdown = e => {
+  let marginClass;
+
+  const element             = e.currentTarget;
+  const popperID            = element.getAttribute("data-target");
+  const placement           = element.getAttribute("data-placement");
+  const popperElement       = document.querySelector(popperID);
+  const popperInnerElement  = popperElement.querySelector("div");
+
+  Popper.createPopper(element, popperElement, {
+    placement: (placement ? placement : 'bottom')
+  });
+
+  switch (placement) {
+    case "bottom":
+      marginClass = "mt-3"
+      break;
+    case "top":
+      marginClass = "mb-3"
+      break;
+    case "left":
+      marginClass = "mr-3"
+      break;
+    case "right":
+      marginClass = "ml-3"
+      break;
+  }
+
+  if (popperElement.classList.contains("hidden")) {
+    dropdownIn(popperElement);
+
+    popperElement.classList.remove("hidden");
+    popperInnerElement.classList.add(marginClass);
+  } else {
+    dropdownOut(popperElement);
+
+    setTimeout(() => {
+      popperElement.classList.add("hidden");
+      popperInnerElement.classList.remove(marginClass);
+    }, 300);
+  }
+}
+
+const initDropdown = () => {
+  const dropdownData = document.querySelectorAll("[data-toggle='dropdown']");
+
+  for (let i of dropdownData) i.addEventListener("click",toggleDropdown);
+}

dist/modal.js

@@ -1,38 +1,41 @@
-function toggleModal(event){
-  let modalID = event.currentTarget.getAttribute("data-target");
-  let modal = document.querySelector(modalID);
-  let modalDialog = document.querySelector(modalID+"-dialog");
-  let modalBackdrop = document.querySelector(modalID+"-backdrop");
-  modalBackdrop.classList.toggle("hidden");
-  modalBackdrop.classList.toggle("flex");
-  if (modal.classList.contains("hidden")) {
-    modal.style.display = "block";
-    setTimeout(()=>{
-      modal.classList.remove("hidden");
-      modal.classList.add("flex");
-      modal.classList.remove("opacity-0");
-      modalDialog.classList.remove("-translate-y-1");
-      modalDialog.classList.add("translate-y-1");
-    },30);
-  } else {
-    modalDialog.classList.remove("translate-y-1");
-    modalDialog.classList.add("-translate-y-1");
-    setTimeout(()=>{
-      modal.style.display = "none";
-      modal.classList.add("hidden");
-      modal.classList.remove("flex");
-      modal.classList.add("opacity-0");
-    },30)
-  }
-}
-
-function initModal(){
-  let dataModal = document.querySelectorAll("[data-toggle='modal']");
-  for (var index = 0; index < dataModal.length; index++) {
-    dataModal[index].addEventListener("click",toggleModal);
-  }
-}
-
-(function () {
-  initModal();
-}());
+const toggleModal = e => {
+  const modalID       = e.currentTarget.getAttribute("data-target");
+  const modal         = document.querySelector(modalID);
+  const modalDialog   = document.querySelector(`${modalID}-dialog`);
+  const modalBackdrop = document.querySelector(`${modalID}-backdrop`);
+
+  modalBackdrop.classList.toggle("hidden");
+  modalBackdrop.classList.toggle("flex");
+
+  if (modal.classList.contains("hidden")) {
+    modal.style.display = "block";
+
+    slideInBottom(modalDialog);
+
+    setTimeout(() => {
+      modal.classList.remove("hidden");
+      modal.classList.add("flex");
+      modal.classList.remove("opacity-0");
+      modalDialog.classList.remove("-translate-y-1");
+      modalDialog.classList.add("translate-y-1");
+    }, 30);
+  } else {
+    modalDialog.classList.remove("translate-y-1");
+    modalDialog.classList.add("-translate-y-1");
+
+    slideOutBottom(modalDialog);
+
+    setTimeout(() => {
+      modal.style.display = "none";
+      modal.classList.add("hidden");
+      modal.classList.remove("flex");
+      modal.classList.add("opacity-0");
+    }, 300);
+  }
+}
+
+const initModal = () => {
+  const dataModal = document.querySelectorAll("[data-toggle='modal'");
+
+  for (let i of dataModal) i.addEventListener("click", toggleModal);
+}