justpy icon indicating copy to clipboard operation
justpy copied to clipboard

Defining a javascript function for onclick?

Open aalexei opened this issue 3 years ago • 2 comments

How would I create an element that defines a javascript function for the onclick event? i.e. force an element to output something like:

<div onclick="alert('hello again')">hello</div>

I'm not after a python callback, and I know I can do the above with inner_html, but I'm after adding a javascript function to an existing jp element.

aalexei avatar Jul 09 '22 00:07 aalexei

All the events on the browser are tied to the justpy event handler on browser side. They marshall the event info and send to the python via websockets. That is the design. You can add additional div elements in main.html (or any of the included js file) but those html elements would be outside of the justpy ecosystem.

sandeep-gh avatar Jul 12 '22 17:07 sandeep-gh

Yeah, I realise that the resulting event would be outside juspy ecosystem. Here's the issue: it doesn't't seem possible to use the javascript clipboard API on Safari outside a user event.

So this will work on all browsers:

<div onclick="navigator.clipboard.writeText('Hello again')">hello</div>

but if I bind the event in justpy to a python function, and call clipboard,writeText using run_javascript() it will not work on Safari (works on Chrome and Firefox). I'm trying to support all browsers and defining a js onclick function seems the easiest way if there was some way to do it. I can do it with inner_html but this is super messy to style for things like menu items etc. I'd have to manually replicate the quasar structures that are generated by QBtn etc.

aalexei avatar Jul 12 '22 23:07 aalexei

The ideas is to allow arbitrary javascript functions to be added via a directory that holds the code instead of using the header text workaround that is currently inplace. Then it would be necessary to have custom links between events and such javascript code which in principle just means that we make the remote DOM rewriting process more systematic then it is right now. Unfortunately this issue will have to wait for a future milestone.

WolfgangFahl avatar Nov 13 '22 17:11 WolfgangFahl

see #685

WolfgangFahl avatar Sep 20 '23 12:09 WolfgangFahl