-
Notifications
You must be signed in to change notification settings - Fork 1
Options
Dionlee Uy edited this page Apr 25, 2022
·
6 revisions
Calling duDialog() will return the dialog object.
Dialog constructor:
new duDialog(
title, // string || null (for no title dialogs)
message, // string; accepts html string also || string array or object (for selection dialog)
[config] // optional; additional dialog configurations (explained below)
)Dialog action button types:
duDialog.DEFAULT // 1 - default action button (OK)
duDialog.OK_CANCEL // 2 - OK and CANCEL buttons
duDialog.YES_NO_CANCEL // 3 - YES, NO and CANCEL buttons
duDialog.NONE // 0 - no action button (used with single selection dialog){
// id attribute of the dialog container (for specific dialog styling convenience)
id: null,
// determines if initialize only (dialog will not be shown immediately after initialization)
init: false,
// determines if dark theme is on
dark: false,
// button types (see above)
buttons: 1,
// hides dialog on (any) button click if there's a defined callback handler
hideOnAction: false,
// determines if a Don't show again checkbox will be displayed
optOutCb: false,
// label for the opt-out checkbox
optOutText: 'Don\'t show again',
// display text for the 'OK' button
okText: 'Ok',
// display text for the 'YES' button
yesText: 'Yes',
// display text for the 'NO' button
noText: 'No',
// display text for the 'Cancel' button
cancelText: 'Cancel',
// determines if dialog is for item selection
selection: false,
// determins if (single) select dialog will show the OK_CANCEL buttons for confirmation
confirmSelect: false,
// determines if multiple seletion (for selection dialog)
multiple: false,
// determines the minimum required selection (multi select only)
minSelect: 1,
// determines the maximum required selection (multi select only)
maxSelect: null,
// determines if search input is visible/enabled (for selection dialog)
allowSearch: false,
// default selected item value (for selection dialog)
selectedValue: null,
// variable name for the select item value; use this for custom object structure (for selection dialog)
valueField: 'value',
// variable name for the select item display text; use this for custom object structure (for selection dialog)
textField: 'item',
// callback functions
callbacks: null
}/**
* Triggers on OK button click; 'this' inside the callback refers to the dialog object
* @param {Event} e - event object
*/
okClick(e);
/**
* Triggers on YES button click; 'this' inside the callback refers to the dialog object
* @param {Event} e - event object
*/
yesClick(e);
/**
* Triggers on NO button click; 'this' inside the callback refers to the dialog object
* @param {Event} e - event object
*/
noClick(e);
/**
* Triggers on CANCEL button click; 'this' inside the callback refers to the dialog object
* @param {Event} e - event object
*/
cancelClick(e);
/**
* Triggers on item selection change (selection dialog); 'this' inside the callback refers to the radio button.
* For multiple selection dialog, this will be triggered on OK button click (okClick will not be executed); 'this' does not refer to the checkbox
* @param {Event} e - event object;
* @param {string|Object} i - selected item (string or object) bound to the radio button; array of selected items (string or object) for multiple selection
*/
itemSelect(e, i);
/**
* Custom search function, triggers on search input keyup (selection dialog); 'this' inside the callback refers to the dialog object.
* @param {string|Object} i - select item object or string;
* @param {string} k - search query string
* @returns boolean (for matching item/s)
*/
onSearch(i, k);
/**
* Custom item render function; 'this' inside the callback refers to the dialog object.
* Note: If used, you need to add your own styling
* @param {string|Object} i - select item object or string
* @returns string/html markup (to be used for rendering of the item label)
*/
itemRender(i);
/**
* Triggers on OK button click if checked items is less than the minimum (minSelect config)
* @param {number} min - minSelect value (configuration)
*/
minRequired(min);
/**
* Triggers on item click if checked items is equal to the maximum (maxSelect config)
* @param {number} max - maxSelect value (configuration)
*/
maxReached(max);
/**
* Triggers on opt-out checkbox check/uncheck
* @param {Boolean} optOut - Opt-out checkbox checked state
*/
optOutChanged(optOut);