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 });

Loading State

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
    }
  }
});

Opt-out Checkbox

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()
    }
  }
})

Selection Dialog

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
}

Grouped Items

{
  group: 'Group name',
  items: [...item object format here]
}

Single select

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'
      }
    }
  });

Multiple select

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.

Customize rendering

// 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.

Customize search

// 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;
  }
}

Remember

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');