Modern Material Design Dialog Generator In Pure JavaScript – duDialog

Category: Javascript , Modal & Popup | September 23, 2020
Author:dmuy
Views Total:17 views
Official Page:Go to website
Last Update:September 23, 2020
License:MIT

Preview:

Modern Material Design Dialog Generator In Pure JavaScript – duDialog

Description:

duDialog is a pure JavaScript plugin for creating Material Design inspired alert, confirmation, selection dialog popups without any dependencies.

How to use it:

To get started, insert the duDialog’s JavaScript and CSS files into the page.

<link href="duDialog.css" rel="stylesheet">
<script src="duDialog.js"></script>

Create a basic alert dialog with an OK button.

new duDialog('Alert Message', 'This is an alert message.');

Create a confirmation dialog with callbacks.

new duDialog('Confirm Dialog', 'Are You SUre', duDialog.OK_CANCEL, { 
    okText: 'Confirm',
    callbacks: {
      okClick: function(){
        // do something
      },
      cancelClick: function(){
        // do something
      }
    }
});
new duDialog('Select An Item', ['CSS', 'SCRIPT', 'COM'], {
  selection: true, 
  callbacks: {
    itemSelect: function(e, item){
      // this.value
    }
  }
});

// or
new duDialog('Select An Item', 
    [{ name: 'CSS', id: 1 }, { name: 'SCRIPT', id: 2 }, { name: 'COM', id: 3 }], 
    {
    selection: true,
    textField: 'name',
    valueField: 'id',
    callbacks: {
      itemSelect: function(e, i){
        // this.value
      }
    }
});

All optional settings with default values.

// id attribute of the dialog container
id: null,

// determines if initialize only
init: false,

// determines if dark theme is on
dark: false,

// 1 - default action button (OK); 2 - OK and CANCEL buttons; 3 - no action button (used with single selection dialog)
buttons: 1,

// text for the 'OK' button
okText: 'Ok',

// text for the 'Cancel' button
cancelText: 'Cancel',

// determines if dialog is for item selection
selection: false,

// determines if multiple seletion
multiple: false, 

// determines the minimum required selection (multi select only)
minSelect: 1,

// determines the maximum required selection (multi select only)
maxSelect: null,

// determines if multiple seletion (for selection dialog)
multiple: false,

// determines if search input is visible/enabled
allowSearch: false,

// default selected item valu
selectedValue: null,

// variable name for the select item value; use this for custom object structure
valueField: 'value',

// variable name for the select item display text; use this for custom object structure
textField: 'item',

// callback functions: okClick, cancelClick, itemSelect (for selection dialog), onSearch (for selection dialog), itemRender (for selection dialog)
callbacks: null

All possible callback functions.

callbacks: {
  /**
   * Triggers on OK button click; 'this' inside the callback refers to the dialog object
   * @param {Event} e - event object
   */
  okClick(e);
  /**
   * Triggers on CANCEL button click; 'this' inside the callback refers to the dialog object
   * @param {Event} e - event object
   */
  cancelClick(e);
  /**
   * Triggers on item selection change (selection dialog); 'this' inside the callback refers to the radio button.
   * For multiple selection dialog, this will be triggered on OK button click (okClick will not be executed); 'this' does not refer to the checkbox
   * @param {Event} e - event object; 
   * @param {string|Object} i - selected item (string or object) bound to the radio button; array of selected items (string or object) for multiple selection
   */
  itemSelect(e, i);
  /**
   * Custom search function, triggers on search input keyup (selection dialog); 'this' inside the callback refers to the dialog object.
   * @param {string|Object} i - select item object or string;
   * @param {string} k - search query string
   * @returns boolean (for matching item/s)
   */
  onSearch(i, k);
  /**
   * Custom item render function; 'this' inside the callback refers to the dialog object.
   * Note: If used, you need to add your own styling
   * @param {string|Object} i - select item object or string
   * @returns string/html markup (to be used for rendering of the item label)
   */
  itemRender(i);
  /**
   * Triggers on OK button click if checked items is less than the minimum (minSelect config)
   * @param {number} min - minSelect value (configuration)
   */
  minRequired(min);
  /**
   * Triggers on item click if checked items is equal to the maximum (maxSelect config)
   * @param {number} max - maxSelect value (configuration)
   */
  maxReached(max);
}

Changelog:

v1.1.2rc2 (09/18/2020)

  • Moved type dialog parameter to options.buttons
  • Renamed message dialog parameter to content
  • Renamed button type NO_ACTION to NONE
  • Renamed DUDialog class to _duDialog
  • Minor code fixes/improvements

v1.1.2 (09/18/2020)

  • Updates & fixes

v1.1.1 (09/15/2020)

  • Added Element.matches polyfill for IE11
  • Added dark configuration which determines if dark mode is on
  • Added minSelect config for multi select dialog – restricts the minimum selection required; with callback method minRequired
  • Added maxSelect config for multi select dialog – restricts the maximum selection; with callback method maxReached
  • Minor script and css fixes
  • Removed :scope in querySelectors which causes an error in IE11

08/25/2020

  • Added dark configuration which determines if dark mode is on

08/23/2020

  • JS Updated

10/31/2019

  • Bugfix

10/10/2019

  • Bugfix

09/16/2019

  • Bugfix

01/10/2019

  • Minor enhancements

01/09/2019

  • Minor enhancements
  • Bugfixes

12/07/2018

  • Small fixes

11/28/2018

  • Minor updates

You Might Be Interested In:


2 thoughts on “Modern Material Design Dialog Generator In Pure JavaScript – duDialog

Leave a Reply