MVCS provides a customizable popup dialog. There are several types: a simple notice, a confirmation, or a multiple choice. Each type has a message template and a callback function argument and displays one or more buttons. The dialog is dismissed when one of the buttons is pressed, and the callback function is called, passing a value associated with the button used.
The dialog is controlled using the dialog object. The dialog.notice() method opens a popup dialog displaying the message with a single "OK" button to dismiss the notification. The dialog.confirm() method opens a dialog that displays the message with an "OK" button and a "Cancel" button. The dialog.choose() method opens a dialog that displays the message with a custom array of buttons.
The dialog is implemented as the overlay page dialog (an OverlayPage). Its only state variable is dialog_queue, a modelObject array holding the pending messages (see Queueing). The keypad is a separate page and is not part of the dialog.
dialogimport {dialog} from 'common/mvcs/export.js';
The dialog object provides methods and properties to control popup dialogs.
The dialog object is also assigned to the global/window object and does not need to be explicitly imported. In addition, the dialog.notice() method is also globally available as notice(), and is also exported as the named export notice.
dialog.suppresstrue, dialogs are not displayed and each call is answered immediately as though the first button ("OK") were pressed. The self-test runner sets this because model switches during a test run raise notices that are noise there. Default is false.If a dialog is requested while another is displayed, the new one is appended to the dialog_queue and is displayed after the earlier ones are dismissed. The dialog page is closed when the queue becomes empty. A request whose message is identical (===) to the most recently queued message is silently dropped as a duplicate; in that case its callbackFn is never called and a returned Promise never settles.
DialogBox componentThe DialogBox component (internal to dialog.js, not exported) renders the box that holds the message and buttons. It is instantiated small and expands (CSS class dialog_box-small to dialog_box-large) after it mounts, then removes the transform class so that position:fixed descendants such as selector popup lists are positioned relative to the viewport.
dialog methodschoose()dialog.choose(message, buttons, callbackFn)
dialog.choose(message, buttons)
The choose() method displays a popup dialog containing the message and the button specified by the buttons array. The message can be a Template or a string, or an array of these, so the message can contain active inputs like state variables. The dialog is dismissed when any button is pressed.
If provided, the callbackFn is called when the dialog is dismissed, with the index of the pressed button as an argument. If callbackFn is omitted, then a Promise is returned that resolves with the index of the pressed button when the user dismisses the dialog.
If message is identical to the most recently queued message, the call is silently ignored (see Queueing).
messagebuttonscallbackFn (optional)If callbackFn is omitted, then a Promise is returned that resolves with the index of the pressed button when the user dismisses the dialog. Otherwise, it returns undefined.
confirm()dialog.confirm(message)
dialog.confirm(message, callbackFn)
The confirm() method displays a popup dialog containing the message and both "OK" and "Cancel" buttons. The message can be a Template or a string, or an array of these, so the message can contain active inputs like state variables. The dialog is dismissed when either button is pressed. If provided, the callbackFn is called when the dialog is dismissed, with a true argument if "OK" is pressed and false if "Cancel" is pressed.
If provided, the callbackFn is called when the dialog is dismissed. If callbackFn is omitted, then a Promise is returned that resolves when the user dismisses the dialog by pressing the "OK" button or rejects when the use presses the "Cancel" button.
messagecallbackFn (optional)If callbackFn is omitted, then a Promise is returned that resolves with 'ok' when the user presses "OK" and rejects with 'cancel' when the user presses "Cancel". Otherwise, it returns undefined.
notice()dialog.notice(message)
dialog.notice(message, callbackFn)
notice(message)
notice(message, callbackFn)
The notice() method displays a popup dialog containing the message and a single "OK" button. The message can be a Template, a string, or an array of these, so it can contain active inputs like state variables. The dialog is dismissed when the "OK" button is pressed.
If provided, the callbackFn is called when the dialog is dismissed. If callbackFn is omitted, then a Promise is returned that resolves when the user dismisses the dialog.
messagecallbackFn (optional)If callbackFn is omitted, then a Promise is returned that resolves (with the button index, 0) when the user dismisses the dialog. Otherwise, it returns undefined.
textInput()dialog.textInput(title)
dialog.textInput(title, initialValue)
dialog.textInput(title, initialValue, size)
dialog.textInput(title, initialValue, size, doneFn)
The textInput() method displays a popup dialog containing the title followed by a single text input field, both "OK" and "Cancel" buttons. The dialog is dismissed when any button is pressed.
If provided, the doneFn is called when the dialog is dismissed, with the value of the input field as an argument, or undefined if the user pressed "Cancel". If doneFn is omitted, then a Promise is returned that resolves with the value of the input field when the user presses the "OK" button. The value is undefined if the user presses the "Cancel" button.
titleinitialValue (optional)size (optional)doneFn (optional)undefined if "Cancel" was pressed.If doneFn is omitted, then a Promise is returned that resolves with the input value (or undefined on "Cancel"). Otherwise, it returns undefined.