alerts animaton rework

templates/standalone/alerts.julius

@@ -3,25 +3,72 @@
 
   window.utils = window.utils || {};
 
-  window.utils.alert = function(alertEl) {
+  var ALERT_INVISIBLE_CLASS = 'alert--invisible';
-    var closeEl = document.createElement('DIV');
+  var TOGGLER_INVISIBLE_CLASS = 'alerts__toggler--visible';
-    var dataDecay = alertEl.dataset.decay;
-    var autoDecay = 30;
-    if (dataDecay) {
-      autoDecay = parseInt(dataDecay, 10);
-    }
-    closeEl.classList.add('alert__close');
-    closeEl.addEventListener('click', function(event) {
-      alertEl.classList.add('alert--invisible');
-    });
-    alertEl.insertBefore(closeEl, alertEl.children[0]);
 
-    // auto-hide info and success-alerts after 3 seconds
+  window.utils.alerts = function(alertsEl) {
-    if (autoDecay > 0 && !alertEl.matches('.alert-danger, .alert-warning')) {
+
-      window.setTimeout(function() {
+    var alerts = Array.from(alertsEl.querySelectorAll('.alert'));
-        alertEl.classList.add('alert--invisible');
+    var toggler;
-      }, autoDecay * 1000);
+    var showingToggler = false;
+
+    function makeToggler() {
+      toggler = document.createElement('DIV');
+      toggler.classList.add('alerts__toggler');
+      toggler.addEventListener('click', function() {
+        alerts.forEach(function(alert) {
+          alert.classList.remove(ALERT_INVISIBLE_CLASS);
+          toggler.classList.remove(TOGGLER_INVISIBLE_CLASS);
+        });
+        checkToggler();
+      });
+      alertsEl.appendChild(toggler);
     }
+
+    function makeAlert(alertEl) {
+      var closeEl = document.createElement('DIV');
+      var dataDecay = alertEl.dataset.decay;
+      var autoDecay = 30;
+      if (dataDecay) {
+        autoDecay = parseInt(dataDecay, 10);
+      }
+      closeEl.classList.add('alert__close');
+      closeEl.addEventListener('click', function(event) {
+        closeAlert(alertEl);
+      });
+      alertEl.insertBefore(closeEl, alertEl.children[0]);
+
+      // auto-hide info and success-alerts after 3 seconds
+      if (autoDecay > 0 && !alertEl.matches('.alert-warning, .alert-error')) {
+        window.setTimeout(function() {
+          closeAlert(alertEl);
+        }, autoDecay * 1000);
+      }
+    }
+
+    function closeAlert(alertEl) {
+      alertEl.classList.add(ALERT_INVISIBLE_CLASS);
+      checkToggler();
+    }
+
+    function checkToggler() {
+      var hidden = true;
+      alerts.forEach(function(alert) {
+        if (hidden && !alert.classList.contains(ALERT_INVISIBLE_CLASS)) {
+          hidden = false;
+        }
+      });
+      if (!showingToggler) {
+        showingToggler = true;
+        window.setTimeout(function() {
+          toggler.classList.toggle(TOGGLER_INVISIBLE_CLASS, hidden);
+          showingToggler = false;
+        }, 120);
+      }
+    }
+
+    makeToggler();
+    alerts.map(makeAlert);
   }
 
 })();
@@ -29,7 +76,5 @@
 document.addEventListener('DOMContentLoaded', function() {
 
   // setup alerts
-  Array.from(document.querySelectorAll('.alert')).forEach(function(alertEl) {
+  window.utils.alerts(document.querySelector('.alerts'));
-    window.utils.alert(alertEl);
-  });
 });

templates/standalone/alerts.lucius

@@ -28,6 +28,39 @@
   flex-direction: column;
 }
 
+.alerts__toggler {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 400px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: pointer;
+
+  &::before {
+    content: '\f077';
+    position: absolute;
+    font-family: "Font Awesome 5 Free";
+    left: 50%;
+    top: 0;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    color: var(--color-lightblack);
+    font-size: 30px;
+    transform: translateX(-50%);
+  }
+}
+
+.alerts__toggler--visible {
+  top: -40px;
+  opacity: 1;
+  transition: top     .5s cubic-bezier(0.73, 1.25, 0.61, 1),
+              opacity .5s cubic-bezier(0.73, 1.25, 0.61, 1);
+}
+
 @media (max-width: 425px) {
 
   .alerts {
@@ -42,9 +75,10 @@
   font-size: 1rem;
   color: var(--color-lightwhite);
   z-index: 0;
-  transition: all .3s ease-in-out;
   padding-left: 20px;
   animation: slide-in-alert .2s ease-out forwards;
+  margin-bottom: 10px;
+  transition: margin-bottom .2s ease-out;
 
   &:hover {
 
@@ -55,10 +89,6 @@
       }
     }
   }
-
-  + .alert:not(.alert--invisible) {
-    margin-top: 10px;
-  }
 }
 
 @keyframes slide-in-alert {
@@ -70,6 +100,19 @@
   }
 }
 
+@keyframes slide-out-alert {
+  from {
+    transform: translateY(0);
+    max-height: 200px;
+  }
+  to {
+    transform: translateY(250%);
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+
 @media (min-width: 425px) {
 
   .alert {
@@ -78,6 +121,11 @@
   }
 }
 
+.alert--invisible {
+  animation: slide-out-alert .2s ease-out forwards;
+  margin-bottom: 0;
+}
+
 .alert__content {
   padding: 8px 24px;
   padding-left: 25px;
@@ -146,10 +194,3 @@
 .alert-error {
   background-image: linear-gradient(to right, var(--color-error) -40px, transparent 70px);
 }
-
-.alert--invisible {
-  max-height: 0;
-  animation: slide-in-alert .2s ease-out reverse;
-  margin-bottom: 0;
-  overflow: hidden;
-}