• Introduction
• Dialog Functions
  • message
  • confirm
  • prompt
• Dialog Drivers
  • Available Dialog Drivers
  • Custom Dialog Drivers
• Flash Functions
  • flash
• Flash Drivers
  • Available flash drivers
  • Custom Flash Drivers

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

• ukNotify

  Shows flash messages using Bootstrap 3 Alerts and Uk Notify.

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.