Dialog Widgets¶

Dialog¶

Modal or non-modal dialog with configurable buttons.

Constructor: new Widgets.Dialog(title, buttons, {autoclose, resizable, moveable, modal})

Arguments:

title – dialog title
buttons – array of button labels (e.g. ["OK", "Cancel"])

Options:

autoclose – close dialog when a button is pressed
resizable – allow resizing
moveable – allow dragging
modal – modal overlay

Methods:

Method	Description
`get_content_area()`	Return the content container to add widgets into.

Callbacks:

activated – fired with the button label when a button is pressed.

let dlg = new Widgets.Dialog("Confirm", ["OK", "Cancel"], {
    modal: true, autoclose: true
});
dlg.resize(300, 150);

let content = dlg.get_content_area();
let label = new Widgets.Label("Are you sure?");
content.add_widget(label, 1);

dlg.add_callback('activated', (w, btn) => {
    console.log("User chose:", btn);
});
dlg.show();

ColorDialog¶

Color picker dialog with SV plane, hue strip, and RGB/HSV/hex inputs.

Constructor: new Widgets.ColorDialog({color, title, modal, moveable})

Options:

color – initial color as hex string
title – dialog title
modal – modal overlay
moveable – allow dragging

Methods:

Method	Description
`get_color()`	Return selected color as hex string.
`set_color(hex_string)`	Set the current color.
`popup(x, y)`	Show the dialog (optionally at a specific position). Inherited from Dialog.
`set_position(x, y)` / `set_modal(tf)`	Inherited from Dialog.

Callbacks:

activated – fires with the chosen colour when OK is clicked.
pick – fires interactively as the user drags inside the picker.
move / close – inherited from Dialog.

let picker = new Widgets.ColorDialog({color: "#ff6600", modal: true});
picker.add_callback('activated', (w, btn) => {
    if (btn === "OK") {
        console.log("Chosen color:", w.get_color());
    }
});
picker.show();

FileDialog¶

File open/save dialog. Uses the browser’s native file picker for opening and programmatic download for saving. This is a non-visual (Callback-based) object.

Constructor: new Widgets.FileDialog({mode, accept})

Options:

mode – "open" or "save"
accept – file type filter (e.g. ".png,.jpg,image/*")

Methods:

Method	Description
`open()`	Show the file-open picker.
`save(filename, data, mime_type)`	Trigger a file download.
`set_mode(mode)` / `get_mode()`	Set or get mode.
`set_accept(accept)` / `get_accept()`	Set or get file type filter.

Callbacks:

activated – fired when a file is selected (open) or saved.
progress – fired with progress updates during file reading.

let fd = new Widgets.FileDialog({mode: "open", accept: ".txt,.csv"});
fd.add_callback('activated', (w, fileData) => {
    console.log("File loaded:", fileData.name);
});
fd.open();