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 <div
data-controller="floating-alert" 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"> 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> </div>

1
_layouts/default.html
View file

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

22
_packs/controllers/floating_alert_controller.js
View file

@ -6,13 +6,25 @@ export default class extends Controller {
connect() { connect() {
window.addEventListener("toast", (event) => { window.addEventListener("toast", (event) => {
this.contentTarget.innerText = event.detail.content; this.contentTarget.innerText = event.detail.content;
this.element.classList.toggle("hide"); this.set(true);
this.element.classList.toggle("show");
setTimeout(() => { if (this.interval) {
this.element.classList.toggle("hide"); clearTimeout(this.interval);
this.element.classList.toggle("show"); }
this.interval = setTimeout(() => {
this.set(false);
this.interval = null;
}, 3000); }, 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 "menu";
@import "content"; @import "content";
@import "fonts"; @import "fonts";
@import "floating_alert";
/// La barra de progreso de Turbo tiene el color primario /// La barra de progreso de Turbo tiene el color primario
/// de la paleta, definido por Bootstrap o por nosotres. /// de la paleta, definido por Bootstrap o por nosotres.