-
Notifications
You must be signed in to change notification settings - Fork 1
Usage
To create a dialog, just call duDialog()
:
// initializes the dialog with default options (and default action button - OK button)
new duDialog('Title', 'This is a dialog message.');
// initializes the dialog with no title/header, and OK (display text is 'Proceed') and CANCEL buttons;
// with a callback function on OK button click
new duDialog(null, 'This action cannot be undone, proceed?', {
buttons: duDialog.OK_CANCEL,
okText: 'Proceed',
callbacks: {
okClick: function(){
// do something
this.hide(); // hides the dialog
}
}
});
You can combine different configurations to get what you need for a dialog.
// You can do this if you want to initialize a dialog for later use;
// 'type' parameter is optional so i can specify the configuration after the message parameter
// 'init: true' means that this is only initialization (dialog will not be shown unless you call '[dialog object].show()')
var dlg = new duDialog('Title', 'This is a dialog message.', { init: true });
To change the loading state of the dialog, call the setLoading()
method.
/**
* Triggers on OK button click; 'this' inside the callback refers to the dialog object
* @param {Boolean} loading - determines if the dialog is loading
* @param {Boolean} cancellable - determines if the loading state is cancellable (Cancel button will not be disabled); defaults to `false` if not specified
*/
setLoading(loading, cancellable);
Example:
new duDialog(null, 'You have unsaved changes, do you want to save it?', {
buttons: duDialog.YES_NO_CANCEL,
yesText: 'Save', noText: 'Discard',
callbacks: {
okClick: function(){
this.setLoading(true, true); // set loading to `true`, and cancellable to `true`
// do something
}
}
});
Displays an opt-out checkbox which has customizable label by specifying the optOutText
config.
duDialog(null, 'This action cannot be undone, proceed?', {
init: true, dark: true,
buttons: duDialog.OK_CANCEL,
okText: 'Proceed',
optOutCb: true,
optOutText: 'Don\'t remind me',
callbacks: {
optOutChanged: function(optOut) {
// true or false
console.log('optOutChanged', optOut)
},
okClick: function(e) {
console.log('okClick', this)
// this.hide()
}
}
})
Default item object format. When used you don't have to specify the valueField
and textField
configurations.
{
item: 'Item', // item display text
value: 'Value' // item value
}
{
group: 'Group name',
items: [...item object format here]
}
On the message
parameter, specify an array of string or object and set selection
configuration to true
.
new duDialog('Select fruit', ['Apple', 'Banana', 'Mango', 'Orange', 'Strawberry'], {
selection: true,
callbacks: {
// e - event
// i - selected item (string or object)
itemSelect: function(e, i){
// this.value - value of the selected item (i.e 'Apple', 'Banana', etct)
}
}
});
// custom item object; default object is { item: 'Item', value: 'value' }
new duDialog('Select fruit',
[{ name: 'Apple', id: 1 }, { name: 'Banana', id: 2 }, { name: 'Mango', id: 3 }, { name: 'Orange', id: 4 }, { name: 'Strawberry', id: 5 }],
{
selection: true,
textField: 'name', // since 'item' is not in the object, specify 'name' or any varialbe in the object you want as display text
valueField: 'id', // since 'value' is not in the object, specify 'id' or any variable in the object you want as the value
callbacks: {
itemSelect: function(e, i){
// this.value - value of the selected item; in this case fruit 'id'
}
}
});
To enable multiple selection, set multiple
configuration to true
.
new duDialog('Select fruits',
[{ name: 'Apple', id: 1 }, { name: 'Banana', id: 2 }, { name: 'Mango', id: 3 }, { name: 'Orange', id: 4 }, { name: 'Strawberry', id: 5 }],
{
selection: true, multiple: true,
textField: 'name', // since 'item' is not in the object, specify 'name' or any varialbe in the object you want as display text
valueField: 'id', // since 'value' is not in the object, specify 'id' or any variable in the object you want as the value
callbacks: {
// i - array of selected items (string or object)
itemSelect: function(e, i){
// this.value - value array of the selected items; in this case array of fruit 'id'
}
}
});
Note: Action buttons are enforced for selection dialog, you don't need to specify the dialog action buttons ('type' duDialog paramter) if selection: true
.
// assuming item source is like this: { id: 1, desc: 'Mango', caption: 'This is a juicy mango' }
callbacks: {
itemRender: function(i){
return '<span class="fruit-name">' + i.desc + '</span><span class="fruit-caption">' + i.caption + '</span>';
}
}
Note: Should add custom css for .fruit-name
and .fruit-caption
to adjust the item display.
// assuming item source is like this: { id: 1, desc: 'Mango', caption: 'This is a juicy mango' }
callbacks: {
onSearch: function(i, k){
var query = k.toLowerCase();
// search items thru 'desc' and 'caption'
return i.desc.toLowerCase().indexOf(query) >= 0 || i.caption.toLowerCase().indexOf(query) >= 0;
}
}
Comment or remove the line shown below in the css file if you already have a link to the Roboto font.
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');