Introduction


From this namespace you can show: message, confirm and prompt dialogs and flash messages.
Spacer uses drivers to show dialogs. Every driver has its own implementation to show dialogs. Let's take this example:


spa.dialog.message('Message Title', 'Message content goes here', 'success', 'success');

We see that a single message can be shown in different ways according to the current dialog driver. The same thing applies to flash message.

spa.dialog.flash('Message Title', 'Message content goes here', 'success');

Dialog Functions


  • message

    spa.dialog.message(title, msg, status, icon, fn)
    spa.dialog.messageSuccess(title, msg, fn)
    spa.dialog.messageError(title, msg, fn)

    Parameter Type Description
    title string Dialog's title
    msg string Dialog's message
    status string Dialog's status. Spacer support 4 statuses: success, danger, warning or info
    icon string Dialog's icon. Spacer support 5 icons: success, danger, warning, info or question. This parameter is nullable. use null to show dialog without icon
    fn function A nullable callback function to execute when the dialog disappear

    Note that

    • messageSuccess(title, msg, fn) is short for spa.dialog.message(title, msg, 'success', 'success', fn)
    • messageError(title, msg, fn) is short for spa.dialog.message(title, msg, 'danger', 'danger', fn)


  • confirm

    spa.dialog.confirm(title, msg, status, icon, fn1, fn2)

    Parameter Type Description
    title string Dialog's title
    msg string Dialog's message
    status string Dialog's status. Spacer support 4 statuses: success, danger, warning or info
    icon string Dialog's icon. Spacer support 5 icons: success, danger, warning, info or question. This parameter is nullable. use null to show dialog without icon
    fn1 function A nullable callback function to execute when user respond with positive confirm
    fn2 function A nullable callback function to execute when user respond with negative confirm

  • prompt

    spa.dialog.prompt(title, msg, status, icon, fn1, fn2)

    Parameter Type Description
    title string Dialog's title
    msg string Dialog's message
    status string Dialog's status. Spacer support 4 statuses: success, danger, warning or info
    icon string Dialog's icon. Spacer support 5 icons: success, danger, warning, info or question. This parameter is nullable. use null to show dialog without icon
    fn1 function A nullable callback function to execute when user respond positively. Input value is passed to this callback as a parameter
    fn2 function A nullable callback function to execute when user respond with negative confirm

Dialog Drivers


The previous functions are used to show dialogs, but how the dialog will looks like depends on which current dialog driver selected in Spacer options dialogCurrentDriver. To change dialogCurrentDriver, see setDialogCD.

Spacer provide some dialog drivers. Each dialog driver has its own implementation about how to show dialogs.

Available Dialog Drivers

  • alert

    Shows message, confirm and prompt using alert() confirm() and prompt() native javascript functions respectively.

    In this driver, status, icon parameters are ignored.

  • sweetAlert

    Shows dialogs using SweetAlert.

    In this driver, status parameter is ignored since SweetAlert dialogs has no status.

  • bootstrap3Panel

    Shows dialogs using Bootstrap 3 panel inside modals.

  • bootstrap3Modal

    Shows dialogs using Bootstrap 3 modals.

Custom Dialog Drivers

To define your own dialog driver, just provide implementation to message, confirm and prompt functions.
For example, to define new dialog driver called myDialogDriver, we can do it like so:

spa.setOptions({
	dialogDrivers: {
		myDialogDriver: {
			message: function (title, msg, status, icon, fn) {
                            //implementation
			},
			confirm: function (title, msg, status, icon, fn1, fn2) {
                            //implementation
			},
			prompt: function (title, msg, status, icon, fn1, fn2) {
                            //implementation
			},
		},
	},
});

Note that dialogDrivers configuration option is an object that holds all dialog drivers. And each dialog driver is an object that hold the implementation to message, confirm and prompt functions.


Flash Functions


  • flash

    spa.dialog.flash(title, message, status, icon, timeout, position)
    spa.dialog.flashSuccess(title, message, icon, timeout, position)
    spa.dialog.flashError(title, message, icon, timeout, position)

    Parameter Type Description
    title string Message's title
    msg string Message's body
    status string Message's status. Spacer support 4 statuses: success, danger, warning or info
    icon string Message's icon. Spacer support 5 icons: success, danger, warning, info or question. This parameter is nullable. use null to show flash message without icon
    timeout integer A nullable value in millisecond that represent the message duration before it disappears. if null passed, the default value 5000 is used. if 0 is passed, this means the message should stay until the user close it
    position string Message's position. Spacer support 4 positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

    Note that

    • spa.dialog.flashSuccess(title, message, icon, timeout, position) is short for spa.dialog.flash(title, message, 'success', icon, timeout, position)
    • spa.dialog.flashError(title, message, icon, timeout, position) is short for spa.dialog.flash(title, message, 'danger', icon, timeout, position)

Flash Drivers


The flash function is used to show flash message, but how the flash message will looks like depends on which current flash driver selected in Spacer options flashCurrentDriver. To change flashCurrentDriver, see setFlashCD.

Available flash drivers

Custom Flash Drivers

To define your own flash driver, just provide implementation to flash function.
For example, to define new flash driver called myFlashDriver, we can do it like so:

spa.setOptions({
	flashDrivers: {
		myFlashDriver: {
			flash: function (title, message, status, icon, timeout, position) {
                            //implementation
			},
		},
	},
});

Note that flashDrivers configuration option is an object that holds all flash drivers. And each flash driver is an object that hold the implementation to flash function.