callbackprompt()

More versatile prompt() variant. Create a popup form, and on submit call given callback function.

by Black Diamond

HTML

<h1>callbackprompt()</h1>
<pre>
More versatile prompt() variant.
Create a popup form, and on submit call given callback function.
</pre>

JavaScript

//	http://usejsdoc.org/tags-param.html
//	http://usejsdoc.org/tags-type.html
//	http://usejsdoc.org/tags-typedef.html

	/**
	 * @param {Object}			data
	 * @param {boolean=true}    data.autoclose - should popup close on submit
	 * @param {function=}       data.callback_function
	 * @param {Object=}         data.callback_this
	 * @param {Object=}         data.callback_data
	 * @param {string=}         data.header - html
	 * @param {string=}         data.footer - html
	 * @param {Object[]=}       data.fields
	 * @param {string=}         data.fields[].type - ('hidden','text','number','textarea','select','selectradio')
	 * @param {string=}         data.fields[].name
	 * @param {string=}         data.fields[].value
	 * @param {string=}         data.fields[].title
	 * @param {string=}         data.fields[].text
	 * @param {boolean=}        data.fields[].addcustom
	 * @param {Object[]=}       data.fields[].options
	 * @param {string=}         data.fields[].options[].value
	 * @param {string=}         data.fields[].options[].text
	 * @param {string=}         data.fields[].options[].title
	 * @param {boolean=}        data.fields[].options[].checked
	 * @param {boolean=}        data.fields[].options[].selected
	*/
	function callbackprompt(data){
		var $ = window.$;
		if(!$ || !$.fn){
			return alert('missing $');
		}

		var namespace = 'callbackprompt';
		var namespace_id = namespace;
		var namespace_id_style = namespace + '_style';

		// (re)create css style element:
		$('#'+namespace_id_style).remove();
		var $style;
		$style = $('<style>', {id:namespace_id_style});
		$style.appendTo('body');
		$style.append(`
#${namespace_id} {
	position:fixed;
	z-index: 999999;
	top: 10px;
	left: 10px;
	background: #fff;
	color: #000;
	border:1px outset #888;
	border-radius: 5px;
	margin:5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
	min-width: 100px;
	min-height: 40px;
	max-width: 90%;
	max-height: 90%;
	overflow: auto;
	resize: both;
}
#${namespace_id} .${namespace}_header {...