119 lines
2.4 KiB
TypeScript
119 lines
2.4 KiB
TypeScript
namespace _dali.widgets.mode_switcher
|
|
{
|
|
|
|
/**
|
|
*/
|
|
type type_option = {
|
|
mode : _dali.type.enum_view_mode;
|
|
label : string,
|
|
};
|
|
|
|
|
|
/**
|
|
*/
|
|
export class class_widget_mode_switcher implements lib_plankton.zoo_widget.interface_widget
|
|
{
|
|
|
|
/**
|
|
*/
|
|
private options : Array<type_option>;
|
|
|
|
|
|
/**
|
|
*/
|
|
private initial_selection : (null | _dali.type.enum_view_mode);
|
|
|
|
|
|
/**
|
|
*/
|
|
private action_change : (null | ((mode : _dali.type.enum_view_mode) => void));
|
|
|
|
|
|
/**
|
|
*/
|
|
public constructor(
|
|
options : Array<type_option>,
|
|
{
|
|
"initial_selection": initial_selection = null,
|
|
"action_change": action_change = null,
|
|
}
|
|
:
|
|
{
|
|
initial_selection ?: (null | _dali.type.enum_view_mode),
|
|
action_change ?: (null | ((mode : _dali.type.enum_view_mode) => void))
|
|
}
|
|
=
|
|
{
|
|
}
|
|
)
|
|
{
|
|
this.options = options;
|
|
this.initial_selection = initial_selection;
|
|
this.action_change = action_change;
|
|
}
|
|
|
|
|
|
/**
|
|
* [implementation]
|
|
*/
|
|
public async load(
|
|
target_element : Element
|
|
) : Promise<void>
|
|
{
|
|
target_element.innerHTML = await _dali.helpers.template_coin(
|
|
"widget-mode_switcher",
|
|
"main",
|
|
{
|
|
"options": (await lib_plankton.call.promise_condense(
|
|
this.options.map(
|
|
option => () => _dali.helpers.template_coin(
|
|
"widget-mode_switcher",
|
|
"option",
|
|
{
|
|
"rel": _dali.view_mode_encode(option.mode),
|
|
"value": _dali.view_mode_encode(option.mode),
|
|
"label": option.label,
|
|
}
|
|
)
|
|
)
|
|
)).join(""),
|
|
}
|
|
);
|
|
// initial selection
|
|
{
|
|
if (this.initial_selection !== null)
|
|
{
|
|
const selector : string = lib_plankton.string.coin(
|
|
".widget-mode_switcher-option[rel=\"{{rel}}\"] > input",
|
|
{
|
|
"rel": _dali.view_mode_encode(this.initial_selection)
|
|
}
|
|
);
|
|
(target_element.querySelector(selector) as HTMLInputElement).checked = true;
|
|
}
|
|
}
|
|
// set listeners
|
|
{
|
|
if (this.action_change !== null)
|
|
{
|
|
target_element.querySelectorAll(".widget-mode_switcher-option").forEach(
|
|
element => {
|
|
const view_mode_encoded : string = element.getAttribute("rel");
|
|
const mode : _dali.type.enum_view_mode = _dali.view_mode_decode(view_mode_encoded);
|
|
element.querySelector("input").addEventListener(
|
|
"change",
|
|
(event) => {
|
|
this.action_change(mode);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
return Promise.resolve<void>(undefined);
|
|
}
|
|
|
|
}
|
|
|
|
}
|