[Plugin] An alert plugin

[prudho]

For my work needs, I use intensively alerts to prompt users, mostly for confirmations or to warn user something that he needs to know. To do so, I use the SweetAlert2 library. But it's still an external module, and doesn't has the look and feel of Fomantic.

So I started working on a (simple and bugged yet) alert plugin of Fomantic, and I wanted to know your feelings about this.

Plugin use the fomantic's modal system. It works by adding a modal to the page and display it till the user trigger an action (close, confirm or deny), and then return a result (as a Promise).

For now here's the implemented parameters:

title              : '',
text               : '',
icon               : undefined,
target             : 'body',
size               : 'medium',
showConfirmButton  : true,
confirmButtonText  : 'OK',
confirmButtonColor : 'primary',
showCancelButton   : false,
cancelButtonText   : 'Cancel',
cancelButtonColor  : 'grey',
allowOutsideClick  : true,
position           : 'center',
transition         : 'scale'

Basic implementation:

fuialert.fire({
  title: 'Fomantic UI is great !'
});

In case you want to mess with it: JSFiddle.

Now guys, I want to know what do you think about it. Is this something that we can implement as a FUI plugin (I mean out of the FUI's base) ? What should be implemented in it ?

Related issue: #1407

[baterflyrity]

Very nice idea)) Would you mind implementing other prompt types like simple input and so on?

[prudho]

Yup, simple input is definitely a thing I want to implement in the next days.

[donaggio]

Such a component would be really useful! Anyway, I'm a little confused here: what do you mean with a "FUI plugin (out of FUI's base)"? Is it something concerning the development only? When completed, how will it be made available to end users?

[prudho]

I mean this component will not be available trough the Fomantic UI main repo, and it won't be a part of the main build system. In my mind, this is an optional component that should have a separated repo. First, i'm not building this plugin for IE11. Plus, despite using JQuery, it will not return a JQuery object like other components ( v3 vision here 😉 ). Maybe a node dependency ?

But we should wait other @fomantic/maintainers which will have some wise advice too :)

Ah, another thing ! Sorry if my words are confusing you, despite using english every day I'm still unable to make correct sentences...

[donaggio]

Thank you @prudho, it does make sense. And no, it's not your fault: I'm in the same boat as you here, using English every day but still loosing something here and there ;-)

[lubber-de]

Great job @prudho!

Just thinking: 🤔 If we would add a centered position and a modal option to the toast component. we would be able to provide your alert component already via FUI core.

[prudho]

You can give it a try, but I think that the toast module will need heavy modifications to do so.

You would had to add the ability to transform it into a modal, plus add the ability to return different result depending on user action (approve, deny, cancel, input), and for the future that would be great to return as a promise instead of a JQuery object (async await FTW).

[lubber-de]

ok, i see 🙂 It was just a quick thought, though ;)

[ko2in]

Thank you @prudho. I love the way you implemented with Promise. This way I can easily implement the additional processes within the promise chain instead of passing from the callback options when initializing the module.

It would also be nice, if it would have option to modify the template of the alert which allows to style the content of alert. Sometimes, I would need to display the alert box with specific background color, and need to display HTML content rather than a text.

[prudho]

Yup, this is next on my todo list. I'll make a repo on my gh profile too, so you'll have the ability to grab the last source as soon as I release it.

[prudho]

Repository created and first commit pushed here: Fomantic-UI-Alert.
Still pretty raw, but now you can display HTML and include an input 😊

[prudho]

Okay, repo here guys. Feel free to give it a try !

⚠️ FOR NOW, THIS IS JUST FOR TESTING PURPOSE ! DO NOT USE IT IN PRODUCTION ⚠️

[lubber-de]

In case you havent noticed, the modal component now supports js config templates by #1869
Based on @prudho s plugin, I started creating a first draft of an SweetAlert2 clone, supporting same syntax, using this feature here
https://jsfiddle.net/lubber/pujwkxz1/6/