Sutty/sutty-base-jekyll-theme
5
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Arreglar floating-alert

Browse source
This commit is contained in:
Cat /dev/Nulo 2021-11-25 17:53:32 +00:00
parent cb2516e5bb
commit 588c608fa2
4 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/floating_alert.html
View file

@ -1,6 +1,6 @@
<div
data-controller="floating-alert"
class="floating-alert floating-alert-bottom floating-alert-default"
class="floating-alert floating-alert-bottom floating-alert-default hide"
role="status" aria-live="polite" aria-atomic="true">
<div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
<div data-target="floating-alert.content" class="floating-alert-content white background-black-t4"></div>
</div>

1
_layouts/default.html
View file

@ -57,5 +57,6 @@
</main>
{% include_cached footer.html %}
{% include_cached floating_alert.html %}
</body>
</html>

22
_packs/controllers/floating_alert_controller.js
View file

@ -6,13 +6,25 @@ export default class extends Controller {
connect() {
window.addEventListener("toast", (event) => {
this.contentTarget.innerText = event.detail.content;
this.element.classList.toggle("hide");
this.element.classList.toggle("show");
this.set(true);
setTimeout(() => {
this.element.classList.toggle("hide");
this.element.classList.toggle("show");
if (this.interval) {
clearTimeout(this.interval);
}
this.interval = setTimeout(() => {
this.set(false);
this.interval = null;
}, 3000);
});
}
set(show) {
if (show) {
this.element.classList.remove("hide");
this.element.classList.add("show");
} else {
this.element.classList.add("hide");
this.element.classList.remove("show");
}
}
}

1
assets/css/styles.scss
View file

@ -137,6 +137,7 @@ $enable-responsive-font-sizes: true;
@import "menu";
@import "content";
@import "fonts";
@import "floating_alert";
/// La barra de progreso de Turbo tiene el color primario
/// de la paleta, definido por Bootstrap o por nosotres.