Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A parameterized dialog with an autoclose function #371

Open
centurianii opened this issue Mar 2, 2018 · 0 comments
Open

A parameterized dialog with an autoclose function #371

centurianii opened this issue Mar 2, 2018 · 0 comments

Comments

@centurianii
Copy link

centurianii commented Mar 2, 2018

I found similar behavior in other projects so I decided to add it here too as a bonus! My comments follow the rules of jsDoc node plugin.

Here it is the code:

/**
 * @summary
 * MyClass.prototype.dialog
 * ------------------------
 * @desc
 * A prototype method of **`MyClass`**.
 * 
 * It handles dialog setup during {@link MyClass#myCommand} command.
 * 
 * It builds a parametric dialog of type:
 * - alert or,
 * 
 * - confirm.
 * 
 * It also adds a time counter at the cancel button that counts down and closes
 * the dialog automatically.
 * 
 * The passed callback is executed by the `OK` button which has also a 
 * parameterized label.
 * 
 * Alerts do not have the `OK` button, see property `hideOk`.
 * @function MyClass#dialog
 * @param {Object} params An object as a named argument list
 * @prop {String} size Dialog's size, [size-small|size-normal|size-wide|size-large]
 * @prop {String} type Dialog's type, 
 *    [type-default|type-primary|type-info|type-success|type-warning|type-danger]
 * @prop {String} title Dialog's title
 * @prop {String} message Dialog's message
 * @prop {Integer} count Number of seconds that the dialog will be open
 * @prop {Boolean} hideOk Controls appearance of dialog's ok button
 * @prop {String} okLabel Dialog's label for ok button
 * @prop {Function} okAction Dialog's function to be called on pressing the ok button
 * @return {MyClass} The `MyClass` object
 */
dialog: function(params){
   var dialog,
       cancel,
       time;
   
   // auto-close function, it counts down from 'time.start'
   time = {
      start: params.count,
      elem: null,
      html: '',
      count: function(elem){
         if(elem){
            time.elem = $(elem);
            time.html = time.elem.html();
         }
         time.elem.html(time.html + ' (' + time.start + ')');
         --time.start;
         if(time.start > 0)
            setTimeout(time.count, 1000);
         else
            dialog.close();
      }
   };
   
   dialog = new BootstrapDialog({
      size: params.size,
      title: params.title,
      type: params.type,
      message: params.message,
      description: params.title,
      draggable: true,
      closable: true,
      closeByBackdrop: true,
      closeByKeyboard: true,
      buttons: [
         {
            id: 'cancel',
            label: 'Cancel',
            title: 'Cancel action',
            icon: 'fa fa-spinner fa-pulse fa-fw',
            cssClass: 'btn-default',
            action: function(that){
               that.close();
            }
         },
         {
            id: 'ok',
            label: params.okLabel,
            title: params.title,
            cssClass: params.type.replace(/^type/, 'btn'),
            action: function(that){
               params.okAction();
               that.close();
            }
         }
      ]
   });
   dialog.realize();
   cancel = dialog.getButton('cancel');
   //cancel.spin();
   time.count(cancel);
   if(params.hideOk)
      dialog.getButton('ok').addClass('hide');
   else
      dialog.getButton('ok').removeClass('hide');
   dialog.open();
   return this;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant