[Modal] JS Config Templates, alert, confirm, prompt

[lubber-de]

Description

This PR adds the possibility of using JS config templates for the modal module.
That means you can declare a reusable dynamic template function which returns predefined config settings (modified depending of your input to the template function) as the modal is already prepared to create dynamic content out of pure js since #1774

For this reason modal now also has an optional autoshow option, which enables you to immediatly show the modal on instantiation time, so no more need for $(.ui.modal).modal({closable:false}).modal('show') but $(.ui.modal).modal({closable:false, autoShow:true})

Modal now also can use the transition methods for show/hide individually (backwards compatible) (just like in toast and for dimmer in #1867)

General usage

A js template is called as a modal behavior

$('body').modal('alert','hello')
$('body').modal('confirm','Are you sure?',function(value){})
$('body').modal('prompt','Enter Code', function(value){})

Three basic templates are included: alert, confirm, prompt as an equivalent to existing vanilla JS variants but with more possibilities to customize the look & feel. (see below)

alert / confirm

Possible parameters are: title, content, handler (in that order to stay nearly identical to vanilla js usage) or a given object {title:'',content:'',handler:function(){}} where as title and content can contain HTML.

If you don't trust the content set the global modal setting for preserveHTML to false.

Example

 // content only
$('body').modal('alert','<span class="ui big text">hello</span>');
// title and content
$('body').modal('confirm','Attention!','Ready?');
 // title, content and handler
$('body').modal('confirm','Attention!','Ready?', function(choice){
	console.log('You '+ (choice ? 'Accepted':'Declined'))
});
// content and handler
$('body').modal('confirm','Ready?', function(choice){
	console.log('You '+ (choice ? 'Accepted':'Declined'))
});
// title and handler
$('body').modal('confirm',{
	title: 'Ready?',
	handler: function(choice){
		console.log('You '+ (choice ? 'Accepted':'Declined'))
	}
});

prompt

The call for prompt is basically identical to alert and confirm. There are 2 more options available when an object is given (placeholder and defaultValue.
If you provide HTML Code for the content and this contains an input, this will be used as the inputfield. Otherwise it creates one dynamically for you.

$('body').modal('prompt',{
	title: 'Entry Code?',
    placeholder: 'do not enter your mothers name!',
	handler: function(choice){
		console.log('You '+ (choice ? 'Accepted':'Declined'))
	}
});

Config template modals will be always autoshown (see above), so no manual show is needed)

Create your own template

Extend the modals templates object. It has to return an object which will be merged into the modals settings prior to creating/showing the modal.

$.fn.modal.settings.templates.welcome = function(username) {
// do something according to modals settings and/or given parameters
  var settings = this.get.settings(); // "this" is the modal instance
	return {
		closable: false,
		title: 'Welcome '+ username
	}
}

Reuse this whenever you need

$('body').modal('welcome','hammy')
$('body').modal('welcome','prudho')
$('body').modal('welcome','colinfrick')
$('body').modal('welcome','ko2in')
$('body').modal('welcome','exoego')
$('body').modal('welcome','lubber')

Testcase

Here is a jsfiddle to show the basic usage as well as a custom template which behaves like the SweetAlert2 Style
https://jsfiddle.net/lubber/7u2s4h6k/56/

Here i started a dedicated jfiddle to use a custom Fomantic modal template as a dropin replacement for sweetalert to see what's possible. This is WIP, but shows that you can reuse your existing code. This code will never be part of fomantic core because it's using promises and simulates the config settings from sweetalert2
Thanks to @prudho for his fui alert plugin (#1716) inspiration (and him mentioning he uses swal ;) )
https://jsfiddle.net/lubber/pujwkxz1/6/

Screenshots

Closes

#1407
Semantic-Org/Semantic-UI#3869

[lubber-de]

Docs (partly) added for show/hide method/duration setting by fomantic/Fomantic-UI-Docs#280

[lubber-de]

Docs added by fomantic/Fomantic-UI-Docs#287