Alert plugin improvements

Hi,

I think the alert plugin is a little too opiniated. It would be great if we could customize it a little bit more.

For instance :

• Being able not to have a header
• Being able to add extra classes to the elements of the modal (buttons, etc)
• Being able to prevent the modal from closing on onConfirm() and onCancel() events
• Being able to target the button that was clicked on onConfirm() and onCancel() events

What I suggest is adding a few more options. Maybe an object for the buttons ?

confirm: {
  'text': 'Confirm',
  'classes': 'is-link'
}

cancel: {
  'text': 'Cancel',
  'classes': 'is-danger'
}

To prevent the modal from being destroyed on onConfirm() and onCancel(), I suggest adding two more options :

destroyOnCancel: true|false // defaulted to true
destroyOnConfirm: true|false // defaulted to true

To target the button that was clicked on onConfirm() and onCancel() events, I suggest adding the event as a parameter on the ‘click’ event listener callback of the cancel and confim buttons. Like so:

confirmButton.addEventListener('click', e => {
  this.onConfirm(e);
  this.destroyOnConfirm && this.destroy(); // related to previous suggestion
});

cancelButton.addEventListener('click', e => {
  this.onCancel(e);
  this.destroyOnCancel && this.destroy(); // related to previous suggestion
});

I have some of these features already coded, I can submit a PR if you’re OK with the suggestions.

Waiting for your feedback, thanks !

[alexcanana]

Not sure about the security thing, I’m no JS expert…

Awesome work, thank you!

[VizuaaLOG]

@alexcanana Thank you for your suggestions. These have been added to the master branch and the new 0.9 documentation.

It’s not on NPM yet, just want to test a little bit make sure everything is okay.

I’ve added the option for custom classes on the buttons, but do not feel like other elements require custom classes. The alert is using the modal behind the scenes so any style changes made to that via your application will automatically apply to the alert, keeping consistency etc.

Should your app require changing the styling of other model elements within the alert, a new .alert class has been added to alert popups allowing you to only target those in your CSS.

If you have any further suggestions, please open a new issue. BulmaJS will only get better with everyone’s feedback. 👍