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 <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>

26
_packs/controllers/floating_alert_controller.js
View file

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