OptSortable Module

class epyk.core.html.options.Options(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property builder

Add a JavaScript Builder function to the options.

This will be used to automatically map the Python component to its corresponding JavaScript builder function used by the build method.

Usage:

but = page.ui.button()
but.options.builder = "Button"
Prop value:

The JavaScript builder function name.

property config_default

The default value for the configuration in case of template.

Default value is an empty string.

Usage:

component.options.config_default = {"value": "test"}
config_html()

Return the HTML options used by the python and passed to the HTML.

Those options will not be available in the JavaScript layer and they are only defined either to build the HTML from Python or to set some HTML properties.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

config_js(attrs: Optional[dict] = None)

Return the JavaScript options used by the builders functions.

Builder functions can be defined in the framework or external from the various packages.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

Parameters:

attrs – Optional. The extra or overridden options

custom_config(name: str, value: Any, js_type: bool = False)

Add a custom JavaScript configuration.

Usage:

chart = page.ui.charts.apex.scatter()
chart.options.chart.zoom.custom_config("test", False)
Parameters:
  • name – The key to be added to the attributes

  • value – String or JString. The value of the defined attributes

  • js_type – Optional. Specify if the parameter is a JavaScript fragment

details()

Retrieve the defined properties details.

This function will return a dictionary with all the component attributes (required and optional) ones. It will provide the full available description of those components.

Usage:

but = page.ui.button()
pprint.pprint(but.options.details(), indent=4)
from_json(vals: dict, schema: Optional[dict] = None)

Load the option schema for a component from a json string.

TODO: add more feature to handle functions and enumeration

Parameters:
  • vals – The input schema

  • schema – The full object schema

has_attribute(cls_obj, name: Optional[str] = None)

Add an extra sub layer to the data structure.

The key in the object representation will be the function name.

Parameters:
  • cls_obj – Class. The sub data class used in the structure definition

  • name – The sub attribute name

isJsContent(property_name: str)

Check if the content of a property is defined to always be a JavaScript fragment.

Thus the framework will not convert it to a Json content.

Usage:

div = page.ui.div()
print(div.options.isJsContent("inline"))
Parameters:

property_name – The property name

property managed

Boolean flag to set if the component needs to be added to the page.

If set to False the component has to be managed manually in the page.

Usage:

but = page.ui.button()
but.options.managed = False
Prop bool:

Flag to specify if this component is automatically managed by the page

optional()

Return all options not added to the HTML component by default.

Those are options which will impact either the Python or the JavaScript builders.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.optional(), indent=4)
property profile

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Flag to display / hide warning logs generated by the framework.

required()

Return all the mandatory / required options with the default values.

Those options are added by the framework to provide a default for the HTML components but they can be changed.

System options are also added to this category as they are always available in any HTML components.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.required(), indent=4)
set_attrs(vals: dict)

Set the object internal attributes.

Parameters:

vals – All the attributes to be added to the component

property style

Change some CSS attributes to the internal HTML component.

Related Pages:

Prop values:

The CSS attributes.

update_config(attrs: dict)

Update the option configuration.

Parameters:

attrs – The attributes to set

property verbose

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Boolean. Flag to display / hide warning logs generated by the framework.

class epyk.core.html.options.OptSortable.OptionsSortable(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property animation

ms, animation speed moving items when sorting, 0 — without animation

Related Pages:

property chosenClass

Class name for the chosen item

Related Pages:

property dataIdAttr

Specifies which items inside the element should be draggable

Related Pages:

property delay

Time in milliseconds to define when the sorting should start

Related Pages:

property delayOnTouchOnly

Only delay if user is using touch

Related Pages:

property direction

Direction that the Sortable should sort in. Can be set to ‘vertical’, ‘horizontal’, or a function, which will be called whenever a target is dragged over. Must return ‘vertical’ or ‘horizontal’.

Related Pages:

property disabled

Disables the sortable if set to true.

Related Pages:

property dragClass

Class name for the dragging item

Related Pages:

property draggable

Specifies which items inside the element should be draggable

Related Pages:

property dragoverBubble

Specify in pixels how far the mouse should move before it’s considered as a drag.

Related Pages:

property easing

//easings.net/ for examples.

Related Pages:

Type:

Easing for animation. Defaults to null. See https

property emptyInsertThreshold

px, distance mouse must be from empty sortable to insert drag element into it

Related Pages:

property fallbackClass

Class name for the cloned DOM Element when using forceFallback

Related Pages:

property fallbackOnBody

Appends the cloned DOM Element into the Document’s Body

Related Pages:

property fallbackTolerance

Specify in pixels how far the mouse should move before it’s considered as a drag.

Related Pages:

property filter

Selectors that do not lead to dragging (String or Function)

Related Pages:

property forceFallback

ignore the HTML5 DnD behaviour and force the fallback to kick in

Related Pages:

property ghostClass

Class name for the drop placeholder

Related Pages:

property group

Related Pages:

https://github.com/SortableJS/Sortable

property handle

Drag handle selector within list items

Related Pages:

property invertSwap

Will always use inverted swap zone if set to true

Related Pages:

property invertedSwapThreshold

Threshold of the inverted swap zone (will be set to swapThreshold value by default)

Related Pages:

property preventOnFilter

Call event.preventDefault() when triggered filter

Related Pages:

property removeCloneOnHide

Remove the clone element when it is not showing, rather than just hiding it

Related Pages:

property sort

sorting inside list

Related Pages:

property store

Disables the sortable if set to true.

Related Pages:

property swapThreshold

Threshold of the swap zone

Related Pages:

property touchStartThreshold

px, how many pixels the point should move before cancelling a delayed drag event

Related Pages: