Brython Enhancement

While Brython stands out for its excellence, it’s noted that its interaction with HTML could be further enhanced. This observation particularly pertains to the dynamic integration and manipulation of HTML elements within Brython scripts.

from radiant.framework import html, select

The Radiant framework introduces some modules and functions that serve as replacements for Brython’s standard modules. These modules are designed to extend and refine the functionalities typically offered by Brython, tailoring them more specifically for the Radiant framework’s context.

select

The select function in Radiant framework offers a unique capability: it allows functions to be applied directly to the list returned, as if it were a single element. This feature significantly simplifies the manipulation of HTML elements, streamlining the process of applying changes or retrieving information.

selection = select('.my-class')

selection.bind('mouseover', lambda evt: print(evt))
setattr(title.style, 'color', 'cyan')
selection.style.color = 'cyan'
selection.style = {'background-color': 'red', }

html Extensions

An innovative addition to the Radiant framework’s html module is the classes method. This method is designed to simplify the dynamic management of CSS classes in HTML elements, enhancing the ease and flexibility of styling and theming.

title = html.H1('Radiant-Framework', Class='my-class')

title.classes.append('new-class')
title.classes.extend(['new-new-class', 'new-new-new-class'])

html as Context Manager

A notable functionality of the Radiant framework’s html module is its use as a Context Manager. This approach greatly enhances the flexibility in nesting components, a common practice in HTML, by simplifying the structure and syntax required for creating complex HTML hierarchies.

with html.DIV(style={'background-color': 'blue'}).context(parent):
    with html.DIV().context:
        with html.SPAN().context as span:
            span.html = "Texto de ejemplo"

styles object

Radiant introduces the styles object, an innovative way to interact with CSS styles of DOM elements. This object simplifies style manipulation, especially when working with multiple elements, and provides a more intuitive, Pythonic interface.

The styles object can be accessed on a selection of elements, allowing you to get or set styles in a more readable and Python-friendly way.

selection = select('.my-class')
selection.styles.background_color = 'pink'

In this example, background_color is a property of the styles object. It corresponds to the background-color CSS property. Setting this property updates the style of all elements in the selection.

selection = select('.my-class')
selection.styles.background_color = 'pink'

The styles object allows you to replace multiple styles at once in a more Pythonic manner, avoiding the traditional dictionary syntax.

selection = select('.my-class')
selection.styles.background_color = 'red'
selection.styles.color = 'white'

This code replaces the traditional dictionary-based approach:

selection.style = {'background-color': 'red', 'color': 'white'}