Extending the dialogs service (how to)

[mark0978]

What started out as a question: Why can't I override the template in the options? turned into a pretty neat way of extending the dialogs service to make it even easier to use.

I was trying to modify the confirmation dialog to confirm a deletion, where I wanted the confirmation to stand out with different colors. Turns out I can do it via the window class, but it actually turned out that in the process of getting this to work, I managed to extend your excellent dialogs module without having to touch the code.

What I added was dialogs.confirmDeletion(header, msg, opts) which works like confirm, but provides default opts to help control the coloring.

To do this, I used the $provide.decorate to extend your dialogs module with the following code:

/* So, this addon to Michael Conroy's dialog service is here to make it easy to create a deletion
  confirmation dialog with the right styling.  It was inspired by this article
  http://blog.xebia.com/2014/08/08/extending-angularjs-services-with-the-decorate-method/
  and uses the windowClass to mark the confirmation dialog up with some additional text and colors
  that it otherwise would not have.  It relies on the following CSS being present.  It does this without
  changing the dialogs code itself.

.deletion-confirmation .modal-footer .btn-default {
    background-color: red;
    color: white;
}
.deletion-confirmation .modal-footer .btn-default:after {
    content: ", delete it";
}
.deletion-confirmation .dialog-header-confirm {
    background-color: red;
}
*/
angular.module('dialogsPlus', [])
  .config(function($provide) {
    $provide.decorator('dialogs', function($delegate) {
      $delegate.confirmDeletion = function(header, msg, opts) {
        var theOpts = {
          windowClass: 'deletion-confirmation'
        };
        if(opts) {
          angular.extend(opts, theOpts); // Allow the caller to override our default opts
        }
        return $delegate.confirm(header, msg, theOpts);
      };
      return $delegate;  // Now you also have the confirmDeletion method you can call from dialogs
    });
  });

[m-e-conroy]

Excellent! Thank you for sharing this, I've definitely learned something new.

[m-e-conroy]

@mark0978 if you set wc in the opts object to a CSS class this will set the windowClass. I like what you did with the decorator and I learned a lot actually by following the URL you put in the comments of your code, but the windowClass parameter for the Angular-UI-Bootstrap Modal is covered by this service. Maybe I didn't document it well enough.

[mark0978]

This follows in the same spirit as the dialogs.dosomething pattern, so that the windowClass is just included without having to specify it everywhere. Just like you built out on top of modal, just thought it was a cool use of the decorator provider.

[m-e-conroy]

@mark0978 Ok, I understand now why you did it this way. Thanks for the how-to, like I said I learned something new yesterday, in fact I spent about half my work day reading up on different blogs about the "decorating," thanks so much.