Add custom HTML alert support

[huytd]

Add new alert type: HTML

EDIT: now using allowHtml option instead of type

This will allow creating HTML alert box, can be use to create custome dialog types, for example: Prompt, Date picker,...

Usage:

swal({   
    title: "Custom dialog!",   
    text: "Here's my <b>HTML</b> <u>message</u>!",   
    type: "success",   
    confirmButtonText: "Yay!",
    allowHtml: true
});

[samacs]

Wouldn't it be better if there's another option, allowHtml for instance, and keep the type as the original array?

[pomartel]

I agree with @samacs that html is not a type of dialog, it is a different feature completely. I could want to make an error dialog with html within. Unfortunately I don't think that the project owner wants to allow HTML in the alerts at all.

[samacs]

Looking at the code, seems very easy to support this feature, but the modal's markup is out of the scope of the parameters so we cannot decide how to define the markup if it will allow HTML. I just glanced the code so I cannot tell if this is completely true. I'll make a pr in my free time and push the branch.

[samacs]

Well, if that's the case, @pomartel lets fork it and add the feature -.-

[pomartel]

Maybe there is something I don't understand but why would we want to escape the HTML at all? Why not give total freedom to the developer to put what he wants in the alert? In my opinion, this should not even be an option so I just removed escapeHtml call in my branch : https://github.com/pomartel/sweetalert/commit/5756a87d0a0726e947d89e3f8a6f675e4b005be5

[samacs]

(y)

[huytd]

Yeah, you guys are right. It should be another option (allowHtml), I'm sooooo lazzzyyyyy 💃
I see @t4t5 put the escapeHtml everywhere, may be he wanted to prevent XSS attack or something.
How do I change my submited pull request? Or just make another pull request?

[pomartel]

@huytd that should probably apply to the title as well.

[huytd]

I added a commit to use allowHtml option instead of type :D

[lipis]

In that particular PR you shouldn't change/fix the icon thingy as it is totally separate subject and should be in a separete PR

[vmitchell85]

With HTML support you're bound to put lots of other things in the alert. Which creates issues if the alert becomes bigger than the window height. Add scrolling with the HTML support or a separate issue?

[pomartel]

@vmitchell85 I think the main use case for html in the alert is to add links in the text or basic styling tags. I don't see what's the added value of stripping html tags. Why not let the developer choose what he wants to put in his alerts?

[vmitchell85]

@pomartel - I wasn't advocating not using HTML, I am 100% for HTML... my concern is that if you put enough items into the alert and the window is small you currently can't scroll (as I've downloaded this code change and tested)

[Ashwinning]

Hey,
I used the script and it works great - except for one thing : Input fields are not clickable on chrome.
I'm passing the escaped HTML with an input field, and the field shows up fine.
According to the inspector, -webkit-user-select is set to 'text' in the elements, so that's fine too.
Works fine on Firefox.
Thanks!

[kai23]

Same error as @Ashwinning : did you managed to fix it ?

[giroin]

Hi,
I also confirm that allowhtml works however what happened to timer function? it seems to be removed

[limonte]

@huytd I added this feature and some other additional options in sweetalert2.

[t4t5]

This is now possible through the htmlattribute. Thanks for your contributions and opinions folks! :)