nicegui/website/documentation/content/more/run_javascript_documentation.py

from nicegui import ui

from ...model import UiElementDocumentation


class RunJavascriptDocumentation(UiElementDocumentation, element=ui.run_javascript):

    def main_demo(self) -> None:
        def alert():
            ui.run_javascript('alert("Hello!")')

        async def get_date():
            time = await ui.run_javascript('Date()')
            ui.notify(f'Browser time: {time}')

        def access_elements():
            ui.run_javascript(f'getElement({label.id}).innerText += " Hello!"')

        ui.button('fire and forget', on_click=alert)
        ui.button('receive result', on_click=get_date)
        ui.button('access elements', on_click=access_elements)
        label = ui.label()

    def more(self) -> None:
        @self.demo('Run async JavaScript', '''
            Using `run_javascript` you can also run asynchronous code in the browser.
            The following demo shows how to get the current location of the user.
        ''')
        def run_async_javascript():
            async def show_location():
                response = await ui.run_javascript('''
                    return await new Promise((resolve, reject) => {
                        if (!navigator.geolocation) {
                            reject(new Error('Geolocation is not supported by your browser'));
                        } else {
                            navigator.geolocation.getCurrentPosition(
                                (position) => {
                                    resolve({
                                        latitude: position.coords.latitude,
                                        longitude: position.coords.longitude,
                                    });
                                },
                                () => {
                                    reject(new Error('Unable to retrieve your location'));
                                }
                            );
                        }
                    });
                ''', timeout=5.0)
                ui.notify(f'Your location is {response["latitude"]}, {response["longitude"]}')

            ui.button('Show location', on_click=show_location)