HTML API

from lona.html import Div

>>> div = Div(Div('foo'), Div('bar'))
>>> div
<div data-lona-node-id="65286584612039">
    <div data-lona-node-id="65286584010206">
        foo
    </div>
    <div data-lona-node-id="65286584292299">
        bar
    </div>
</div>

>>> div.nodes
<NodeList([<div data-lona-node-id="65286584010206">
    foo
</div>, <div data-lona-node-id="65286584292299">
    bar
</div>]))>

>>> div[0]  # or div.nodes[0]
<div data-lona-node-id="65286584010206">
    foo
</div>

from lona.html import Div

Div(Div('foo'), Div('bar'))

Div([
    Div('foo'),
    Div('bar'),
])

Div(nodes=[
    Div('foo'),
    Div('bar'),
])

from lona.html import HTML

html = HTML("""
    <div>
        <div id="foo">
            Foo
            <div id="bar">Bar</div>
        </div>
    </div>
""")

foo = html.query_selector('#foo')
bar = foo.query_selector('#bar')

from lona.html import parse_html

>>> parse_html('<h1>Hello World</h1><p>Lorem Ipsum</p>')
[<h1 data-lona-node-id="9">
  Hello World
</h1>,
 <p data-lona-node-id="11">
  Lorem Ipsum
</p>]

>>> parse_html('<h1>Hello World</h1>')
<h1 data-lona-node-id="14">
  Hello World
</h1>

>>> from lona.html import RawHTML
>>> RawHTML('<h1>Hello World</h1>')
<div data-lona-node-id="1">
    <h1>Hello World</h1>
</div>

from lona.html import Div

div = Div(foo='bar')

<div data-lona-node-id="174102029578147" foo="bar"></div>

>>> div.attributes['foo']
'bar'
>>> div.attributes['foo'] = 'foo'
>>> div.attributes['foo']
'foo'

from lona.html import Div

div = Div(_id='foo bar baz')
div = Div(_id=['foo', 'bar' 'baz'])

<div data-lona-node-id="174102029578147" id="foo bar baz"></div>

from lona.html import Div

div = Div(_style={'color': 'red'})
div.style['background-color'] = 'blue'

<div data-lona-node-id="182311158684648" style="color: red; background-color: blue"></div>

from lona.html import A

# internal link
A('Internal Link', href='/internal-link/')

# external link
A('Lona Documentation', href='https://lona-web.org/', interactive=False)

# internal link to a non-interactive (or HTTP-pass-through) view that
# serves a downloadable file. Without "target='_blank'", the browser would
# try to download the file in the current browser tab, terminating the
# websocket connection, which would break the currently opened,
# interactive view.
A('Internal Download Link', href='/foo.pdf',
  interactive=False, target='_blank')

from lona.html import Node, CLICK


class BootstrapButton(Node):
    TAG_NAME = 'button'
    SELF_CLOSING_TAG = False
    ID_LIST = []
    CLASS_LIST = ['btn', 'btn-primary']
    STYLE = {}
    ATTRIBUTES = {}
    EVENTS = [CLICK]

from lona.html import Button


class BootstrapButton(Button):
    CLASS_LIST = ['btn', 'btn-primary']

from lona.html import HTML, Div, H1, Button
from lona import LonaView


class MyLonaView(LonaView):
    def handle_request(self, request):
        self.counter = Div('0')
        self.button = Button('Decrement Counter')

        self.html = HTML(
            H1('Counter'),
            self.counter,
            self.button,
        )

        while True:

            # increment counter
            with self.html.lock:
                self.counter.set_text(
                    str(int(self.counter.get_text()) + 1)
                )

            # show html
            self.show(self.html)
            self.sleep(1)

    def handle_input_event(self, input_event):
        if input_event.node is not self.button:
            return

        # decrement button
        with self.html.lock:
            self.counter.set_text(
                str(int(self.counter.get_text()) - 1)
            )

DATA = [
    ('Alice', 'Alison', 1, ),
    ('Bob', 'Brown', 2, ),
]

class MyLonaView(LonaView):
    def handle_request(self, request):
        # show all entries in DATA
        html = HTML(
            Table(
                Tr(
                    Th('First Name'),
                    Th('Last Name'),
                )
            )
        )

        for first_name, last_name, secret_id in DATA:
            tr = Tr(
                Td(first_name),
                Td(last_name),
                events=[CLICK],
            )

            tr.handle_click = self.handle_click_on_tr

            # set secret id
            tr.state['secret_id'] = secret_id

        self.show(html)

    def handle_click_on_tr(self, input_event):
        # retrieve secret id
        secret_id = input_event.node.state['secret_id']

        # remove entry by secret_id
        DATABASE.remove_user(secret_id)

from lona.html import Div, CLICK

div = Div(events=[CLICK])

div2 = Div()
div2.events.add(CLICK)

<div data-lona-node-id="182495819713343" data-lona-events="301"></div>

from lona.html import Widget, Div, Span, Button


class Counter(Widget):
    def __init__(self, initial_value=0):
        self.counter = initial_value

        self.counter_label = Span(str(self.counter))
        self.inc_button = Button('+')
        self.dec_button = Button('-')

        self.nodes = [
            Div(
                self.counter_label,
                self.inc_button,
                self.dec_button,
            ),
        ]

    def handle_input_event(self, input_event):
        if input_event.node is self.inc_button:
            self.counter = self.counter + 1
            self.counter_label.set_text(str(self.counter))

        elif input_event.node is self.dec_button:
            self.counter = self.counter - 1
            self.counter_label.set_text(str(self.counter))

        else:
            return input_event

# my_widget.py

from lona.static_files import Script
from lona.html import Widget, Div

class MyWidget(Widget):
    FRONTEND_WIDGET_CLASS = 'MyFrontendWidget'

    STATIC_FILES = [
        # the path is always relative to the current file
        Script(name='MyFrontendWidget', path='my_frontend_widget.js'),
    ]

    def __init__(self):
        self.nodes = [
            Div('foo'),
        ]

        self.data = {'foo': 'bar'}

# my_node.py

from lona.static_files import Script
from lona.html import Div

class MyNode(Div):
    WIDGET = 'MyFrontendWidget'

    STATIC_FILES = [
        # the path is always relative to the current file
        Script(name='MyFrontendWidget', path='my_frontend_widget.js'),
    ]

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.nodes = [
            Div('foo'),
        ]

        self.widget_data = {'foo': 'bar'}

// my_frontend_widget.js

function MyFrontendWidget(lona_window) {
    this.lona_window = lona_window;

    this.setup = function() {
        // gets called when the widget gets initialized

        console.log('setup', this.nodes);
    };

    this.deconstruct = function() {
        // gets called when the widget gets destroyed

        console.log('deconstruct', this.nodes);
    };

    this.data_updated = function() {
        // gets called every time Widget.data gets updated in the backend

        console.log('data updated:', this.data);
    };
};

Lona.register_widget_class('MyFrontendWidget', MyFrontendWidget);