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

Merge branch 'arreglar-floating-alert' into 'master'

Browse source 
Arreglar floating alert

Closes #37

See merge request sutty/jekyll/sutty-base-jekyll-theme!27
This commit is contained in:
Nulo 2021-11-25 19:50:43 +00:00
commit 1c128f2a65
4 changed files with 25 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>

26
_packs/controllers/floating_alert_controller.js
View file

@ -1,18 +1,34 @@
import { Controller } from "stimulus";
// Ejemplo de uso:
// window.dispatchEvent(
// new CustomEvent("toast", { detail: { content: "¡Hola, usuarix!" } })
// );
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");
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.