<div id="mg_icon" class="xob_icon_cont"><img alt="mailto ..." title="Mail vorbereiten" src="//img.homepagemodules.de/ds/static/gaia/mail.png"></div> 
<style>
#mg_fieldset {
	position:absolute;
	left: 10px;
	top: -5em;
	width: 80%;
	max-width: 800px;
	z-index:2000;
	margin: 20px;
	padding: 10px;
	border: 1px solid gray;
	background-color: #aaaaaa;
	}
#mg_fieldset legend {background-color: #aaaaaa;}
#mg_fieldset label{width: 6em; display: inline-block;}
#mg_fieldset input{width: 15em; display: inline-block; vertical-align: top;}
 
#mg_fieldset textarea{ width:80%; max-width: 600px; vertical-align: top; }
.d-none {display: none;}
</style>
 
<fieldset id="mg_fieldset" class="d-none"><legend>eMail-Formular vorbereiten</legend>
 
<label>eMail</label><input id="mg_mail" type="text" placeholder=". . info@example.de"><br>
<label>Name</label><input id="mg_label" type="text" placeholder=". . Empfänger"><br>
 
<label>betreff</label><input id="mg_betr" type="text" placeholder=". . betreff"><br>
 
<label>Text</label><textarea id="mg_text" rows="10" cols="60" placeholder=". . eMail-Text / Inhalt"></textarea><br>
 
<button id="mg_bsp" title="Formular mit Beispiel ausfüllen">Beispiel</button> <button title="Eingaben löschen" type="reset" id="mg_cls">cls</button> 
<button id="mg_bbc" title="[mail=...] in Beitrag einfügen">[mail] einfügen</button> <button id="mg_esc" title="abbrechen" >verwerfen</button> 
</fieldset>
 
<script>  // 16.02. 
(function() {
const wzt="Iconbar Mail-Generator ...";  
console.log(wzt+" 16.02.24");
var gid=function(id) {
	return document.getElementById(id);
	}
 
var gida=function(id) {
	let ele=gid(id);
	if (!ele) alert(wzt+"\nID not found: "+(id));
	return ele;
	}
 
 
	let mg_fs=gida("mg_fieldset");
	let mg_ic=gida("mg_icon");
	let frm=gida("mg_esc").form;
 
	let xstop=function(ev) {
		ev.preventDefault();
		ev.stopPropagation();
		frm.parentNode.insertBefore(mg_fs,frm);
		return false;
		}
 
 
	gida("mg_esc").onclick=function(ev) {
		mg_fs.classList.toggle("d-none",1);
 		return xstop(ev);
		}
 
	gida("mg_bbc").onclick=function(ev) {
 
		let s=gida("mg_mail").value.replaceAll(" ","");
	
		if( s.indexOf("@") < 2) {
			 alert('eMail-Adresse scheint ung\u00FCltig: "'+s+'"');
		} else {
			if (gida("mg_label").value== "")  gida("mg_label").value=s;
			s+="?subject="+encodeURI(gida("mg_betr").value);
			s+="&body="+encodeURI(gida("mg_text").value);
			xob_insert(" [mail="+s+"]"+gida("mg_label").value +"[/mail] ");
			mg_fs.classList.toggle("d-none",1);
		}
		return xstop(ev);
		}
 
 
 
	gida("mg_cls").onclick=function(ev) {
		gida("mg_mail").value= gida("mg_label").value= gida("mg_betr").value= gida("mg_text").value="";
		ev.stopPropagation();
		return false;
		}
 
	gida("mg_bsp").onclick=function(ev) {
		gida("mg_mail").value="no-reply@example.de";
		gida("mg_label").value="Beispiel";
		gida("mg_betr").value=decodeURI("Mail-Formular Test");
		gida("mg_text").value=decodeURI(
		"Hallo,%0A%0Adieser Text ist ein Beispiel f%C3%BCr den Gebrauch des Formulars"
		+"%0A%0Aes h%C3%A4ngt vom eMail-Programm ab, ob auch %F0%9F%A7%90 Smileys"
		+" usw. dargestellt werden.%0A%0AGru%C3%9F l2otbart")
		ev.stopPropagation();
		return false;
 
		}// butbsp
 
 
	gida("mg_icon").onclick=function() {
		this.parentNode.insertBefore(mg_fs,this);		
		mg_fs.classList.toggle("d-none",0);
		}
 
	frm.parentNode.insertBefore(mg_fs,frm); // mg_Elemente nicht mehr im Formular
 
	 window.addEventListener('DOMContentLoaded',function() { 
		try { 
			xobor.mbt.currenticonbarcontainer=$('textarea#messagetext, textarea#mtext, textarea.form-control' );
			console.log(wzt+" iconbarcontainer: "+xobor.mbt.currenticonbarcontainer);
						} catch(e) {alert(wzt+" "+e)}
		}); 
	})(); // 20.03.
</script>