it should be detail not details I think

should I make a pr?

@User we should have a "showcase" or "i-made-this" channel, to let people show the cool things they're making with htmx and hyperscript.

yep please do

great idea!

absolute 👑

this is a flagship app @User really unbelievable stuff

I love keyboard navs like that

Very nice! 😍 Does this use Thymeleaf?

Believe it or not Wim, this is a Playframework v1 series app, that uses the default Groovy-based, server-side view templating system that came with it, that’s quite similar to Thymeleaf. It also has a very nice template-inheritance system that lends itself perfectly to easily returning the full page (when the user does a F5 browser refresh say, or just the main content div if it detects the htmx request header (via the plugin). We’ve got a fair bit of logic invested in the server side part of this app (pushing 300k loc)… but it all works very well so we’re not in a hurry to replace that. It’s the UI (client-side) part that churns the most, so having settled on Intercooler (and then migrating to htmx +hyperscript recently) has been the best move ever for the UI… next we’ll just update the CSS framework a bit, but the rest will stay largely the same.

Which js notification library did you use, It seems familiar but I cant put my finger on it

i hope you don't mind that we are sharing the video on twitter 🙂 most important question though: are you having fun? 🍻

is it possible to remove this event:

htmx.on("htmx:afterSettle", function(evt) { doSomething() });

by calling an htmx.off function like this:

htmx.off("htmx:afterSettle", doSomething );

?

I tried that (with variable) but for some reason it still doesn't work. Either it is removed before the aftersettle event can take place, or it has no effect at all.

er, don't want to lose site of integrating this into the main htmx website

does this work for you?

Partially. I still have some issues when I repeatedly trigger the same element (I created page transitions with a Javascript animation library which functions are triggered when the dom settles. Problem is, I have two seperate aniamtions (one for page transitions and one for menu transitions). When I trigger them each individually using your fix it works perfectly. But from the the moment that I trigger the menu twice, or the page transition twice it breaks again...

are you storing both event handlers?

You'll need to store every event handler you add

I'm able to add an animated loading indicator to my button using

htmx-indicator

, but I'd really like to trigger a bigger loading indicator like an overlay or something in another div.

<div>
                    <button hx-swap="outerHTML" hx-get="/plusreports/daily-email-report/preview" class="button btn btn-primary">
                        Preview <i class="fas fa-arrow-right"></i>
                        <span class="htmx-indicator spinner-border spinner-border-sm"></span>
                    </button>
                  </div>

here's my button. How do I trigger an overlay or another div?

It's this library: https://sciactive.com/pnotify/ but like with just about everything in the UI, customised to suit a specific look and feel.

I read that but when I add the attribute to another div or span it doesn't trigger. I'm probably missing something fundamental about how these work.

I think I found it. I need to use the css selector

hx-indicator="#indicator"

Oh boy... if I knew you were gonna do that I would have made a better video, with music and me jumping out of a cake or something 🙈 😁 👍

Oh and yes, you KNOW I'm having fun! 😁

@User still very interested in your vue -> htmx experience