Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Add DOM selector argument to PicoBusy() to provide HTMX's ht-indicator functionality #515

Open
jsandeo opened this issue Oct 11, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@jsandeo
Copy link

jsandeo commented Oct 11, 2024

Is your feature request related to a problem? Please describe.
This would be an easy way to have the Pico spinner show on any DOM element other than the one triggering the request.

Describe the solution you'd like
We could just pass an optional CSS selector to PicoBusy() and have the spinner show on that element if provided, or on the triggering element otherwise.
This would simplify doing this when working with Pico (as asked here), and not having to code longer workarounds as discussed here.

Example code
Provide an example of how you imagine the feature working:

# pico.py
def PicoBusy(hx_indicator=""):
    js_safe_str_selector = json.dumps(hx_indicator)
    return (HtmxOn('beforeRequest', "({hi} ? document.querySelector({hi}) : event.detail.elt).setAttribute('aria-busy', 'true' )".format(hi=js_safe_str_selector)),
            HtmxOn('afterRequest',  "({hi} ? document.querySelector({hi}) : event.detail.elt).setAttribute('aria-busy', 'false')".format(hi=js_safe_str_selector)))

We would then use this as...

...
return Form(Label(Input(name="name", placeholder="Name"), Button("Create", id="create"), PicoBusy("#create"), hx_post="/create")

... to have the Pico spinner show in the button and not in the form.

Similar implementations
If available, provide links to similar features in other libraries:

  1. Native HTMX

Problem solved
Easy short way to show the Pico spinner on any element.

Additional context
I can provide a PR if this is considered useful, I already have it working on a project.

Confirmation
Please confirm the following:

  • [🙋‍♂️] I have checked the existing issues and pull requests to ensure this feature hasn't been requested before.
  • [🙋‍♂️] I have read the project's documentation to ensure this feature doesn't already exist.
@jsandeo jsandeo added the enhancement New feature or request label Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant