Javascript Event Listener

[WSH032]

I would like to add an event listener that runs only in JavaScript rather than in Python.

After studying Vue and nicegui.templates.html, I've found the following hack method:

from nicegui import ui


_js = """\
Vue.withModifiers((evt) => {
    alert(evt);
}, ['prevent'])
"""


label = ui.label("Click me")
label._props[":onClick"] = _js
label.update()

if __name__ == '__main__':
    ui.run(reload=False)

But, how about adding a api, like:

_js = "(evt) => { alert(evt); }"

label.on("click.prevent", js_handler=_js)

It can be simplified by leveraging the existing code in nicegui:

nicegui/nicegui/templates/index.html

Lines 145 to 179 in ccab181

	Object.entries(props).forEach(([key, value]) => {
	if (key.startsWith(':')) {
	try {
	props[key.substring(1)] = eval(value);
	delete props[key];
	}
	catch (e) {
	console.error(`Error while converting ${key} attribute to function:`, e);
	}
	}
	});
	element.events.forEach((event) => {
	let event_name = 'on' + event.type[0].toLocaleUpperCase() + event.type.substring(1);
	event.specials.forEach(s => event_name += s[0].toLocaleUpperCase() + s.substring(1));
	let handler = (...args) => {
	const data = {
	id: element.id,
	client_id: window.client_id,
	listener_id: event.listener_id,
	args: stringifyEventArgs(args, event.args),
	};
	const emitter = () => window.socket?.emit("event", data);
	throttle(emitter, event.throttle, event.leading_events, event.trailing_events, event.listener_id);
	if (element.props["loopback"] === False && event.type == "update:modelValue") {
	element.props["model-value"] = args;
	}
	};
	handler = Vue.withModifiers(handler, event.modifiers);
	handler = event.keys.length ? Vue.withKeys(handler, event.keys) : handler;
	if (props[event_name]) {
	props[event_name].push(handler)
	} else {
	props[event_name] = [handler];
	}
	});

[falkoschindler]

Hi @WSH032, thanks for the interesting feature request!
This is certainly a quite advanced feature and we need to carefully think about the API and how/where to implement it.
Do you already have an implementation in mind? Maybe you can create a draft pull request. 🙂

[WSH032]

Hi @falkoschindler , thank you for looking into this!

I currently don't have the time to delve into the testing workflow of nicegui, so I might not be able to create a pull request that aligns well with CONTRIBUTION.md.

Here's a quick demo, looking forward to your feedback.

https://github.com/WSH032/nicegui/commit/644859e3bd2caccc0e25fc60deb4e017553e35ac

if __name__ == "__main__":
    from nicegui import ui

    ui.input("press `enter` key").on("click.once", js_handler="(evt) => alert(evt)")

    ui.run(reload=False)

EDIT:

Please ignore press enter key

Initially, I intended to use keyup.enter for demonstration, but in the end, I forgot to change the label 🤷‍♂️

[falkoschindler]

Sorry for the late reply, @WSH032! Your proposal looks really nice! I think this would already make a great pull request. We can add tests and documentation for you. 🙂
My only concern is that args and throttling parameters are simply ignored without any warning when using js_handler. But we can probably fix that by overloading the .on() method.

[WSH032]

That's ok. I've already created a pull request #2536 .

[falkoschindler]

This feature has just been released in version 1.4.16. 🎉