From a6725b62ea8a4dcb83ba9ffe39e8f44ee37eadc6 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Mon, 25 Jan 2021 16:46:16 -0300
Subject: [PATCH] alertas flotantes

---
 _includes/floating_alert.html                  |  6 ++++++
 .../controllers/floating_alert_controller.js   | 18 ++++++++++++++++++
 _sass/floating_alert.scss                      | 10 ++++++++++
 assets/css/styles.scss                         |  4 ++++
 4 files changed, 38 insertions(+)
 create mode 100644 _includes/floating_alert.html
 create mode 100644 _packs/controllers/floating_alert_controller.js
 create mode 100644 _sass/floating_alert.scss

diff --git a/_includes/floating_alert.html b/_includes/floating_alert.html
new file mode 100644
index 0000000..1638861
--- /dev/null
+++ b/_includes/floating_alert.html
@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
+</div>
diff --git a/_packs/controllers/floating_alert_controller.js b/_packs/controllers/floating_alert_controller.js
new file mode 100644
index 0000000..d50317e
--- /dev/null
+++ b/_packs/controllers/floating_alert_controller.js
@@ -0,0 +1,18 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = [ 'content' ]
+
+  connect () {
+    window.addEventListener('toast', event => {
+      this.contentTarget.innerText = event.detail.content
+      this.element.classList.toggle('hide')
+      this.element.classList.toggle('show')
+
+      setTimeout(() => {
+        this.element.classList.toggle('hide')
+        this.element.classList.toggle('show')
+      }, 3000)
+    })
+  }
+}
diff --git a/_sass/floating_alert.scss b/_sass/floating_alert.scss
new file mode 100644
index 0000000..4e855e5
--- /dev/null
+++ b/_sass/floating_alert.scss
@@ -0,0 +1,10 @@
+.floating-alert {
+  &.floating-alert-bottom {
+    bottom: 2rem;
+  }
+
+  .floating-alert-content {
+    border-radius: 2rem;
+    padding: .5rem 1rem;
+  }
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 80b66d5..f70bffc 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -6,6 +6,10 @@ $debug: {{ jekyll.environment | not: 'production' }};
 $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
+$colors: (
+  "black": black
+);
+
 $opacities: (
   0: -100%,
   1: -80%,