Inquiring Javascript runtime properties of elements

[docm64]

The more I work with JustPy framework, the more I like it. Really great stuff.

There are situations where it is useful to inquire runtime properties of components as they are rendered in the client's webbrowser. The WebPage.run_javascript() method provides a hook to do so, but the result of it is delivered back to Python via a 'result-ready' page event which is not very convenient as it leaves the application programmer with the task to associate this response with the original request by means of its 'request_id'

I thought to simplify it by a little bit of coroutine magic. And ended up with a small helper class I wanted to share here.
Basically it offers two coroutines.

js.inquire_properties() takes as argument a JustPy element, a WebPage that contains this element and a list of js properties to be inquired from this object. It returns to the awaiting coroutine an (addict) Dict of property: value pairs.

What it does internally is to invoke WebPage.run_javascript() with a js oneliner built from the passed arguments. It then creates and awaits a Future which will be completed by the 'result-ready' event. Every request will create a unique reference-id which is used as key to retrieve the Future from a Dict.

The user has to assure two things: The element to be inquired must have an id, so use temp=False when creating it. And the 'result-ready' page event must be linked to js.handle_page_event()

Please see the source code below. It also includes an example. I am using Quasar classes in that example but ordinary JustPy Tailwind classes work in the same manner.

import justpy as jp
import asyncio

class js():
    req_id=0
    futures={}

    @staticmethod
    async def inquire_properties(element,webpage,properties):
#Inquire a list of javascript properties from element as it is rendered on webpage
#Await the corresponding 'result_ready' event and return the result
#It is important that element has an id. Create it with temp=False flag
        js.req_id += 1
        req_id = f'js_req_id_{js.req_id}'
        req_str =''       
        for prop in properties:
            req_str += f', {prop}: {req_id}.{prop} '    
        js_str ="var %s = document.getElementById('%s');e.result = { %s};" % (req_id, element.id,req_str[1:])
        js.futures[req_id]= asyncio.get_running_loop().create_future()
        await webpage.run_javascript(js_str,request_id=req_id,send=True)
        return await js.futures[req_id]

    @staticmethod
    async def handle_page_event(wp, msg):
# Parse page events for results of inquire_properties
# Returns True, if the event was handled, otherwise False        
        if msg.event_type != 'result_ready': return False
        if not msg.request_id in js.futures: return False
        fut = js.futures[msg.request_id]
        js.futures.pop(msg.request_id)
        if not fut.cancelled(): fut.set_result(msg.result.copy())
        return True        

        
async def on_b_click(b,msg):
    result = await js.inquire_properties(msg.page.div_content, msg.page, ['clientHeight', 'clientWidth'])
    print(result)

def quasar_example():
    wp=jp.QuasarPage()
    wp.div_content = jp.QDiv(classes='bg-grey-13',style='height: 100px',temp=False, a=wp)
    wp.b = jp.QBtn(text ='interrogate div size',a=wp)
    wp.b.on('click',on_b_click)
    wp.on('result_ready',js.handle_page_event)
    return wp

jp.justpy(quasar_example)

Note the b_on_click() event handler. Inquiring the runtime size of an element using js is jnow ust a Python oneliner.

Hope someone finds it useful. Have fun!

[elimintz]

This is very interesting. Can you make inquire_properties a method of the element (wp.div_content in this case)? I think it could then be a good addition to JustPy.

[docm64]

Of course it can be integrated into JustPy. I didn't want to fiddle around inside the JustPy code so that I don't lose compatibility with future updates. I wouldn't want to make it a method of any specific component though, as it is a more generic mechanism. BTW I am not happy with the helper class. As you write it would be nicer to have inquire_properties as a method. However this method should be deeper in the tree so it is generally available for all components and not just the specific div_content in my example.

This is how I suggest to integrate it into JustPy
The futures list I designed as a singleton. It could also be a class property of WebPage.
inquire_properties() should become a method of some class deeper in the compontent hierarchy. JustPyBaseComponent would be the right place as inquire_properties() is the same level of abstraction as run_method() which is also defined there.
handle_page_event() should best become a private method of WebPage and be invoked from run_method() or add 4 lines of code to run_method instead.

How do you organize that other people (like me) can contribute to the JustPy code? I can make these changes, but you are the owner of that code, so you define the rules.

[elimintz]

If you have time, please create a pull request (https://github.com/elimintz/justpy/pulls) I will look at the changes, incorporate them and test them and make them available in future version.

[rojerian]

Thanks Docm64 … This is quite a useful technique to return actual co-ordinates from the live web page, using say getBoundingClientRect(). This is most useful for the dynamic application of Svg components that link other page elements. Ideally, a set of such properties could be defined during initialisation of the component and be always available for use as the the page layout and the overall application state evolved.

[aalexei]

This method no longer works. Is there a another way of getting results back from javascript?