HtmlList Module

class epyk.core.html.HtmlList.Groups(page: PageModel, data: list, categories: Optional[list], size: tuple, color: str, width: tuple, height: tuple, html_code: str, helper: str, options: Optional[dict], profile: Optional[Union[bool, dict]])

class epyk.core.html.HtmlList.Items(page: PageModel, records, width: tuple, height: tuple, options: Optional[dict], html_code: str, profile: Optional[Union[bool, dict]], helper: str)

add_type(name: str, item_def: Optional[str] = None, func_name: Optional[str] = None, dependencies: Optional[list] = None)

Add a bespoke item type with it is specific style and components.

TODO: Create a tutorial to explain how to extend list types.

Usage:

items = page.ui.lists.items(records.to_dict(orient="records"))
  items.add_type("demo", '''
  var item = document.createElement("DIV");
  var sub = document.createElement("DIV");
  var nameBox = document.createElement("DIV"); nameBox.innerHTML = 'Toto';
  nameBox.style.display = "inline-block";
  nameBox.style.fontWeight = 900;
  nameBox.style.marginRight = "5px";
  sub.setAttribute('name', 'value'); sub.setAttribute('data-valid', true); sub.innerHTML = data.Year;
  sub.style.display = "inline-block";
  var country = document.createElement("DIV"); country.innerHTML = data['Country Name'];
  country.style.textAlign = "right";
  country.style.fontSize = "9px";
  country.style.fontStyle = "italic";
  item.appendChild(nameBox);
  item.appendChild(sub);
  item.appendChild(country)
''')

Parameters:

name – The reference of this type name in the framework
item_def – Optional. The definition of the items (examples in JsHtmlList.py)
func_name – Optional. The external function name used to build the items
dependencies – Optional. The external module dependencies

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The onclick event occurs when the user clicks on an element of the list.

Tips: Use the pk.events.value to get the item value.

Usage:

status = page.ui.timelines.issues(height=150)
status.click([
  page.js.console.log("value", skip_data_convert=True)
])

Parameters:

js_funcs – Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

property dom: JsItem

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

draggable(js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – Optional. Javascript functions
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

items_style(style_type: Optional[str] = None, css_attrs: Optional[dict] = None)

Function to load a predefined style for the items of the components.

:param style_type. The alias of the style to apply :param css_attrs. Optional. Items CSS attributes

property options: OptionsItems

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.

record(values: Union[List[Union[str, JsDataModel]], str])

A function helper to set values from Python in this object.

Parameters:: values – The items to be added to the list

select_type(name: Optional[str] = None, style: Optional[dict] = None, selected_style: Optional[dict] = None)

Set the CSS Style of the items in the list.

It is possible to use predefined style or to pass bespoke ones.

Style will be set at list type level so all the list in the page will be using it.

Parameters:

name – Optional. The list type name to be used
style – Optional. The CSS style to be applied to the item
selected_style – Optional. The css style to be applied when selected

property style: ClassItems: Property to the CSS Style of the component.

class epyk.core.html.HtmlList.Li(page: PageModel, text: Union[str, Html], options: Optional[dict] = None, html_code: Optional[str] = None)

add_label(text: str, css: Optional[dict] = None, position: str = 'before', for_: Optional[Html] = None, html_code: Optional[str] = None, options: Optional[dict] = None)

Add an elementary label component.

Related Pages:

https://www.w3schools.com/tags/tag_label.asp

Parameters:

text – The label content
css – Optional. A dictionary with the CSS style to be added to the component
position – Optional. The position
for – Optional. Specifies which form element a label is bound to
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Add a click event to the component.

Parameters:

js_funcs – Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

property dom: JsHtmlLi

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

Returns:: A Javascript Dom object

no_decoration(): Remove the list default style.

set_html_content(component: Html)

Set the cell content to be an HTML object.

Parameters:: component – Python HTML object
Returns:: self, the cell object to allow the chaining

class epyk.core.html.HtmlList.List(page: PageModel, data: list, color, width: tuple, height: tuple, html_code: str, helper: str, options: dict, profile: Optional[Union[bool, dict]])

add_item(d: Union[Html, str])

Add an element to the list before passing the list to the Javascript.

Parameters:: d – The component to be added

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The onclick event occurs when the user clicks on an element.

Usage:

div = page.ui.div()
div.click([
  page.js.alert("This is a test")
])

Related Pages:

https://www.w3schools.com/jsref/event_onclick.asp

Parameters:

js_funcs – A Javascript Python function
profile – Optional. Set to true to get the profile for the function on the Javascript console
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

click_items(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Add click events on the list items.

Parameters:

js_funcs – Javascript functions
profile – Optional. A flag to set the component performance storage

property dom: JsHtmlList

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

drop(js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, prevent_default: bool = True, profile: Optional[Union[bool, dict]] = None)

Add a drop feature to the component.

Parameters:

js_funcs – Javascript functions
prevent_default – Optional. Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur
profile – Optional. A flag to set the component performance storage

items_style(style_type: Optional[str] = None, css_attrs: Optional[dict] = None)

Function to load a predefined style for the items of the components.

:param style_type. Optional. The alias of the style to apply :param css_attrs. Optional. The CSS attributes

on_items(event: str, js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Add event to the list items.

Parameters:

event – The event type
js_funcs – Javascript functions
profile – Optional. A flag to set the component performance storage

property options: OptionsLi

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.

set_items(): Reset all the items in the list by applying the default styles.

class epyk.core.html.HtmlList.ListTournaments(page: PageModel, records, width: tuple, height: tuple, options: Optional[dict], profile: Optional[Union[bool, dict]])