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');
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 |
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.
Shows message
, confirm
and prompt
using alert()
confirm()
and prompt()
native javascript functions respectively.
In this driver, status
, icon
parameters are ignored.
Shows dialogs using SweetAlert.
In this driver, status
parameter is ignored since SweetAlert dialogs has no status.
Shows dialogs using Bootstrap 3 modals.
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
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)
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
.
Shows flash messages using Bootstrap 3 Alerts and Uk Notify.
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.